RESPONSIVE DESIGN
SARA CANNON                          Artist, Designer, & WordPress                          Developer In Birmingham, AL   ...
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.                     INTERNATIO...
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 ...
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. ?????           ...
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, WORDP...
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+, Fir...
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
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Responsive Design
Upcoming SlideShare
Loading in...5
×

Responsive Design

103,268

Published on

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.

Published in: Technology, Design
13 Comments
200 Likes
Statistics
Notes
  • very nice..:) keep going
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Generally we create an website that is compatible for systems, but now a days various sizes of mobile screen ,note books etc came in to the picture , so there is necessity of responsive websites . Creating a website is not a big deal. we can create our own website using online courses. If you are interested you can go through netultimateschool.com


    Regards,
    Catherine
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Web Design, Web Development and SEO Services Noida, Delhi/NCR (India)


    Web It Experts is a Noida, Delhi/NCR (India) based Web designing and website development company. We provide Services for SEO, Website promotion, Software development, Mobile applications, Web hosting services.

    Website redesign services, Software Development Company Noida, Delhi- NCR, India, SEO Company Noida, Delhi- NCR, India, Web Development Noida, Delhi- NCR, India, Website Maintenance Noida, Delhi- NCR, India, Cheap Website Design in India, USA, UK, CANADA, Australia Website solutions in Noida, Delhi- NCR, India

    Web It Experts is an India based e-commerce web design firm specialise in Web design, Web development, Web hosting, Zencart templates design.
    ----------------------------------------------------------------------------------------------
    We are creative website design, Web Development, SEO, Custom Web Designing, SEO services provider company based in NOIDA/Delhi-NCR, our best Rates in Web Designing and Web Development.

    Our Services:

    Web Designing

    Web Development

    Search Engine Optimization

    Web Hosting

    Website : www.webitexperts.com


    Email : sales@webitexperts.com
    ----------------------------------------------
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • cool present.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • slide no. 5 lolzz.....
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
103,268
On Slideshare
0
From Embeds
0
Number of Embeds
66
Actions
Shares
0
Downloads
2,005
Comments
13
Likes
200
Embeds 0
No embeds

No notes for slide

Responsive Design

  1. 1. RESPONSIVE DESIGN
  2. 2. SARA CANNON Artist, Designer, & WordPress Developer In Birmingham, AL Co-founder / Creative Director Rangesara-cannon.com @saracannon
  3. 3. THE FUTURE OF MOBILE
  4. 4. THE FUTURE OF MOBILE THE WEB
  5. 5. IN THE YEAR 2015 2015
  6. 6. 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
  7. 7. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  8. 8. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  9. 9. THE MOBILE WEB
  10. 10. THE WEB
  11. 11. WHAT IS THE MOBILE WEB?
  12. 12. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  13. 13. MOBILE SHOULD NEVER BE ANAFTERTHOUGHT
  14. 14. CONTENT
  15. 15. WHAT ABOUT SEPARATE MOBILE SITES?
  16. 16. m.facebook.com
  17. 17. WHAT ABOUT MOBILE APPS?
  18. 18. WHAT ABOUT MOBILE THEMES?
  19. 19. “ 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
  20. 20. RESPONSIVE WEB DESIGN
  21. 21. HicksDesign.co.uk
  22. 22. hicksdesign.co.uk
  23. 23. hicksdesign.co.uk
  24. 24. hicksdesign.co.uk
  25. 25. hicksdesign.co.uk
  26. 26. bostonglobe.com
  27. 27. bostonglobe.com
  28. 28. bostonglobe.com
  29. 29. bostonglobe.com
  30. 30. pelicanfly.co.uk
  31. 31. pelicanfly.co.uk
  32. 32. pelicanfly.co.uk
  33. 33. pelicanfly.co.uk
  34. 34. morehazards.com
  35. 35. morehazards.com
  36. 36. morehazards.com
  37. 37. morehazards.com
  38. 38. foodsense.is
  39. 39. foodsense.is
  40. 40. foodsense.is
  41. 41. foodsense.is
  42. 42. HOW DO WE BECOME RESPONSIVE?
  43. 43. 1. ADAPTIVE GRIDS, IMAGES, & MEDIA 2. MEDIA QUERIES 3. TESTING / CRYING TWEAKING 4. ????? 5. PROFIT!
  44. 44. 1. ADAPTIVE GRIDS, IMAGES, & MEDIA
  45. 45. FLEXIBLE GRIDSalistapart.com/articlesfluidgrids by Ethan Marcotte
  46. 46. GRID FRAMEWORKSlessframework.com columnal.com
  47. 47. GRID FRAMEWORKScssgrid.net getskeleton.com
  48. 48. %
  49. 49. TARGET ÷ CONTEXT = RESULT 940 720 220
  50. 50. TARGET ÷ CONTEXT = RESULT 940 100% 720 220 76.5957447% 23.40425535%
  51. 51. FLEXIBLE MEDIA
  52. 52. “ The toughest challenge in implementing the responsive bits was fluid media. - LANCE WILLETT, WORDPRESS.COM
  53. 53. MEDIA SOLUTIONSnetmagazine.com/tutorials/ fitvidjs.com create-fluid-width-videos by Chris Coyier
  54. 54. MEDIA SOLUTIONSflex.madebymufffin.com fittext.js
  55. 55. FLEXIBLE IMAGES
  56. 56. MAX WIDTH: 100%
  57. 57. ADAPTIVE IMAGES
  58. 58. filamentgroup.com/lab/responsive_images_experimenting _with_context_aware_image_sizing
  59. 59. adaptive-images.com
  60. 60. viewportindustries.com/blog/automatic-responsive-images-in-wordpress
  61. 61. 2G IS THE NEW DIAL-UP
  62. 62. 2007 2009 2011 2013 2015 DESKTOP MOBILE
  63. 63. THE MOBILE WEB
  64. 64. CONNECTION SPEEDIMAGE SIZE
  65. 65. CONNECTION SPEEDIMAGE SIZE
  66. 66. image by Geoff Teehan
  67. 67. EVERYTHING IS A TRADEOFF
  68. 68. retina.js
  69. 69. NETWORK LINK CONDITIONER
  70. 70. 2. MEDIA QUERIES
  71. 71. 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
  72. 72. MOBILE FIRST
  73. 73. 3. TESTING / CRYING / TWEAKING
  74. 74. LIMIT YOUR RESOURCES
  75. 75. EVERYTHING IS A TRADEOFF
  76. 76. RESOURCES
  77. 77. alistapart.com/articles/fluidgrids
  78. 78. alistapart.com/articles/responsive-web-design
  79. 79. alistapart.com/articles/responsive-web-design
  80. 80. unstoppablerobotninja.com/entry/fluid-images/
  81. 81. mediaqueri.es
  82. 82. smashingmagazine.com/2011/07/22/responsive-web-design- techniques-tools-and-design-strategies
  83. 83. zomigi.com/blog/essential-considerations-for-crafting- quality-media-queries/
  84. 84. palantir.net/blog/scalable-navigation-patterns- responsive-web-design
  85. 85. designshack.net/articles/css/sass-and-media-queries- what-you-can-and-cant-do
  86. 86. responsive.is
  87. 87. ILLUSTRATION INSPIRED BY BRAD FROST http://sar.ac/IJF7Rf
  88. 88. “ Our work is never over. - DAFT PUNK
  1. ¿Le ha llamado la atención una diapositiva en particular?

    Recortar diapositivas es una manera útil de recopilar información importante para consultarla más tarde.

×