📖 User Experience and Accessibility

User experience is a design method which focuses on how users interact with the website. Part of ensuring good user experience is to test the site to ensure it works well. Optimizing the user experience ensures the goals of the business and the user can be achieved.

Responsive Design

Responsive design is a method of designing web sites where the main goal is for website to work well on all devices. This method requires developers to look beyond mobile vs. desktop. It encourages a different perspective of web design. One where the site goal should be device agnostic - we don't have to know what device the user is using to provide a good user experience. The hallmark of UX is that the site should have similar experience on all devices.

Responsive design isn't a specific endpoint for sites. It's more of a goal that is practiced throughout the development process and improved over time. One popular method of designing sites is called mobile-first. This method keeps in mind the limited resources a small device has compared to a full size computer while acknowledging the ubiquitous use of these devices. Cell phones and tablets may generally have smaller screens, limited interface options such as touch but no hover, along with limited connection speeds and limited hardware. Sites designed to be used with mobile devices should take these limitations into consideration when developing the site.

Devices

Mobile and Smart Phones

  • miniature computers
  • touchscreens

Tablets

  • generally similar to smartphones but with a larger screen
  • may use wi-fi or cellular
  • includes many e-readers

Desktops and laptops

  • larger screen
  • input via keyboard and mouse - could also have touchscreen or trackball
  • wi-fi or wired connection

Other devices

  • game consoles
  • cars
  • Google Glass
  • smart watch
  • who knows what's next

Touch Screen

capacitive touch
responds to electrical charges when contacting the screen
multi-touch
recognizes more than one point of contact
gestures
pinch to zoom and swipe - can be added via JavaScript
hover
difficult on touch screens and should be avoided
touch to click
has a built-in .3 second delay
touch target size
44px is ideal, 26px minimum
to increase target size
increased padding (margin is outside target area, padding is inside) applied to tag
easier to touch
consider moving navigation to bottom of screen

Accessibility

  • give users control - allow them to adjust text-size, color, animation, etc.
  • use good contrast - check with online tools
  • if using color to convey meaning - provide an alternative method 
  • provide alternate text for all images
  • provide transcripts or captions for audio and video
  • arrange elements in logical order for keyboard only users
  • links should describe what they link to
  • use unique labels for form-fields and links
  • write with clear and simple language
  • provide consistent navigation
  • use animation with caution

Markup Validators

W3C Markup Validation Service
http://validator.w3.org
HTML5, XHTML-MP, WML
W3C CSS Validation Service
http://jigsaw.w3.org/css-validator
CSS
Web Accessibility Evaluation Tool
https://wave.webaim.org/
HTML, CSS, Accessibility

Testing Responsive Website

  1. Desktop browser resizing is an easy and accessible method for developers but lack precision and control.
  2. Mobile emulators are good in detecting browser support, design, styles and scripting. They are poor at mimicking memory and processing constraints though teh browser dev tools do have additional capabilities to measure page load times, etc.
  3. Actual mobile devices - as many as possible - best and most effective if devices are available.