Big Websites for Small Screens: ICANN.org Case Study

85,749 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,749
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
24
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.

×