Chris Ruppel, Todd Nienkerk, and Zach MeyerDrupalCon Denver | March 20, 2012

Big websites for small screensICANN.org case study

Personal introductions

Chris RuppelFront-end and mobile developerFour Kitchens

chris@fourkitchens.com

Twitter: @rupl

Photo: Kristin Hillery

Photo: Kristin Hillery

Todd NienkerkPartnerFour Kitchens

todd@fourkitchens.com

Twitter: @toddross

Photo: Todd Nienkerk

Zach MeyerDesigner and front-end developerSXSW

zmeyer@gmail.com

Twitter: @thescaryclown

Business goals

2 31 4

Build a stable, dynamic site

1BUSINESS GOALS 2 3 4 5 6

Update visual design

1BUSINESS GOALS 2 3 4 5 6

Help visitors do what they want and get what they need

1BUSINESS GOALS 2 3 4 5 6

Enhance image as a multinational organization

1BUSINESS GOALS 2 3 4 5 6

Enable users from all over the world to access the website using a variety of devices

1BUSINESS GOALS 2 3 4 5 6

Clearly, concisely explain what ICANN is and why it matters

1BUSINESS GOALS 2 3 4 5 6

Technical requirements

2 31 4

Use existing server cluster

1TECHNICAL REQUIREMENTS 2 3 4 5 6

Use existing Google Search Appliance

1TECHNICAL REQUIREMENTS 2 3 4 5 6

Provide multilingual support

1TECHNICAL REQUIREMENTS 2 3 4 5 6

Migrate content without any change to structure or broken URLs

1TECHNICAL REQUIREMENTS 2 3 4 5 6

Support mobile devicesAndroid 2.2+, iOS 4.1+, RIM BlackBerry OS 6.0.0+, Symbian OS 9.5+, Windows Mobile 6.5.3+

1TECHNICAL REQUIREMENTS 2 3 4 5 6

Support modern browsersFirefox, Chrome, Safari, IE8, and IE9 (no IE6 or IE7!)

1TECHNICAL REQUIREMENTS 2 3 4 65

IA, UX, and visual design

2 31 4

IA: Where do you start?

• Map existing website and identify all content

• Re-architect content

• Identify some content for archiving or deletion

ORIGINAL SITE MAP

Credits

NEW SITE MAP

Wireframes

• Build wireframes for di!erent devices in parallel

• Don’t design all wireframes for a single device before moving onto the next

• Before you design, you should have a perfect map that leads your site building from point A to B

HOME PAGE ➜ DESKTOPS and LAPTOPS

HOME PAGE ➜ TABLETS

HOME PAGE ➜ SMARTPHONES

GROUPS SECTION ➜ DESKTOPS and LAPTOPS

GROUPS SECTION ➜ TABLETS

GROUPS SECTION ➜ SMARTPHONES

Style tiles

• Establish a visual language or guide for the site design before actually producing artwork

• Style Tiles in Practice (Samantha Warren)

• bit.ly/style-tiles

Visual design

• Create artwork for each major break point in screen width

• Use style tiles as a guide to create artwork

• Plan the elements to use as few images as possible

• Design what you can in the browser

HOME PAGE ➜ DESKTOPS and LAPTOPS

HOME PAGE ➜ TABLETS

HOME PAGE ➜ SMARTPHONES

Implementing a responsive design

2 31 4

Building for many screens

To theme or subtheme?

• When the project started, there was no good starter theme

• We started from scratch to keep it lean

• Spent less time un-configuring, more time optimizing

Feature detection

• Used Modernizr to allow for CSS3 fallbacks, which reduced our need for images

• Conditionally applied JS to certain site elements while ensuring that non-JS behavior was usable

Responsive Media

• Fitvids

• Blueberry.js

Opting for speed

• Stuck with CSS3 when possible

• Did not use Respond.js to fix IE

• Moved JS to the bottom

Credits

• Drupal is a registered trademark of Dries Buytaert.

• The items listed to the left are exempt from this presentation’s Creative Commons license.

• This presentation was created and delivered by Chris Ruppel and Todd Nienkerk of Four Kitchens and Zach Meyer of SXSW at DrupalCon Denver.

All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2012 Four Kitchens, LLC.