CSS Grid Layout with Rachel Andrew: Big Web Show

Rachel Andrew

RACHEL ANDREW—longtime web developer and web standards champion, co-founder of the Perch CMS, and author of Get Ready For CSS Grid Layout—is my guest on today’s Big Web Show. We discuss working with CSS Grid Layout, how Grid enables designers to “do something different” with web layout, why designers need to start experimenting with Grid Layout now, how front-end design has morphed into an engineering discipline, learning HTML and CSS versus learning frameworks, and the magic of David Bowie, RIP.

Enjoy Episode № 141 of The Big Web Show.

Sponsored by A List Apart and An Event Apart.

URLs

rachelandrew.co.uk
Get Ready for CSS Grid Layout
Perch CMS
Writing by Rachel Andrew
Books by Rachel Andrew
@rachelandrew

Of Patterns and Power: Web Standards Then & Now

IN “CONTENT Display Patterns” (which all front-end folk should read), Dan Mall points to a truth not unlike the one Ethan Marcotte shared last month on 24 ways. It is a truth as old as standards-based design: Construct your markup to properly support your content (not your design).

Modular/atomic design doesn’t change this truth, it just reinforces its wisdom. Flexbox and grid layout don’t change this truth, they just make it easier to do it better. HTML5 doesn’t change this truth, it just reminds us that the separation of structure from style came into existence for a reason. A reason that hasn’t changed. A reason that cannot change, because it is the core truth of the web, and is inextricably bound up with the promise of this medium.

Separating structure from style and behavior was the web standards movement’s prime revelation, and each generation of web designers discovers it anew. This separation is what makes our content as backward-compatible as it is forward-compatible (or “future-friendly,” if you prefer). It’s the key to re-use. The key to accessibility. The key to the new kinds of CMS systems we’re just beginning to dream up. It’s what makes our content as accessible to an ancient device as it will be to an unimagined future one.

Every time a leader in our field discovers, as if for the first time, the genius of this separation between style, presentation, and behavior, she is validating the brilliance of web forbears like Tim Berners-Lee, Håkon Wium Lie, and Bert Bos.

Every time a Dan or an Ethan (or a Sara or a Lea) writes a beautiful and insightful article like the two cited above, they are telling new web designers, and reminding experienced ones, that this separation of powers matters.

And they are plunging a stake into the increasingly slippery ground beneath us.

Why is it slippery? Because too many developers and designers in our amnesiac community have begun to believe and share bad ideas—ideas, like CSS isn’t needed, HTML isn’t needed, progressive enhancement is old-fashioned and unnecessary, and so on. Ideas that, if followed, will turn the web back what it was becoming in the late 1990s: a wasteland of walled gardens that said no to more people than they welcomed. Let that never be so. We have the power.

As Maimonides, were he alive today, would tell us: he who excludes a single user destroys a universe. Web standards now and forever.

The Year in Design

  • Mobile is today’s first screen. So design responsively, focusing on content and structure first.
  • Websites and apps alike should remove distractions and let people interact as directly as possible with content.
  • 90 percent of design is typography. And the other 90 percent is whitespace.
  • Boost usability and pleasure with progressive disclosure: menus and functions that appear only when needed.
  • One illustration or original photo beats 100 stock images.
  • Design your system to serve your content, not the other way around.
  • Remove each detail from your design until it breaks.
  • Style is the servant of brand and content. Style without purpose is noise.
  • Nobody waits. Speed is to today’s design what ornament was to yesterday’s.
  • Don’t design to prove you’re clever. Design to make the user think she is.

Also published in Medium

Translated into German (also here) by Mark Sargent

Translated into French by Jean-Baptiste Sachsé

Translated into Turkish by omerbalyali.

Translated into Spanish by Tam Lopez Breit.

Progressive Enhancement FTW with Aaron Gustafson

