The document discusses responsive design techniques and tools, emphasizing the need for adaptable web design strategies due to the rise of internet-connected devices. It covers various aspects such as flexible grids, media queries, and examples of responsive design approaches. Additionally, it provides resources and tools for implementing responsive web design effectively.

1. Responsive Design Techniques,
Tools and Design Strategies
Piotr Walczyszyn | outof.me | @outof_me

2. @outof_me
Facts
0,5
1
1,5
2
2009 2010 2011 2012 2013 2014 2015
Bilionsofusers
Mobile Desktop
Source: ComScore survey 2012

3. @outof_me
Fakty
3.5 BILION
INTERNET CONNECTED DEVICES

4. @outof_me
Responsive Web Design

5. @outof_me
Responsive Web Design
Ethan
Marcotte

6. @outof_me
May 2010 June 2011
Responsive Web Design

7. @outof_me
Responsive Web Design
Flexible & Fluid
Grid
Flexible
Images &
Media
Media Queries

8. @outof_me
Examples

9. @outof_me
Techniques

10. @outof_me
Techniques
Desktop Down vs. Mobile First

11. @outof_me
Techniques
Design First vs. Common Breakpoints

12. @outof_me
Techniques
PX Media Queries vs. EM Media Queries

13. @outof_me
Techniques
Horizontal & Vertical Media Queries

14. @outof_me
Tools

15. @outof_me
Edge Reflow
Adobe Edge Reflow

16. @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