Responsive Design Techniques, Tools and Design StrategiesPiotr Walczyszyn | outof.me | @outof_me

@outof_me

Facts

0,5

1

1,5

2

2009 2010 2011 2012 2013 2014 2015

Bilio

ns o

f use

rsMobile Desktop

Source: ComScore survey 2012

@outof_me

Fakty

3.5 BILIONINTERNET CONNECTED DEVICES

@outof_me

Responsive Web Design

@outof_me

Responsive Web Design

EthanMarco!e

@outof_me

May 2010 June 2011

Responsive Web Design

@outof_me

Responsive Web Design

Flexible & Fluid Grid

Flexible Images &

MediaMedia Queries

@outof_me

Examples

@outof_me

Techniques

@outof_me

Techniques

Desktop Down vs. Mobile First

@outof_me

Techniques

Design First vs. Common Breakpoints

@outof_me

Techniques

PX Media Queries vs. EM Media Queries

@outof_me

Techniques

Horizontal & Vertical Media Queries

@outof_me

Tools

@outof_me

Edge Re!ow

Adobe Edge Re"ow

@outof_me

Resources

‣Tools

‣Re"ow - h!p://html.adobe.com/edge/re"ow/

‣Responsive Inspector - h!p://outof.me/responsive-inspector/

‣RWD Frameworks:

‣Bootstrap h!p://twi!er.github.io/bootstrap/

‣Frameless h!p://framelessgrid.com/

‣Responsive Grid System h!p://responsive.gs/

‣Responsive Grid System h!p://www.responsivegridsystem.com/

‣Skeleton h!p://www.getskeleton.com/

‣Unsemantic h!p://unsemantic.com/

‣ Image libraries:

‣hisrc h!ps://github.com/teleject/hisrc

‣Responsive Enhance h!ps://github.com/joshje/Responsive-Enhance

‣Spriteme h!p://spriteme.org