Nächste SlideShare
Responsive Design
- RESPONSIVE DESIGN
- SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Rangesara-cannon.com @saracannon
- THE FUTURE OF MOBILE
- THE FUTURE OF MOBILE THE WEB
- IN THE YEAR 2015 2015
- The total number ofpeople using the web onmobile devices is set tosurpass 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 ANAFTERTHOUGHT
- 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 GRIDSalistapart.com/articlesfluidgrids by Ethan Marcotte
- GRID FRAMEWORKSlessframework.com columnal.com
- GRID FRAMEWORKScssgrid.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 SOLUTIONSnetmagazine.com/tutorials/ fitvidjs.com create-fluid-width-videos by Chris Coyier
- MEDIA SOLUTIONSflex.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 SPEEDIMAGE SIZE
- CONNECTION SPEEDIMAGE SIZE
- image by Geoff Teehan
- EVERYTHING IS A TRADEOFF
- retina.js
- NETWORK LINK CONDITIONER
- 2. MEDIA QUERIES
- CSS3-MEDIAQUERIES.JScode.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
Regards,
Catherine