Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Design  & Mobile First     @lukebrooker
There is anew movementon the web
We have becomecomfortable
We assume everythingcan be served on a960px wide canvas
We are notprint designers...
We areWeb Designers!
“Today, anything that’s fixed and unresponsive isn’tweb design, it’s something else. If you don’t embracethe inherent fluidi...
We need to move fromprescribed design toresponsive design.
The Stats
The growth of themobile web has outpaced the desktop web8x
Smartphone saleshave surpasseddesktop sales
1 in 5use the mobile Interneteveryday
The average time spenta day on smartphonesis more than30mins
In the next 4 yearsmobile Internet usagewill increaseby a factor of 26
But...
Responsive design isnot mobile design
About 87,000 iPadsare sold a day
Add to this - 170,000iPhones bought a dayand 300,000android devicesactivated a day
That’s557,000new portable devicesa day
We have morescreens to design forthan ever320 X     768   1280480     X      X      1024    800   1920                    ...
We need torethink
Responsive Designis flexible deviceindependent design forthe web
OR...A flexible grid (with flexible images)that incorporates media queries to createa responsive, adaptive layout.Ethan Marc...
1. Flexible Grids
1. Flexible GridsFontsbody { font-size: 100%;}
1. Flexible GridsFontsh2 { font-size: 28px;}p { font-size: 14px;}
1. Flexible GridsFonts... Becomesh2 { font-size: 1.75em;   /* 28px/16px */}p { font-size: .875em;   /* 14px/16px */}
1. Flexible GridsLayoutsection { width: 960px;}
1. Flexible GridsLayout... Becomessection { max-width: 960px;}
1. Flexible GridsLayoutfigure { float: left; width: 300px; margin: 0 10px;}
1. Flexible GridsLayout... Becomesfigure { float: left; width: 31.25%; /* 300px   / 960px */ margin: 0 1.0416667;}
2. Flexible Images
2. Flexible Imagesimg {}
2. Flexible Imagesimg { max-width: 100%;}
2. Flexible Imagesimg,video,object { max-width: 100%;}
2. Flexible ImagesIssue #1: IE6 Bugimg,video,object { width: 100%;}
2. Flexible ImagesIssue #2: Windows Image ResizingEthan Marcottes Fixhttp://unstoppablerobotninja.com/entry/fluid-images
2. Flexible ImagesIssue #3: BandwidthFilament Fixhttp://github.com/filamentgroup/responsive-images
3. Media Queries
3. Media Queries@media screen and (max-width:320px;) { ...}@media screen and (min-width:800px;) { ...}
3. Media QueriesIssue #1: Browser CompatabilityNo IE 8,7,6No Safari 2No Firefox 1,2So..http://code.google.com/p/css3-media...
3. Media QueriesIssue #2: Mobile Resizing<meta name=”viewport”content”width=device-width:initial-scale=1.0”>
After all this our site willadapt to differentsizes
So where doesmobile firstcome in?
What is great aboutmobile websites?
Thecontentis in your face
What isMobile First?
Designing your site formobile...first.yep thats it.
Really it iscontent first
Reasons to design formobile first
1. Growth Opportunity2. Constraints Focus3. Capabilities Innovation
1. Growth OpportunityEveryone is on mobile
2. Constraints Focus
2. Constraints Focus"Design is the process of gradually applyingconstraints until an elegant solution remains"
2. Constraints Focus • Screen Size - 320 x 480
2. Constraints Focus • Screen Size - 320 x 480 • No Hover
2. Constraints Focus • Screen Size - 320 x 480 • No Hover • Speed
2. Constraints Focus • Screen Size - 320 x 480 • No Hover • Speed • Context
3. Capabilities Innovation
3. Capabilities Innovation • Touch
3. Capabilities Innovation • Touch • Location
3. Capabilities Innovation • Touch • Location • Orientation
3. Capabilities Innovation • Touch • Location • Orientation • Voice
3. Capabilities Innovation • Touch • Location • Orientation • Voice • And more
Implementing it
Its not your standardworkflow
Create FlowUse Storyboards
Designin the browser
Iterate
Frameworks320 and Up - Andy Clarkehttp://stuffandnonsense.co.uk/projects/320andup/
Exampleshttp://mediaqueri.es/http://yiibu.com/http://hicksdesign.co.uk/http://brightondigitalfestival.co.uk/http://thinkvi...
Thank You    @lukebrooker
Responsive Design & Mobile First
Responsive Design & Mobile First
Responsive Design & Mobile First
Responsive Design & Mobile First
Responsive Design & Mobile First
Responsive Design & Mobile First
Upcoming SlideShare
Loading in …5
×

Responsive Design & Mobile First

9,704 views

Published on

How to implement responsive design and designing for mobile first into your workflow.

