Big Websites for Small Screens: ICANN.org Case Study
Upcoming SlideShare
Loading in...5
×
 

Big Websites for Small Screens: ICANN.org Case Study

on

  • 82,235 views

Originally presented at DrupalCon Denver (March 20, 2012)

Originally presented at DrupalCon Denver (March 20, 2012)

Statistics

Views

Total Views
82,235
Views on SlideShare
82,208
Embed Views
27

Actions

Likes
3
Downloads
18
Comments
1

4 Embeds 27

http://gateway.fourkitchens.com 16
http://localhost 9
http://www.onlydoo.com 1
http://10.0.2.228 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Big Websites for Small Screens: ICANN.org Case Study Big Websites for Small Screens: ICANN.org Case Study Presentation Transcript

  • Big websites for small screens ICANN.org case studyChris Ruppel, Todd Nienkerk, and Zach MeyerDrupalCon Denver | March 20, 2012
  • Personal introductions
  • Chris Ruppel Front-end and mobile developer Four Kitchens chris@fourkitchens.com Twitter: @ruplPhoto: Kristin Hillery
  • Todd Nienkerk Partner Four Kitchens todd@fourkitchens.com Twitter: @toddrossPhoto: Kristin Hillery
  • Zach Meyer Designer and front-end developer SXSW zmeyer@gmail.com Twitter: @thescaryclownPhoto: Todd Nienkerk
  • 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 6.0.0+,Symbian OS 9.5+, Windows Mobile 6.5.3+
  • TECHNICALREQUIREMENTS 1 2 3 4 5 6Support modern browsersFirefox, Chrome, Safari, IE8, and IE9 (no IE6 or IE7!)
  • 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 archiving or deletion
  • ORIGINAL SITE MAP
  • NEW SITE MAPCredits
  • 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 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• 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.