Successfully reported this slideshow.
Your SlideShare is downloading. ×

Big Websites for Small Screens: ICANN.org Case Study

Ad

Big websites for small
 screens
 ICANN.org case study




Chris Ruppel, Todd Nienkerk, and Zach Meyer
DrupalCon Denver | M...

Ad

Personal introductions

Ad

Chris Ruppel
                         Front-end and mobile developer
                         Four Kitchens

             ...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 76 Ad
1 of 76 Ad
Advertisement

More Related Content

Advertisement

More from Four Kitchens (20)

Advertisement

Big Websites for Small Screens: ICANN.org Case Study

  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
  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 4 Implementing a responsive design
  37. Building for many screens
  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.

×