Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Four Kitchens, profile picture
Uploaded byFour Kitchens
86,027 views

Big Websites for Small Screens: ICANN.org Case Study

This document summarizes a presentation given at DrupalCon Denver about redesigning the ICANN website to be responsive. The goals were to build a stable, dynamic site; update the visual design; help users find what they need on any device; and allow global access. Technically, the project used the existing server and search tools, supported multiple languages and browsers, and migrated content without breaking URLs. Information architecture and user experience were improved through sitemaps, wireframes for different devices, and style tiles to guide the visual design process. The new design was implemented responsively using features like Fitvids, Blueberry.js, and optimizing for speed without Respond.js.

Design◦Technology◦
Related topics:
Mobile Web Solutions•
Downloaded 27 times
Big websites for small screens ICANN.org case study Chris Ruppel, Todd Nienkerk, and Zach Meyer DrupalCon Denver | March 20, 2012
Personal introductions
Chris Ruppel Front-end and mobile developer Four Kitchens chris@fourkitchens.com Twitter: @rupl Photo: Kristin Hillery
Todd Nienkerk Partner Four Kitchens todd@fourkitchens.com Twitter: @toddross Photo: Kristin Hillery
Zach Meyer Designer and front-end developer SXSW zmeyer@gmail.com Twitter: @thescaryclown Photo: Todd Nienkerk
1 2 3 4 Business goals
BUSINESS GOALS 1 2 3 4 5 6 Build a stable, dynamic site
BUSINESS GOALS 1 2 3 4 5 6 Update visual design
BUSINESS GOALS 1 2 3 4 5 6 Help visitors do what they want and get what they need
BUSINESS GOALS 1 2 3 4 5 6 Enhance image as a multinational organization
BUSINESS GOALS 1 2 3 4 5 6 Enable users from all over the world to access the website using a variety of devices
BUSINESS GOALS 1 2 3 4 5 6 Clearly, concisely explain what ICANN is and why it matters
1 2 3 4 Technical requirements
TECHNICAL REQUIREMENTS 1 2 3 4 5 6 Use existing server cluster
TECHNICAL REQUIREMENTS 1 2 3 4 5 6 Use existing Google Search Appliance
TECHNICAL REQUIREMENTS 1 2 3 4 5 6 Provide multilingual support
TECHNICAL REQUIREMENTS 1 2 3 4 5 6 Migrate content without any change to structure or broken URLs
TECHNICAL REQUIREMENTS 1 2 3 4 5 6 Support mobile devices Android 2.2+, iOS 4.1+, RIM BlackBerry OS 6.0.0+, Symbian OS 9.5+, Windows Mobile 6.5.3+
TECHNICAL REQUIREMENTS 1 2 3 4 5 6 Support modern browsers Firefox, Chrome, Safari, IE8, and IE9 (no IE6 or IE7!)
1 2 3 4 IA, 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 MAP Credits
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 4 Implementing a responsive design
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.