Book cover art - Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement, 2nd EditionLONGTIME developer, lecturer, and web standards evangelist Aaron Gustafson and I discuss the newly published update to Aaron’s best-selling industry classic “love letter to the web,” Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement, 2nd Edition (New Riders, 2015) in Episode № 140 of The Big Web Show—everything web that matters.

Topics covered include: Aaron’s superhero origin story as a creator of progressively enhanced websites and applications; “we’re not building things we haven’t built on the web before;” “creating opportunities for people outside your comfort zone;” development in the world of Node.js; “every interface is a conversation;” “visual design is an enhancement;” “interaction is an enhancement;” nerding out over early web terminal interfaces; Microsoft, Opera, and more.

Sponsored by DreamHost, Braintree, and Thankful.

Deal

Save 35% off Aaron Gustafson’s Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement, 2nd Edition when you enter discount code AARON35 at checkout.

URLS

https://www.aaron-gustafson.com/about/ – About Aaron
http://adaptivewebdesign.info/2nd-edition/ – Adaptive Web Design Second Edition (“95% new material”)
[PDF] – Read the first chapter free (PDF)
http://adaptivewebdesign.info – First Edition, May 2011 (read the entire first edition free)
http://webstandardssherpa.com – Web Standards Sherpa
https://github.com/easy-designs/batch-ua-parser.php – UA Parser Script by Aaron – on Github
https://www.aaron-gustafson.com/notebook/ – Notebook: Aaron’s blog
https://www.aaron-gustafson.com/speaking-engagements/ – Engagements: Aaron’s speaking page, using Quantity Queries
http://alistapart.com/article/quantity-queries-for-css – “Quantity Queries for CSS” by Heydon Pickering in A List Apart
http://alistapart.com/author/agustafson – A List Apart: articles by Aaron Gustafson
http://alistapart.com/article/goingtoprint – Eric Meyer’s “CSS Design: Going to Print” in A List Apart
https://www.whatsapp.com – Whatsapp

№ 139: Every Time We Touch—Josh Clark, author of “Designing For Touch”

Author Josh Clark on The Big Web ShowTOUCH introduces physicality to designs that were once strictly virtual, and puts forth a new test: How does this design feel in the hand? Josh Clark’s new book, Designing For Touch, guides designers through this new touchscreen frontier, and is the launchpad for today’s Big Web Show conversation.

In a fast-paced, freewheeling conversation, Josh and I discuss why game designers are some of our most talented and inspiring interaction designers; the economy of motion; perceptions of value when viewing objects on touchscreen versus desktop computer; teaching digital designers to think like industrial designers (and vice-versa); long press versus force touch; how and when to make gestures discoverable; and much more.

Sponsored by DreamHost and BrainTree. Big Web Show listeners can save 15% when ordering Designing For Touch at abookapart.com with discount code DFTBIGWEB. Discount valid through the end of January 2016.

URLS

Big Web Show Episode № 139
Big Medium
Designing For Touch

Responsive times two: essential new books from Ethan Marcotte & Karen McGrane

Responsive Design times two! New books from the geniuses, Ethan Marcotte and Karen McGrane.

IT WAS the early 2000s. The smoke from 9/11 was still poisoning my New York.

Karen McGrane was a brilliant young consultant who had built the IA practice at Razorfish while still in her early 20s, and was collaborating with my (now ex-)wife on some large, exciting projects for The New York Public Library. Ethan Marcotte was a Dreadlocks-hat-sporting kid I’d met in Cambridge through Dan Cederholm, with whom he sometimes collaborated on tricky, standards-based site designs. The first edition of my Designing With Web Standards was in the can. I figured that, like my previous book, it would sell about 10,000 copies and then vanish along with all the other forgotten web design books.

Nothing happened as I expected it to. The only thing I got right besides web standards was the desire to some day work with Karen, Ethan, and Dan—three dreams that, in different ways, eventually all came true. But nothing, not even the incredible experience of working with these luminaries, could have prepared me for the effect Ethan and Karen and Dan would have on our industry. Even less could I have guessed back then the announcement it’s my pleasure to make today:

