An extract from Richard’s excellent book, this is a deep dive into styling tables for the web (featuring some CSS I had never even heard of).
Tables can be beautiful but they are not works of art. Instead of painting and decorating them, design tables for your reader.
(It also contains a splendid use of the term “crawl bar.”)
Then there’s the inflatable doorknob.
This uses generated content in CSS to make the
aria-label attributes visible on small screens—clever!
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
Some interesting outcomes from testing gov.uk with blind users of touchscreen devices:
Rather than reading out the hierarchy of the page, some of the users navigated by moving their finger around to ‘discover’ content.
This was really interesting - traditionally good structure for screen readers is about order and hierarchy. But for these users, the physical placement on the screen was also really important (just as it is for sighted users).
Dave explains the thinking behind his responsive table pattern I linked to a while back. He’s at pains to point out that you should always make sure a pre-made pattern is right for you instead of just deploying it no-questions-asked:
Using prefabricated, road tested solutions from Apple’s Human Interface Guidelines, Google’s Material Design, Twitter’s Bootstrap, and Brad Frost’s Responsive Patterns is always a good place to start, but don’t settle there. My biggest advice would be to turn off the 27” display and use your sites and projects on your phone, there’s lots of low hanging fruit that could give way to new patterns, tailor-suited to your content.
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
A fascinating insight into some of Tumblr’s most popular accounts:
Some posts get more than a million notes—imagine a joke whispered in biology class getting a laugh from a city the size of San Francisco.
It’ll be a real shame when Tumblr disappears.
That’s “when”, not “if”. Remember:
In 2013, Yahoo bought Tumblr.
There’s something about this that I really like: a message transmitted via a modern communications medium converted into the oldest form of writing.
Combining the molecules of narrative tropes to create stories.
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
Zoe uses one little case study to contrast two different CSS techniques: display-table and flexbox. Flexbox definitely comes out on top when it comes to true source-order independence.
An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.
I like this CSS solution to sideways-scrolling tables for small viewports. It’s not going to be right for every situation but it’s a handy trick to keep up your sleeve.
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
A look at the degree of diversity in Android devices, complete with pretty pictures. The term “fragmentation” is usually used in a negative way, but there are great points here about the positive effects for web developers and customers.
You say fragmentation, I say diversity.
Details on how the BBC Responsive News team plan to eventually make their m-dot site scale all the way up to be the default site. This “planting a seed” approach works really well, not least for political reasons.