Chapter 1: Responsible Design Flashcards
What are the core tenents of responsive design?
Fluid grids
Flexible images
Media Queries
Describe how we can get developing in the browser?
Make high level calls on how design should look
Reduce number of interface varaitions
= The goal is to move to browser quickly so we can make design and interaction decisions in context
What are breakpoints?
The viewport sizes that trigger the change between different fluid layouts.
They differ in scale (major or minor).
Fewer Breakpoints = maintainability
How can we approach finding breakpoints?
- base decisions on popular device dimensions
Or
- Find them based on our content (valuing design and content first)
What is a measure?
The number of characters per line in a column of text.
Aim for 45-75 characters (including spaces).
What are some design patterns we can consider so that we don’t hide content from our users?
Progressive disclosure - show content on demand
Tip: Generally hiding is bad if the user has no way to access the content
Off Canvas Layout - Position lower priority interface components offscreen until the user cues them; the offscreen content then enters the viewport, overlapping or pushing aside the primary content.
Why are tables a challenge for mobile?
Displaying a lot of information on a small screen
Allowing people to compare data in tables.
Options:
In jQuery mobile there is a reflow option that will take a table and display it as a list with column headers prefacing each value
Column Toggle: Choose which columns to display for comparison
What input method have mobile devices introduced?
Touch
To meet this context:
Make sure any content that offers mouse-centric interactivity (like hover) is also accessible in browsers where a mouse pointer does not exist.
Don’t assume touch will be used but design as if it will be
When thinking about design ing for touch what do we need to think about?
Larger button and link targets - space around these
What’s the 300 millisecond delay about in touch browsers?
When an element is only coded for click and mouse interaction these will fire 300 milliseconds later. It’s because the event is waiting to see if a double tap is happening before it handles the click.
Solution: Set up event listeners for both touch and mouse events.
What do we mean by progressive enhancements?
Get the basics essentials working and then unobtrusively build upon from there
How would we approach a slider and making it more accessible?
This is trype of input that renders without useful information for the user on how to interact with it.
First we’ld start with the markup:
Results Shown:
We can then javascript to interact with it
What does the aria-hidden attribute do?
It hides an element from screen readers
<div>
</div>
What is ARIA?
ARIA stands for Accessible Rich Interenet Applications. Its a specification from the World Wide Web Consortium.
These add meaning to webpage elements.
How can we make data visualisations, such as graphs, more meaningful for assistive technology?
We could present the data in a table
