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!
Thanks Spencer Smith for the share