Updating a web site for iPad, iPhone and other mobile platforms
February 1, 2011 by Peter Loomis
The first thing to consider is whether you want to do a simple adjustment of some of your existing site's parameters, or if you would like to develop another modified mobile-specific site with different page dimensions and possibly slightly alter the link structure and content offerings as well.
Depending on which device you are planning for, the screen resolution will be one of the most important limitations to consider. The iPad has a resolution of 1024 x 768 px and can rotate horizontally or vertically. Many smart phones also rotate but the visible display area at 100% resolution is much smaller than most desktop screens, iPad or other tablets. This is especially important when designing multiple site versions for mobile platforms. Many mobile platforms have their own distinct resolutions, so if you are targeting a particular device for functionality, make sure to find the specific dimensions of that device and accommodate the design as needed.
Another thing to consider is readability of the text at smaller sizes and with smaller screens devoted to reading or browsing. Proper CSS and even customized layouts with appropriate accommodation for text scaling are essential for smooth functionality and maximum usability on mobile devices.
With this reduced screen size, the size and placement of links is also hugely important when it relates to mobile functionality. When designing for smaller screens, the size of the buttons should increase in consideration of the fact that the “cursor” is not a 1 x 1 px mouse pointer, but rather a 100-200 pixel fingertip (roughly) that will have much less precision when clicking between lists of links, especially without extra user scaling. Also, keep in mind that there is no rollover functionality (hover in CSS) so rollover descriptions and additional effects become even more obscured. Consider making links more visible and larger, and link selection simpler also, with fewer options, somewhat more akin to touch-screen kiosks or ATM machines.
Getting slightly into technology, besides a fully redesigned and mobile tailored page layout, you can modify most of a web site’s parameters by creating a separate CSS file and having your web site detect the browser/OS and serve browser specific stylesheets including mobile and iPad versions.
Last but not least in this list of major considerations is the lack of Flash support on Apple’s iOS. I know many other mobile platforms do support Flash, partly as a way to attract customers from the iPad market. However, with this there is also a new wave of HTML 5 technology for many kinds of media files. This is becoming the new standard supported by Apple amongst others. If you are using Flash, a simple static image of the Flash element from the web site is a minimal touch as a placeholder. That way, even if you lose the motion or functionality of the Flash element, you will still maintain some level of consistency with page designs.
The multi-touch, tablet computer surface is a game-changer and has been since the onset of the first iPhone. Within minutes of first engaging with an iPad I inadvertently touched my cinema display to try to pan the screen over. I couldn’t believe it… yet it seemed so intuitive at the same time. With the tablet marketplace and also multi-touch surface technology exploding at the moment, I can’t wait to see the next generation of devices and how they integrate into the fabric of our already technology saturated culture.
For additional information on customizing web sites for mobile applications, contact us with specific inquiries. PERSONE can now offer iOS application development as well, so make sure to ask about that new iPad application that you have been wanting to develop, too! ;)