responsive design techniques, tools and design strategies with paul trani
DESCRIPTION
Responsive design is all the rage right now, which has lead to some interesting approaches, frameworks, and tools. In this session Adobe Evangelist Paul Trani will review these approaches as well as showcase Edge Reflow—Adobe’s solution to responsive web design.TRANSCRIPT
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