responsive web design workshop

@IRISHSTU #RWD WORKSHOP 25 JUNE 2013

Workshop:Responsive Web Design

Stewart Curry


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


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

http://en.wikiquote.org/wiki/Albert_Einstein#1920s







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


“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


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


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


Key Components

• Fluid, proportion-based grids% widths and em units, not fixed pixels

• Flexible imageswidth/height not fixed

• CSS3 Media Queries@media rule


New Thinking

• Work on everythingDesign for many sizes at once

• Clean designreduce clutter, essential content only

• Design from the content outLet content decide breakpoints


New Thinking

• Design is how it worksNot how it looks

• Less Graphic filesCSS gradients, font icons

• Keep learningResponsive images? Polyfills?


*actually* from a non-linear, non-subjective viewpoint - it's more like a big ball of wibbly

wobbly... time-y wimey... stu!.“

”


TOPICS

• What is RWD?

• How it works









Key Components

• Fluid, proportion-based grids% widths and em units, not fixed pixels

• Flexible imageswidth/height not fixed

• CSS3 Media Queries@media rule


Fluid GridsScales to the width of the browser / device


Fluid Grids


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%; }


Flexible ImagesScales 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 img { max-width: 100%;}

< img src="kitten.jpg" />

<!-- [if lte IE 6]>

img { width: 100%;} + AlphaImageLoader


Media QueriesSpecific styles for certain sizes and ranges


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


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

@media screen and ( min-width: 500px ) and ( 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 #!f; }

}

Images will have a white border when the window is from 500px to 800px wide


TOPICS

• What is RWD?

• How it works









“Design Pattern

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


Patterns

Layoutshttp://www.lukew.com/!/entry.asp?1514

Luke Wroblewski

http://www.lukew.com/about/


http://www.lukew.com/ff/entry.asp?1514

http://www.lukew.com/ff/entry.asp?1514


Mostly Fluid


Column Drop


Layout Shifter


Off Canvas


Patterns

Navigationhttp://bradfrost.github.io/this-is-responsive/patterns.html

Brad Frost



http://bradfrost.github.io/this-is-responsive/patterns.html





Toggle Navigation

Home About Location Services Contact Us

HomeAboutLocationServicesContact Us

Menu. Menu.


<select> Navigation



Footer Navigation

Home About Location Services Contact Us Menu.



Stacked Top Links Navigation

Home About Location Services Contact Us HomeAboutLocationServicesContact 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 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.


Priority+ Navigation

Home About Location Services Contact Us Home Location More


Priority+ Navigation

Home About ▼ Location ▼ Services ▼ Contact Us

Service 1Service 2Service 3

Home

About +

Location +

Services -

Service 1Service 2Service 3

Contact Us


Patterns

Order Shifthttp://bradfrost.github.io/this-is-responsive/patterns.html

Brad Frost






Source Order (table display)



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 Shifthttp://www.jordanm.co.uk/lab/contentchoreography

Jordan Moore






Flexbox

#logo #menu

#content

#leftnav

#footer

12

34

5

#logo

#menu

#content

#leftnav

#footer

1

2

3

4

5

1

2

3

4

5


TOPICS

• What is RWD?

• How it works









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.tfl.gov.uk/

http://beta.tfl.gov.uk

http://beta.tfl.gov.uk


http://www.flytodublin.com/




Examples

Government


https://www.gov.uk




http://www.manchester.gov.uk




http://www.fsai.ie

http://www.fsai.ie

http://www.fsai.ie


http://mediaqueri.esfor more inspiration

http://mediaqueri.es

http://mediaqueri.es


TOPICS

• What is RWD?

• How it works









Example Responsive Restaurant Website


What about...?

Older Browsers

IE Only Stylesheet

Conditional Classes





 <html class="">


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.

http://modernizr.com/

http://modernizr.com/


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

https://code.google.com/p/html5shim/

https://code.google.com/p/html5shim/

https://code.google.com/p/css3-mediaqueries-js/









+ html5 shiv + ie.css


What about...?

An existing design


target ÷ context = result

required font size

container’s font size

desired font size


Set base sizebody { 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)


TOPICS

• What is RWD?

• How it works









Approaches

• Mobile Firstand add styles and breakpoints

• Adaptive Web Designpredefined screensizes

• Multiple Gridsdi!erent grids for di!erent breakpoints(gridsetapp for example)


Approaches

• Small is SpecialUnique case for <480px (ish)

• Device Detectionwidths, assumptions, scripts, resolutions

• Frameworkspre-built grids and modules


Start with the small screen first, then expand until it looks like shit.

TIME FOR A BREAKPOINT!

“”

@stephenhay


Working with ImagesSome 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/[email protected]') no-repeat top left; background-size: 200px 200px; }}


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/

https://github.com/scottjehl/picturefill

https://github.com/scottjehl/picturefill

http://blog.cloudfour.com/8-guidelines-and-1-rule-for-responsive-images/





TOPICS

• What is RWD?

• How it works









http://goldengridsystem.com/




http://goldilocksapproach.com/demo/




http://responsive.gs/

http://responsive.gs

http://responsive.gs


http://gumbyframework.com/

http://gumbyframework.com

http://gumbyframework.com


http://foundation.zurb.com




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




http://purecss.io/

http://purecss.io/

http://purecss.io/


TOPICS

• What is RWD?

• How it works









https://gridsetapp.com




http://typecast.com




http://sass-lang.com




http://mattkersley.com/responsive/




http://responsive.is/




http://ami.responsivedesign.is/

http://ami.responsivedesign.is/?url=http%3A%2F%2Fwww.woop.ie#

http://ami.responsivedesign.is/?url=http%3A%2F%2Fwww.woop.ie#


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




http://html.adobe.com/edge/reflow/




TOPICS

• What is RWD?

• How it works









Mockups?

• Time consumingtoo many variations

• Untestedget on devices sooner rather than later

• Waterfallbe agile!


“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




Mood boards


www.evernote.com

https://www.evernote.com



gimmebar.com




www.realmacsoftware.com/littlesnapper/

http://www.realmacsoftware.com/littlesnapper/

http://www.realmacsoftware.com/littlesnapper/


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


“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

http://styletil.es

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 & find out what doesn’t work

• Make a Wireframe• Make a PSD• Make HTML pages• Integrate• Test & find out what doesn’t work

or


SummaryTake it slowly


Reading List

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




Reading List

http://www.fivesimplesteps.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

Design

rwd workshop

design patterns

flexible imagesimg

flexible imagesscales

proportionbased grids

fluid gridsscales

key components fluid

new thinking design