Ethan Marcotte’s Responsive Design: Patterns and Principles and Karen McGrane’s Going Responsive are now available in our A Book Apart store.

It was thrilling to bring you Ethan and Karen’s first industry-changing A Book Apart books. Being allowed to bring you a second set of absolutely essential works on responsive design from these two great minds is a gift no publisher deserves, and for which I am truly grateful.

Building on the concepts in his groundbreaking Responsive Web Design, Ethan now guides you through developing and using design patterns so you can let your responsive layout reach more devices (and people) than ever before.

Karen McGrane effortlessly defined the principles of Content Strategy for Mobile. She’s helped dozens of teams effectively navigate responsive projects, from making the case to successful launch. Now, she pulls it all together to help you go responsive—wherever you are in the process.

Ebooks are available immediately and paperbacks ship next week. Buy Responsive Design: Patterns and Principles and Going Responsive together and save 15%! (Learn more.)

Web Performance Today

WEB DESIGNERS have cared about web performance since the profession’s earliest days. When I started, we saved user bandwidth by employing GIF images that had the fewest possible colors—with no dithering, when possible, and by using actual web text instead of pictures of web text. (Kids, ask your parents about life before CSS enabled, type designers created formats for, browsers finally supported, and Typekit quickly popularized web fonts.)

Later, we learned to optimize JPEGs and blur their backgrounds: the blurrier large swathes of a JPEG image can be, the lower the bandwidth requirements for the image. We found the optimally performant size for repeating background tiles (32 x 32 and 64 x 64 were pretty good) and abandoned experiments like single-pixel-wide backgrounds, which seemed like a good idea but slowed browsers, servers, and computers to a crawl.

We developed other tricks, too. Like, when we discovered that GIF images optimized better if they possessed repeating patterns of diagonal lines, we worked diagonal background images into a design trend. It was the trend that preceded drop shadows, the wicked worn look, and skeuomorpic facades, which were themselves a retro recurrence of one of the earliest styles of commercial web design; that trend, which was always on the heavy side, performance-wise, eventually gave way to a far more performant grid-driven minimalism, which hearkened back to classic 1940s Swiss graphic design, but which our industry (sometimes with little knowledge of design history) called “flat design” and justified as being “born digital” despite its true origins going back to pixels, protractors, and a love of Greek mathematics.

All of this nostalgia is prelude to making the obvious comment that web design today is far more complex than it was in those golden years of experimentation; and because it is so much more complex, front-end performance is also far more complicated. You didn’t need an engineering degree to run DeBabelizer and remove needless elements from your markup, but, boy, does front-end design today feel more and more like serious coding.

All of which is to say, if you’re a front-end designer/developer, you should probably read and bookmark Nate Berkopec’s “Ludicrously Fast Page Loads – A Guide for Full-Stack Devs.” While you’re at it, save it to Pocket, and as a PDF you can read on your tablet.

I cannot verify every detail Nate provides, but it is all in line with recommendations I’ve heard over and over at top conferences, and read in articles and books by such performance mavens as Jake Archibald, Lara Hogan, Scott Jehl, and Yesenia Perez-Cruz.

You should also pick up these great books on performance:

(It’s not why I wrote this post, but if you order Scott’s book today, you can save 10% when you enter discount code ABAHARVEST at checkout.)

Even the most complex site should work in any device that reads HTML. It should work if stylesheets fail to load or the device doesn’t recognize CSS. It should work if JavaScript fails to load or the device doesn’t recognize JavaScript. The principles of standards-based design will never change, no matter how complex our web becomes. And as it becomes more complex (and, arguably, much richer), it behooves us to squeeze every byte of performance we can.

Websites can never be too rich or too thin.

A Helvetica For Readers

A Helvetica for readers–introducing Acumin.

