Instead of thinking about responsive design in terms of media queries, I like to think of responsive design in these categories.
- Responsive to the content
- Responsive to the viewport
- Responsive to the container
- Responsive to the user preferences
I think Bruce is onto something here:
It seems to me that browsers could do more to protect their users. Browsers are, after all, user agents that protect the visitor from pop-ups, malicious sites, autoplaying videos and other denizens of the underworld. They should also protect users against nausea and migraines, regardless of whether the developer thought to (or had the tools available to).
So, I propose that browsers should never respect
scroll-behavior: smooth;if a user prefers reduced motion, regardless of whether a developer has set the media query.
My current score is one minute and 18 seconds. Can you beat it?
A handy reference for explaining the differences between confusingly similar bits of HTML, CSS, and JavaScript.
This is a nifty visual interactive explainer for the language of CSS—could be very handy for Codebar students.
For all your copying and pasting needs:
A delightful reference for HTML Symbols, Entities and ASCII Character Codes
This is a really nice glanceable reference for CSS grid.
There’s something quite lovely about this site, both in its purpose and execution.
Dimensions.Guide is a comprehensive reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces that make up our world. Created as a universal resource to better communicate the basic properties, systems, and logics of our built environment, Dimensions.Guide is a free platform for increasing public and professional knowledge of life and design.
I have to admit, I didn’t realise that text reszing behaved differently for user preferences compared to page zoom. For that reason alone, I’m going to avoid setting font sizes in pixels.
If 2 to 3% (or more!) of your users are relying on a custom font size, you should know that so you can either support that user preference or make a conscious decision to not support it. Doing anything less is frankly irresponsible, especially considering that users with larger font sizes may be using those sizes to compensate for visual disabilities.
A really great overview of using prefers-reduced-motion to tone down CSS animations.
This post was written by James Craig, and I’m going to take this opportunity to say a big “thank you!” to James for all the amazing accessibility work he has been doing at Apple through the years. The guy’s a goddamn hero!
A whole lotta CSS properties and values gathered together in one place. The one-page view is a bit overwhelming, but search and collections can get you to the right bit lickety-split.
This guide to CSS grid layout is the perfect companion piece to Rachel’s Grid by Example.
The A-Z of HTML, with an example for each and every element. Comprehensive and impressive.
A handy reference for HTML, CSS, and JavaScript features. Each feature has a bare-bones demo at a nice guessable URL e.g. http://simpl.info/datalist/
A handy list of installed fonts on the iPhone and iPad.
A handy table of new HTML5 elements and whether or not they are exposed to assistive technology.
A great portable jQuery reference. No app store required — this uses offline storage.
A very handy glossary of HTML5 from the medical professionals at HTML5 Doctor.
A glossary of typography that you can carry around with you.
Table of Condiments That Periodically Go Bad