SlideShare a Scribd company logo
1 of 76
Download to read offline
Big websites for small
 screens
 ICANN.org case study




Chris Ruppel, Todd Nienkerk, and Zach Meyer
DrupalCon Denver | March 20, 2012
Personal introductions
Chris Ruppel
                         Front-end and mobile developer
                         Four Kitchens

                         chris@fourkitchens.com

                         Twitter: @rupl




Photo: Kristin Hillery
Todd Nienkerk
                         Partner
                         Four Kitchens

                         todd@fourkitchens.com

                         Twitter: @toddross




Photo: Kristin Hillery
Zach Meyer
                       Designer and front-end developer
                       SXSW

                       zmeyer@gmail.com

                       Twitter: @thescaryclown




Photo: Todd Nienkerk
1   2   3   4




Business goals
BUSINESS GOALS   1   2   3   4   5   6




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




Update visual design
BUSINESS GOALS   1   2   3   4   5   6




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




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




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




Clearly, concisely explain what ICANN
is and why it matters
1   2   3   4




Technical requirements
TECHNICAL
REQUIREMENTS   1   2   3   4   5   6




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




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




Provide multilingual support
TECHNICAL
REQUIREMENTS   1   2   3   4   5   6




Migrate content without any change
to structure or broken URLs
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+
TECHNICAL
REQUIREMENTS    1      2      3     4      5      6




Support modern browsers
Firefox, Chrome, Safari, IE8, and IE9 (no IE6 or IE7!)
1   2   3   4




IA, 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 MAP




Credits
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   4




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

More Related Content

What's hot

Coldwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage SystemsColdwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage SystemsAngie Javier
 
Can Technology Innovation Save The New York Times?
Can Technology Innovation Save The New York Times?Can Technology Innovation Save The New York Times?
Can Technology Innovation Save The New York Times?C4Media
 
Drupal As A Jigsaw
Drupal As A JigsawDrupal As A Jigsaw
Drupal As A Jigsawnyccamp
 
Collaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment TechnologiesCollaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment TechnologiesMark Jhon Oxillo
 
Use your IBM Collaboration tools smarter to make your work less stressful
Use your IBM Collaboration tools smarter to make your work less stressfulUse your IBM Collaboration tools smarter to make your work less stressful
Use your IBM Collaboration tools smarter to make your work less stressfulRoland Driesen
 
Colaboration tools and digital presence ricardo aragon
Colaboration tools and digital presence ricardo aragonColaboration tools and digital presence ricardo aragon
Colaboration tools and digital presence ricardo aragonRicardo Aragon Cordeiro
 
Collaborative ict development
Collaborative ict developmentCollaborative ict development
Collaborative ict developmentmichaeljericho
 
Meet ThinkShout, Inc.
Meet ThinkShout, Inc.Meet ThinkShout, Inc.
Meet ThinkShout, Inc.Sean Larkin
 
SlideShare Presentation - Illa and Rogers
SlideShare Presentation - Illa and RogersSlideShare Presentation - Illa and Rogers
SlideShare Presentation - Illa and RogersChristopher Illa
 
WordPress for Nonprofits- TechTuesday
WordPress for Nonprofits- TechTuesdayWordPress for Nonprofits- TechTuesday
WordPress for Nonprofits- TechTuesdayTrish Perkins
 
Steven h. palaganas 2
Steven h. palaganas 2Steven h. palaganas 2
Steven h. palaganas 2MaridelBajeta
 
Holiday Wish List For Today's Technology Tools
Holiday Wish List For Today's Technology ToolsHoliday Wish List For Today's Technology Tools
Holiday Wish List For Today's Technology ToolsDoug Devitre
 
SharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersWendy Neal
 
1 2-1 lab for sept 2012
1 2-1 lab for sept 20121 2-1 lab for sept 2012
1 2-1 lab for sept 2012Sus_Schmitt
 
Intelligent use of social media 10th sept strode street - final for distrib...
Intelligent use of social media 10th sept   strode street - final for distrib...Intelligent use of social media 10th sept   strode street - final for distrib...
Intelligent use of social media 10th sept strode street - final for distrib...Get up to Speed
 
The IDM B2B Conference Social & Content Strategy 2012
The IDM B2B Conference Social & Content Strategy 2012The IDM B2B Conference Social & Content Strategy 2012
The IDM B2B Conference Social & Content Strategy 2012TheIDM
 
Florida REALTORS Association 2011 Winter Meetings
Florida REALTORS Association 2011 Winter MeetingsFlorida REALTORS Association 2011 Winter Meetings
Florida REALTORS Association 2011 Winter MeetingsDoug Devitre
 