ACUMIN by Robert Slimbach is a new type family from Adobe that does for book (and ebook) designers what Helvetica has always done for graphic designers. Namely, it provides a robust yet water-neutral sans-serif, in a full suite of weights and widths. And unlike the classic pressing of Helvetica that comes on everyone’s computers—but like Helvetica Neue—Acumin contains real italics for every weight and width.

Reading about the design challenges Slimbach set himself (and met) helps you appreciate this new type system, whose virtues are initially all too easy to overlook, because Acumin so successfully avoids bringing a personality to the table. Enjoying Acumin is like developing a taste for exceptionally good water.

Nick Sherman designed the website for Adobe, and its subtly brilliant features are as easy to miss at first look as Acumin’s. For starters, the style grid on the intro page dynamically chooses words to fit the column based on the viewport size. Resize your browser and you’ll see how the words change to fill the space.

Heaps of behind-the-scenes calculation allow the page to load all 90 (!) fonts without breaking your pipes or the internet. Developer Bram Stein is the wizard behind the page’s performance.

Nick uses progressively enhanced CSS3 Columns to create his responsive multi-column layout, incorporating subtle tricks like switching to a condensed font when the multi-column layout shrinks below a certain size. (This is something A List Apart used to do as well; we stopped because of performance concerns.) In browsers like IE9 and earlier, which do not support CSS3 Multiple Column specification, the layout defaults to a quite readable single column. Nick adds:

It’s the first time I’ve used responsive CSS columns for a real-world project. This was both frustrating and fun because the CSS properties for controlling widows and orphans are very far behind what’s possible in InDesign, etc. It also required more thinking about vertical media queries to prevent a situation where the user would have to scroll up and down to get from the bottom of one column to the top of the next. If the viewport is too short to allow for easy reading across columns, it stays as a single column.

He describes the challenges of creating the site’s preview tool thusly:

We had to do some behind the scenes trickery in order to get the sliders to work for changing widths and weights. It’s a good way to allow people to type their own text and get a feeling for how the family can be used as a system for body text and headlines (unlike Helvetica, which is more limited to the middle range of sizes). Chris Lewis helped out a lot with getting this to work. It even works on a phone!

Book designers have long had access to great serif fonts dripping with character that were ideal for setting long passages of text. Now they have a well-made sans serif that’s as sturdy yet self-effacing as a waiter at a great restaurant. Congratulations to Robert Slimbach, Adobe, and the designers and developers mentioned or interviewed here. I look forward to seeing if Acumin makes it into new website designs (perhaps sharing some of Proxima Nova‘s lunch), especially among mature designers focused on creating readable experiences. And I pray Acumin makes its way into the next generation of ebook readers.

(Just me? In both iBooks and Kindle, I’m continually changing typefaces after reading any book for any period of time. All the current faces just call too much attention to themselves, making me aware that I am scanning text—which is rather like making filmgoers aware that they are watching projected images just when they should be losing themselves in the story.)

USA: Designed With Web Standards

cover_quarterMY BIG WEB SHOW guest today is front-end designer Maya Benari, a leading contributor to the U.S. Web Design Standards.

Recently launched, and deservedly much lauded, the U.S. Web Design Standards consist of open source UI components plus a visual style guide, and are designed to create consistency and beautiful user experiences across U.S. federal government websites. Accessibility, semantics, and mobile-first responsive web design are baked in, right out of the box.

Maya and Jeffrey discuss the genesis of the project, the teams behind the scenes, and why improving people’s lives is sexier than building sandwich rating apps.

✩ ✩ ✩ ✩ ✩ ✩ Listen to Big Web Show № 136—USA: Designed With Web Standards, featuring Maya Benari.

RELATED LINKS FOR YOUR EXPLORING PLEASURE

You’re welcome: cutting the mustard then and now.

