1. 1. Responsive Web Design Farid MEZANE 2015
2. 2. Content 1 Introduction. 2 What Is A responsive Website ? 3 what does a responsive website actually do? 4 Why To Use responsive Website? 5 Content Adaptation Techniques 6 Major Components of a Responsive Website. 7 Conclusion.
3. 3. Introduction Nowadays we are facing a great number of different devices, with different input modes, All these devices had browsers and even more than ever before. If the input way and user expectation isn't always the same in all these devices, should the design deliver be equal?
4. 4. What is A responsive Website ? Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience, easy reading and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices (from mobile phones to desktop).
5. 5. what does a responsive website actually do? Responsive site architecture and design provides a fluid layout for your website that automatically changes 'responsively' and renders the optimum website experience to best suit the users viewing device - smartphones, Tablets, Netbooks, Desktops, even Widescreen TVs.
6. 6. Resizing website Sample
7. 7. Why To Use responsive Website? The internet is now an integral part of our lives, and, increasingly, people want access to it, any time, anywhere, any place. Websites are now being viewed on devices with hugely varied screen widths and resolutions, ranging from 320 to over 2500 pixels. If a mobile users has difficulty reading your website, youll lose them, perhaps for ever!
8. 8. Why to use RWD?
9. 9. Content Adaptation Techniques Server-Side Adaptation. Progressive Enhancement. Responsive Design. Adaptive Design .
10. 10. standard for providing the best user experience; early 2000s Server-Side Adaptation. Content Adaptation Techniques
11. 11. Content Adaptation Techniques provide a baseline user experience and build upon it based on the browsers capabilities; 2005-2007 . Progressive Enhancement
12. 12. Content Adaptation Techniques Extension of Progressive Enhancement using CSS3, media queries, fluid content; 2011 Responsive Design.
13. 13. Content Adaptation Techniques hybrid approach of server-side and client-side logic to provide the best user experience; 2013 Adaptive Design .
14. 14. Some examples Website
15. 15. Major Components of a Responsive Website Meta Tags. CSS3 Media Queries. Grid Systems. Frameworks.
16. 16. Major Components of a Responsive Website The meta tag provides metadata about the HTML document. used to specify page description, keywords, author of the document, last modified, and other metadata. used by browsers how to display content or reload page. Meta Tags.
17. 17. Major Components of a Responsive Website CSS3 Media Queries consists optional expression to assign different style-sheets depending on browser window size . CSS3 Media Queries.
18. 18. Major Components of a Responsive Website Fluid layouts are dynamic and user sensitive. the designer specifies content area width as browser window percentages. Grid Systems.
19. 19. Major Components of a Responsive Website Frameworks can be defined as a set of tools, libraries, conventions and best practices that enable the designers to cut down their routine tasks into reusable generic modules. Frameworks.
20. 20. Conclusion Responsive web design is recommended by Google, it allows one website to provide a great user-experience across many devices and screen sizes, and it also makes managing your SEO(Search engine optimization) strategy easier. For these reasons, responsive web design is the best option for your mobile SEO strategy.