Responsive Design & Mobile First

9,238 views
9,017 views

Published on

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

Published in: Design
4 Comments
41 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
9,238
On SlideShare
0
From Embeds
0
Number of Embeds
223
Actions
Shares
0
Downloads
362
Comments
4
Likes
41
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×