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!
Last week BrainSpark earned an “Outstanding Achievement” Interactive Media Award for the new Hyde Park Jewelers site in the lifestyle category. This is BSM’s second IMA, the first being the IMA for “Best in Class” in the computer software category for TopSchool. We are very excited about the award, and plan on continuing our streak as an award winning agency. BrainSpark’s IMA award gallery can be seen here.
This February, the BrainSpark Media team welcomed me into their office as the new intern. I will be assisting BSM in a variety of projects and initiatives over the coming months, as well as keeping the blog up to date. Be sure to keep checking back, or subscribe to our feed for the newest blog posts!
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!
Click on the “Layers” dropdown on the left side of the screen
Expand the “More” icon on the bottom of the list
Check the “GeoEye Featured Imagery” checkbox
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
BrainSpark recently teamed up with long-time client and friends Hyde Park Jewelers for a full site redevelopment, completed and launched this week. Hyde Park approached BSM to explore a redesign in late summer and the project was formally initiated by early fall with an aggressive goal for completion in time for the holiday shopping season.
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!
It’s been a busy summer and fall on a number of project fronts. This time of year also marks a big push for one of our favorite clients, Arapahoe Basin Ski Area. In the annual “Race to Open“, the folks at the Basin have been working hard in preparation for opening day. In addition to preparations on the mountain, the marketing team along with their AOR, Adrenalin and BSM have been jamming on a few projects in anticipation of the 2009-2010 ski and riding season. First steps included the implementation of a website face-lift. Even more exciting was the release of A-Basin.mobi, a version of the website optimized for mobile devices.
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.
BSM sends big congrats to client and friends, 21c Hotel for being voted #1 in the US (#6 in the world) in Condé Nast Traveler Readers’ Choice Awards for 2009. This is a deserving honor for a spectacular hotel which features an equally stunning contemporary art museum, 21c Museum, within the common and surrounding areas of the property and a 5-star restaurant, Proof On Main, right next door.
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.
BSM is currently working on 4 different mobile web site projects and find ourselves wondering why more web entities don’t have mobile site offerings, considering the number of users that are increasingly using mobile devices as their primary web browsing tool. Perhaps it’s user demographics or budgetary issues, but the reality is that it can be quite feasible to deliver mobile-friendly content. Following our internal discussion on this topic, we’ve asked ourselves a question and are curious how others would answer this, so here goes…
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.
