Simple, semantic and responsive tables (part II) – Design Today – Wouter Hillen
This uses generated content in CSS to make the aria-label attributes visible on small screens—clever!
Tags: table
64
Psiu Puxa Wallpapers
Yummy wallpapers for your desktop, tablet, and phone, from NASA and ESA.
Research with blind users on mobile devices | Accessibility
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).
Responsive Product Comparison Tables - daverupert.com
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.
Responsive Product Comparison Table
Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.
The Secret Lives of Tumblr Teens | New Republic
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.
Dumb Cuneiform. We’ll take your tweets and make them permanent clay tablets.
There’s something about this that I really like: a message transmitted via a modern communications medium converted into the oldest form of writing.
Periodic Table of Storytelling
Combining the molecules of narrative tropes to create stories.
Making the case for Progressive Javascript — The Millstone — Medium
I think we can all agree that “isomorphic JavaScript” is a terrible name for a good idea. I quite like calling it “portable JavaScript”, but here’s a good case for calling it “progressive JavaScript.”
(Right up until the end when the author says “But mainly, it’s pretty safe to assume JavaScript will just work. Everywhere.” …which is precisely the kind of unfounded assumption that leads to the very problems that isomorphic/portable/progressive JavaScript can help fix.)
Tablesaw - A Flexible Tool for Responsive Tables
Those lovely people at Filament Group share some of their techniques for making data tables work across a range of screen sizes.
Full-width pinned layouts with flexbox
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.
Responsive tables
An interesting pattern for handling complex data tables in responsive designs. It’s a desktop-down approach, but pretty smart.
Labcase - Open Device Lab, in a case.
This is a really great idea—a portable open device lab. It’s UK-based and you can hire it out for a few days at a time.
Responsive scrollable tables | 456 Berea Street
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.
Responsive App Design
Dan Bricklin—co-creator of the original VisiCalc spreadsheet—turns his attention to responsive design, specifically for input-centric tasks.
Android Fragmentation Report July 2013 - OpenSignal
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.
Responsive News — Response-ish Web Design
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.
It’s something that The Guardian and The Chicago Tribune are working on too.
What can I plant now?
This is handy—a month by month list of which vegetables you should be planting right now.
Cover-Up’s open device lab
The guys at Cover Up are great: they make accessories for tablets and e-readers, so they have lots of those devices. They’ve made them all available for web developers to test on. Like I said: they’re great!
» Responsive Design for Apps — Part 1 Cloud Four Blog
A great piece by Jason analysing the ever-blurring lines between device classes.
Mind you, there is one question he doesn’t answer which would help clear up his framing of the situation. That question is:
What’s a web app?