Responsive Design Workflow
Your SlideShare is downloading.
×
Check these out next
Recommended
More Related Content
Slideshows for you (20)
Viewers also liked (20)
Similar to Responsive Design (20)
More from Sara Cannon (20)
Recently uploaded (20)
Responsive Design
- RESPONSIVE DESIGN
- SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Range sara-cannon.com @saracannon
- THE FUTURE OF MOBILE
- THE FUTURE OF MOBILE THE WEB
- IN THE YEAR 2015 2015
- The total number of people using the web on mobile devices is set to surpass desktops by 2015. INTERNATIONAL DATA CORPORATION (IDC) http://www.idc.com/getdoc.jsp?containerId=prUS23028711
- 2007 2009 2011 2013 2015 DESKTOP MOBILE
- 2007 2009 2011 2013 2015 DESKTOP MOBILE
- THE MOBILE WEB
- THE WEB
- WHAT IS THE MOBILE WEB?
- ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
- MOBILE SHOULD NEVER BE AN AFTERTHOUGHT
- CONTENT
- WHAT ABOUT SEPARATE MOBILE SITES?
- m.facebook.com
- WHAT ABOUT MOBILE APPS?
- WHAT ABOUT MOBILE THEMES?
- “ Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. - ETHAN MARCOTTE alistapart.com/articles/responsive-web-design
- RESPONSIVE WEB DESIGN
- HicksDesign.co.uk
- hicksdesign.co.uk
- hicksdesign.co.uk
- hicksdesign.co.uk
- hicksdesign.co.uk
- bostonglobe.com
- bostonglobe.com
- bostonglobe.com
- bostonglobe.com
- pelicanfly.co.uk
- pelicanfly.co.uk
- pelicanfly.co.uk
- pelicanfly.co.uk
- morehazards.com
- morehazards.com
- morehazards.com
- morehazards.com
- foodsense.is
- foodsense.is
- foodsense.is
- foodsense.is
- HOW DO WE BECOME RESPONSIVE?
- 1. ADAPTIVE GRIDS, IMAGES, & MEDIA 2. MEDIA QUERIES 3. TESTING / CRYING TWEAKING 4. ????? 5. PROFIT!
- 1. ADAPTIVE GRIDS, IMAGES, & MEDIA
- FLEXIBLE GRIDS alistapart.com/articlesfluidgrids by Ethan Marcotte
- GRID FRAMEWORKS lessframework.com columnal.com
- GRID FRAMEWORKS cssgrid.net getskeleton.com
- %
- TARGET ÷ CONTEXT = RESULT 940 720 220
- TARGET ÷ CONTEXT = RESULT 940 100% 720 220 76.5957447% 23.40425535%
- FLEXIBLE MEDIA
- “ The toughest challenge in implementing the responsive bits was fluid media. - LANCE WILLETT, WORDPRESS.COM
- MEDIA SOLUTIONS netmagazine.com/tutorials/ fitvidjs.com create-fluid-width-videos by Chris Coyier
- MEDIA SOLUTIONS flex.madebymufffin.com fittext.js
- FLEXIBLE IMAGES
- MAX WIDTH: 100%
- ADAPTIVE IMAGES
- filamentgroup.com/lab/responsive_images_experimenting _with_context_aware_image_sizing
- adaptive-images.com
- viewportindustries.com/blog/automatic-responsive-images-in-wordpress
- 2G IS THE NEW DIAL-UP
- 2007 2009 2011 2013 2015 DESKTOP MOBILE
- THE MOBILE WEB
- CONNECTION SPEED IMAGE SIZE
- CONNECTION SPEED IMAGE SIZE
- image by Geoff Teehan
- EVERYTHING IS A TRADEOFF
- retina.js
- NETWORK LINK CONDITIONER
- 2. MEDIA QUERIES
- CSS3-MEDIAQUERIES.JS code.google.com/p/css3-mediaqueries-js css3-mediaqueries.js is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries
- MOBILE FIRST
- 3. TESTING / CRYING / TWEAKING
- LIMIT YOUR RESOURCES
- EVERYTHING IS A TRADEOFF
- RESOURCES
- alistapart.com/articles/fluidgrids
- alistapart.com/articles/responsive-web-design
- alistapart.com/articles/responsive-web-design
- unstoppablerobotninja.com/entry/fluid-images/
- mediaqueri.es
- smashingmagazine.com/2011/07/22/responsive-web-design- techniques-tools-and-design-strategies
- zomigi.com/blog/essential-considerations-for-crafting- quality-media-queries/
- palantir.net/blog/scalable-navigation-patterns- responsive-web-design
- designshack.net/articles/css/sass-and-media-queries- what-you-can-and-cant-do
- responsive.is
- ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
- “ Our work is never over. - DAFT PUNK
