0
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Workshop:Responsive WebDesignStewart Curry
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Who isThis Guy?Web Designer for 15 years or soTable-based layouts & spacer gifsCSS cha...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013960pxso long
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Caveat"[I do not] carry such informationin my mind since it is readilyavailable in bo...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Responsive web designWe can design for an optimalviewing experience, but embedstandar...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://alistapart.com/article/responsive-web-design
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“DefinitionResponsive web design meansdesigning your website so that itresponds to you...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“DefinitionIt looks different and thingsjiggle around, scale, re-order,appear, and dis...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Advantages• Easier to Manageno mobile version, faster toupdate, single URL forGoogle, ...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Key Components• Fluid, proportion-based grids% widths and em units, not fixed pixels• F...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013New Thinking• Work on everythingDesign for many sizes at once• Clean designreduce clut...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013New Thinking• Design is how it worksNot how it looks• Less Graphic filesCSS gradients, ...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013*actually* from a non-linear, non-subjectiveviewpoint - its more like a big ball of wi...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Key Components• Fluid, proportion-based grids% widths and em units, not fixed pixels• F...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid GridsScales to the width of the browser / device
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid Grids
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid Grids
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid Grids
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid Grids.row { padding-left: 2%; }.col { float: left; margin:0 2% 0 0; }.col:last-ch...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesScales to the width of the browser / device
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesBlue bottle food truck street art,direct trade cosby sweater ethicalhoo...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesBlue bottle food truckstreet art, direct tradecosby sweater ethicalhood...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesBlue bottle food truck street art,direct trade cosby sweater ethicalhoo...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible Imagesimg { max-width: 100%;}< img src="kitten.jpg" /><!-- [if lte IE 6]>img ...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media QueriesSpecific styles for certain sizes and ranges
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries External< link rel="stylesheet" media="screen and( max-width: 500px )" h...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries Same file@media screen and ( max-width: 500px )@media screen and ( min-w...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries Devices@media ( -webkit-min-device-pixel-ratio: 2 ) ,( min-resolution: 1...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS de...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS de...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS de...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS de...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {img { bor...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Design Patterna design pattern is a generalreusable solution to a commonlyoccurring p...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsLayoutshttp://www.lukew.com/ff/entry.asp?1514Luke Wroblewski
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mostly Fluid
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Column Drop
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Layout Shifter
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Off Canvas
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsNavigationhttp://bradfrost.github.io/this-is-responsive/patterns.htmlBrad Frost
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Toggle NavigationHome About Location Services Contact UsHomeAboutLocationServicesConta...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013<select> NavigationHome About Location Services Contact Us
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Footer NavigationHome About Location Services Contact Us Menu.HomeAboutLocationService...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Stacked Top Links NavigationHome About Location Services Contact UsHomeAboutLocationSe...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Left Nav FlyoutHome About Location Services Contact Us MenuEcho Park chambray90s fap c...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Priority+ NavigationHome About Location Services Contact Us Home Location More
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Priority+ NavigationHome About ▼ Location ▼ Services ▼ Contact UsService 1Service 2Ser...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsOrder Shifthttp://bradfrost.github.io/this-is-responsive/patterns.htmlBrad Frost
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Source Order (table display)Home About Location Services Contact UsHomeAboutLocationSe...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsOrder Shifthttp://www.jordanm.co.uk/lab/contentchoreographyJordan Moore
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexbox#logo #menu#content#leftnav#footer12345#logo#menu#content#leftnav#footer1234512...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesEditorial
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.bostonglobe.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.time.com/time/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.vogue.co.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.esquire.co.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.smashingmagazine.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://sportsbant.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://thegreatdiscontent.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesCommerce
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://skinnyties.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://us.illyissimo.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesCorporate
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://riothq.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.microsoft.com/en-us/default.aspx
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://worldwildlife.org
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://disney.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesTravel/Tourism
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://niarchive.org/trails/plantation-rewriting-the-story/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://beta.tfl.gov.uk/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.flytodublin.com/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesGovernment
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013https://www.gov.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.manchester.gov.uk
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.fsai.ie
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://mediaqueri.esfor more inspiration
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExampleResponsive Restaurant Website
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013What about...?Older Browsers
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013IE Only Stylesheet<!--[if lt IE 9]>< link rel="stylesheet" media="screen"href="ie.css"...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Conditional Classes<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Detect Featureshttp://modernizr.com/Modernizr is a small JavaScript library that detec...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Shims, Shivs & PolyfillsHTML5 Shimhttps://code.google.com/p/html5shim/CSS3 Media Queri...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013+ html5 shiv + ie.css
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013What about...?An existing design
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013target ÷ context = resultrequiredfont sizecontainer’sfont sizedesiredfont size
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Set base sizebody { font-size : 100%; }Base font size: 16px;1em = 16pxhttp://blog.clou...
@IRISHSTU #RWD WORKSHOP 25 JUNE 201324 ÷ 16 = 1.5requiredfont size(em)container’sfont size(px)desiredfont size(px)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Approaches• Mobile Firstand add styles and breakpoints• Adaptive Web Designpredefined s...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Approaches• Small is SpecialUnique case for <480px (ish)• Device Detectionwidths, assu...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Start with the small screen first,then expand until it looks like shit.TIME FOR A BREAK...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Working with ImagesSome things to consider
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Art Direction
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Retina Backgrounds.box { background: url (images/box-bg.png) no-repeat top left; }@med...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Multiple Images• Clown Car Technique(svg file, swap images as backgrounds)• Picture Pol...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://goldengridsystem.com/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://goldilocksapproach.com/demo/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://responsive.gs/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://gumbyframework.com/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://foundation.zurb.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://twitter.github.io/bootstrap/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://purecss.io/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013https://gridsetapp.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://typecast.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://typecast.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://sass-lang.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://mattkersley.com/responsive/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://responsive.is/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://ami.responsivedesign.is/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://lab.maltewassermann.com/viewport-resizer/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://html.adobe.com/edge/reflow/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkth...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mockups?• Time consumingtoo many variations• Untestedget on devices sooner rather than...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Mood boardsWhen trying to convey a design idea, moods,feelings and fluffy stuff like t...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mood boards
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mood boards
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013www.evernote.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013gimmebar.com
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013www.realmacsoftware.com/littlesnapper/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Style tilesAn interior designer doesntdesign three different rooms for aclient at the...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Style tilesStyle Tiles are a designdeliverable consisting of fonts,colors and interfa...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://styletil.es
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Style tiles
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013“PrototypeBuild an interface everyone canstart looking at, using, clickingthrough, and...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Prototype• Download Zurb or Bootstrap• Test & find out what doesn’t work• Make a Wirefr...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013SummaryTake it slowly
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Reading Listhttp://www.abookapart.com/products/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Reading Listhttp://www.fivesimplesteps.com/
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013Dip your toes• Design in the browser• Start with mobile• Add a breakpoint around 500px...
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013if you need me... @irishstu
Upcoming SlideShare
Loading in...5
×

Responsive Web Design Workshop

2,534

Published on

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/

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

No Downloads
Views
Total Views
2,534
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
105
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Web Design Workshop"

  1. 1. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Workshop:Responsive WebDesignStewart Curry
  2. 2. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Who isThis Guy?Web Designer for 15 years or soTable-based layouts & spacer gifsCSS changed all thatRWD is how the web was meant to bewoop.ie - iteration, modules, themes, templates
  3. 3. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013960pxso long
  4. 4. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  5. 5. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  6. 6. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Caveat"[I do not] carry such informationin my mind since it is readilyavailable in books."Albert Einstein, when asked what the speed of sound was
  7. 7. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  8. 8. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  9. 9. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  10. 10. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  11. 11. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Responsive web designWe can design for an optimalviewing experience, but embedstandards-based technologiesinto our designs to make themnot only more flexible, but moreadaptive to the media thatrenders them / ETHAN MARCOTTE
  12. 12. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://alistapart.com/article/responsive-web-design
  13. 13. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“DefinitionResponsive web design meansdesigning your website so that itresponds to your usersenvironment based on screen-size, platform and orientation.
  14. 14. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“DefinitionIt looks different and thingsjiggle around, scale, re-order,appear, and disappear so it workswell in your browser size orwhatever device you’re using toview it...
  15. 15. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Advantages• Easier to Manageno mobile version, faster toupdate, single URL forGoogle, less to manage• One site, many devices• Respects your visitorsThe best experience for theirdevice
  16. 16. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Key Components• Fluid, proportion-based grids% widths and em units, not fixed pixels• Flexible imageswidth/height not fixed• CSS3 Media Queries@media rule
  17. 17. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013New Thinking• Work on everythingDesign for many sizes at once• Clean designreduce clutter, essential content only• Design from the content outLet content decide breakpoints
  18. 18. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013New Thinking• Design is how it worksNot how it looks• Less Graphic filesCSS gradients, font icons• Keep learningResponsive images? Polyfills?
  19. 19. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013*actually* from a non-linear, non-subjectiveviewpoint - its more like a big ball of wibblywobbly... time-y wimey... stuff.“”
  20. 20. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  21. 21. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Key Components• Fluid, proportion-based grids% widths and em units, not fixed pixels• Flexible imageswidth/height not fixed• CSS3 Media Queries@media rule
  22. 22. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid GridsScales to the width of the browser / device
  23. 23. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid Grids
  24. 24. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid Grids
  25. 25. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid Grids
  26. 26. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Fluid 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. 27. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesScales to the width of the browser / device
  28. 28. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesBlue bottle food truck street art,direct trade cosby sweater ethicalhoodie hashtag american apparel.Wayfarers selvage pour-over swag,etsy next level meh Austin polaroidbeard wolf irony squid PBR.DIY synth post-ironic 8-bit polaroidtypewriter, vice cliche fixie pug retrodirect trade lomo. Tonx fap wesanderson, cred pinterest street artretro fashion axe.
  29. 29. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesBlue bottle food truckstreet art, direct tradecosby sweater ethicalhoodie hashtagamerican apparel.Wayfarers selvagepour-over swag, etsynext level mehAustin polaroidbeard wolf ironysquid PBR.DIY synth post-ironic8-bit polaroidtypewriter, vicecliche fixie pug retrodirect trade lomo.Tonx fap wesanderson, credpinterest street artretro fashion axe.
  30. 30. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible ImagesBlue bottle food truck street art,direct trade cosby sweater ethicalhoodie hashtag american apparel.Wayfarers selvage pour-over swag,etsy next level meh Austin polaroidbeard wolf irony squid PBR.DIY synth post-ironic 8-bit polaroidtypewriter, vice cliche fixie pugretro direct trade lomo. Tonx fapwes anderson, cred pinterest streetart retro fashion axe.
  31. 31. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible Imagesimg { max-width: 100%;}< img src="kitten.jpg" /><!-- [if lte IE 6]>img { width: 100%;} + AlphaImageLoader
  32. 32. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media QueriesSpecific styles for certain sizes and ranges
  33. 33. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media 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. 34. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media 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. 35. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media 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. 36. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS declarations */}
  37. 37. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS declarations */}This is for screen only (desktops, smartphones,not print)
  38. 38. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS declarations */}The width of the window must be AT LEAST500px
  39. 39. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS declarations */}The width of the window must ALSO be NOMORE THAN 800px
  40. 40. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {img { border: 5px solid #fff; }}Images will have a white border when thewindow is from 500px to 800px wide
  41. 41. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  42. 42. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Design Patterna design pattern is a generalreusable solution to a commonlyoccurring problem within agiven context in software design
  43. 43. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsLayoutshttp://www.lukew.com/ff/entry.asp?1514Luke Wroblewski
  44. 44. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mostly Fluid
  45. 45. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Column Drop
  46. 46. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Layout Shifter
  47. 47. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Off Canvas
  48. 48. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsNavigationhttp://bradfrost.github.io/this-is-responsive/patterns.htmlBrad Frost
  49. 49. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Toggle NavigationHome About Location Services Contact UsHomeAboutLocationServicesContact UsMenu. Menu.
  50. 50. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013<select> NavigationHome About Location Services Contact Us
  51. 51. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Footer NavigationHome About Location Services Contact Us Menu.HomeAboutLocationServicesContact Us
  52. 52. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Stacked Top Links NavigationHome About Location Services Contact UsHomeAboutLocationServicesContact Us
  53. 53. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Left Nav FlyoutHome About Location Services Contact Us MenuEcho Park chambray90s fap cardigankeffiyeh, trust fundretro Truffaut nextlevel.Lomo forage pop-upNeutra, fashion axesustainable keffiyehhelvetica DIY.Fashion axe Neutracraft beer four lokohelvetica. Americanapparel sustainablekale chips Etsy, photobooth VHS shabby chic.Home About Location Services Contact UsHomeAboutLocationServicesContact UsMenuEcho Park chambray90s fap cardigankeffiyeh, trust fundretro Truffaut nextlevel.Lomo forage pop-upNeutra, fashion axesustainable keffiyehhelvetica DIY.Fashion axe Neutracraft beer four lokohelvetica. Americanapparel sustainablekale chips Etsy, photobooth VHS shabby chic.
  54. 54. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Priority+ NavigationHome About Location Services Contact Us Home Location More
  55. 55. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Priority+ NavigationHome About ▼ Location ▼ Services ▼ Contact UsService 1Service 2Service 3HomeAbout +Location +Services -Service 1Service 2Service 3Contact Us
  56. 56. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsOrder Shifthttp://bradfrost.github.io/this-is-responsive/patterns.htmlBrad Frost
  57. 57. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Source Order (table display)Home About Location Services Contact UsHomeAboutLocationServicesContact UsLorem ipsum dolor sit ametConsectetur adipiscing elit. Sed vel vehiculajusto, et vestibulum erat. Maecenas sagittisvolutpat molestie. Integer tortor mi, egestaset tristique quis, tempus nec diamLorem ipsumdolor sit ametConsecteturadipiscing elit.Sed vel vehiculajusto, etvestibulum erat.Maecenas sagittisvolutpat molestie.Integer tortor mi,egestas et2nd in source1st in source2nd in source1st in source
  58. 58. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013PatternsOrder Shifthttp://www.jordanm.co.uk/lab/contentchoreographyJordan Moore
  59. 59. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexbox#logo #menu#content#leftnav#footer12345#logo#menu#content#leftnav#footer1234512345
  60. 60. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  61. 61. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesEditorial
  62. 62. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.bostonglobe.com
  63. 63. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.time.com/time/
  64. 64. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.vogue.co.uk
  65. 65. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.esquire.co.uk
  66. 66. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.smashingmagazine.com
  67. 67. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://sportsbant.com
  68. 68. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://thegreatdiscontent.com
  69. 69. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesCommerce
  70. 70. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://skinnyties.com
  71. 71. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://us.illyissimo.com
  72. 72. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesCorporate
  73. 73. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://riothq.com
  74. 74. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.microsoft.com/en-us/default.aspx
  75. 75. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://worldwildlife.org
  76. 76. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://disney.com
  77. 77. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesTravel/Tourism
  78. 78. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://niarchive.org/trails/plantation-rewriting-the-story/
  79. 79. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://beta.tfl.gov.uk/
  80. 80. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.flytodublin.com/
  81. 81. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExamplesGovernment
  82. 82. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013https://www.gov.uk
  83. 83. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.manchester.gov.uk
  84. 84. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://www.fsai.ie
  85. 85. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://mediaqueri.esfor more inspiration
  86. 86. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  87. 87. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013ExampleResponsive Restaurant Website
  88. 88. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  89. 89. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  90. 90. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013What about...?Older Browsers
  91. 91. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013IE Only Stylesheet<!--[if lt IE 9]>< link rel="stylesheet" media="screen"href="ie.css" ><![endif]-->
  92. 92. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Conditional 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. 93. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Detect Featureshttp://modernizr.com/Modernizr is a small JavaScript library that detects the availability ofnative 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 currentbrowser has this feature natively implemented or not.
  94. 94. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Shims, Shivs & PolyfillsHTML5 Shimhttps://code.google.com/p/html5shim/CSS3 Media Queries Shimhttps://code.google.com/p/css3-mediaqueries-js/https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
  95. 95. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  96. 96. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013+ html5 shiv + ie.css
  97. 97. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  98. 98. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013What about...?An existing design
  99. 99. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013target ÷ context = resultrequiredfont sizecontainer’sfont sizedesiredfont size
  100. 100. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Set base sizebody { font-size : 100%; }Base font size: 16px;1em = 16pxhttp://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
  101. 101. @IRISHSTU #RWD WORKSHOP 25 JUNE 201324 ÷ 16 = 1.5requiredfont size(em)container’sfont size(px)desiredfont size(px)
  102. 102. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  103. 103. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  104. 104. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  105. 105. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  106. 106. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Approaches• Mobile Firstand add styles and breakpoints• Adaptive Web Designpredefined screensizes• Multiple Gridsdifferent grids for different breakpoints(gridsetapp for example)
  107. 107. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Approaches• Small is SpecialUnique case for <480px (ish)• Device Detectionwidths, assumptions, scripts, resolutions• Frameworkspre-built grids and modules
  108. 108. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Start with the small screen first,then expand until it looks like shit.TIME FOR A BREAKPOINT!“”@stephenhay
  109. 109. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Working with ImagesSome things to consider
  110. 110. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Art Direction
  111. 111. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Retina 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. 112. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Multiple Images• Clown Car Technique(svg file, swap images as backgrounds)• Picture Polyfillhttps://github.com/scottjehl/picturefill• 8 guidelines and 1 rulehttp://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/
  113. 113. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  114. 114. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://goldengridsystem.com/
  115. 115. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://goldilocksapproach.com/demo/
  116. 116. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://responsive.gs/
  117. 117. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://gumbyframework.com/
  118. 118. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://foundation.zurb.com
  119. 119. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://twitter.github.io/bootstrap/
  120. 120. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://purecss.io/
  121. 121. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  122. 122. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013https://gridsetapp.com
  123. 123. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  124. 124. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://typecast.com
  125. 125. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://typecast.com
  126. 126. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://sass-lang.com
  127. 127. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://mattkersley.com/responsive/
  128. 128. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://responsive.is/
  129. 129. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://ami.responsivedesign.is/
  130. 130. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://lab.maltewassermann.com/viewport-resizer/
  131. 131. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://html.adobe.com/edge/reflow/
  132. 132. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013TOPICS• What is RWD?• How it works• Design Patterns in RWD• Some good examples• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  133. 133. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mockups?• Time consumingtoo many variations• Untestedget on devices sooner rather than later• Waterfallbe agile!
  134. 134. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Mood boardsWhen trying to convey a design idea, moods,feelings and fluffy stuff like that are hard tocommunicate ... designers will often use amood board: a collection of textures, imagesand text related to a design theme as areference point.http://www.creativebloq.com/graphic-design/mood-boards-812470
  135. 135. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mood boards
  136. 136. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mood boards
  137. 137. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013www.evernote.com
  138. 138. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013gimmebar.com
  139. 139. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013www.realmacsoftware.com/littlesnapper/
  140. 140. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Style tilesAn interior designer doesntdesign three different rooms for aclient at the first kick-offmeeting, so why do Webdesigners design three differentwebpage mockups?
  141. 141. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Style tilesStyle Tiles are a designdeliverable consisting of fonts,colors and interface elementsthat communicate the essence ofa visual brand for the web.
  142. 142. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013http://styletil.es
  143. 143. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Style tiles
  144. 144. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“PrototypeBuild an interface everyone canstart looking at, using, clickingthrough, and "feeling" before youstart worrying about back-endcode. Get yourself in front of thecustomer experience as much aspossible. / JASON FRIED
  145. 145. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Prototype• 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 workor
  146. 146. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013SummaryTake it slowly
  147. 147. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Reading Listhttp://www.abookapart.com/products/
  148. 148. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Reading Listhttp://www.fivesimplesteps.com/
  149. 149. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Dip your toes• Design in the browser• Start with mobile• Add a breakpoint around 500px• Add a breakpoint around 800px• Keep it simple!
  150. 150. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  151. 151. @IRISHSTU #RWD WORKSHOP 25 JUNE 2013if you need me... @irishstu
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×