What's hot (20)

Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Coldwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage SystemsColdwell Banker Propel Training - Introduction to Cloud Storage Systems
Coldwell Banker Propel Training - Introduction to Cloud Storage Systems
 
Can Technology Innovation Save The New York Times?
Can Technology Innovation Save The New York Times?Can Technology Innovation Save The New York Times?
Can Technology Innovation Save The New York Times?
 
Drupal As A Jigsaw
Drupal As A JigsawDrupal As A Jigsaw
Drupal As A Jigsaw
 
Collaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment TechnologiesCollaborative ICT Development - Empowerment Technologies
Collaborative ICT Development - Empowerment Technologies
 
Use your IBM Collaboration tools smarter to make your work less stressful
Use your IBM Collaboration tools smarter to make your work less stressfulUse your IBM Collaboration tools smarter to make your work less stressful
Use your IBM Collaboration tools smarter to make your work less stressful
 
Colaboration tools and digital presence ricardo aragon
Colaboration tools and digital presence ricardo aragonColaboration tools and digital presence ricardo aragon
Colaboration tools and digital presence ricardo aragon
 
Collaborative ict development
Collaborative ict developmentCollaborative ict development
Collaborative ict development
 
Meet ThinkShout, Inc.
Meet ThinkShout, Inc.Meet ThinkShout, Inc.
Meet ThinkShout, Inc.
 
Power four collaborative1
Power four collaborative1Power four collaborative1
Power four collaborative1
 
SlideShare Presentation - Illa and Rogers
SlideShare Presentation - Illa and RogersSlideShare Presentation - Illa and Rogers
SlideShare Presentation - Illa and Rogers
 
WordPress for Nonprofits- TechTuesday
WordPress for Nonprofits- TechTuesdayWordPress for Nonprofits- TechTuesday
WordPress for Nonprofits- TechTuesday
 
Steven h. palaganas 2
Steven h. palaganas 2Steven h. palaganas 2
Steven h. palaganas 2
 
Holiday Wish List For Today's Technology Tools
Holiday Wish List For Today's Technology ToolsHoliday Wish List For Today's Technology Tools
Holiday Wish List For Today's Technology Tools
 
SharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non DesignersSharePoint Usability and Design Tips for Non Designers
SharePoint Usability and Design Tips for Non Designers
 
1 2-1 lab for sept 2012
1 2-1 lab for sept 20121 2-1 lab for sept 2012
1 2-1 lab for sept 2012
 
Intelligent use of social media 10th sept strode street - final for distrib...
Intelligent use of social media 10th sept   strode street - final for distrib...Intelligent use of social media 10th sept   strode street - final for distrib...
Intelligent use of social media 10th sept strode street - final for distrib...
 
The IDM B2B Conference Social & Content Strategy 2012
The IDM B2B Conference Social & Content Strategy 2012The IDM B2B Conference Social & Content Strategy 2012
The IDM B2B Conference Social & Content Strategy 2012
 
Florida REALTORS Association 2011 Winter Meetings
Florida REALTORS Association 2011 Winter MeetingsFlorida REALTORS Association 2011 Winter Meetings
Florida REALTORS Association 2011 Winter Meetings
 
Meet drupal
Meet drupalMeet drupal
Meet drupal
 

Similar to Big Websites for Small Screens: ICANN.org Case Study

Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 Migration
Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 MigrationDrupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 Migration
Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 MigrationCyber-Duck
 
Delivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-CodeDelivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-CodeCyber-Duck
 
How Not to Be Conned by Your Drupal Vendor!
How Not to Be Conned by Your Drupal Vendor!How Not to Be Conned by Your Drupal Vendor!
How Not to Be Conned by Your Drupal Vendor!pixelonion
 
What is Drupal? An Introduction to Drupal 8
What is Drupal? An Introduction to Drupal 8What is Drupal? An Introduction to Drupal 8
What is Drupal? An Introduction to Drupal 8Suzanne Dergacheva
 
Drupal in the Jungle
Drupal in the JungleDrupal in the Jungle
Drupal in the Junglemalcolm_8
 
Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...
Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...
Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...Acquia
 
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage DesignNonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage DesignLacey Kruger
 
Webdirections conference - @media
Webdirections conference - @mediaWebdirections conference - @media
Webdirections conference - @mediaGlenn Cahill
 
Becoming A Technical Project Manager
Becoming A Technical Project ManagerBecoming A Technical Project Manager
Becoming A Technical Project ManagerScott Massey
 
You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web
You’ve Only Got Two Eyeballs: Designing Products for the Responsive WebYou’ve Only Got Two Eyeballs: Designing Products for the Responsive Web
You’ve Only Got Two Eyeballs: Designing Products for the Responsive WebDavid Sherwin
 
