Skip to main content

Day 4 Accessibility, Responsive Design

Assignment 2: Visual Report on Responsive Design (TO BE DISCUSSED AT THE END OF THE LECTURE)

  • Due: Wednesday September 14 @ 11:59PM
  • Objective: Document Examples of Responsive Design
  • Outcomes:
    • Inspect how apps and sites change layouts depending on the size of the window
    • Take notes on specific changes from Desktop to Mobile design
    • Reinforce knowledge of UI elements by reviewing how they change to be optimized at different screen sizes
    • Practice Creating visual hierarchy in the layout of your report

Moodboard Examples

  • Inspiring Moodboards

  • Moodboards are meant to be creative

    • Experiment with layout, moodboard’s are for planning and organizing ideas, but they can also be playful

  • The following visual design principles should be used to make your board visually appealing and easy to navigate:

  • visual hierarchy

  • whitespace

  • repetition

  • typography

  • grid spacing and alignment

    Morning Activity: Empathy Map

  • In groups of 4, create an empathy map and fill it out based on the provided template

  • Time: 25 minutes

  • Goal: Try to get inside the head of a user. Pick a website to focus on

Debrief

  1. Provide a short outline of your user
  2. What were key takeaways that you learned about how they might experience a site/app

Break

Accessibility

People with different ranges of physical and cognitive ability use the internet everyday. While it’s easy to assume that everyone engages with the web the way that you do, this is far from the truth. As a developer, you are responsible for creating a positive web experience for people with many different ranges of ability.

How accessibility Benefits Everyone

  • Semantic HTML, which improves accessibility, also improves SEO, making your site more findable.
  • Caring about accessibility demonstrates good ethics and morals, which improves your public image.
  • Other good practices that improve accessibility also make your site more usable by other groups, such as mobile phone users or those on low network speed. In fact, everyone can benefit from many such improvements.
  • Did we mention it is also the law in some places?

From MDN Article

Types of Accessibility issues

Break

Responsive Design

There are many things to consider when designing for both mobile and desktop screens but here are the key constraints we will be focusing on in this program:

  • Layout
    • Navigation and content would never “overflow” the screen, creating a horizontal scroll bar. At narrow screen widths, navigation is often replaced with a Hamburger toggle.
    • Content will often be displayed using the card pattern. On mobile, these cards will display in a single column. See: “Gridish” flexbox in this Codepen.
    • In general, content should not touch the edge of the screen on mobile. There should be a visible “scroll track” letting the user know where to scroll with their finger.
    • When/if content reaches its maximum page width on desktop screens, the content should be centered. This website is an example.
  • Web Typography

Activity: Content Parity and Emulators

In groups of 3 or 4:

Compare and contrast the visual appearance of your favourite (or non-favourite) mobile websites between:

  1. Desktop,
  2. A real mobile device, and
  3. The virtual mobile simulator in FireFox Dev Tools.

Questions to ask:

  • Is there content parity between mobile and desktop versions of the website? What’s missing? What’s changed?
  • What differences can you find between iOS and Android?
  • How accurate is the phone simulator in FireFox and Chrome?

Select a representative from each group to present a summary of your findings to the rest of the class.

Homework

Design Homework

When we come back to DSGN-270, we will be creating UI wireframes and mockups in figma. Take some time to familiarize with these materials

Cpnt-201 Prep Homework