Today, people expect websites to work well on every screen they touch — whether it’s a phone, a tablet, a desktop computer, or whatever else we haven’t thought of yet. More and more, users are accessing the web from mobile devices. And for some — especially people with limited digital health literacy skills — mobile devices may be their only means of web access.83
For health websites, responsive design is the best choice
Responsive design websites show users content in a format that’s tailored to the screen size, platform, and orientation of the user’s device.48, 99
A main advantage of responsive design is that a single website can deliver content optimized to appear on a wide variety of devices and screen sizes. But keep in mind that responsive design is limited in that only format — not content — can be tailored based on a user’s device. That’s why it’s so important to develop content for the smallest screen size. In doing so, content developers must make tough choices to create a thoughtful, logical content hierarchy and cut (or link to!) nice-to-know information.
Figure 5.10: This HIV.gov page is a good example of responsive design. The desktop version features callout boxes that adapt in size and layout when viewed on smaller screens.
Source: https://www.hiv.gov/hiv-basics
Figure 5.11: On mobile screens, the callout boxes convert to simple menu items to avoid clutter and minimize scrolling.
Source: https://www.hiv.gov/hiv-basics
Limit the number of elements on your page
Keeping your design uncluttered is especially important for mobile users who are viewing content on a small screen. Simple pages enable users to find what they’re looking for more efficiently.
Figure 5.12: The Federal Emergency Management Agency (FEMA) homepage is optimized for mobile use. This is especially important for a website users are likely to access during emergencies, when they may not have access to a computer. The homepage features clear links to only the most actionable content, like “Check your disaster application” and “Know your flood risk.”
Source: https://www.fema.gov/
Figure 5.13: This is the mobile version of a smokefree.gov page about nicotine replacement therapy. Interactive elements like the menu button and search bar are optimized to take up minimal space, but still be easily accessible to users.
Source: https://smokefree.gov/tools-tips/how-to-quit/using-nicotine-replacement-therapy
Make interaction easy
Mobile devices have smaller screens, so selecting a button or typing may be more challenging. Additionally, mobile interfaces can be challenging for users with physical conditions that affect their fine motor control (how precisely they can click or touch things).
With this in mind:
- Limit the amount of text your users need to type.112
- Use large buttons and tappable areas so that people using small devices can easily select them. Also be sure to include enough space around them.27, 83
- Place frequently used buttons where they’re easy to reach. The easiest places to reach depend on the size of the device and how the user is holding it. In most cases, the center and bottom of the screen are easier to reach than the top.83, 113
Figure 5.14: This visual illustrates that even though users hold their phones in various ways, the center and bottom of the screen are usually easiest to reach. Content placed in the top left and bottom right corners will be hard to tap for most mobile users.
Figure 5.15: Smokefree.gov uses radio buttons for this quiz to help users assess their level of nicotine dependency. There’s plenty of padding around buttons, making it easy for users to select the right one.
Source: https://smokefree.gov/challenges-when-quitting/withdrawal/nicotine-addiction-quiz
