Scribd
Upload
4 views

Responsive-Web-Design

Responsive Web Design (RWD) is an approach that allows web pages to adapt to various screen sizes and devices, enhancing user experience and SEO performance. Key concepts include fluid grids, flexible images, and CSS media queries, which enable layout adjustments based on device characteristics. The document also discusses the importance of viewport settings and provides examples of responsive design techniques, including navigation and image handling.

Uploaded by

asfa rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views

Responsive-Web-Design

Responsive Web Design (RWD) is an approach that allows web pages to adapt to various screen sizes and devices, enhancing user experience and SEO performance. Key concepts include fluid grids, flexible images, and CSS media queries, which enable layout adjustments based on device characteristics. The document also discusses the importance of viewport settings and provides examples of responsive design techniques, including navigation and image handling.

Uploaded by

asfa rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

RESPONSIVE

WEB DESIGN
Responsive Web Design

Responsive Web Design (RWD) refers to the approach of


creating web pages that automatically adjust and adapt to
the user’s screen size, platform, and orientation. This
ensures that the website provides an optimal user
experience across a variety of devices, such as desktops,
tablets, and mobile phones.
Key Concepts

•Fluid grids: The layout adjusts based on screen size


using proportional units like percentages rather than fixed
units like pixels.
•Flexible images: Images are automatically resized to
fit within their containing element.
•CSS media queries: A tool for applying different styles
to different devices based on screen characteristics like
width or orientation.
Example

A non-responsive website would have a fixed width, making it look


zoomed out or distorted on mobile devices. A responsive website,
however, would automatically adapt to the screen width.

.container {
width: 100%; /* Container adjusts to screen size */
}

It will adjust to the available space for all screens, but you should
consider additional properties like media queries and max-width
to optimize the layout for different screen sizes.
Why is Responsive Web Design
Important?
Improved User Experience:
• Users are accessing websites from different devices, and
responsive design ensures that they can easily navigate and
interact with content.
• Better readability and easier navigation without the need to
zoom in or scroll horizontally.
SEO Benefits:
• Google prioritizes mobile-friendly websites in its search rankings,
meaning responsive sites tend to perform better in search results.
Reduced Maintenance:
• Rather than maintaining separate websites for mobile and desktop,
a single responsive site caters to all device sizes.
Media Queries

Media queries allow you to apply different styles


based on the properties of the device being used to
view your web page, such as its width, height, or
orientation. They help make a web page adaptable
to different devices by applying specific styles at
certain breakpoints.
Breakpoints

Breakpoints are specific screen widths where layout changes


should occur. Common breakpoints:

• 320px: small phones


• 768px: tablets
• 1024px: small desktops
• 1200px: large desktops
Media Types
Media Queries
Media Queries

■ Although websites are frequently seen on screens, CSS


may also be used to layout them for other outputs.
■ Your web pages may need to appear one way on a
computer screen and another when printed.
■ This is made feasible by querying media kinds.
Example

body {
color: black;
background-color: grey;
The background color in this
} illustration is set to grey. However,
@media print { the background color should be
body { clear if the page is printed. User
printer ink is preserved in this way.
background-color:
transparent;
}
}
Example
body {
color: black;
background-color:
white; If you don't specify any media type
} for your CSS, it will automatically
have a media type value of
all. These two blocks of CSS are
@media all { equivalent.
body {
color: black;
background-color:
white;
}
}
Query Conditions

■ You can add conditions to media types. These are called media
queries. The CSS is applied only if the media type matches and
the condition is also true. These conditions are called media
features.
■ This is the syntax for media queries:

@media type and (feature)


Example
Let's say you want to apply different styles depending on whether the
browser window is in landscape mode (the viewport width is greater
than its height) or portrait mode (the viewport height is greater
than its width). There's a media feature called orientation you can use
to test that:

@media all and (orientation: @media (orientation:


landscape) { landscape) {
// Styles for landscape mode. // Styles for landscape mode.
} }
@media all and (orientation: @media (orientation: portrait)
portrait) { {
// Styles for portrait mode. // Styles for portrait mode.
} }
Complete Example
body {
@media screen and (orientation:
margin: 0; /* Removes default margin */
landscape) {
display: flex; /* Flexbox layout to center the
body::after {
content */
content: "Landscape";
align-items: center; /* Vertically center the
}
content */
}
justify-content: center; /* Horizontally center the
@media screen and (orientation:
content */
portrait) {
height: 100vh; /* Full viewport height */
body::after {
width: 100vw; /* Full viewport width */
content: "Portrait";
font-size: 10vmax; /* Font size relative to
}
viewport, making it responsive */
}
}
Example: Layout based on Screen Width

/* Default styles for larger screens */


.container { In this example, the width of the
width: 80%; container will adjust depending on the
} screen size. On larger screens, it will
take up 80% of the screen width, but
/* Styles for screens 768px or smaller */ on smaller devices, it will expand to
@media screen and (max-width: 768px) { 100% to fill the screen.
.container {
width: 100%;
}
}
Example: Responsive
Navigation
/* Default navigation bar for large screens
Bar
*/
.nav {
display: flex; On larger screens, the navigation links
justify-content: space-around; are laid out in a row using flex. On
} smaller screens, the flex-direction
switches to column, stacking the links
/* Stacked navigation bar for small vertically.
screens */
@media screen and (max-width: 600px) {
.nav {
flex-direction: column;
}
}
Viewport

The viewport is the visible area of a web page. On mobile devices,


the default behavior is to display the full-width desktop version of a
page in a zoomed-out state, making it hard to read. The viewport
meta tag tells the browser how to control the page’s dimensions and
scaling.
Meta Tag for Viewport
The viewport meta tag must be included in the <head> of the HTML
document to ensure proper mobile scaling.

<meta name="viewport" content="width=device-width,


initial-scale=1.0">

•width=device-width: Sets the width of the page to the device's width.


•initial-scale=1.0: Ensures the page is displayed at a 1:1 scale (i.e., no
zoom).
Flexible Images
One of the challenges of responsive design is ensuring that images
resize properly to fit different screen sizes. By default, images have
fixed dimensions that don’t scale with the container. You can use the
following techniques to make images fluid.

CSS for fluid Images:

img {
max-width: 100%;
height: auto; /* Maintains aspect ratio */
}

The max-width: 100% ensures that the image scales down with the
container while maintaining its aspect ratio.
<picture> element
<picture>
<source media="(max-width: 600px)" srcset="small.jpg">
<source media="(max-width: 1200px)" srcset="medium.jpg">
<img src="large.jpg" alt="Responsive image">
</picture>

This example serves a smaller image (small.jpg) for screens that are
600px wide or less and a medium-sized image (medium.jpg) for screens
between 600px and 1200px.
Responsive Video Example
<style>
.video-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /*
<div class="video-container">
Aspect ratio 16:9 (56.25% = 9/16 *
<iframe
100) */
src="https://www.youtube.com/em
}
bed/dQw4w9WgXcQ"
frameborder="0"
.video-container iframe {
allowfullscreen></iframe>
position: absolute;
</div>
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
Practice Questions

1. Apply media queries to change the color of a header element based on


different screen widths (e.g., blue on small screens, green on medium
screens, and red on large screens).
2. Make an image gallery responsive, where the images resize depending on
the screen size. Add a <picture> element to serve different image sizes.

You might also like