Responsive Web Design allows websites to automatically adapt to different screen sizes and devices like smartphones, tablets and desktops. It uses fluid grids, flexible images and CSS media queries to detect screen size and orientation and optimize the layout. Major components include meta tags, CSS3 media queries, grid systems and frameworks that help the site dynamically resize text, images and layout based on screen size to provide the best user experience across all devices.

1. Responsive Web Design
Farid MEZANE
2015

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. 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. 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. 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 user’s viewing
device - smartphones, Tablets, Netbooks,
Desktops, even Widescreen TVs.

6. Resizing website Sample

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, you’ll lose them, perhaps for ever!

8. Why to use RWD?

9. Content Adaptation
Techniques
Server-Side Adaptation.
Progressive Enhancement.
Responsive Design.
Adaptive Design .

10. •standard for providing the best
user experience; early 2000s
Server-Side Adaptation.
Content Adaptation
Techniques

11. Content Adaptation
Techniques
•provide a baseline user
experience and build upon it
based on the browser’s
capabilities; 2005-2007 .
Progressive Enhancement

12. Content Adaptation
Techniques
•Extension of Progressive
Enhancement using CSS3,
media queries, fluid content;
2011
Responsive Design.

13. Content Adaptation
Techniques
•hybrid approach of server-side
and client-side logic to provide
the best user experience; 2013
Adaptive Design .

14. Some examples
Website

15. Major Components of a
Responsive Website
Meta Tags.
CSS3 Media Queries.
Grid Systems.
Frameworks.

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. 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. 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. 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. 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.