Untangling the web11
Untangling the web11Untangling the web11
Untangling the web11Derek Jacoby
 
Start Here: How to Prepare for Your Drupal 8 Journey
Start Here: How to Prepare for Your Drupal 8 JourneyStart Here: How to Prepare for Your Drupal 8 Journey
Start Here: How to Prepare for Your Drupal 8 JourneyAcquia
 
D7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyD7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyAcquia
 
USG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using DrupalUSG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using DrupalEric Sembrat
 
2019-Nov: Domain Driven Design (DDD) and when not to use it
2019-Nov: Domain Driven Design (DDD) and when not to use it2019-Nov: Domain Driven Design (DDD) and when not to use it
2019-Nov: Domain Driven Design (DDD) and when not to use itMark Windholtz
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013Marc D Anderson
 
How to run a global, cloud scale event for 10000 people
How to run a global, cloud scale event for 10000 peopleHow to run a global, cloud scale event for 10000 people
How to run a global, cloud scale event for 10000 peopleRobBos10
 
Cultural Change using Docker (DockerCon 2015)
Cultural Change using Docker (DockerCon 2015)Cultural Change using Docker (DockerCon 2015)
Cultural Change using Docker (DockerCon 2015)Thomas Shaw
 

Similar to Big Websites for Small Screens: ICANN.org Case Study (20)

Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 Migration
Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 MigrationDrupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 Migration
Drupal Webinar: Ignite and Accelerate Your Drupal 7 to Drupal 9 Migration
 
projectDocumentaion
projectDocumentaionprojectDocumentaion
projectDocumentaion
 
Delivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-CodeDelivering Fantastic Brand Experiences With Low-Code
Delivering Fantastic Brand Experiences With Low-Code
 
How Not to Be Conned by Your Drupal Vendor!
How Not to Be Conned by Your Drupal Vendor!How Not to Be Conned by Your Drupal Vendor!
How Not to Be Conned by Your Drupal Vendor!
 
What is Drupal? An Introduction to Drupal 8
What is Drupal? An Introduction to Drupal 8What is Drupal? An Introduction to Drupal 8
What is Drupal? An Introduction to Drupal 8
 
Drupal in the Jungle
Drupal in the JungleDrupal in the Jungle
Drupal in the Jungle
 
Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...
Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...
Integrating Drupal and Native Applications: The Story of the Elle Decor LookB...
 
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage DesignNonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
Nonprofit Homepage Design Slam - 10 tips for Effective Homepage Design
 
TEST TEST TEST
TEST TEST TESTTEST TEST TEST
TEST TEST TEST
 
Webdirections conference - @media
Webdirections conference - @mediaWebdirections conference - @media
Webdirections conference - @media
 
Becoming A Technical Project Manager
Becoming A Technical Project ManagerBecoming A Technical Project Manager
Becoming A Technical Project Manager
 
You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web
You’ve Only Got Two Eyeballs: Designing Products for the Responsive WebYou’ve Only Got Two Eyeballs: Designing Products for the Responsive Web
You’ve Only Got Two Eyeballs: Designing Products for the Responsive Web
 
Untangling the web11
Untangling the web11Untangling the web11
Untangling the web11
 
Start Here: How to Prepare for Your Drupal 8 Journey
Start Here: How to Prepare for Your Drupal 8 JourneyStart Here: How to Prepare for Your Drupal 8 Journey
Start Here: How to Prepare for Your Drupal 8 Journey
 
D7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copyD7 10 modules-in-20mins v2 copy
D7 10 modules-in-20mins v2 copy
 
USG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using DrupalUSG Summit - September 2014 - Web Management using Drupal
USG Summit - September 2014 - Web Management using Drupal
 
2019-Nov: Domain Driven Design (DDD) and when not to use it
2019-Nov: Domain Driven Design (DDD) and when not to use it2019-Nov: Domain Driven Design (DDD) and when not to use it
2019-Nov: Domain Driven Design (DDD) and when not to use it
 
SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013SEF 2014 - Responsive Design in SharePoint 2013
SEF 2014 - Responsive Design in SharePoint 2013
 
How to run a global, cloud scale event for 10000 people
How to run a global, cloud scale event for 10000 peopleHow to run a global, cloud scale event for 10000 people
How to run a global, cloud scale event for 10000 people
 
Cultural Change using Docker (DockerCon 2015)
Cultural Change using Docker (DockerCon 2015)Cultural Change using Docker (DockerCon 2015)
Cultural Change using Docker (DockerCon 2015)
 

More from Four Kitchens

