Big Websites for Small Screens: ICANN.org Case Study

Big websites for small screens ICANN.org case studyChris Ruppel, Todd Nienkerk, and Zach MeyerDrupalCon Denver | March 20, 2012

Personal introductions

Chris Ruppel Front-end and mobile developer Four Kitchens chris@fourkitchens.com Twitter: @ruplPhoto: Kristin Hillery

Todd Nienkerk Partner Four Kitchens todd@fourkitchens.com Twitter: @toddrossPhoto: Kristin Hillery

Zach Meyer Designer and front-end developer SXSW zmeyer@gmail.com Twitter: @thescaryclownPhoto: Todd Nienkerk

1 2 3 4Business goals

BUSINESS GOALS 1 2 3 4 5 6Build a stable, dynamic site

BUSINESS GOALS 1 2 3 4 5 6Update visual design

BUSINESS GOALS 1 2 3 4 5 6Help visitors do what they want andget what they need

BUSINESS GOALS 1 2 3 4 5 6Enhance image as a multinationalorganization

BUSINESS GOALS 1 2 3 4 5 6Enable users from all over the world toaccess the website using a variety ofdevices

BUSINESS GOALS 1 2 3 4 5 6Clearly, concisely explain what ICANNis and why it matters

1 2 3 4Technical requirements

TECHNICALREQUIREMENTS 1 2 3 4 5 6Use existing server cluster

TECHNICALREQUIREMENTS 1 2 3 4 5 6Use existing Google Search Appliance

TECHNICALREQUIREMENTS 1 2 3 4 5 6Provide multilingual support

TECHNICALREQUIREMENTS 1 2 3 4 5 6Migrate content without any changeto structure or broken URLs

TECHNICALREQUIREMENTS 1 2 3 4 5 6Support mobile devicesAndroid 2.2+, iOS 4.1+, RIM BlackBerry OS 6.0.0+,Symbian OS 9.5+, Windows Mobile 6.5.3+

TECHNICALREQUIREMENTS 1 2 3 4 5 6Support modern browsersFirefox, Chrome, Safari, IE8, and IE9 (no IE6 or IE7!)

1 2 3 4IA, UX, and visual design

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

NEW SITE MAPCredits

Wireframes• Build wireframes for different 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

1 2 3 4Implementing aresponsive design

Building for manyscreens

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-conﬁguring, 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 ﬁx 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.

http://gateway.fourkitchens.com	16
http://localhost	9
http://www.onlydoo.com	1
http://10.0.2.228	1

Big Websites for Small Screens: ICANN.org Case Study

by Four Kitchens on May 29, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 27

Statistics

Big Websites for Small Screens: ICANN.org Case Study Presentation Transcript