Topsy Turvy Design: Adapting your design process for adaptive layout
•Télécharger en tant que KEY, PDF•
0 j'aime•709 vues
Slides from my talk at Front End Conference, Oslo 2011
Recommandé
Contenu connexe
Tendances
Tendances (10)
Similaire à Topsy Turvy Design: Adapting your design process for adaptive layout
Similaire à Topsy Turvy Design: Adapting your design process for adaptive layout (20)
Dernier
Dernier (20)
Topsy Turvy Design: Adapting your design process for adaptive layout
- 1. Iopsy Turvy Design 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. Iopsy Turvy Design 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. Who am I?
- 4. Rich Quick
- 5. Rich Quick (before you ask)
- 6. Yes (it is my real name)
- 7. Here’s my passport to prove it
- 8. Web Designer
- 10. 12 Years
- 11. Just started working for
- 16. Very traditional site Designed for desktop
- 17. Very traditional site Designed for desktop Traditional design process
- 18. Very traditional site Designed for desktop Traditional design process Looks “so so”
- 21. The
- 22. The Traditional Design Process
- 23. The Traditional Design Process 1 Big Fat Cheque http://www.flickr.com/photos/nznationalparty/6078616366/sizes/z/in/photostream/
- 24. 2 Have a latte http://www.designfloat.com/blog/2010/07/21/latte-art-charming-coffee-designs-part-ii/
- 27. s
- 28. Do some wireframes 3
- 29. Do some wireframes 3 (maybe) http://www.flickr.com/photos/rohdesign/3307873748/sizes/m/in/photostream/
- 30. Do some wireframes 3
- 31. Do some wireframes 3
- 32. Do some wireframes 3
- 33. Do some wireframes 3
- 35. 4 Give to the (ultra cool) designer
- 36. Who does some Photoshop magic
- 37. 5 Then the client / your boss sees it
- 38. 5 Then the client / your boss sees it and loves it 1 st TIME
- 39. 5 Then the client / your boss sees it and loves it 91st TIME
- 40. 6 Next, the design gets handed over to this guy
- 41. 6 The geek* / techie* / HTML monkey* * delete as applicable
- 42. He* does a load of geekytechienerdy stuff * It a he, obviously.
- 43. 7 Big Fat Final Cheque
- 44. 1 Big fat deposit cheque 2 Have a latte 3 Do some wireframes 4 Photoshop comps 5 Sign off 6 HTML Monkey does voodoo 7 Big fat final cheque
- 45. 1 Big fat deposit cheque 2 Have a latte 3 Do some wireframes 4 Photoshop comps 5 Sign off 6 HTML Monkey does voodoo 7 Big fat final cheque
- 47. Traditional Print Process
- 49. Big fat deposit cheque 1 Have a latte cappuccino 2 Do some wireframes 3 Photoshop Indesign comps 4 Sign off 5 HTML Monkey Printer does voodoo 6 Big fat final cheque 7
- 50. 1 2 3 5 4 6 7
- 51. WHY?
- 52. CHAN GE
- 54. THE MORE YOU ASK PEOPLE TO CHANGE
- 55. THE LESS OF THEM WILL
- 56. var ageOfWebDesignProcess; // in years if (webDesignProcess == printDesignProcess) { echo(‘wtf!’); ageOfWebDesignProcess = 572; }
- 57. PEOPLE HATE CHANGE THAT MUCH }
- 58. Web Designers
- 59. Get asked to change more than most
- 60. First I learnt tables.. then that was wrong Then I learnt Flash.. then that wasnʼt cool Then I learnt CSS.. Then it was accessibility.. Then it was XHTML.. Then it was HTML5.. Now what?!!
- 61. Adaptive Web Design* * or responsive, depending on what book you read
- 63. Aww crap!
- 64. can I be bothered?
- 65. some good news
- 66. some good news
- 67. itʼs really easy
- 68. there’s just 1 thing you need to learn
- 69. Media Queries @media screen and (min-width:1025px) { /* your CSS here */ }
- 70. That’s it (pretty much)
- 71. At least from a technical point of view
- 72. From a technical point of view Learn 1 line of code and you know how to do adaptive design
- 73. From a technical point of view Learn 1 line of code and you know how to do adaptive design
- 74. From a design point of view It doesnʼt need to be much harder
- 75. There’s no wrong or right way to do adaptive design But hereʼs how I do it...
- 76. Remember the cutlery in Titanic?
- 77. No?
- 78. Just start from the outside, Jack, and work in
- 79. Just start from the outside, Jack, and work in
- 80. Start in the “traditional” way
- 81. Cheque, latte, wireframes, Photoshop
- 82. Then ask “what if”?
- 83. “What if it was a bit thinner?”
- 84. “What if it was thinner still?”
- 86. When youʼre designing Start from the outside and work in
- 87. When youʼre designing Start from the outside and work in
- 89. When coding Start from the inside and work out
- 90. It’s way easier and there’s a hidden IE gift
- 92. Then code outwards
- 93. Gracefully degrade your design Progressively enhance your code
- 94. A word about IE
- 95. IE <8 doesn’t support @media Use conditional comments or javascript (modernizr.js, css3-media-queries.js) http://code.google.com/p/css3-mediaqueries-js/
- 96. Learn to let go Safari, Chrome, Firefox, Opera, your fridge IE
- 97. The IE Gift
- 98. jQuery
- 99. Books Adaptive Web Design Aaron Gustafson Responsive Web Design Ethan Marcote
- 100. Thanks Rich Quick @richquick rich@richquick.tv
Notes de l'éditeur
- \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