Intrinsic Web Design

Jen Simmons just ushered in this new name for the way(s) web design is changing. She has been adding great videos on her YouTube channel, Layout Land, for about the past two months. She gave this presentation at An Event Apart in Seattle yesterday. There are notes on what she said here and here.

Oh, yeah, her talk is titled “Everything You Know About Web Design Just Changed.”

Now we can use white space in web design, for real.

We can squish, or shrink, or stretch. Deliberately.

Even media queries are changing. This is beyond responsive design, which has been our paradigm for eight years (!) already.

See Simmons’s cool examples of grid and more.

Also this great video series of how to write CSS that works in every browser.

Accessibility resources

Last night I went to a local developers meetup. Two people spoke about accessibility and shared these tips and links.

Web Content Accessibility Guidelines (WCAG)

These guidelines come from the W3C, and there are three levels of compliance. Level A is the minimum, and level AAA is the highest standard.

How to Meet WCAG 2.0 is the most user-friendly guide (there are several, with various amounts of complexity and details).

Web Content Accessibility Guidelines (WCAG) Overview is much more detailed (and less user friendly).

General tips to make sites accessible

  • Indicate errors (e.g. in a form submission) with icons and/or text — not only with color.
  • Popups and overlays must be able to be closed with a keyboard action, and not require a mouse click.
  • Field labels must be provided as readable text; do not use only the overwritable placeholder text inside a form field.
  • Use focus as well as hover if you have popup information. That is, make it appear on focus as well as on hover.
  • Line-height should be 1.5x (ugh — I prefer 1.4x).
  • Use @media print { } to write CSS specifically for printing — this might help with accessibility for some users (media queries).
  • I always tell students: “Don’t use click here as a link.” A good way to explain why: Make sure the purpose of the link can be determined by the link text alone.

Tools and sites to help you make your pages, apps accessible

Audits in Chrome Developer Tools — this is awesome! Use it to test your pages.

tota11y.js “helps visualize how your site performs with assistive technologies.” It is “a single JavaScript file that inserts a small button in the bottom corner of your document. (It’s on this very page.)” Go there, click the small button, be amazed.

Color Safe — this site generates color palettes! “Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.

WAVE, an online website analyzer — open this, paste in a URL, and see what happens. Also mind blowing.

ChromeVox is a free screen reader. Blind people use a screen reader to read the web out loud to them. If you install this Chrome extension, you can hear how a screen reader reads your page.

The A11Y Project: “A community-driven effort to make web accessibility easier.” Nice resources! Just take a look and you’ll see at a quick glance how helpful this can be.

Use an a11y linter — this advice applies especially if you’re using grunt or gulp in your workflow. If not (e.g. you only make small projects), the tools listed above will suffice.

aXe Chrome extension — not sure we need this if using Audits (see above), but it will find accessibility defects on your site.

NOTE: Accessibility is often abbreviated as a11y, where the number 11 refers to the number of letters omitted. It is often pronounced like alley.