No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...Four Kitchens
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screenFour Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Four Kitchens
 
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Four Kitchens
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalFour Kitchens
 
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Four Kitchens
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websitesFour Kitchens
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fontsFour Kitchens
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbookFour Kitchens
 
The Web Chef Cookbook
The Web Chef CookbookThe Web Chef Cookbook
The Web Chef CookbookFour Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Four Kitchens
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)Four Kitchens
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typographyFour Kitchens
 

More from Four Kitchens (20)

No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...No RFPs! Why requests for proposal are bad for business (and how we can stop ...
No RFPs! Why requests for proposal are bad for business (and how we can stop ...
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
Don't Design Websites. Design Web SYSTEMS! (BADCamp 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp LA 2011)
 
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
Accelerated grid theming using NineSixty (DrupalCamp LA 2011)
 
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
Don't Design Websites. Design Web SYSTEMS! (Dallas Drupal Days 2011)
 
Building Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with DrupalBuilding Responsive Websites and Apps with Drupal
Building Responsive Websites and Apps with Drupal
 
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
Accelerated grid theming using NineSixty (Dallas Drupal Days 2011)
 
Intro to Drush
Intro to DrushIntro to Drush
Intro to Drush
 
Teaching Drupal
Teaching DrupalTeaching Drupal
Teaching Drupal
 
Big Websites
Big WebsitesBig Websites
Big Websites
 
Designing future proof websites
Designing future proof websitesDesigning future proof websites
Designing future proof websites
 
Making drupal beautiful with web fonts
Making drupal beautiful with web fontsMaking drupal beautiful with web fonts
Making drupal beautiful with web fonts
 
The type revolutionary's cookbook
The type revolutionary's cookbookThe type revolutionary's cookbook
The type revolutionary's cookbook
 
The Web Chef Cookbook
The Web Chef CookbookThe Web Chef Cookbook
The Web Chef Cookbook
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCamp Stockholm 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Chicago 2011)
 
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
Don't Design Websites. Design Web SYSTEMS! (DrupalCon Copenhagen 2010)
 
The state of web typography
The state of web typographyThe state of web typography
The state of web typography
 

Recently uploaded

CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10uasjlagroup
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证nhjeo1gg
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一F La
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Servicejennyeacort
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Yantram Animation Studio Corporation
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIyuj
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...Rishabh Aryan
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档208367051
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degreeyuu sss
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in designnooreen17
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一diploma 1
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)jennyeacort
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一A SSS
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Nightssuser7cb4ff
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxmapanig881
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social MediaD SSS
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back17lcow074
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,Aginakm1
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书zdzoqco
 

Recently uploaded (20)

CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
 
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
 
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
 
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts ServiceCall Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
Call Girls in Ashok Nagar Delhi ✡️9711147426✡️ Escorts Service
 
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
 
How to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AIHow to Empower the future of UX Design with Gen AI
How to Empower the future of UX Design with Gen AI
 
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
 
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
 
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
原版美国亚利桑那州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
 
Design principles on typography in design
Design principles on typography in designDesign principles on typography in design
Design principles on typography in design
 
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
 
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
Call Us ✡️97111⇛47426⇛Call In girls Vasant Vihar༒(Delhi)
 
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
 
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full NightCall Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
 
Untitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptxUntitled presedddddddddddddddddntation (1).pptx
Untitled presedddddddddddddddddntation (1).pptx
 
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
 
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
 
shot list for my tv series two steps back
shot list for my tv series two steps backshot list for my tv series two steps back
shot list for my tv series two steps back
 
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
'CASE STUDY OF INDIRA PARYAVARAN BHAVAN DELHI ,
 
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
办理卡尔顿大学毕业证成绩单|购买加拿大文凭证书
 

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
  • 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
  • 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.
  • 27.
  • 28. HOME PAGE ➜ TABLETS
  • 29.
  • 30.
  • 31.
  • 32. HOME PAGE ➜ SMARTPHONES
  • 33.
  • 34.
  • 35.
  • 36.
  • 37. GROUPS SECTION ➜ DESKTOPS and LAPTOPS
  • 38.
  • 39.
  • 41.
  • 42.
  • 43. GROUPS SECTION ➜ SMARTPHONES
  • 44.
  • 45.
  • 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
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 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
  • 54.
  • 55.
  • 56. HOME PAGE ➜ TABLETS
  • 57.
  • 58.
  • 59.
  • 60. HOME PAGE ➜ SMARTPHONES
  • 61.
  • 62.
  • 63.
  • 64.
  • 65. 1 2 3 4 Implementing a responsive design
  • 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
  • 69.
  • 70.
  • 72.
  • 73.
  • 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.