Responsive Web Design Workshop
Upcoming SlideShare
Loading in...5
×
 

Responsive Web Design Workshop

on

  • 2,044 views

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

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/

Statistics

Views

Total Views
2,044
Views on SlideShare
2,017
Embed Views
27

Actions

Likes
5
Downloads
77
Comments
0

8 Embeds 27

https://twitter.com 12
http://wp.joshlabs.in 5
http://jfeeds.carsmantra.com 3
http://localhost 2
http://joshtechnologygroup.com 2
http://davidetucci.dropmark.com 1
http://wp.joshlabs.webfactional.com 1
http://www.joshtechnologygroup.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Web Design Workshop Responsive Web Design Workshop Presentation Transcript

  • @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 changed all thatRWD is how the web was meant to bewoop.ie - iteration, modules, themes, templates
  • @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 books."Albert Einstein, when asked what the speed of sound was
  • @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• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  • @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
  • @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 your usersenvironment based on screen-size, platform and orientation.
  • @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...
  • @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
  • @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
  • @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
  • @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?
  • @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.“”
  • @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
  • @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
  • @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-child { margin: 0; }.span-1 { width: 23%; }.span-2 { width: 48%; }
  • @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 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.
  • @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.
  • @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.
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Flexible Imagesimg { max-width: 100%;}< img src="kitten.jpg" /><!-- [if lte IE 6]>img { width: 100%;} + AlphaImageLoader
  • @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 )" 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" >
  • @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 )
  • @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 )
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Media Queries@media screen and ( min-width: 500px ) and( max-width: 800px ) {/* CSS declarations */}
  • @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)
  • @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
  • @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
  • @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
  • @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
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013“Design Patterna design pattern is a generalreusable solution to a commonlyoccurring problem within agiven context in software design
  • @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 UsHomeAboutLocationServicesContact UsMenu. Menu.
  • @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.HomeAboutLocationServicesContact Us
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Stacked Top Links NavigationHome About Location Services Contact UsHomeAboutLocationServicesContact Us
  • @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.
  • @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 2Service 3HomeAbout +Location +Services -Service 1Service 2Service 3Contact Us
  • @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 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
  • @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#footer1234512345
  • @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
  • @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• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  • @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" ><![endif]-->
  • @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]-->
  • @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.
  • @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
  • @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.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
  • @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• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  • @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)
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Approaches• Small is SpecialUnique case for <480px (ish)• Device Detectionwidths, assumptions, scripts, resolutions• Frameworkspre-built grids and modules
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Start with the small screen first,then expand until it looks like shit.TIME FOR A BREAKPOINT!“”@stephenhay
  • @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; }@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;}}
  • @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/
  • @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
  • @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• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  • @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• Walkthrough making a responsive website• Some different approaches• Some useful frameworks• Some useful tools• Designing for RWD
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013Mockups?• Time consumingtoo many variations• Untestedget on devices sooner rather than later• Waterfallbe agile!
  • @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
  • @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 first kick-offmeeting, so why do Webdesigners design three differentwebpage mockups?
  • @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.
  • @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 "feeling" before youstart worrying about back-endcode. Get yourself in front of thecustomer experience as much aspossible. / JASON FRIED
  • @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
  • @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• Add a breakpoint around 800px• Keep it simple!
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013
  • @IRISHSTU #RWD WORKSHOP 25 JUNE 2013if you need me... @irishstu