After the iPad was released in the beginning of April, there was a great deal of discussion on how the device could change the way that web sites are designed. The iPad introduced a new browsing environment using both vertical and horizontal orientation, a touch interface, and the continued lack of flash support from the iPhone. These factors could eventually have a large impact on how web sites are both developed and designed.

Orientation and Resolution

Apple designed the iPad with a similar resolution to the standard computer. The resolution of 1024 x 768 has been a designer’s framework for over four years, so one might not think that much would change with the introduction of the iPad. According to the Apple iPad keynote address, the optimal viewing and web browsing orientation is vertical, making the resolution 768 x 1024, the opposite of what the industry has been designing for.  With the ability to change orientations by simply rotating the device, the resolution quickly changes to match. This presents the importance of fluid layouts that are easily viewable at either resolution.

There are a couple of different ways to deal with the orientation changes on the iPad. The first is by using layouts that have fluidity between vertical and horizontal orientations. By using smart information architecture and effective CSS web sites can be easily viewed both vertically and horizontally. This fluid design must be tested and tested again on the iPad to ensure that it is an effective design.

Another way to deal with the orientation changes is by using multiple CSS styles. Web sites have been able to identify different devices and configurations for years. By using this strategy, and creating multiple CSS style sheets for the two different orientation resolutions, the web page is able to change its entire layout to best fit the state of the page. An example of this is Sports Illustrated on the iPad.

As seen in the image above from GraphicDesignBlender.com, the layout is different depending on the orientation of the device.  The vertical orientation allows for more text description, and the horizontal orientation has a much simpler layout. By using the ability to match the devices resolution to point to different CSS sheets, the user has more options in viewing web pages.

User Experience

On a traditional computer, the mouse is the navigational tool that is used for all interaction with a web site. On the iPad, the mouse is removed, and the navigational tool becomes the human finger. This can have many implications on current web site design. The human finger is a great deal wider than the mouse pointer, and when it comes to clicking on hyperlinks, it can become a great deal more difficult. If there are multiple links near each other, such as a list, it is possible that your finger will click on the wrong link. Wider buttons are more touch friendly and are likely to be seen more frequently in the coming future.

Along with the issue of hyperlink layout and clicking on the iPad, hovering presents another issue. Many web sites use a hover effect technique for drop down lists and other animated actions. With no pointer to initiate these actions, they become ineffective.

Additionally, on a traditional computer, the human eye typically follows the mouse pointer around the screen. With no mouse pointer, the user experience on a touch device must be assessed. The architecture and design of a web site is bound to change with the elimination of the mouse to better suit the psychology of navigating without a mouse. One way that designers have addressed the change is through 3D looking art. 3D objects appear to be more tangible and inviting to users and make them want to touch them physically.

Flash

There has been an ongoing debate over Apple’s lack of Flash support on the iPhone and iPad. The fact of the matter is that Apple is not supporting Flash, and web developers need to take that into account. 100% Flash web sites are not going to be visible on the iPad, and this could be a major driver for the change from 100% flash sites to hybrid sites or eliminating flash all together. Read more about the Apple ‘s beliefs on Adobe Flash: http://www.apple.com/hotnews/thoughts-on-flash/

Thoughts

With the introduction of the iPad, web designers will be challenged to create new web sites that are more user friendly on touch interface devices. There will also likely be devices that will follow the iPad’s touch tablet design, making this an important market to ensure an excellent user experience. Keep a lookout at site designs and you’ll be sure to notice changes coming!

A quick blurb about myself…

Name: Spencer Burton Smith

Hometown: Eagan, Minnesota

College: University of Denver

Major & Minor: Marketing and Business IT

Career Aspirations: Start a full service marketing agency

Favorite thing about BrainSpark: Helpful employees, awesome work, great clients.

The past couple months have been eventful ones here at BrainSpark. With a large amount of exciting new projects with a variety of clients, we are thrilled to share our latest work…

Nothin’ Like a Corduroy Goomer

In January, BSM developed a one of a kind “Groomed Runs Report” for Arapahoe Basin. This report allows the content managers to select which runs have been groomed that day, and a report is created highlighting the selected groomed runs. In addition to posting the report on the snow conditions page, the ski patrol can send the report to the local ski shops in the area letting the skiers and riders know of the groomed runs that day. All you ski bums out there, keep an eye out for the new reports, and have fun on the slopes!

New GeoEye Developments

GeoEye recently hired BrainSpark Media to lead user experience for two new web based service offering for GeoEye customers. BSM will be providing UI design, information architecture, and usability services on the new offerings. We are extremely excited to work with GeoEye on these innovative projects.

Fresh Packaging

BSM created the packaging design for PENTAX Imaging’s new Ultimate Zoom rifle scope. The design was the fifth premium rifle scope package designed for the PENTAX Sport Optics line in the past six months. Keep an eye out for the scope in your local sporting good store.

HPJ Blog

More recently, in February BSM created a new WordPress blog for Hyde Park Jewelers. The new blog highlights Hyde Park news and events, current happenings in the industry, product releases, and community involvements. BrainSpark created a custom template for Hyde Park, which complements hydeparkjewelers.com. Take a look!

GeoEye + Google

BSM spent the last couple months developing and implementing a GeoEye Google Earth layer. Layers allow the users to take a closer look at a subject, or read a little about what they are looking at. BSM created the user interface of the layer, a bigger project than meets the eye. With a confined space, and working with Google’s set parameters, BrainSpark was able to create a really cool satellite imagery layer. But don’t take my word for it, go check it out!

