RESPONSIVE WEB DESIGN

COMP 126: Practical Web Design & Development for Everyone

responsive design

progressive enhancement

  1. First, design the simplest, most accessible version of your web app to be functional at the smallest possible viewport size for all types of users, regardless of impairment, ability, or device. fo\
  2. Next, add features gradually as appropriate for larger viewport sizes, landscape orientation, and more sophisticated/modern browsers

a responsive design requires:

  • the appropriate meta information for the browser
  • a fluid layout that automatically resizes/realigns to be usable and look good on any (reasonable) viewport (browser/device) size or orientation
  • images, video, media, & styling that automatically scale to be usable and look good on any (reasonable) viewport size or orientation
  • a way to change the things that still look weird at some sizes & orientations regardless of your fluid/scalable styling: in this case, that means media queries

the viewport <meta> tag

<meta name="viewport" 
      content="width=device-width,initial-scale=1.0"/>

Add this to your <head> (not <header>) element:

Translation:

"Please check the width of the viewport before rendering this page in the browser and scale/display the page's contents according to that width."

flexible layout

scalable media

(mobile-first) media queries

remember to validate

online

for HTML: https://validator.w3.org/

for CSS: http://jigsaw.w3.org/css-validator/

for JS: https://codebeautify.org/jsvalidate

VSCode extensions

for HTML: W3C Web Validator

for CSS: stylelint

for JS: ESLint

Text

accessibility: strategies

  • Assistive Technologies – software and hardware that people with disabilities use to improve interaction with the web. These include screen readers that read aloud web pages for people who cannot read the text, screen magnifiers for people with some types of low vision, and voice recognition software and selection switches for people who cannot use a keyboard or mouse.
  • Adaptive Strategies – techniques that people with disabilities use to improve interaction with the web, such as increasing text size, reducing mouse speed, and turning on captions. Adaptive strategies include techniques with standard software, with mainstream web browsers, and with assistive technologies.

accessibility: perceptions

  • Auditory - such as speech, music, and sound that can be heard
  • Tactile - such as dots, bars, and vibration that can be felt.
  • Visual - such as images, text, and video that can be seen.

from W3

general accessibility checklist

  1. Got a <title> element?
  2. Got your <alt> tags on your <img> elements?
  3. Is there at least one <h1> element?
  4. Are your header (<h1>, <h2>, etc) elements in order/hierarchical?
  5. Is your text/background contrast ratio sufficient for readability? Check it here: https://webaim.org/resources/contrastchecker/
  6. Are all your measurement units relative and/or fluid (e.g., % for widths, em/rem for font-size)? 
  7. Have you added :focus states to match all your :hover states?
  8. Is moving, blinking, or media content optional and user-controlled?

 

ARIA

Accessible Rich Internet Applications

 

ARIA is an additional set of HTML attributes that can be used to provide additional semantics and accessibility when the usual HTML semantics aren't sufficient.

ARIA attributes are meant to enhance your usual accessible semantic HTML practices, not to replace them. Use ARIA only when the usual HTML accessibility standards are insufficient.

Note that ARIA is primarily used with JavaScript, so we won't be using it extensively in this class.

 

ARIA ROLES 

<div class="background-image" role="img">
  </div> 

<div class="site-title" role="banner"></div>

<nav class="navbar" role="navigation"></nav>

<form role="search"></form>

<div role="form"></div>

<div role="complementary"></div>

<h2 class="aside-title" role="heading">title</h2>

<a href="#" role="button">read more</a>

ARIA LABELS & LEVELS 

<nav class="navbar" role="navigation" aria-label="Primary Naviation">
</nav>

<form role="search">
  <input type="search" placeholder="Search" aria-label="Search"/>
  </input>
</form>

<div role="form" aria-label="Contact Information"> 
  <form>  
  </form>
</div>

<div role="complementary" aria-label="Further Information"></div>

<div class="background-image" role="img" aria-label="Maine forest">
  </div> /* Note! This is how you can annotate a background image 
for accessibility. */

<h2 class="aside-title" role="heading" aria-level="2">title</h2>

<a href="#" role="button" aria-label="Read More">read more</a>