responsive design
Post on 27-Jan-2015
100.228 Views
Preview:
DESCRIPTION
TRANSCRIPT
RESPONSIVE DESIGN
SARA CANNONArtist, Designer, & WordPress Developer In Birmingham, AL
Co-founder / Creative DirectorRange
sara-cannon.com @saracannon
THE FUTURE OF MOBILE
THE FUTURE OF MOBILETHE WEB
THE FUTURE OF MOBILETHE FUTURE OF MOBILETHE FUTURE OF MOBILETHE FUTURE OF MOBILE
2015IN THE YEAR
2015
INTERNATIONAL DATA CORPORATION (IDC)http://www.idc.com/getdoc.jsp?containerId=prUS23028711
The total number of people using the web on mobile devices is set to surpass desktops by 2015.
DESKTOP MOBILE
2007 20152009 20132011
DESKTOP MOBILE
2007 20152009 20132011
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.ukhicksdesign.co.ukhicksdesign.co.uk
hicksdesign.co.uk
hicksdesign.co.uk
bostonglobe.com
bostonglobe.combostonglobe.combostonglobe.com
bostonglobe.com
bostonglobe.com
pelicanfly.co.uk
pelicanfly.co.ukpelicanfly.co.ukpelicanfly.co.uk
pelicanfly.co.uk
pelicanfly.co.uk
morehazards.com
morehazards.commorehazards.commorehazards.com
morehazards.com
morehazards.com
foodsense.is
foodsense.isfoodsense.isfoodsense.is
foodsense.is
foodsense.is
HOW DO WE BECOME RESPONSIVE?
1. ADAPTIVE GRIDS, IMAGES, & MEDIA2. MEDIA QUERIES
3. TESTING / CRYING TWEAKING4. ?????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
720 220
76.5957447% 23.40425535%
100%
FLEXIBLE MEDIA
- LANCE WILLETT, WORDPRESS.COM
The toughest challenge in
implementing the responsive bits was fluid media.
The toughest challenge in The toughest challenge in The toughest challenge in The toughest challenge in
implementing the responsive implementing the responsive “
MEDIA SOLUTIONS
fitvidjs.com netmagazine.com/tutorials/create-fluid-width-videos
by Chris Coyier
MEDIA SOLUTIONS
fittext.jsflex.madebymufffin.com
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
DESKTOP MOBILE
2007 20152009 20132011
THE MOBILE WEB
CON
NEC
TION
SPE
ED
IMAGE SIZE
CON
NEC
TION
SPE
ED
IMAGE 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.Our work is never over.“- DAFT PUNK
top related