1. Big websites for small
screens
ICANN.org case study
Chris Ruppel, Todd Nienkerk, and Zach Meyer
DrupalCon Denver | March 20, 2012

2. Personal introductions

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

4. Todd Nienkerk
Partner
Four Kitchens
todd@fourkitchens.com
Twitter: @toddross
Photo: Kristin Hillery

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

6. 1 2 3 4
Business goals

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

8. BUSINESS GOALS 1 2 3 4 5 6
Update visual design

9. BUSINESS GOALS 1 2 3 4 5 6
Help visitors do what they want and
get what they need

10. BUSINESS GOALS 1 2 3 4 5 6
Enhance image as a multinational
organization

11. BUSINESS GOALS 1 2 3 4 5 6
Enable users from all over the world to
access the website using a variety of
devices

12. BUSINESS GOALS 1 2 3 4 5 6
Clearly, concisely explain what ICANN
is and why it matters

13. 1 2 3 4
Technical requirements

14. TECHNICAL
REQUIREMENTS 1 2 3 4 5 6
Use existing server cluster

15. TECHNICAL
REQUIREMENTS 1 2 3 4 5 6
Use existing Google Search Appliance

16. TECHNICAL
REQUIREMENTS 1 2 3 4 5 6
Provide multilingual support

17. TECHNICAL
REQUIREMENTS 1 2 3 4 5 6
Migrate content without any change
to structure or broken URLs

18. 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+

19. TECHNICAL
REQUIREMENTS 1 2 3 4 5 6
Support modern browsers
Firefox, Chrome, Safari, IE8, and IE9 (no IE6 or IE7!)

20. 1 2 3 4
IA, UX, and visual design

21. IA: Where do you start?
• Map existing website and identify all content
• Re-architect content
• Identify some content for archiving or deletion

22. ORIGINAL SITE MAP

23. NEW SITE MAP
Credits

24. 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

25. HOME PAGE ➜ DESKTOPS and LAPTOPS

28. HOME PAGE ➜ TABLETS

32. HOME PAGE ➜ SMARTPHONES

37. GROUPS SECTION ➜ DESKTOPS and LAPTOPS

40. GROUPS SECTION ➜ TABLETS

43. GROUPS SECTION ➜ SMARTPHONES

46. 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

52. 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

53. HOME PAGE ➜ DESKTOPS and LAPTOPS

56. HOME PAGE ➜ TABLETS

60. HOME PAGE ➜ SMARTPHONES

65. 1 2 3 4
Implementing a
responsive design

66. Building for many
screens

67. 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

68. 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

71. Responsive Media
• Fitvids
• Blueberry.js

74. Opting for speed
• Stuck with CSS3 when possible
• Did not use Respond.js to fix IE
• Moved JS to the bottom

75. 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.

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