Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Realistic responsive design - Responsive Day Ou...

Realistic responsive design - Responsive Day Out 2014

How can you make your website, or websites, responsive, when you don't have the luxury of starting from scratch?

Inayaili de León

June 27, 2014
Tweet

More Decks by Inayaili de León

Other Decks in Design

Transcript

  1. Grid to percentages Style guide Responsive grid prototype Canonical.com project

    Ubuntu Insights project Responsive release DEC 2012 AUG APR DEC FEB 2014 OCT JUN FEB 2013 APR JUN Design and font end sprint Web team scoping Blogging Responsive navigation Slowly, slowly
  2. ✓ Same content ✓ Same information architecture ✓ Same visual

    direction ✓ Existing large screen design
  3. To do: 1. Create style guide 2. Clean up CSS

    3. Convert grid to percentages 4. Create responsive grid prototype 5. Page-by-page estimate 6. Update image assets 7. Prototype responsive navigation 8. Update style guide document
  4. 17% APPLE IPAD 13% APPLE IPHONE 3% GOOGLE NEXUS 7

    3% LG NEXUS 5 2% GOOGLE NEXUS 4 2% SAMSUNG GALAXY S3 1% SAMSUNG GALAXY S4 …