Implementing off-canvas navigation for a responsive website by David Bushell
This off-canvas demo is a great practical example of progressive enhancement from David. It’s also a lesson in why over-reliance on jQuery can sometimes be problematic.
Related links
Extending Responsive Video with HTML Web Components | Scott Jehl, Web Designer/Developer
Scott gives a thorough step-by-step walkthrough of building an HTML web component, in this case for responsive video:
In this post, I’m going to talk briefly about responsive video, but most of the post will be about using HTML web components to extend native video behavior in very helpful ways. But even if you’re not particularly interested in video development, stick around as I’ll demonstrate how to build an HTML Web Component to progressively enhance anything you need.
zachleat/table-saw: A small web component for responsive `table` elements.
Now, this is how you design a web component. It’s a progressive enhancement.
Wrap your existing table element inside table-saw and it will behave responsively. If anything goes wrong with the JavaScript, the fallback is the regular table that’s already in your markup.
I just wish the installation didn’t assume that you’re using npm …it’s not really “zero dependency” if it depends on that.
Be the browser’s mentor, not its micromanager. - Build Excellent Websites
This one-page site that Andy has made to illustrate his talk at All Day Hey is exactly what I was talking about with declarative design.
Give the browser some solid rules and hints, then let it make the right decisions for the people that visit it, based on their device, connection quality and capabilities. This is how they will get a genuinely great user experience, rather than a fragmented, broken one.
Table Design Patterns On The Web — Smashing Magazine
Hui Jing runs through a whole bunch of options for displaying responsive tables, some of them using just CSS, some of them using a smidgen of JavaScript. There are some really clever techniques in here.
Related posts
Making the Patterns Day website
The joy of getting hands-on with HTML and CSS.
Media queries with display-mode
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.
Building the dConstruct 2015 site
Hats off to Graham.
Responsive enhancement
A responsive refresh of adactio.com that takes progressive enhancement to the next level.
Simplify
Reminding myself just how much you can do with CSS these days.