A study released by IDC (International Data Corporation) last week predicts that 87 percent of connected devices will be tablets and smartphones by 2017. As of this year, desktop PCs — outpaced by mobile devices — already represent less than 8.6 percent of the market share. As the majority of the world views the web on increasingly smaller screens, higher education sites must focus more than ever on creating an optimized experience for every device.
Many sites today use responsive design to render content well across all devices, including tablets and phones. But the reality is that not all responsive designs are created equal. Whether you are in the middle of a responsive redesign or planning for one in the near future, here are four usability guidelines to consider:
1. Design your site with touch input in mind. With smartphones and tablets, the primary input device is fat fingers and thumbs rather than a tiny, precise cursor. Properly arranging for touch means both giving audiences bigger targets to push and grouping navigation in easy range of fingers and thumbs (that is, the sides and bottom of the browser).
2. Optimize for both horizontal and vertical orientation. Many mobile devices allow a user to change the orientation of a screen by turning the device — in print terms, the user can toggle easily between portrait or landscape orientations. With responsive design, you can employ vertical media queries to change the height of page elements to better respect available real estate for content and honor the dual nature of phone and tablet displays.
3. Use transitional interfaces tastefully and where they make sense. Pasquale D’Silva’s article on transitional interfaces highlights how small motions in a user interface can serve as useful clues (particularly within touch interfaces) about how the interface works. Keep in mind that with any user interface animation, a little bit goes a very long way. The new NPR site (npr.org) employs tasteful animation on a number of user interface elements on the site, including the main navigation in the upper left.
4. Focus on shrinking the page file size. Portable computers can mean slower connections. While connectivity is improving every day, we should still assume that visitors are coming to sites from low-bandwidth connections. This means designers and developers are accountable for making pages as small as they can be — and deploying conditional media in the form of smaller images for smaller displays whenever possible.
Questions about making your site friendlier for phones and tablets? Get in touch and ask us anything.