EVERY TIME I hear a young web developer cite the BBC’s forward-thinking practice of “cutting the mustard,” by which they mean testing a receiving web device for certain capabilities before serving content, I remember when my team and I at The Web Standards Project invented that very idea. It’s a million web years ago, by which I mean fourteenish human years ago, so nobody remembers but me and some other long toothed grayhairs, plus a few readers of the first edition of Designing With Web Standards. But I like you, so I will tell you the story.

Back then in those dark times, it was common practice for web developers to create four or more versions of the same website—one for each browser then in wide use. It was also a typical (and complementary) practice to send server-side queries to figure out which browser was about to access a site’s content, and then send the person using that browser to the site version that was configured for her browser’s particular quirks, proprietary tags, and standards compliance failings.

The practice was called “browser detection.” Nobody but some accessibility advocates had ever questioned it—and the go-go dot-com era had no time or care for those folks.

But we at The Web Standards Project turned everything on its head. We said browsers should support the same standards instead of competing to invent new tags and scripting languages. We said designers, developers, and content folks should create one site that was accessible to everyone. In a world like that, you wouldn’t need browser detection, because every browser and device that could read HTML would be able to feast on the meat of your site. (And you’d have more meat to share, because you’d spend your time creating content instead of crafting multiple versions of the same site.)

To hasten that world’s arrival, in 2001 we launched a browser upgrade campaign. Those who participated (example participant here) employed our code and content to send their users the message that relatively standards-compliant browsers were available for every platform, and inviting them to try one. Because if more people used relatively standards-compliant browsers, then we could urge more designers and developers to create their sites with standards (instead of quirks). And as more designers and developers did that, they’d bump against still-unsolved standards compliance conundrums, enabling us to persuade browser makers to improve their standards compliance in those specific areas. Bit by bit, stone by stone, this edifice we could, and would, erect.

The code core of the 2001 browser upgrade campaign was the first instance of capability detection in place of browser detection. Here’s how it worked. After creating a valid web page, you’d insert this script in the head of your document or somewhere in your global JavaScript file:

if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}

We even provided details for various flavors of markup. In HTML 4 or XHTML 1 Transitional documents, it looked like this:

<script type="text/javascript" language="javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->
</script>

In STRICT documents, you’d either use a global .js file, or insert this:

<script type="text/javascript">
<!-- //
if (!document.getElementById) {
window.location =
"http://www.webstandards.org/upgrade/"
}
// -->

You could also just as easily send visitors to an upgrade page on your own site:

if (!document.getElementById) {
window.location =
"http://www.yourdomain.com/yourpage.html"
}

Non-WaSP members (at the time) J. David Eisenberg, Tantek Çelik, and Jim Heid contributed technical advice and moral support to the effort. WaSP sysadmin Steven Champeon, the inventor of progressive enhancement, made it all work—under protest, bless him. (Steve correctly believed that all web content should always be available to all people and devices; therefore, in principle, he disliked the upgrade campaign, even though its double purpose was to hasten the arrival of truly standards-compliant browsers and to change front-end design and development from a disrespected world of hacks to a sustainable and professional craft. ((See what I did there? I’m still respectfully arguing with Steve in my head.)))

Discovering rudimentary DOM awareness or its absence in this fashion was the first time web developers had tested for capabilities instead of chasing the dragon in a perpetual and futile attempt to test for every possible browser flavor and version number. It was the grandparent, if you will, of today’s “cutting the mustard.” And it is analogous as well to the sensible responsive design practice of setting breakpoints for the content, instead of trying to set appropriate breakpoints for every possible device out there (including all the ones that haven’t been invented yet).

Which reminds us that the whole point of web standards was and is forward compatibility—to create content that will work not only in yesterday’s and today’s browsers and devices, but in all the wonderful devices that have yet to be invented, and for all the people of the world. You’re welcome.

—CHICAGO, Westin Chicago River Hotel, 1 September 2015


Hat tip: John Morrison