Responsive Web Design Workshop

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013
Workshop:
Responsive Web
Design
Stewart Curry

Who is
This Guy?
Web Designer for 15 years or so
Table-based layouts & spacer gifs
CSS changed all that
RWD is how the web was meant to be
woop.ie - iteration, modules, themes, templates

960px
so long

“
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

TOPICS
• 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

“
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 ﬂexible, but more
adaptive to the media that
renders them / ETHAN MARCOTTE

http://alistapart.com/article/responsive-web-design

“
Definition
Responsive web design means
designing your website so that it
responds to your users
environment based on screen-
size, platform and orientation.

“
Definition
It looks different 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...

Advantages
• Easier to Manage
no mobile version, faster to
update, single URL for
Google, less to manage
• One site, many devices
• Respects your visitors
The best experience for their
device

Key Components
• Fluid, proportion-based grids
% widths and em units, not ﬁxed pixels
• Flexible images
width/height not ﬁxed
• CSS3 Media Queries
@media rule

New Thinking
• Work on everything
Design for many sizes at once
• Clean design
reduce clutter, essential content only
• Design from the content out
Let content decide breakpoints

New Thinking
• Design is how it works
Not how it looks
• Less Graphic ﬁles
CSS gradients, font icons
• Keep learning
Responsive images? Polyﬁlls?

*actually* from a non-linear, non-subjective
viewpoint - it's more like a big ball of wibbly
wobbly... time-y wimey... stuff.
“
”

Fluid Grids
Scales to the width of the browser / device

Fluid Grids

Fluid Grids
.row { padding-left: 2%; }
.col { ﬂoat: left; margin:0 2% 0 0; }
.col:last-child { margin: 0; }
.span-1 { width: 23%; }
.span-2 { width: 48%; }

Flexible Images
Scales to the width of the browser / device

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.

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.

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.

Flexible Images
img { max-width: 100%;}
< img src="kitten.jpg" />
<!-- [if lte IE 6]>
img { width: 100%;} + AlphaImageLoader

Media Queries
Speciﬁc styles for certain sizes and ranges

Media Queries External
< link rel="stylesheet" media="screen and
( max-width: 500px )" href="mobile.css" >
( max-width: 800px )" href="tablet.css" >
( min-width: 1000px )" href="desktop.css" >

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 )

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 )

Media Queries
( max-width: 800px ) {
/* CSS declarations */
}

Media Queries
}
This is for screen only (desktops, smartphones,
not print)

Media Queries
}
The width of the window must be AT LEAST
500px

Media Queries
}
The width of the window must ALSO be NO
MORE THAN 800px

Media Queries
img { border: 5px solid #fff; }
}
Images will have a white border when the
window is from 500px to 800px wide

“
Design Pattern
a design pattern is a general
reusable solution to a commonly
occurring problem within a
given context in software design

Patterns
Layouts
http://www.lukew.com/ff/entry.asp?1514
Luke Wroblewski

Mostly Fluid

Column Drop

Layout Shifter

Off Canvas

Patterns
Navigation
http://bradfrost.github.io/this-is-responsive/
patterns.html
Brad Frost

Toggle Navigation
Home About Location Services Contact Us
Home
About
Location
Services
Contact Us
Menu. Menu.

<select> Navigation

Footer Navigation
Home About Location Services Contact Us Menu.
Home
About
Location
Services
Contact Us

Stacked Top Links Navigation
Home
About
Location
Services
Contact Us

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
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.

Priority+ Navigation
Home About Location Services Contact Us Home Location More

Priority+ Navigation
Home About ▼ Location ▼ Services ▼ Contact Us
Service 1
Service 2
Service 3
Home
About +
Location +
Services -
Service 1
Service 2
Service 3
Contact Us

Patterns
Order Shift
http://bradfrost.github.io/this-is-responsive/
patterns.html
Brad Frost

Source Order (table display)
Home
About
Location
Services
Contact Us
Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Sed vel vehicula
justo, et vestibulum erat. Maecenas sagittis
volutpat molestie. Integer tortor mi, egestas
et tristique quis, tempus nec diam
Lorem ipsum
dolor sit amet
Consectetur
adipiscing elit.
Sed vel vehicula
justo, et
vestibulum erat.
Maecenas sagittis
volutpat molestie.
Integer tortor mi,
egestas et
2nd in source
1st in source
2nd in source
1st in source

Patterns
Order Shift
http://www.jordanm.co.uk/lab/
contentchoreography
Jordan Moore

Flexbox
#logo #menu
#content
#leftnav
#footer
1
2
3
4
5
#logo
#menu
#content
#leftnav
#footer
1
2
3
4
5
1
2
3
4
5

Examples
Editorial

http://www.bostonglobe.com

