Responsive Design Techniques, Tools and Design Strategies with Paul Trani
description
Transcript of Responsive Design Techniques, Tools and Design Strategies with Paul Trani
![Page 1: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/1.jpg)
Responsive Design Techniques, Tools and Design StrategiesPiotr Walczyszyn | outof.me | @outof_me
![Page 2: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/2.jpg)
@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
![Page 3: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/3.jpg)
@outof_me
Fakty
3.5 BILIONINTERNET CONNECTED DEVICES
![Page 4: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/4.jpg)
@outof_me
Responsive Web Design
![Page 5: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/5.jpg)
@outof_me
Responsive Web Design
EthanMarco!e
![Page 6: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/6.jpg)
@outof_me
May 2010 June 2011
Responsive Web Design
![Page 7: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/7.jpg)
@outof_me
Responsive Web Design
Flexible & Fluid Grid
Flexible Images &
MediaMedia Queries
![Page 8: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/8.jpg)
@outof_me
Examples
![Page 9: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/9.jpg)
@outof_me
Techniques
![Page 10: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/10.jpg)
@outof_me
Techniques
Desktop Down vs. Mobile First
![Page 11: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/11.jpg)
@outof_me
Techniques
Design First vs. Common Breakpoints
![Page 12: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/12.jpg)
@outof_me
Techniques
PX Media Queries vs. EM Media Queries
![Page 13: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/13.jpg)
@outof_me
Techniques
Horizontal & Vertical Media Queries
![Page 14: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/14.jpg)
@outof_me
Tools
![Page 15: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/15.jpg)
@outof_me
Edge Re!ow
Adobe Edge Re"ow
![Page 16: Responsive Design Techniques, Tools and Design Strategies with Paul Trani](https://reader034.fdocuments.us/reader034/viewer/2022052619/555820add8b42a5e468b4fb2/html5/thumbnails/16.jpg)
@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