responsive design
DESCRIPTION
Websites are all about content. People can access your content many different ways and formats with mobile devices, iPads, phones, etc. The questions are: how can we maintain control over the display of our content and keep our brand consistent? How can we try to provide the best user experience on any platform? Enter Responsive Web Design. Many experts are not leaning on one static design but on structured content that adapts to its given environment. In this talk, we are going to take a look at responsive web design techniques out there including: progressive enhancement, flexible grids, media queries, flexible images & video, & other methods of implementation.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