Designing with Progressive Enhancement

Book Notes by Julaine

Content Blocks

Content blocks that let users selectively toggle their display have a myriad of common design forms and even more names—collapsible, spin-downs, toggle panels, twisties, and content disclosures to name just a few. There’s a wide range of scenarios where collapsible content is useful:

  • For detailed information that isn’t essential to see at all times or for all users, but may be helpful in select cases, such as documentation describing a technical issue

  • For optional fields in a form, like a user preference settings for a registration form, or the gift-wrap options in an e-commerce checkout workflow

  • For tool panes or grouped palette panels in desktop-style web applications, where the user can choose which elements should be collapsed or expanded to optimize screen real estate

When content is presented inside a collapsible widget, it’s a common best practice to display a visual indicator such as an arrow or plus/minus icon along with a clickable label or another element to let users know there’s additional content available. I like the arrow next to details - it triggers an upload box.

Custom File Input Fields

This solution was inspired by the work of Michael McGrady and Shaun Inman, who developed this tricky bit of CSS and JavaScript to position the native file input under the user’s cursor to create custom file inputs.

Styling File Inputs

Global Font Sizes

First, we’ll set a global font size in the enhanced style sheet that will simplify how we set font sizes for elements within our widget. We’ll assign a font-size property to the body element that “resets” the standard browser default size.

We prefer to use the relative em unit to set font sizes so that users can more easily adjust the text size to their liking with browser preferences and key commands. The base font size for most browsers is 16 pixels; by setting the body font size to 62.5% of 16 pixels, we effectively “reset” a single em unit (1em) to 10 pixels:

body { font-size: 62.5% }

With the base font size set as a percentage, em designations will translate to simple multiples—1.5 em equals 15px, 2.2 em is 22px, and so on—which greatly reduces our need to calculate each element’s text size, and preserves scalability for users who change their default size or use keyboard commands like Ctrl-plus or Ctrl-minus to resize on the fly.

This percentage-based font-size solution was inspired by the work of Richard Rutter, whose May 2004 blog post, "How to size text using ems" (www.clagnut.com/blog/348, laid out the principles, code examples, and a very helpful explanation of how to accommodate multiplier effects when em units are nested in the page.

Bibliographical information

Cover of the book

Designing with Progressive Enhancement

By: Todd Parker; Patty Toland; Scott Jehl; Maggie Costello Wachs

Publisher: New Riders

Pub. Date: February 19, 2010

Print ISBN-10: 0-321-65888-4

Print ISBN-13: 978-0-321-65888-3

These are notes I made after reading this book. See more book notes

Just to let you know, this page was last updated Saturday, Dec 21 24