Responsive web design


Published on

Small introduction on Responsive Web Design

Published in: Design, Technology, Business
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive web design

  1. 1. RESPONSIVE Web Design Presenter: Gopinath Ambothi
  2. 2. Index  What is RWD?  Why RWD?  How to Make a Website Responsive?  Media Queries  RWD – Some basic Tips  Showcase of RWDs in action
  3. 3. What is RWD?Responsive web design is the term given to the concept ofdesigning and developing a website so that the layout changesdepending on the device/viewport on which the website isbeing viewed. By device, this could be a mobile phone, tablet,laptop, desktop computer, or even a smart TV. The term Responsive Web Design was coined by its creator, Ethan Marcotte
  4. 4. WhyResponsiveWeb Design?
  5. 5. Why RWD?
  6. 6. Why RWD? [contd…] 6.5 Billion connected people when I prepare this presentation!
  7. 7. Why RWD? [contd…] How can we deliver great internet experience to all these 6.5 billion people ?!?!!?
  8. 8. Why RWD? [contd…] One good solution was... Mobile version of the Websites. But,  Difficult to Manage 2 versions  Doesn’t have all the features of the main site  Have limitations …
  9. 9. Why RWD? [contd…]One guy sat down andthought really hard.He wrote an article aboutresponsive web designEthan Marcotte - is a webdesigner & developer,a speaker and author
  10. 10. Why RWD? [contd…] Excellent Idea! One website that adapts, looks and works great on all devices.
  11. 11. How to Make a Website Responsive?
  12. 12. How to make a websiteResponsive? Components
  13. 13. How to make a websiteResponsive? [contd…] Fully based on Fluid Web Design %
  14. 14. How to make a websiteResponsive? [contd…] Fluid Web Design: Automatically fits in all screens. But… It becomes uncomfortable in certain resolutions and view ports.
  15. 15. How to make a websiteResponsive? [contd…] Use CSS Media Queries A media query allows you to gain informationabout the viewport from which the user/visitor islooking at the website and target that particular screen size by applying specific CSS styles.
  16. 16. Media Queries
  17. 17. Media QueriesCSS3 media queries go hand in hand with the flexible grid tomake responsive web design work.Luckily CSS3 is supported by many modern browsers. @media screen and (max-width: 960px) { … … … }
  18. 18. Media Queries [contd…] Most important media feature is the “min-width”, this property allows us to apply specific CSS styles if the browser window (in pixels) drops below a particular width. Most common pixel min-widths: 320px 480px 600px 768px 900px 1200px
  19. 19. Media Queries [contd…] Sample Media Query code: <style type="text/css"> @media (min-width: 481px) and (max-width: 768px) { #banner { width:740px; } #banner img { max-width:740px; max-height:222px; } #main { width:740px; } #main-content { width:450px; float:left; } #widget-container { width:200px; float:right; } .widget-content { width:160px; } } @media (min-width: 321px) and (max-width: 480px) { #banner { width:450px; } #banner img { max-width:450px; max-height:135px; } #main { width:450px; } #main-content { width:400px;} #widget-container { width:400px; } .widget-content { width:120px; margin:5px; float:left;} .widget-text { display:none; } } @media (max-width: 320px) { #banner { width:275px; } #banner img { max-width:275px; max-height:83px; } #main { width:250px; } #main-content { width:250px;padding:0px;} #widget-container { width:250px; padding:0px; } .widget-content { width:250px; margin:5px;} .widget-text { display:none; } } </style>
  20. 20. RWD – Tips
  21. 21. RWD – Some basic Tips Use @media to scale your layout for any screen, but remember thatthis alone isn’t really responsive design. Use liquid layouts that can accommodate any screen size. Mobile first design. Start with a narrow, single-column layout tohandle mobile browsers and then scale up from there rather than theother way around. Forget Photoshop, build your comps in the browser. Scale images using img { max-width: 100%; }. For very largeimages, consider using something like Adaptive Images to offer the verysmallest screens smaller image downloads and then use JavaScript toswap in larger images for larger screens. Similar techniques can be usedto scale video. IE8 or older doesn’t support media queries.We can enable it by adding the css3-mediaqueries.js Javascript file.<!--[if lt IE 9]> <script src=""></script><![endif]-->
  22. 22. Showcase of RWD in action
  23. 23. RWD in Action