Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo
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
Responsive Design
CONTENT
WHAT ABOUT SEPARATE MOBILE SITES?
m.facebook.com
WHAT ABOUT MOBILE APPS?
Responsive Design
WHAT ABOUT MOBILE THEMES?
Responsive Design
“   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
Responsive Design
%
Responsive Design
Responsive Design
TARGET ÷ CONTEXT = RESULT
            940




      720            220
TARGET ÷ CONTEXT = RESULT
            940

            100%

      720            220

 76.5957447%        23.40425535%
Responsive Design
Responsive Design
FLEXIBLE MEDIA
Responsive Design
“   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%
Responsive Design
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
Responsive Design
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
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
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

More Related Content

Responsive Design