Why Web Accessibility and ADA Compliance Matter: Part 5 – Responsive Design Basics

This is a continuation of our blog series on ADA compliance and website accessibility, in that first post we went over the four basic steps you can take when working with website content no matter what platform you are using. In this post we are going to cover responsive design. 

There are a lot of things that go into responsive design from a technical perspective (HTML and CSS code), but since this post is focused more on content editors that may not have full access to a web platform’s code or even know how to edit such a thing, we are going to focus on the basics that most web editors do allow. 

1. Flexible Layouts: 

• Tables: When designing tables, make sure they can be viewed easily on both large and small screens. Instead of setting a fixed width, design tables that can adjust their size depending on the screen. Things to check: Does the table go off the screen on mobile? Is the table scrollable on mobile? Try to use % width instead of fixed width (px) if you can. 

• Images: Use images that automatically resize to fit the screen they are viewed on. For example, if you have a large banner image on your desktop site, make sure it scales down appropriately for mobile devices. Avoid using images that have a set pixel width that might cause them to break the layout or appear too large on smaller screens. Try to use % width (px) instead of fixed width if you can. 

2. Text and Font Sizes: 

• Readability on Different Devices: Choose a font size that is easily readable on all devices. A good rule of thumb is to start with a base font size of about 16 points, which should be readable on most devices. Make sure the text scales appropriately when viewed on larger or smaller screens. Find out more about readability from the Eye Able Website.

• Spacing: Ensure there’s enough space between lines of text and between paragraphs to make it easy to read. This helps on both large monitors and small mobile screens. For example, aim for at least 1.5 times the font size for line spacing. 

3. Images and Videos: 

• Scaling Media: Ensure that your images and videos can resize to fit the device screen. For example, if you’re using a video on your website, make sure it can be viewed in full screen on both a large desktop monitor and a small smartphone without cutting off any part of the video. 

• Different Sizes for Different Devices: If possible, use smaller versions of images for mobile devices to help your website load faster. This means if you have a high-resolution image on the desktop version, the mobile version should use a lower-resolution image that still looks good but loads faster. 

4. Buttons and Links: 

• Touch-Friendly Design: Make sure buttons and links are large enough for users to tap easily on a touchscreen. A good target size is about the size of a fingertip—approximately 44×44 pixels—but since you’re focusing on design, just ensure that buttons are not too small or too close together. 

• Avoid Over-Reliance on Hover: Since hover effects (where something changes when you move your mouse over it) don’t work on touchscreens, ensure all interactive elements (like dropdown menus or tooltips) are accessible through tapping or clicking, not just hovering. 

5. Testing Across Devices: 

• Device Testing: Regularly check how your website looks and functions on different devices. Use a smartphone, tablet, and desktop computer to see how well your design adjusts to different screen sizes. Pay attention to whether the text is readable, whether images fit well, and whether the layout remains user-friendly. You can sign up for Browserstack to help with testing on different devices.

• Feedback: If possible, get feedback from other people using different devices. Ask them if the website is easy to navigate and if the content is clear and accessible. 

6. Consistent Experience: 

• Maintaining Consistency: Ensure that no matter what device someone is using, your website has a consistent look and feel. This means using the same colors, fonts, and overall design across all devices, while still adjusting layout and size for different screens. 

• Prioritize Important Content: On smaller screens, prioritize the most important content so it’s the first thing users see. For example, if you have a key message or action, you want users to take, make sure it’s front and center on mobile devices, just as it would be on a desktop. 

7. Accessibility Considerations: 

• Screen Reader and Keyboard Navigation: Make sure your site can be used by those who rely on assistive technologies. This includes ensuring that all parts of the site can be navigated using a keyboard and that content is logical and well-organized for screen readers. 

• Text and Color: Use text that is easy to read with good contrast against the background and ensure that all essential information is not conveyed by color alone (e.g., “Click the green button” should be avoided). 

8. Simplifying Navigation: 

• Simplified Menus for Small Screens: On mobile devices, use a simplified navigation menu that doesn’t overwhelm the user. This often takes the form of a “hamburger menu” (three stacked lines that, when clicked, reveal the full menu). 

• Consistent Navigation: Keep your navigation consistent across all devices. The main menu, for example, should be easy to find and use whether someone is on a phone or a desktop. 

Summary: 

• Design Flexibly: Ensure tables, images, and videos can adapt to different screen sizes. 

• Focus on Mobile: Start with mobile design and build up to larger screens. 

• Text and Touch: Make text readable on all devices, and ensure buttons are easy to tap. 

• Test and Maintain: Regularly check how your site performs across different devices and keep it consistent and accessible for all users. 

This approach ensures your website is user-friendly and accessible across a wide range of devices, providing a consistent experience whether someone is browsing on a smartphone, tablet, or desktop computer. Need an association management partner that knows websites and technology? Contact AMR Today!