Resilient Web Design - by Jeremy Keith

1

Prolific author Jeremy Keith has released a new, free, web book, Resilient Web Design.

Known for his commitment to accessibility, this book is availble offline, as well as in PDF formats ( portrait and landscape ). He’s even started narrating an audio version of the book.

His aim is “to combine the most resilient ideas from the history of web design into an approach for building the websites of the future.” This is not a how-to manual, rich with code examples ( there are no code examples, actually ) but a history book that looks backward in order to see the future.

Anyone interested in crafting digital experiences would benefit from reading this beautifully designed, informative and insightful book. It details the history of the web, dispells some myths and pulls back the curtain on historical design decisions, such as why floppy discs were made 3.5 inches wide. It talks about the fixed mindsets that dominated web design, where they originated from, and the people whose smashing ideas and radical work broke through barriers inhibiting progress.

A teacher as well as a developer, the reader is given a real shoulder to stand on when Mr Keith outlines his own strategy for resilient design, one that ensures access to content, regardless of context.

This three-step approach asks a designer to:

  1. Identify core functionality.

  2. Make that functionality available using the simplest possible technology.

  3. Enhance!

As he puts it, “The best way to be future-friendly is to be backwards‐compatible.” His future friendly design philosphy makes access to a site or service’s core functionality a priority, regardless of browser version, network connection or device.

However, this is not a call to strip away interaction, animation or any other shiny new features a designer may want to include. And he makes several convincing arguments why this is a winning strategy for both developers and users alike.

His main point being that, going forward into an uncertain development and delivery ecosystem, resilient design, much like progressive enhancement or adaptive web design, reduces technical debt and empowers the most users for the longest period of time.

If that is the success you wish for yourself and others, then I encourage you to read this important new book. Your future self will probably thank you for it.

1 Like
2

He may be great author, but he clearly fails with the size of the font. I can’t even read if the size of body text has the size of h1.

For anyone else struggling with reading his online book, change font-size in html tag to 15px (:

E: Unless you shrink browser window to mobile device size. Then the font-size is perfect.

3

I inspected this in the dev-tools. It’s interesting ( and somewhat baffling ) to see that he’s using calc() in his CSS stylesheet for setting font-size. That’s mainly to allow for mixed units I suppose.

I’ll agree the body copy is large, and the first line makes it appear even larger. This may be a design decision to prioritize users who may have less-than-perfect vision, or are viewing on a large screen which may be placed at some distance? I don’t think this is a ‘fail’. He clearly hasn’t set the body text the same as h1:

html {
    font-size: calc( 16px + (32 - 16) * ( (100vw - 320px) / ( 1200 - 320) ));
    } 

h1 {
    font-size: calc( 36px + (144 - 36) * ( (100vw - 320px) / ( 1200 - 320) ));
    font-weight: normal;
    line-height: 1;
    margin: 0;
}
h2 {
    font-size: calc( 24px + (48 - 24) * ( (100vw - 320px) / ( 1200 - 320) ));
    font-weight: normal;
    line-height: 1.125;
    margin: 6rem 0 0;
}
h3 {
    font-size: calc( 20px + (40 - 20) * ( (100vw - 320px) / ( 1200 - 320) ));
    font-weight: normal;
    line-height: 1.25;
    margin: 4rem 0 0;
}
h4 {
    font-size: calc( 18px + (36 - 18) * ( (100vw - 320px) / ( 1200 - 320) ));
    font-weight: normal;
    line-height: 1.325;
    margin: 3rem 0 0;
}
h5 {
    font-size: calc( 16px + (32 - 16) * ( (100vw - 320px) / ( 1200 - 320) ));
    font-weight: normal;
    line-height: 1.5;
    margin: 2rem 0 0;
}
4

Adjusting the window to reduce the font-size seems like a clever decoupling of that property from media-queries, via calc().

I’m guessing it also is a future-friendly approach to the heavier pixel densities of next-gen screens and displays.

Can someone please clarify this? :slight_smile:

5

That sizing for fonts is something I’ve seen around in accessibility/inclusive design blogs and books. I’m positive it’s talked about in Heydon Pickering’s latest book and it talks about this article by Zell Liew: https://zellwk.com/blog/viewport-based-typography/

I’m on a larger screen so I almost always don’t read stuff on a full-size window so I don’t particularly mind the big fonts… (Or read full books on my desktop, for that matter.) If it does feel off-putting, setting the font-size on body as font-size: 80%; is probably better so all the font-sizes scale better.

2 Likes
6

That is a really slick blog post! And informative. Thanks.

1 Like