http://www.time.com/time/

http://www.vogue.co.uk

http://www.esquire.co.uk

http://www.smashingmagazine.com

http://sportsbant.com

http://thegreatdiscontent.com

Examples
Commerce

http://skinnyties.com

http://us.illyissimo.com

Examples
Corporate

http://riothq.com

http://www.microsoft.com/en-us/default.aspx

http://worldwildlife.org

http://disney.com

Examples
Travel/Tourism

http://niarchive.org/trails/plantation-rewriting-the-story/

http://beta.tﬂ.gov.uk/

http://www.ﬂytodublin.com/

Examples
Government

https://www.gov.uk

http://www.manchester.gov.uk

http://www.fsai.ie

http://mediaqueri.es
for more inspiration

Example
Responsive Restaurant Website

What about...?
Older Browsers

IE Only Stylesheet

Conditional Classes



 <html class="">

Detect Features
http://modernizr.com/
Modernizr is a small JavaScript library that detects the availability of
native implementations for next-generation web technologies, i.e.
features that stem from the HTML5 and CSS3 specifications...
...what Modernizr does is, very simply, tell you whether the current
browser has this feature natively implemented or not.

Shims, Shivs & Polyfills
HTML5 Shim
https://code.google.com/p/html5shim/
CSS3 Media Queries Shim
https://code.google.com/p/css3-
mediaqueries-js/
https://github.com/Modernizr/Modernizr/
wiki/HTML5-Cross-Browser-Polyﬁlls

+ html5 shiv + ie.css

What about...?
An existing design

target ÷ context = result
required
font size
container’s
font size
desired
font size

Set base size
body { font-size : 100%; }
Base font size: 16px;
1em = 16px
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

24 ÷ 16 = 1.5
required
font size
(em)
container’s
font size
(px)
desired
font size
(px)

Approaches
• Mobile First
and add styles and breakpoints
• Adaptive Web Design
predeﬁned screensizes
• Multiple Grids
different grids for different breakpoints
(gridsetapp for example)

Approaches
• Small is Special
Unique case for <480px (ish)
• Device Detection
widths, assumptions, scripts, resolutions
• Frameworks
pre-built grids and modules

Start with the small screen ﬁrst,
then expand until it looks like shit.
TIME FOR A BREAKPOINT!
“
”
@stephenhay

Working with Images
Some things to consider

Art Direction

Retina Backgrounds
.box { background: url ('images/box-bg.png') no-repeat top left; }
@media screen and ( -webkit-min-device-pixel-ratio: 2 ) , ( min-
resolution: 192dpi ) {
.box { background: url ('images/box-bg@2x.png') no-repeat top left;
background-size: 200px 200px;
}
}

Multiple Images
• Clown Car Technique
(svg file, swap images as backgrounds)
• Picture Polyfill
https://github.com/scottjehl/picturefill
• 8 guidelines and 1 rule
http://blog.cloudfour.com/8-guidelines-
and-1-rule-for-responsive-images/

http://goldengridsystem.com/

http://goldilocksapproach.com/demo/

http://responsive.gs/

http://gumbyframework.com/

http://foundation.zurb.com

http://twitter.github.io/bootstrap/

http://purecss.io/

https://gridsetapp.com

http://typecast.com

http://sass-lang.com

http://mattkersley.com/responsive/

http://responsive.is/

http://ami.responsivedesign.is/

http://lab.maltewassermann.com/viewport-resizer/

http://html.adobe.com/edge/reﬂow/

Mockups?
• Time consuming
too many variations
• Untested
get on devices sooner rather than later
• Waterfall
be agile!

“
Mood boards
When trying to convey a design idea, moods,
feelings and ﬂuffy stuff 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

Mood boards

www.evernote.com

gimmebar.com

www.realmacsoftware.com/littlesnapper/

“
Style tiles
An interior designer doesn't
design three different rooms for a
client at the ﬁrst kick-off
meeting, so why do Web
designers design three different
webpage mockups?

“
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.

http://styletil.es

Style tiles

“
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

Prototype
• Download Zurb or Bootstrap
• Test & ﬁnd out what doesn’t work
• Make a Wireframe
• Make a PSD
• Make HTML pages
• Integrate
• Test & ﬁnd out what doesn’t work
or

Summary
Take it slowly

Reading List
http://www.abookapart.com/products/

Reading List
http://www.ﬁvesimplesteps.com/

Dip your toes
• Design in the browser
• Start with mobile
• Add a breakpoint around 500px
• Add a breakpoint around 800px
• Keep it simple!

if you need me... @irishstu

Responsive Web Design Workshop

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Responsive Web Design Workshop

Semelhante a Responsive Web Design Workshop (20)

Último

Último (20)

Responsive Web Design Workshop