A new mobile device may be much more powerful than a person’s first computer – except the keyboard is smaller, making their fingers seem larger. Mobile devices must be used differently than desktop computers. Therefore, responsive web design means more than making an existing website fit onto a smaller screen.
Converting an Existing Site for Mobile Devices
- Convert a longer list of navigation links into a drop-down list at the top or place it at the bottom with an anchor link to it. A shorter navigation list could even be provided for mobile visitors, if some features of the site are rarely used on mobile devices.
- Design for a single column layout. Use “width: 100%” to use the whole screen width. Left or right columns, marked “float: left” or “float: right” for desktop browsers, can be marked “float: none” for mobile devices, which allows merging of these elements into the main column.
- Consider the context. Mobile phone users are often on the go or on a deadline, and want the latest information. They may be more interested in the essentials of the site, such as quick facts or directions, rather than in reading or searching. Emphasize the most useful options and not showing too many at once.
- Make text and images large enough to be legible on a small screen. However, using wide images on iPhones or iPads can cause the device to shrink the entire page to fit. To avoid this, use narrower images or insert a meta-tag such as <meta content=”width=device-width; initial-scale=1.0;” name=”viewport”/>.
User Considerations for Mobile Devices
- Provide simple ways for mobile visitors to skip to what they need quickly. Typing, navigating and even reading are harder on mobile devices. Make important content bigger and bolder than the rest.
- Mak elinks and buttons large enough to tap with a fingertip, about 44 x 44 pixels or 0.4 inch. Consider making entire headlines and images clickable, not just single words. You can use CSS padding to make links easier to tap quickly, and CSS margins to make adjacent links harder to tap accidentally.
- Use smaller images, since Internet connections are usually slower and bandwidth more restricted on mobile devices. Using CSS backgrounds for image containers and media queries for narrow devices, specify different images for various screen sizes. While most mobile devices need small images, retina displays look better with even larger images than desktop monitors.
- Make sure the site is not broken in either portrait or landscape mode. Most mobile devices can automatically switch between modes. Media queries allow designing for both.
Mobile Phone Considerations
- Since screen size is limited, keep content focused and navigation at the top short. Provide main content near the top of the page to minimize scrolling.
- Keep in mind that unlike a desktop computer user, mobile phone visitors cannot scan the whole page with their eyes. After scrolling past the information, users must depend more on their memory than desktop users do.
- Consider how the device is being held. When right-handed visitors tap on their phones with one hand, they often obscure the lower-left corner with their left thumb. Place the most used content where it is less likely to be obscured. When a visitor is tapping on the top of the phone, the lower part of the screen becomes obscured. Navigation works better at the bottom of a small device, where it can be reached with a thumb.
- In many ways, a tablet is like a desktop computer. Because they are wider like a desktop, tablet designs can include more than one column. Unlike mobile phone users, tablet users are more likely to be seated with both hands available, but when carrying their tablet, they are more likely to obscure the top corners rather than the bottom corner.