Smartphones are everywhere, and their popularity is likely to continue to grow. A survey published in July by the Pew Internet and American Life Project found that 35% of American adults own a smartphone, and a fourth of them use it more often than their traditional desktops to access the Internet. More recently, Nielsen’s third-quarter survey similarly found that a third of the adults who use mobile devices own smartphones, and that proportion is inflated to 62% in the 25-to-34 age range.
Many of the students (and staff!) using our libraries’ resources are logging in with iPhones, Androids, and other palm-sized devices. Even if you have limited control over the layout of your webpages (you’re using the Content Manager, a blogging service, or templates, for example), there’s a lot you can do to make these users’ experiences as rewarding and painless as possible.
1. Test your webpages on mobile devices
The easiest way to find out how your webpage designs affect mobile users is to experience them yourself! If you don’t have access to a mobile device, Media & Reserve Services circulates an iPod Touch equipped with Safari.
2. Use a logical layout
Present the most important information to your users directly in the body of your webpage. Avoid busy right side boxes and dense blocks of text. Make sure your links on the main left menu are also available in the content; users may not notice the submenus opening off the tiny screen!
3. Minimize bandwidth
People buy mobile devices because they want information fast–they don’t want to wait all day for your figures to load. Most data plans also cap bandwidth per month, so help your users out by limiting the amount of data on your pages. Try not to embed long videos or link to large PDFs. If you have images, resize them before uploading to the server; don’t load an enormous JPG and scale it down in the HTML.
4. Limit Javascript
Widgets are all the rage, but resist the urge to use them instead of plain Jane text when you can. Users with touchscreen devices can’t hover over buttons to trigger drop-down menus. Your desktop may have plug-ins that aren’t available on certain phones. Fancy scripts also increase power consumption, which shortens battery life.
5. Go easy on the styles
A curly font may look lovely on your workstation, but be impossible to read when it’s shrunk down on a phone. Non-standard fonts may not be supported by many mobile devices. Mobile phones often have lower contrast and are used in less-than-optimal lighting conditions, so avoid custom-colored text that blends into the background. When in doubt, imagine what your webpage would look like as a small, blurry rectangle outside at night or in a dim restaurant.
For more comprehensive tips, see the W3C’s recommendations for Mobile Web Best Practices. Webcredible also offers a nice set of principles to apply in your webpage design.
Leave a Reply