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

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

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

Mostly Fluid

Column Drop

Layout Shifter

Off Canvas

Patterns

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

Brad Frost

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

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

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

#content

#leftnav

#footer

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://www.flytodublin.com/

Examples

Government

https://www.gov.uk

http://www.manchester.gov.uk

http://www.fsai.ie

http://mediaqueri.esfor more inspiration

TOPICS

• What is RWD?

• How it works

Example Responsive Restaurant Website

What about...?

Older Browsers

IE Only Stylesheet<!--[if lt IE 9]>< link rel="stylesheet" media="screen" href="ie.css" >

<![endif]-->

Conditional Classes<!--[if lt IE 7]>

<!--[if IE 7]>

<!--[if IE 8]>

<!--[if gt IE 8]>

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

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

+ 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

container’s font size

desired font size

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/box-bg@2x.png') 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/

TOPICS

• What is RWD?

• How it works

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/

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://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

gimmebar.com

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

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

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

rwd workshop

design patterns

flexible imagesimg

flexible imagesscales

proportionbased grids

fluid gridsscales

key components fluid

new thinking design

Design

web design: responsive layouts sarah murto 09/29/2015 4662w...

responsive design workshop

responsive design fundamentals [read-only] - … design...

responsive web design workﬂo€¦ · • content first...

soltech - responsive design and responsive content

responsive elearning - iitd.ie...

responsive design

techniques for flexible responsive visualization design ·...

responsive responsive design

mini-workshop: responsive web design with visualforce and...

content authoring for responsive design - madcap...

responsive design - magento · responsive design . 16-fold...

web development tutorial workshop for beginners - learn...

ux design for the responsive web - ux london 2014 workshop

being responsive to responsive web design

workshop: 7 elements to responsive design

responsive web design - workshop

responsive design and progressive enhancements for the web...

workshop: object oriented ux for responsive design

responsive designchochev.eu › html › 6....