Skip to content

Recitation 8: Responsive Sites + Accessibility

Staff Overview

What does it mean to be responsive?

Screenshot 2024-03-28 at 23 51 15

Responsive Web Design

  • Responsive design is an approach to web design and development that aims to create websites and applications that provide an optimal viewing and interaction experience across a wide range of devices and screen sizes, like desktop computers, tablets, smartphones, etc.
  • Websites and applications can provide a consistent and user-friendly experience across various devices, which improves accessibility, usability, and engagement

Frameworks

  • Bootstrap - Developed by Twitter, Bootstrap is one of the most widely used responsive design frameworks. It provides a comprehensive set of pre-built components, such as grids, navigation bars, buttons, forms, and more, along with extensive documentation and customization options
  • Materialize CSS - Based on Google's Material Design guidelines, Materialize CSS offers a modern and responsive design framework with pre-styled components and animations. It provides a grid system, CSS utilities, and JavaScript components to create visually appealing and functional websites
  • Tailwind CSS - Tailwind CSS is a utility-first CSS framework that enables developers to build responsive designs by composing utility classes directly in HTML. It offers a low-level utility API, responsive design features, and customization options to create unique and maintainable styles
  • And many more!

Example

Example Link As you can see, resizing the window does not negatively affect the user experience on the website. You can also try this by resizing the window of your browser and observing if the website components resize!

Accessibility

  • Website is designed and developed in a way that allows all users, including those with disabilities, to perceive, understand, navigate, and interact with the content effectively
  • Accessibility involves removing barriers that might prevent people with disabilities from accessing information or using features on a website
  • The Web Content Accessibility Guidelines (WCAG) are web accessibility guidelines published by the Web Accessibility Initiative of the World Wide Web Consortium (the main international standards organization for the Internet), which sets a standard of how websites should be accessible

Try searching ‘website accessibility’ on Google!

Key Accessibility Aspects

Perceivability

  • Content should be presented in a way that users can perceive it through various senses
  • This includes providing text alternatives for non-text content such as images, videos, and audio
  • This ensure that multimedia content is accessible to users who may not be able to hear or see it

Operability

  • Users should be able to navigate and interact with the website using a variety of input methods
  • This includes keyboards, mice, touchscreens, and assistive technologies such as screen readers and speech recognition software

Understandability

  • Content should be presented in a clear and understandable manner
  • Websites should have predictable navigation and consistent design patterns

Robustness

  • Websites should be built using technologies that are compatible with a wide range of user agents and assistive technologies. A variety of browsers (e.g. Chrome, Firefox, Safari, Edge, etc.) Screen readers, braille terminals, etc.
  • Content and code of websites should be well-formed meaning that all HTML tags are closed and are properly nested within each other

Try it out!

Many websites have an accessibility section where you can learn more about how they meet the 4 key aspects of accessibility

For example, take a look at this: https://www.bbc.co.uk/accessibility/