Responsive Design

121,498 views
118,156 views

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
203 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
121,498
On SlideShare
0
From Embeds
0
Number of Embeds
24,765
Actions
Shares
0
Downloads
2,068
Comments
13
Likes
203
Embeds 0
No embeds

No notes for slide

Responsive Design

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

×