Published in: Design
  • Hi, great job, there is a mistake page 42 : content=
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi, great job, there is a mistake page 42 : content='
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi, great job, there is a mistake page 42 : content='
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi, great job, there is a mistake page 42 : content='
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Design & Mobile First

  1. 1. Responsive Design & Mobile First @lukebrooker
  2. 2. There is anew movementon the web
  3. 3. We have becomecomfortable
  4. 4. We assume everythingcan be served on a960px wide canvas
  5. 5. We are notprint designers...
  6. 6. We areWeb Designers!
  7. 7. “Today, anything that’s fixed and unresponsive isn’tweb design, it’s something else. If you don’t embracethe inherent fluidity of the web, you’re not a webdesigner, you’re something else.Web design is responsive design, Responsive WebDesign is web design, done right.” Andy Clarke
  8. 8. We need to move fromprescribed design toresponsive design.
  9. 9. The Stats
  10. 10. The growth of themobile web has outpaced the desktop web8x
  11. 11. Smartphone saleshave surpasseddesktop sales
  12. 12. 1 in 5use the mobile Interneteveryday
  13. 13. The average time spenta day on smartphonesis more than30mins
  14. 14. In the next 4 yearsmobile Internet usagewill increaseby a factor of 26
  15. 15. But...
  16. 16. Responsive design isnot mobile design
  17. 17. About 87,000 iPadsare sold a day
  18. 18. Add to this - 170,000iPhones bought a dayand 300,000android devicesactivated a day
  19. 19. That’s557,000new portable devicesa day
  20. 20. We have morescreens to design forthan ever320 X 768 1280480 X X 1024 800 1920 X 1200
  21. 21. We need torethink
  22. 22. Responsive Designis flexible deviceindependent design forthe web
  23. 23. OR...A flexible grid (with flexible images)that incorporates media queries to createa responsive, adaptive layout.Ethan Marcotte
  24. 24. 1. Flexible Grids
  25. 25. 1. Flexible GridsFontsbody { font-size: 100%;}
  26. 26. 1. Flexible GridsFontsh2 { font-size: 28px;}p { font-size: 14px;}
  27. 27. 1. Flexible GridsFonts... Becomesh2 { font-size: 1.75em; /* 28px/16px */}p { font-size: .875em; /* 14px/16px */}
  28. 28. 1. Flexible GridsLayoutsection { width: 960px;}
  29. 29. 1. Flexible GridsLayout... Becomessection { max-width: 960px;}
  30. 30. 1. Flexible GridsLayoutfigure { float: left; width: 300px; margin: 0 10px;}
  31. 31. 1. Flexible GridsLayout... Becomesfigure { float: left; width: 31.25%; /* 300px / 960px */ margin: 0 1.0416667;}
  32. 32. 2. Flexible Images
  33. 33. 2. Flexible Imagesimg {}
  34. 34. 2. Flexible Imagesimg { max-width: 100%;}
  35. 35. 2. Flexible Imagesimg,video,object { max-width: 100%;}
  36. 36. 2. Flexible ImagesIssue #1: IE6 Bugimg,video,object { width: 100%;}
  37. 37. 2. Flexible ImagesIssue #2: Windows Image ResizingEthan Marcottes Fixhttp://unstoppablerobotninja.com/entry/fluid-images
  38. 38. 2. Flexible ImagesIssue #3: BandwidthFilament Fixhttp://github.com/filamentgroup/responsive-images
  39. 39. 3. Media Queries
  40. 40. 3. Media Queries@media screen and (max-width:320px;) { ...}@media screen and (min-width:800px;) { ...}
  41. 41. 3. Media QueriesIssue #1: Browser CompatabilityNo IE 8,7,6No Safari 2No Firefox 1,2So..http://code.google.com/p/css3-mediaqueries-js
  42. 42. 3. Media QueriesIssue #2: Mobile Resizing<meta name=”viewport”content”width=device-width:initial-scale=1.0”>
  43. 43. After all this our site willadapt to differentsizes
  44. 44. So where doesmobile firstcome in?
  45. 45. What is great aboutmobile websites?
  46. 46. Thecontentis in your face
  47. 47. What isMobile First?
  48. 48. Designing your site formobile...first.yep thats it.
  49. 49. Really it iscontent first
  50. 50. Reasons to design formobile first
  51. 51. 1. Growth Opportunity2. Constraints Focus3. Capabilities Innovation
  52. 52. 1. Growth OpportunityEveryone is on mobile
  53. 53. 2. Constraints Focus
  54. 54. 2. Constraints Focus"Design is the process of gradually applyingconstraints until an elegant solution remains"
  55. 55. 2. Constraints Focus • Screen Size - 320 x 480
  56. 56. 2. Constraints Focus • Screen Size - 320 x 480 • No Hover
  57. 57. 2. Constraints Focus • Screen Size - 320 x 480 • No Hover • Speed
  58. 58. 2. Constraints Focus • Screen Size - 320 x 480 • No Hover • Speed • Context
  59. 59. 3. Capabilities Innovation
  60. 60. 3. Capabilities Innovation • Touch
  61. 61. 3. Capabilities Innovation • Touch • Location
  62. 62. 3. Capabilities Innovation • Touch • Location • Orientation
  63. 63. 3. Capabilities Innovation • Touch • Location • Orientation • Voice
  64. 64. 3. Capabilities Innovation • Touch • Location • Orientation • Voice • And more
  65. 65. Implementing it
  66. 66. Its not your standardworkflow
  67. 67. Create FlowUse Storyboards
  68. 68. Designin the browser
  69. 69. Iterate
  70. 70. Frameworks320 and Up - Andy Clarkehttp://stuffandnonsense.co.uk/projects/320andup/
  71. 71. Exampleshttp://mediaqueri.es/http://yiibu.com/http://hicksdesign.co.uk/http://brightondigitalfestival.co.uk/http://thinkvitamin.com/
  72. 72. Thank You @lukebrooker

×