Responsive Web Design Workshop

An introduction to responsive web design, with lots of examples, tools and frameworks.

My deck from a Responsive Web Design Workshop which included two walkthroughs on responsive web designs (not included in the deck because, well, you had to be there!)

http://mulley.ie/blog/2013/05/responsive-web-design-training-course/

Transcript

1. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Workshop: Responsive Web Design Stewart Curry
2. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Who is This Guy? Web Designer for 15 years or so Table-based layouts & spacer gifs CSS changed all that RWD is how the web was meant to be woop.ie - iteration, modules, themes, templates
3. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 960px so long
4. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
5. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
6. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Caveat "[I do not] carry such information in my mind since it is readily available in books." Albert Einstein, when asked what the speed of sound was
7. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
8. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
9. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
10. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
11. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Responsive web design We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them / ETHAN MARCOTTE
12. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://alistapart.com/article/responsive-web-design
13. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Definition Responsive web design means designing your website so that it responds to your users environment based on screen- size, platform and orientation.
14. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Definition It looks di erent and things jiggle around, scale, re-order, appear, and disappear so it works well in your browser size or whatever device you’re using to view it...
15. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Advantages • Easier to Manage no mobile version, faster to update, single URL for Google, less to manage • One site, many devices • Respects your visitors The best experience for their device
16. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Key Components • Fluid, proportion-based grids % widths and em units, not fixed pixels • Flexible images width/height not fixed • CSS3 Media Queries @media rule
17. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 New Thinking • Work on everything Design for many sizes at once • Clean design reduce clutter, essential content only • Design from the content out Let content decide breakpoints
18. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 New Thinking • Design is how it works Not how it looks • Less Graphic files CSS gradients, font icons • Keep learning Responsive images? Polyfills?
19. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 *actually* from a non-linear, non-subjective viewpoint - it's more like a big ball of wibbly wobbly... time-y wimey... stu . “ ”
20. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
21. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Key Components • Fluid, proportion-based grids % widths and em units, not fixed pixels • Flexible images width/height not fixed • CSS3 Media Queries @media rule
22. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids Scales to the width of the browser / device
23. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids
24. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids
25. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids
26. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Fluid Grids .row { padding-left: 2%; } .col { float: left; margin:0 2% 0 0; } .col:last-child { margin: 0; } .span-1 { width: 23%; } .span-2 { width: 48%; }
27. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images Scales to the width of the browser / device
28. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images Blue bottle food truck street art, direct trade cosby sweater ethical hoodie hashtag american apparel. Wayfarers selvage pour-over swag, etsy next level meh Austin polaroid beard wolf irony squid PBR. DIY synth post-ironic 8-bit polaroid typewriter, vice cliche fixie pug retro direct trade lomo. Tonx fap wes anderson, cred pinterest street art retro fashion axe.
29. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images Blue bottle food truck street art, direct trade cosby sweater ethical hoodie hashtag american apparel. Wayfarers selvage pour-over swag, etsy next level meh Austin polaroid beard wolf irony squid PBR. DIY synth post-ironic 8-bit polaroid typewriter, vice cliche fixie pug retro direct trade lomo. Tonx fap wes anderson, cred pinterest street art retro fashion axe.
30. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images Blue bottle food truck street art, direct trade cosby sweater ethical hoodie hashtag american apparel. Wayfarers selvage pour-over swag, etsy next level meh Austin polaroid beard wolf irony squid PBR. DIY synth post-ironic 8-bit polaroid typewriter, vice cliche fixie pug retro direct trade lomo. Tonx fap wes anderson, cred pinterest street art retro fashion axe.
31. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexible Images img { max-width: 100%;} < img src="kitten.jpg" /> <!-- [if lte IE 6]> img { width: 100%;} + AlphaImageLoader
32. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries Specific styles for certain sizes and ranges
33. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries External < link rel="stylesheet" media="screen and ( max-width: 500px )" href="mobile.css" > < link rel="stylesheet" media="screen and ( max-width: 800px )" href="tablet.css" > < link rel="stylesheet" media="screen and ( min-width: 1000px )" href="desktop.css" >
34. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries Same file @media screen and ( max-width: 500px ) @media screen and ( min-width: 800px ) @media screen and ( min-width: 500px ) and ( max-width: 800px )
35. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries Devices @media ( -webkit-min-device-pixel-ratio: 2 ) , ( min-resolution: 192dpi ) @media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) @media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) and ( orientation: landscape )
36. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ }
37. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ } This is for screen only (desktops, smartphones, not print)
38. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ } The width of the window must be AT LEAST 500px
39. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { /* CSS declarations */ } The width of the window must ALSO be NO MORE THAN 800px
40. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Media Queries @media screen and ( min-width: 500px ) and ( max-width: 800px ) { img { border: 5px solid # f; } } Images will have a white border when the window is from 500px to 800px wide
41. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
42. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Design Pattern a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design
43. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Layouts http://www.lukew.com/ /entry.asp?1514 Luke Wroblewski
44. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mostly Fluid
45. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Column Drop
46. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Layout Shifter
47. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Off Canvas
48. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Navigation http://bradfrost.github.io/this-is-responsive/ patterns.html Brad Frost
49. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Toggle Navigation Home About Location Services Contact Us Home About Location Services Contact Us Menu. Menu.
50. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 <select> Navigation Home About Location Services Contact Us
51. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Footer Navigation Home About Location Services Contact Us Menu. Home About Location Services Contact Us
52. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Stacked Top Links Navigation Home About Location Services Contact Us Home About Location Services Contact Us
53. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Left Nav Flyout Home About Location Services Contact Us Menu Echo Park chambray 90's fap cardigan keffiyeh, trust fund retro Truffaut next level. Lomo forage pop-up Neutra, fashion axe sustainable keffiyeh helvetica DIY. Fashion axe Neutra craft beer four loko helvetica. American apparel sustainable kale chips Etsy, photo booth VHS shabby chic. Home About Location Services Contact Us Home About Location Services Contact Us Menu Echo Park chambray 90's fap cardigan keffiyeh, trust fund retro Truffaut next level. Lomo forage pop-up Neutra, fashion axe sustainable keffiyeh helvetica DIY. Fashion axe Neutra craft beer four loko helvetica. American apparel sustainable kale chips Etsy, photo booth VHS shabby chic.
54. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Priority+ Navigation Home About Location Services Contact Us Home Location More
55. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Priority+ Navigation Home About ▼ Location ▼ Services ▼ Contact Us Service 1 Service 2 Service 3 Home About + Location + Services - Service 1 Service 2 Service 3 Contact Us
56. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Order Shift http://bradfrost.github.io/this-is-responsive/ patterns.html Brad Frost
57. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Source Order (table display) Home About Location Services Contact Us Home About Location Services Contact Us Lorem ipsum dolor sit amet Consectetur adipiscing elit. Sed vel vehicula justo, et vestibulum erat. Maecenas sagittis volutpat molestie. Integer tortor mi, egestas et tristique quis, tempus nec diam Lorem ipsum dolor sit amet Consectetur adipiscing elit. Sed vel vehicula justo, et vestibulum erat. Maecenas sagittis volutpat molestie. Integer tortor mi, egestas et 2nd in source 1st in source 2nd in source 1st in source
58. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Patterns Order Shift http://www.jordanm.co.uk/lab/ contentchoreography Jordan Moore
59. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Flexbox #logo #menu #content #leftnav #footer 1 2 3 4 5 #logo #menu #content #leftnav #footer 1 2 3 4 5 1 2 3 4 5
60. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
61. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Editorial
62. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.bostonglobe.com
63. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.time.com/time/
64. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.vogue.co.uk
65. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.esquire.co.uk
66. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.smashingmagazine.com
67. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://sportsbant.com
68. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://thegreatdiscontent.com
69. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Commerce
70. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://skinnyties.com
71. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://us.illyissimo.com
72. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Corporate
73. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://riothq.com
74. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.microsoft.com/en-us/default.aspx
75. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://worldwildlife.org
76. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://disney.com
77. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Travel/Tourism
78. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://niarchive.org/trails/plantation-rewriting-the-story/
79. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://beta.tfl.gov.uk/
80. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.flytodublin.com/
81. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Examples Government
82. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 https://www.gov.uk
83. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.manchester.gov.uk
84. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://www.fsai.ie
85. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://mediaqueri.es for more inspiration
86. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
87. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Example Responsive Restaurant Website
88. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
89. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
90. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 What about...? Older Browsers
91. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 IE Only Stylesheet <!--[if lt IE 9]> < link rel="stylesheet" media="screen" href="ie.css" > <![endif]-->
92. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Conditional Classes <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 8]> <!--> <html class=""> <!--<![endif]-->
93. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Detect Features http://modernizr.com/ Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications... ...what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
94. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Shims, Shivs & Polyfills HTML5 Shim https://code.google.com/p/html5shim/ CSS3 Media Queries Shim https://code.google.com/p/css3- mediaqueries-js/ https://github.com/Modernizr/Modernizr/ wiki/HTML5-Cross-Browser-Polyfills
95. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
96. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 + html5 shiv + ie.css
97. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
98. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 What about...? An existing design
99. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 target ÷ context = result required font size container’s font size desired font size
100. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Set base size body { font-size : 100%; } Base font size: 16px; 1em = 16px http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
101. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 24 ÷ 16 = 1.5 required font size (em) container’s font size (px) desired font size (px)
102. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
103. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
104. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
105. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
106. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Approaches • Mobile First and add styles and breakpoints • Adaptive Web Design predefined screensizes • Multiple Grids di erent grids for di erent breakpoints (gridsetapp for example)
107. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Approaches • Small is Special Unique case for <480px (ish) • Device Detection widths, assumptions, scripts, resolutions • Frameworks pre-built grids and modules
108. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Start with the small screen first, then expand until it looks like shit. TIME FOR A BREAKPOINT! “ ” @stephenhay
109. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Working with Images Some things to consider
110. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Art Direction
111. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Retina Backgrounds .box { background: url ('images/box-bg.png') no-repeat top left; } @media screen and ( -webkit-min-device-pixel-ratio: 2 ) , ( min- resolution: 192dpi ) { .box { background: url ('images/box-bg@2x.png') no-repeat top left; background-size: 200px 200px; } }
112. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Multiple Images • Clown Car Technique (svg file, swap images as backgrounds) • Picture Polyfill https://github.com/scottjehl/picturefill • 8 guidelines and 1 rule http://blog.cloudfour.com/8-guidelines- and-1-rule-for-responsive-images/
113. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
114. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://goldengridsystem.com/
115. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://goldilocksapproach.com/demo/
116. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://responsive.gs/
117. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://gumbyframework.com/
118. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://foundation.zurb.com
119. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://twitter.github.io/bootstrap/
120. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://purecss.io/
121. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
122. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 https://gridsetapp.com
123. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
124. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://typecast.com
125. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://typecast.com
126. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://sass-lang.com
127. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://mattkersley.com/responsive/
128. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://responsive.is/
129. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://ami.responsivedesign.is/
130. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://lab.maltewassermann.com/viewport-resizer/
131. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://html.adobe.com/edge/reflow/
132. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 TOPICS • What is RWD? • How it works • Design Patterns in RWD • Some good examples • Walkthrough making a responsive website • Some di erent approaches • Some useful frameworks • Some useful tools • Designing for RWD
133. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mockups? • Time consuming too many variations • Untested get on devices sooner rather than later • Waterfall be agile!
134. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Mood boards When trying to convey a design idea, moods, feelings and flu y stu like that are hard to communicate ... designers will often use a mood board: a collection of textures, images and text related to a design theme as a reference point. http://www.creativebloq.com/graphic-design/mood-boards-812470
135. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mood boards
136. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Mood boards
137. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 www.evernote.com
138. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 gimmebar.com
139. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 www.realmacsoftware.com/littlesnapper/
140. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Style tiles An interior designer doesn't design three di erent rooms for a client at the first kick-o meeting, so why do Web designers design three di erent webpage mockups?
141. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Style tiles Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
142. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 http://styletil.es
143. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Style tiles
144. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 “ Prototype Build an interface everyone can start looking at, using, clicking through, and "feeling" before you start worrying about back-end code. Get yourself in front of the customer experience as much as possible. / JASON FRIED
145. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Prototype • Download Zurb or Bootstrap • Test & find out what doesn’t work • Make a Wireframe • Make a PSD • Make HTML pages • Integrate • Test & find out what doesn’t work or
146. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Summary Take it slowly
147. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Reading List http://www.abookapart.com/products/
148. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Reading List http://www.fivesimplesteps.com/
149. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 Dip your toes • Design in the browser • Start with mobile • Add a breakpoint around 500px • Add a breakpoint around 800px • Keep it simple!
150. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
151. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013 if you need me... @irishstu