An Event Apart: “Designing With Web Standards in 2016”

Jeffrey Zeldman speaking at An Event Apart Orlando 2016 at Disney’s Contemporary Resort in Walt Disney World on October 3, 2016.

It’s been thirteen years since the first edition of Designing With Web Standards turned our industry on its ear, changing the way we design and develop websites. ​In a web ruled by Flash, table layouts, and sites coded to work in only one browser or another, DWWS showed how to make web content and experiences available to all people, browsers, devices, and search engines. It was heady stuff back in 2003. But how well do the tactics and strategies the book and subsequent editions recommended hold up in our multi-device, framework- and app-driven web of 2016? Is it time to discard progressive enhancement, semantic markup, and accessibility? Or can these ​techniques still help us master today’s complex design and development challenges? Survey the state of the art, and learn how to ensure that your site will work everywhere—today and tomorrow.

Photo source: Zeffrey Zeldman
Photo source: Zeffrey Zeldman

Notes

  • Challenging times, but maybe not that much different than what we’ve already gone through
  • Challenges:
    • Screen sizes
    • Speed
    • Non-semantic code from frameworks (Bootstrap)
    • Email HTML support
    • People asking if CSS is necessary
    • Bloat
      • Then: Dreamweaver
      • Now: Bootstrap
  • “If there is to be a loser in the battle of the layouts, my hope is that it will be the layout frameworks that tie our design to our markup. They have been a necessary placeholder while we waited for a true web layout system, but I believe that in a few years time we’ll be easily able to date a website to circa 2015 by seeing <div class="row"> or <div class="col-md-3"> in the markup.” — Rachel Andrew, Grid, Flexbox, Box Alignment: Our New System for Layout
  • There is nothing new under the sun
  • The dawn of modern web design: Designing With Web Standards
    • Then: “99.9% of Websites are Obsolete”
    • Now: “99.9% of Websites are Problematic”
  • Browser sniffing is problematic
    • There will always be new browsers (or devices)
    • Sometimes browsers pretend to be other browsers
  • Forward compatibility ingredients:
    • Full separation of structure from presentation and behavior
    • Valid CSS used for layout
    • Valid HTML used for markup
    • Emphasis on structure; Eliminate presentational hacks in markup
    • Structural labeling/abstraction of design elements—“Menu” rather than “Green Box”
    • DOM-based scripting for behavior: if you need to fork your code, then sniff for object support, not browser versions
    • Accessibility attributes and testing
  • Bootstrap is good for prototyping, but it is bad for production websites
  • Apps that don’t connect to the web are dead
  • Your brand happens between devices
    • Interaction starts on one device and then carries over on another device
  • Different versions of a website for desktop and mobile
    • Does it scale? Are your assumptions correct?
  • Never underestimate the power of HTML
  • Semantic markup, separating content from presentation
    • Now easier than ever with CSS flexbox
    • Flexbox makes it easier to put elements in correct order in the markup and change the display order in CSS
  • Overuse of class in early standards-compliant sites kept HTML mired in layout
    • id and contextual selectors were the solution, but have a bad rep now because of Object Oriented CSS (OOCSS)
    • ids are not bad
      • As a style sheet selector, permits you to author tight, minimal HTML
      • As a target for hypertext links, works in all HTML-capable devices
      • As a means to reference a particular element via the DOM
  • Rules for the road:
    • Mobile is today’s first screen, so design responsively, focusing on content and structure first
    • Remove distractions, let people interact as directly as possible with content
    • 90% of design is typography, and the other 90% is whitespace
    • Design your system to serve your content, not the other way around
    • Style is the servant of brand and content. Style without purpose is just noise.
    • Remove each detail from your design until is breaks
    • 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.

Speaker Links and Resources