Responsive Web Design Workshop

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/

B75613258830be5e7c0e2b0bd774cedd?s=128

Stewart Curry

June 25, 2013
Tweet

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