responsive web design workshop
DESCRIPTION
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
![Page 1: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/1.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Workshop:Responsive Web Design
Stewart Curry
![Page 2: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/2.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Who 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
![Page 3: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/3.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
960px
so long
![Page 4: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/4.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
!" # $
% & ' ()
![Page 5: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/5.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 6: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/6.jpg)
@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
![Page 7: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/7.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 8: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/8.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 9: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/9.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 10: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/10.jpg)
@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
![Page 11: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/11.jpg)
@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
![Page 12: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/12.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://alistapart.com/article/responsive-web-design
![Page 13: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/13.jpg)
@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.
![Page 14: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/14.jpg)
@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...
![Page 15: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/15.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Advantages
• Easier to Manageno mobile version, faster to update, single URL for Google, less to manage
• One site, many devices
• Respects your visitorsThe best experience for their device
![Page 16: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/16.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Key Components
• Fluid, proportion-based grids% widths and em units, not fixed pixels
• Flexible imageswidth/height not fixed
• CSS3 Media Queries@media rule
![Page 17: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/17.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
New Thinking
• Work on everythingDesign for many sizes at once
• Clean designreduce clutter, essential content only
• Design from the content outLet content decide breakpoints
![Page 18: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/18.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
New Thinking
• Design is how it worksNot how it looks
• Less Graphic filesCSS gradients, font icons
• Keep learningResponsive images? Polyfills?
![Page 19: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/19.jpg)
@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!.“
”
![Page 20: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/20.jpg)
@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
![Page 21: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/21.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Key Components
• Fluid, proportion-based grids% widths and em units, not fixed pixels
• Flexible imageswidth/height not fixed
• CSS3 Media Queries@media rule
![Page 22: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/22.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid GridsScales to the width of the browser / device
![Page 23: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/23.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid Grids
![Page 24: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/24.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid Grids
![Page 25: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/25.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Fluid Grids
![Page 26: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/26.jpg)
@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%; }
![Page 27: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/27.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Flexible ImagesScales to the width of the browser / device
![Page 28: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/28.jpg)
@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.
![Page 29: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/29.jpg)
@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.
![Page 30: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/30.jpg)
@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.
![Page 31: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/31.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Flexible Images img { max-width: 100%;}
< img src="kitten.jpg" />
<!-- [if lte IE 6]>
img { width: 100%;} + AlphaImageLoader
![Page 32: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/32.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Media QueriesSpecific styles for certain sizes and ranges
![Page 33: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/33.jpg)
@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" >
![Page 34: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/34.jpg)
@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 )
![Page 35: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/35.jpg)
@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 )
![Page 36: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/36.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Media Queries
@media screen and ( min-width: 500px ) and ( max-width: 800px ) {
/* CSS declarations */
}
![Page 37: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/37.jpg)
@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)
![Page 38: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/38.jpg)
@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
![Page 39: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/39.jpg)
@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
![Page 40: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/40.jpg)
@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
![Page 41: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/41.jpg)
@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
![Page 42: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/42.jpg)
@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
![Page 43: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/43.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Layoutshttp://www.lukew.com/!/entry.asp?1514
Luke Wroblewski
![Page 44: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/44.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mostly Fluid
![Page 45: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/45.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Column Drop
![Page 46: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/46.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Layout Shifter
![Page 47: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/47.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Off Canvas
![Page 48: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/48.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Navigationhttp://bradfrost.github.io/this-is-responsive/patterns.html
Brad Frost
![Page 49: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/49.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Toggle Navigation
Home About Location Services Contact Us
HomeAboutLocationServicesContact Us
Menu. Menu.
![Page 50: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/50.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
<select> Navigation
Home About Location Services Contact Us
![Page 51: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/51.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Footer Navigation
Home About Location Services Contact Us Menu.
HomeAboutLocationServicesContact Us
![Page 52: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/52.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Stacked Top Links Navigation
Home About Location Services Contact Us HomeAboutLocationServicesContact Us
![Page 53: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/53.jpg)
@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 HomeAboutLocationServicesContact 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.
![Page 54: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/54.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Priority+ Navigation
Home About Location Services Contact Us Home Location More
![Page 55: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/55.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Priority+ Navigation
Home About ▼ Location ▼ Services ▼ Contact Us
Service 1Service 2Service 3
Home
About +
Location +
Services -
Service 1Service 2Service 3
Contact Us
![Page 56: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/56.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Order Shifthttp://bradfrost.github.io/this-is-responsive/patterns.html
Brad Frost
![Page 57: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/57.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Source Order (table display)
Home About Location Services Contact Us
HomeAboutLocationServicesContact 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
![Page 58: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/58.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Patterns
Order Shifthttp://www.jordanm.co.uk/lab/contentchoreography
Jordan Moore
![Page 59: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/59.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Flexbox
#logo #menu
#content
#leftnav
#footer
12
34
5
#logo
#menu
#content
#leftnav
#footer
1
2
3
4
5
1
2
3
4
5
![Page 60: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/60.jpg)
@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
![Page 61: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/61.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Editorial
![Page 62: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/62.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.bostonglobe.com
![Page 63: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/63.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.time.com/time/
![Page 64: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/64.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.vogue.co.uk
![Page 65: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/65.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.esquire.co.uk
![Page 66: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/66.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.smashingmagazine.com
![Page 67: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/67.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://sportsbant.com
![Page 68: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/68.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://thegreatdiscontent.com
![Page 69: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/69.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Commerce
![Page 70: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/70.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://skinnyties.com
![Page 71: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/71.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://us.illyissimo.com
![Page 72: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/72.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Corporate
![Page 73: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/73.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://riothq.com
![Page 74: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/74.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.microsoft.com/en-us/default.aspx
![Page 75: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/75.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://worldwildlife.org
![Page 76: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/76.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://disney.com
![Page 77: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/77.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Travel/Tourism
![Page 78: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/78.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://niarchive.org/trails/plantation-rewriting-the-story/
![Page 79: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/79.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://beta.tfl.gov.uk/
![Page 80: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/80.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.flytodublin.com/
![Page 81: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/81.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Examples
Government
![Page 82: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/82.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
https://www.gov.uk
![Page 83: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/83.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://www.manchester.gov.uk
![Page 85: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/85.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://mediaqueri.esfor more inspiration
![Page 86: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/86.jpg)
@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
![Page 87: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/87.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Example Responsive Restaurant Website
![Page 88: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/88.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 89: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/89.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 90: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/90.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
What about...?
Older Browsers
![Page 91: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/91.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
IE Only Stylesheet<!--[if lt IE 9]>< link rel="stylesheet" media="screen" href="ie.css" >
<![endif]-->
![Page 92: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/92.jpg)
@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]-->
![Page 93: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/93.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Detect Featureshttp://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.
![Page 94: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/94.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Shims, Shivs & Polyfills
HTML5 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
![Page 95: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/95.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 96: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/96.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
+ html5 shiv + ie.css
![Page 97: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/97.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 98: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/98.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
What about...?
An existing design
![Page 99: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/99.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
target ÷ context = result
required font size
container’s font size
desired font size
![Page 100: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/100.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Set base sizebody { font-size : 100%; }
Base font size: 16px;
1em = 16px
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
![Page 101: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/101.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
24 ÷ 16 = 1.5
required font size
(em)
container’s font size
(px)
desired font size
(px)
![Page 102: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/102.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 103: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/103.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 104: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/104.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 105: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/105.jpg)
@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
![Page 106: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/106.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Approaches
• Mobile Firstand add styles and breakpoints
• Adaptive Web Designpredefined screensizes
• Multiple Gridsdi!erent grids for di!erent breakpoints(gridsetapp for example)
![Page 107: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/107.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Approaches
• Small is SpecialUnique case for <480px (ish)
• Device Detectionwidths, assumptions, scripts, resolutions
• Frameworkspre-built grids and modules
![Page 108: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/108.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Start with the small screen first, then expand until it looks like shit.
TIME FOR A BREAKPOINT!
“”
@stephenhay
![Page 109: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/109.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Working with ImagesSome things to consider
![Page 110: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/110.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Art Direction
![Page 111: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/111.jpg)
@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/[email protected]') no-repeat top left; background-size: 200px 200px; }}
![Page 112: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/112.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Multiple 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/
![Page 113: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/113.jpg)
@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
![Page 114: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/114.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://goldengridsystem.com/
![Page 115: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/115.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://goldilocksapproach.com/demo/
![Page 116: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/116.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://responsive.gs/
![Page 117: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/117.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://gumbyframework.com/
![Page 118: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/118.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://foundation.zurb.com
![Page 119: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/119.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://twitter.github.io/bootstrap/
![Page 121: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/121.jpg)
@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
![Page 122: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/122.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
https://gridsetapp.com
![Page 123: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/123.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 124: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/124.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://typecast.com
![Page 125: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/125.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://typecast.com
![Page 126: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/126.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://sass-lang.com
![Page 127: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/127.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://mattkersley.com/responsive/
![Page 128: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/128.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://responsive.is/
![Page 129: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/129.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://ami.responsivedesign.is/
![Page 130: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/130.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://lab.maltewassermann.com/viewport-resizer/
![Page 131: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/131.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
http://html.adobe.com/edge/reflow/
![Page 132: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/132.jpg)
@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
![Page 133: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/133.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mockups?
• Time consumingtoo many variations
• Untestedget on devices sooner rather than later
• Waterfallbe agile!
![Page 134: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/134.jpg)
@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
![Page 135: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/135.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mood boards
![Page 136: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/136.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Mood boards
![Page 137: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/137.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
www.evernote.com
![Page 139: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/139.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
www.realmacsoftware.com/littlesnapper/
![Page 140: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/140.jpg)
@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?
![Page 141: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/141.jpg)
@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.
![Page 143: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/143.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Style tiles
![Page 144: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/144.jpg)
@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
![Page 145: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/145.jpg)
@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
![Page 146: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/146.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
SummaryTake it slowly
![Page 147: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/147.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Reading List
http://www.abookapart.com/products/
![Page 148: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/148.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Reading List
http://www.fivesimplesteps.com/
![Page 149: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/149.jpg)
@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!
![Page 150: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/150.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
![Page 151: Responsive Web Design Workshop](https://reader031.vdocuments.site/reader031/viewer/2022020207/54c734bf4a7959f4208b458b/html5/thumbnails/151.jpg)
@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
if you need me... @irishstu