Big websites for small screens ICANN.org case studyChris Ruppel, Todd Nienkerk, and Zach MeyerDrupalCon Denver | March 20,...
Personal introductions
Chris Ruppel                         Front-end and mobile developer                         Four Kitchens                 ...
Todd Nienkerk                         Partner                         Four Kitchens                         todd@fourkitch...
Zach Meyer                       Designer and front-end developer                       SXSW                       zmeyer@...
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 ...
TECHNICALREQUIREMENTS    1      2      3     4      5      6Support modern browsersFirefox, Chrome, Safari, IE8, and IE9 (...
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 ar...
ORIGINAL SITE MAP
NEW SITE MAPCredits
Wireframes• Build wireframes for different devices in parallel• Don’t design all wireframes for a single device before mov...
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 Pr...
Visual design• Create artwork for each major break point in screen width• Use style tiles as a guide to create artwork• Pl...
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•...
Feature detection• Used Modernizr to allow for CSS3 fallbacks, which reduced our need for images• Conditionally applied JS...
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 presenta...
All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed an...
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Big Websites for Small Screens: ICANN.org Case Study
Upcoming SlideShare
Loading in …5
×

Big Websites for Small Screens: ICANN.org Case Study

85,306 views
84,570 views

Published on

Originally presented at DrupalCon Denver (March 20, 2012)

Published in: Design, Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total views
85,306
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
23
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Big Websites for Small Screens: ICANN.org Case Study

  1. Big websites for small screens ICANN.org case studyChris Ruppel, Todd Nienkerk, and Zach MeyerDrupalCon Denver | March 20, 2012
  2. Personal introductions
  3. Chris Ruppel Front-end and mobile developer Four Kitchens chris@fourkitchens.com Twitter: @ruplPhoto: Kristin Hillery
  4. Todd Nienkerk Partner Four Kitchens todd@fourkitchens.com Twitter: @toddrossPhoto: Kristin Hillery
  5. Zach Meyer Designer and front-end developer SXSW zmeyer@gmail.com Twitter: @thescaryclownPhoto: Todd Nienkerk
  6. 1 2 3 4Business goals
  7. BUSINESS GOALS 1 2 3 4 5 6Build a stable, dynamic site
  8. BUSINESS GOALS 1 2 3 4 5 6Update visual design
  9. BUSINESS GOALS 1 2 3 4 5 6Help visitors do what they want andget what they need
  10. BUSINESS GOALS 1 2 3 4 5 6Enhance image as a multinationalorganization
  11. BUSINESS GOALS 1 2 3 4 5 6Enable users from all over the world toaccess the website using a variety ofdevices
  12. BUSINESS GOALS 1 2 3 4 5 6Clearly, concisely explain what ICANNis and why it matters
  13. 1 2 3 4Technical requirements
  14. TECHNICALREQUIREMENTS 1 2 3 4 5 6Use existing server cluster
  15. TECHNICALREQUIREMENTS 1 2 3 4 5 6Use existing Google Search Appliance
  16. TECHNICALREQUIREMENTS 1 2 3 4 5 6Provide multilingual support
  17. TECHNICALREQUIREMENTS 1 2 3 4 5 6Migrate content without any changeto structure or broken URLs
  18. 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+
  19. TECHNICALREQUIREMENTS 1 2 3 4 5 6Support modern browsersFirefox, Chrome, Safari, IE8, and IE9 (no IE6 or IE7!)
  20. 1 2 3 4IA, 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 MAPCredits
  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
  26. HOME PAGE ➜ TABLETS
  27. HOME PAGE ➜ SMARTPHONES
  28. GROUPS SECTION ➜ DESKTOPS and LAPTOPS
  29. GROUPS SECTION ➜ TABLETS
  30. GROUPS SECTION ➜ SMARTPHONES
  31. 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
  32. 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
  33. HOME PAGE ➜ DESKTOPS and LAPTOPS
  34. HOME PAGE ➜ TABLETS
  35. HOME PAGE ➜ SMARTPHONES
  36. 1 2 3 4Implementing aresponsive design
  37. Building for manyscreens
  38. 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
  39. 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
  40. Responsive Media• Fitvids• Blueberry.js
  41. Opting for speed• Stuck with CSS3 when possible• Did not use Respond.js to fix IE• Moved JS to the bottom
  42. 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.
  43. All content in this presentation, except where noted otherwise, is Creative Commons Attribution-ShareAlike 3.0 licensed and copyright 2012 Four Kitchens, LLC.

×