Topsy Turvy Design: Adapting your design process for adaptive layout

1,033 views
973 views

Published on

Slides from my talk at Front End Conference, Oslo 2011

Published in: Design, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,033
On SlideShare
0
From Embeds
0
Number of Embeds
281
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Topsy Turvy Design: Adapting your design process for adaptive layout

    1. 1. IopsyTurvyDesign Adapting your design process for adaptive design @richquick Background texture thanks to ~Essence of a Dream~ http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/
    2. 2. IopsyTurvyDesign Adapting your design process for adaptive design Background texture thanks to ~Essence of a Dream~ http://www.flickr.com/photos/30886604@N04/3564381283/sizes/l/in/photostream/
    3. 3. Who am I?
    4. 4. Rich Quick
    5. 5. Rich Quick(before you ask)
    6. 6. Yes(it is my real name)
    7. 7. Here’s my passport to prove it
    8. 8. WebDesigner
    9. 9. Front endDeveloper
    10. 10. 12Years
    11. 11. Just started working for
    12. 12. Very traditional site
    13. 13. Very traditional siteDesigned for desktop
    14. 14. Very traditional siteDesigned for desktopTraditional design process
    15. 15. Very traditional siteDesigned for desktopTraditional design processLooks “so so”
    16. 16. TheTraditionalDesignProcess
    17. 17. The
    18. 18. The Traditional Design Process
    19. 19. The Traditional Design Process 1 Big FatCheque http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/
    20. 20. 2 Have a lattehttp://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/
    21. 21. s
    22. 22. Do some wireframes 3
    23. 23. Do some wireframes 3 (maybe)http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/
    24. 24. Do some wireframes 3
    25. 25. Do some wireframes 3
    26. 26. Do some wireframes 3
    27. 27. Do some wireframes 3
    28. 28. 4Give to the(ultra cool) designer
    29. 29. Who does some Photoshop magic
    30. 30. 5Then the client / your boss sees it
    31. 31. 5Then the client / your boss sees it and loves it 1 st TIME
    32. 32. 5Then the client / your boss sees it and loves it 91st TIME
    33. 33. 6Next, the design gets handed over to this guy
    34. 34. 6 The geek* / techie* / HTML monkey** delete as applicable
    35. 35. He* does a load of geekytechienerdy stuff * It a he, obviously.
    36. 36. 7 Big Fat FinalCheque
    37. 37. 1 Big fat deposit cheque2 Have a latte 3 Do some wireframes4 Photoshop comps 5 Sign off6 HTML Monkey does voodoo 7 Big fat final cheque
    38. 38. 1 Big fat deposit cheque2 Have a latte 3 Do some wireframes4 Photoshop comps 5 Sign off6 HTML Monkey does voodoo 7 Big fat final cheque
    39. 39. Traditional Print Process
    40. 40. Big fat deposit cheque 1 Have a latte cappuccino 2 Do some wireframes 3 Photoshop Indesign comps 4 Sign off 5HTML Monkey Printer does voodoo 6 Big fat final cheque 7
    41. 41. 1 2 3 5 4 6 7
    42. 42. WHY?
    43. 43. CHANGE
    44. 44. DONʼT MAKE MECHANGE
    45. 45. THE MORE YOUASK PEOPLE TOCHANGE
    46. 46. THE LESS OF THEMWILL
    47. 47. var ageOfWebDesignProcess; // in yearsif (webDesignProcess == printDesignProcess) { echo(‘wtf!’); ageOfWebDesignProcess = 572;}
    48. 48. PEOPLE HATE CHANGETHAT MUCH }
    49. 49. Web Designers
    50. 50. Get asked to changemore than most
    51. 51. First I learnt tables.. then that was wrongThen I learnt Flash.. then that wasnʼt coolThen I learnt CSS..Then it was accessibility..Then it was XHTML..Then it was HTML5..Now what?!!
    52. 52. Adaptive Web Design** or responsive, depending on what book you read
    53. 53. Aww crap!
    54. 54. can I be bothered?
    55. 55. some good news
    56. 56. some good news
    57. 57. itʼs really easy
    58. 58. there’s just 1 thing you need to learn
    59. 59. Media Queries@media screen and (min-width:1025px) { /* your CSS here */}
    60. 60. That’s it (pretty much)
    61. 61. At least from atechnical point of view
    62. 62. From atechnical point of view Learn 1 line of code and you know how to do adaptive design
    63. 63. From atechnical point of view Learn 1 line of code and you know how to do adaptive design
    64. 64. From adesign point of view It doesnʼt need to be much harder
    65. 65. There’s no wrong or rightway to do adaptive design But hereʼs how I do it...
    66. 66. Remember the cutleryin Titanic?
    67. 67. No?
    68. 68. Just start from the outside, Jack, and work in
    69. 69. Just start from the outside, Jack, and work in
    70. 70. Start inthe “traditional” way
    71. 71. Cheque, latte,wireframes,Photoshop
    72. 72. Then ask “what if”?
    73. 73. “What if it wasa bit thinner?”
    74. 74. “What if it was thinner still?”
    75. 75. When youʼre designingStart from the outside and work in
    76. 76. When youʼre designingStart from the outside and work in
    77. 77. When codingStart from the inside and work out
    78. 78. It’s way easierand there’s a hidden IE gift
    79. 79. Codethinnestfirst
    80. 80. Then codeoutwards
    81. 81. Gracefully degrade your designProgressively enhance your code
    82. 82.  A word about IE
    83. 83. IE <8 doesn’t support @mediaUse conditional commentsor javascript (modernizr.js, css3-media-queries.js) http://code.google.com/p/css3-mediaqueries-js/
    84. 84. Learn to let go Safari, Chrome, Firefox, Opera, your fridge IE
    85. 85. The IEGift
    86. 86. jQuery
    87. 87. Books Adaptive Web Design Aaron Gustafson Responsive Web Design Ethan Marcote
    88. 88. Thanks Rich Quick @richquickrich@richquick.tv

    ×