Responsive Design Techniques,
Tools and Design Strategies
Piotr Walczyszyn | outof.me | @outof_me
@outof_me
Facts
0,5
1
1,5
2
2009 2010 2011 2012 2013 2014 2015
Bilionsofusers
Mobile Desktop
Source: ComScore survey 2012
@outof_me
Fakty
3.5 BILION
INTERNET CONNECTED DEVICES
@outof_me
Responsive Web Design
@outof_me
Responsive Web Design
Ethan
Marcotte
@outof_me
May 2010 June 2011
Responsive Web Design
@outof_me
Responsive Web Design
Flexible & Fluid
Grid
Flexible
Images &
Media
Media 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 Reflow
Adobe Edge Reflow
@outof_me
Resources
‣Tools
‣Reflow - http://html.adobe.com/edge/reflow/
‣Responsive Inspector - http://outof.me/responsive-inspector/
‣RWD Frameworks:
‣Bootstrap http://twitter.github.io/bootstrap/
‣Frameless http://framelessgrid.com/
‣Responsive Grid System http://responsive.gs/
‣Responsive Grid System http://www.responsivegridsystem.com/
‣Skeleton http://www.getskeleton.com/
‣Unsemantic http://unsemantic.com/
‣Image libraries:
‣hisrc https://github.com/teleject/hisrc
‣Responsive Enhance https://github.com/joshje/Responsive-Enhance
‣Spriteme http://spriteme.org

Responsive Design Techniques, Tools and Design Strategies with Paul Trani