In the past, digital designers and developers spent a great deal of effort creating websites for increasingly larger screen sizes. However, just in the last couple of years, the number of people browsing the web on smaller mobile screens has been growing steadily.
In particular, iPhones and iPads now own a significant part of the market share for these smaller screens. But, with the smaller screens on these devices, there are some challenges. Here are some important things to consider in order to make your website more iPhone and IPad-friendly.
Don’t Use Flash
Generally, iOS applications and devices don’t support Flash content, which means that any Flash-dependent elements simply won’t appear on the site for people using an iPhone or iPad. It can truly frustrate a person navigating a website with his or her iPhone or iPad to find “holes” where Flash applications are supposed to be.
In some cases, if your browser encounters this missing Flash content, the website will prompt you to download the latest version of Flash. So, not only is your expected content missing, you’ll also be prompted to download an application that doesn’t run on your device. Chances are, anyone that experiences this scenario will simply leave your website immediately.
Or, if you’re not really using Flash on your site to its maximum potential, consider rebuilding those parts of your site in HTML and avoid the “missing content” issue altogether.
Avoid Overly Complex Navigation
Navigation can make or break a website’s design and functionality. Many web designers fall into the trap of making navigation that’s flashy and loaded with different functionality, such as fly-outs, roll-over states, and even sound files.
A complex navigation structure can make your site difficult for people to view on devices like the iPhone or iPad. Your best bet for designing for these screens is to scale back the navigation’s functionality. In truth, most savvy desktop users would probably prefer this too.
When designing a navigation structure for iPhone or iPad users, you’ll want to ensure it works appropriately for someone browsing with his or her finger instead of a mouse. If you’ve built your sub-menus to fly out on rollover with a mouse, consider how this affects someone browsing on an iPhone or an iPad; a finger cannot activate rollover states without actually touching the screen. A better approach would be to activate the fly-out menu on touch and then link from the sub-menus.
Layouts That Work in Portrait and Landscape
With a device that allows visitors to turn websites on their sides (literally) you need to focus on how your website works from all angles. What does your website look like in when it’s in portrait, and when it’s in landscape? Depending on the experience you want your audience to have, it may not be as dazzling as it is on a desktop computer.
Use of fluid-width layouts and adaptive CSS will ensure your website is ready for all screens. By employing the right CSS for your website, you can create a flexible design that displays your content properly — no matter what browser or device people use to view it.
Redirect People to Your Mobile Site
At the end of it all, your traditional website simply might not look as great as you want it to on an iPhone or iPad. Consider redirecting iOS users to a separate site — designed specifically for mobile devices — instead of your main site. Of course, to make sure you have all your bases covered, always give people the option of clicking-through to your main site from your mobile site.
Have you optimized your website for iPhone and iPad? Did you know that Google has launched a free mobile site creation tool to help you get started?
Jessica McLaughlin: Jessica is a digital media professional in Toronto, Canada with broad experience in web—particularly social media, online communities, content development and blogging. Jessica has worked for many major Canadian broadcasters, including YTV, Food Network, and HGTV.