Web Design World: New Details & Tools

by October 20, 2010

In his "New" Details and Tools in Interface Design presentation at Web Design World in Las Vegas NV, Dan Rubin walked through a number of exciting Web design opportunities enabled by HTML5 and CSS3. Here's my notes from his talk:

  • HTML5 is an evolution of every version of HTML before it. Not anything new but more like a collection of best practices.
  • New elements: sections, articles, footers, headers give semantic value to our documents.
  • Audio & video elements allow you to use browsers for playing back media.
  • Canvas is an element that allows you to draw with code in the browser.
  • HTML5 provides many new attributes for Web forms that specify types and more.
  • CSS3 selectors allow you to select elements without using style and ID. Psuedo-selectors allow you to target content by first, last, only, etc. Previously this was only done with Javascript.
  • Visual effects like box shadow and rounded corners take the heavy lifting of presentation from the production process and move it t the Web browser. These effects simply don’t work in older browsers – which means they don’t break older browsers.
  • RGBa and HSLa: Allows you to specify colors and a transparency percentage through alpha channels.
  • Gradients might not be supported in IE9 (final release pending) but you can use Microsoft’s proprietary filters. The fallback for gradients is a solid color so you know what will happen in older browsers.
  • Multiple backgrounds can be set in CSS3 and fallback to a single background on browsers that don’t support them.
  • Media queries allow you to adapt your layouts to different viewport sizes. You need to determine which devices you’ll support to adapt your interface appropriately. Provide a simple conditional: look for max width for devices, screen support, etc.
  • Modernizer is a Javascript library. It tests for functionality in browsers and makes older browsers (like IE6) behave like modern browsers. Similarly, Selectiziver provides IE 6, 7, and 8 support for CSS selectors (advanced attributes).