Google Earth Download

To enable the GeoEye layer:

1. Click on the “Layers” dropdown on the left side of the screen
2. Expand the “More” icon on the bottom of the list
3. Check the “GeoEye Featured Imagery” checkbox
4. Now, when scanning Google Earth you will be able to click on the small GeoEye icons and see incredible pictures and detailed information provided by GeoEye.

Coming Soon – GeoEye 101

BSM has been working on GeoEye microsite called GeoEye 101. This microsite will explain the Google Earth layer, and how geospatial imaging works. The site will be loaded with videos and tutorials about the technology. Keep your eyes on BrainSparkMedia.com or blog.BrainSparkMedia.com for the launch.

In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 ​as well as other older browsers that are not supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the Google Docs suite and the Google Sites editor on March 1, 2010.  After that point, certain functionality within these applications may have higher latency and may not work correctly in these older browsers. Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above, Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and above.

Starting next week, users on these older browsers will see a message in Google Docs and the Google Sites editor explaining this change and asking them to upgrade their browser.  We will also alert you again closer to March 1 to remind you of this change.

In 2009, the Google Apps team delivered more than 100 improvements to enhance your product experience.  We are aiming to beat that in 2010 and continue to deliver the best and most innovative collaboration products for businesses.

Thank you for your continued support!

Sincerely,

The Google Apps team

Email preferences: You have received this mandatory email service announcement to update you about important changes to your Google Apps product or account.

Google Inc.
1600 Amphitheatre Parkway
Mountain View, CA 94043

HydeParkJewelers.com

The first objective for the project was to bring the visual design and messaging up-to-date to coincide with a number of supporting branding initiatives underway for the holidays. Additionally, an evaluation and overhaul of the web site’s information architecture and content presentation was conducted to showcase the wide variety of product collections, better serve the needs of Hyde Park’s target audience and improve overall site usability. Functionality enhancements were also a priority, with a focus being the implementation of a site-wide content management system to empower Hyde Park’s marketing team to manage the majority of graphic and textual content throughout the web site.

We are excited to reintroduce Hyde Park’s new web presence and welcome your feedback. Happy shopping!

A-Basin.mobi | Get Your Snow On The Go

The project was on-track for mid-October, the anticipated target for opening day at both A-Basin and Loveland. When the race escalated following early snow fall and colder conditions in the high country, opening day was moved to October 9th. The night before, final preparations were completed and the mobile site was deployed. Site traffic immediately swamped the mobile site and is increasing by the day; so far so good.

While some aspects of mobile technology are simplified to balance the range of mobile browsers in use, the challenges transparent to most reside behind the scenes. To streamline content management, BSM’s development team integrated the mobile site with a pre-existing content management system (CMS). This resulted in an upgraded CMS that enables A-Basin content owners to manage content in one source, but deliver to both the main and mobile site versions. Another priority in doing this was to add the necessary customization to tailor the delivery of content to mobile device users but not interfere with the user experience for main site users. Pretty slick if you ask me…

Other aspects that few will appreciate is the detection and routing of users to the appropriate site, based on browser. Arapahoe Basin is now promoting a mobile-specific URL, A-Basin.mobi, but has long-standing URL’s that had to be dealt with. All existing domains were re-wired to direct users to the respective site version, based on browser detected. Also cool, in a nerdy sort of way.

In the end, a big win for all involved, including you the next time you’re crawling in I-70 traffic and jonesin’ for pow. In addition to Snow Conditions and Web Cams, the mobile site also features Runs Open, Events, Season Passes, Tickets, Media and Contact information.

We welcome feedback too, so let us know how it works for you or if you have suggestions for future releases.

See you on the slopes.

21cHotel.com | Louisville, KY

In 2007, BrainSpark Media designed and launched their multi-site web presence and continues our working relationship with 21c Museum Hotel to date. The award-winning websites provide a glimpse of the unique properties, yet still do only moderate justice to just how cool this place is.

Check it out if you ever find yourself passing through Louisville, KY. Well done 21c, from Denver, CO.

Of the many web sites you frequently utilize, which one do you most strongly wish was mobile-device friendly?

Responses so far range across the board and include banking sites, favorite take out dining joints, ski resorts and pediatrician offices. While the technology for mobile web sites is neither new nor overly complex on a basic level, we’ve seen a surge in client interest surrounding mobile devices as the technology rapidly evolves and our on-the-go world seems to be doing more while on-the-go.

We welcome and thank you in advance for your feedback.

PS – In an effort to drink our own Kool Aid, one of the 4 projects currently in progress is a mobile web site for BrainSparkMedia.com, coming soon to a mobile web browser near you.  Cobbler’s kids…but it’s finally underway.

TopSchoolInc.com | 2009 IMA Awards, "Best in Class" | Computer Software Category

The Interactive Media Awards™ recognize the highest standards of excellence in website design and development and honor individuals and organizations for their outstanding achievement.

Created by the Interactive Media Council, Inc. (IMC), a nonprofit organization of leading web designers, developers, programmers, advertisers and other web-related professionals, the competition is designed to elevate the standards of excellence on the Internet and offer winners a boost in marketing and exposure. IMC serves as the primary sponsor and governing body of the Interactive Media Awards™, establishes the judging system and provides the judges for the competition.