Reading List, November 2017

Declining Complexity in CSS

But the core principles and mechanisms are no more complicated than they were a decade or even two decades ago. If anything, they’re easier to grasp now, because we don’t have to clutter our minds with float behaviors or inline layout just to try to lay out a page. Flexbox and Grid (chapters 12 and 13, by the way) make layout so much simpler than ever before, while simultaneously providing far more capability than ever before.

This is something I really needed to read and need to continue to let sink into my brain. I’ve been feeling burned out by front-end development this past year, thanks to a slew of new frameworks, build tools, CSS features and yada, yada, yada. All the new things that we’ve seen released in just the last year alone feels super overwhelming to me and has made me questions whether I’m able to keep up and ultimately how sustainable my career in this field can be. Eric’s post reminds me that new doesn’t necessarily mean complicated. In fact, CSS has been releasing all these new features to help make my life easier. I already love CSS Grid and, now that that we have CSS Custom Variables, I’m seeing myself write more vanilla CSS than I have in years.

Advocating for Accessible UI Design

I had the honor of editing this post and I couldn’t have enjoyed reading it more. Lara has rekindled my consideration for making designs and code more accessible and does so in ways that are so practical, that it’s hard to find excuses for not doing it. I often think of accessibility as a tough code that needs to be cracked with complicated ARIA roles and long, awkward testing with screen readers, but Lara reminds us that color, contrast and visibility are low-hanging fruits that we can all work into our normal workflow without pain, but all while making the end user experience so much better. Thanks, Lara!

Box Alignment Cheat Sheet

I cam across this gem by Rachel Andrew while I was researching the place-items CSS property. The property is shorthand that combines align-items and justify-items which both accept a bunch of alignment values. I’m such a visual learner and having this clearly outlined, one-stop resource that compares all of the values made it so much easier for me to understand the differences between something like start and baseline.

Designing Tables to be Read, Not Looked At

Where Tufte talks about graphics he includes charts, diagrams and tables, and where he uses ‘ink’ we can think of pixels. In terms of tables, he’s saying that we should remove almost everything in the design which is not data or white space. Minimise furniture, maximise information. This is an ideal first principle to bear in mind when considering the typographic design of a table.

Boy, was this a wake-up call for me. I’m all about borders, backgrounds and special typographic treatments in my table designs and this post made me realize that’s all fluff and vain because this flourishes do nothing to help viewers read the data contained in the table. I like to think of myself as having a minimalist design aesthetic but this post showed me how I totally over design tables.

Richard suggests starting with no borders or fills and instead using whitespace and font variations to make data more scannable and legible. Then (and only then) should we start to consider flourishes insofar as they add to the reading experience.