Responsive Design
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Responsive Design

  • 98,746 views
Uploaded 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......

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.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • very nice..:) keep going
    Are you sure you want to
    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
    Are you sure you want to
    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
    ----------------------------------------------
    Are you sure you want to
    Your message goes here
  • cool present.
    Are you sure you want to
    Your message goes here
  • slide no. 5 lolzz.....
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
98,746
On Slideshare
80,205
From Embeds
18,541
Number of Embeds
126

Actions

Shares
Downloads
1,967
Comments
13
Likes
198

Embeds 18,541

http://www.labnol.org 7,683
http://www.vanseodesign.com 3,038
http://web-development-blog.de 1,812
http://sara-cannon.com 1,184
http://www.scoop.it 641
http://blog.dreamcss.com 576
http://www.iphone-entreprise.com 371
http://shenkarinteractive.com 327
http://djavimendi.blogspot.com 313
http://publicaciondeberescristian.blogspot.com 259
http://blog.arokiait.com 202
http://techmaster.vn 159
http://www.tourismusbesprechungsraum.at 143
http://biblianvirtual.blogspot.com 143
http://publicaciondeberescristian.blogspot.mx 142
http://misanturtzi.blogspot.com 138
http://www.pcmclientboost.com 113
http://www.narominded.com 113
http://learningecomputerscience.blogspot.in 102
http://www.amanwhoblogs.com 92
http://onlineactivity.yellis.net 74
http://www.siggyvolgt.nl 66
http://projekte2.bplaced.net 59
http://publicaciondeberescristian.blogspot.com.ar 53
http://localhost 50
http://blog.websourcing.fr 46
http://feeds2.feedburner.com 38
http://misanturtzi.blogspot.com.es 36
http://rascasse.com 32
http://www.online-marketing-automation.com 31
http://learningecomputerscience.blogspot.com 30
http://publicaciondeberescristian.blogspot.com.es 28
http://canarintercultural.blogspot.com 26
http://panda-entreotrascosas.blogspot.com 25
http://www.techgig.com 24
http://feeds.feedburner.com 23
http://hotadsensetrick.blogspot.com 21
http://translate.googleusercontent.com 16
http://ejvodarank.cms4all.info 14
http://tonimartz.tumblr.com 14
http://www.plowse.com 14
http://cojitambo77.blogspot.com 14
http://seminariowilo.blogspot.com 13
http://www.netvibes.com 11
http://127.0.0.1 11
http://newleavesclinic.com 10
http://madeinsanturtzi.blogspot.com.es 9
http://www.myswitzerland.com 9
http://interactive2.cossette.com 9
http://blog.naver.com 7

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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