Scribd
Upload
24 views

unit 3

Uploaded by

sribalajibolloju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

unit 3

Uploaded by

sribalajibolloju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Responsive Web Design (RWD): Introduction, Viewport, Creating Responsive Websites, Responsive

Images, Responsive Texts. RWD-Media Queries: Introduction, Media Types, Device Breakpoints. RWD-
Grid View: Introduction, Grid-Row, Grid-Column.

Introduction to RWD:

Responsive web design is a fundamental approach in modern web development that enables websites
to seamlessly adapt to various screen sizes and devices. With the diversity of devices in use today, from
smartphones and tablets to desktop computers, it's essential to create web experiences that are
accessible and user-friendly for all. Responsive design achieves this by using fluid grids, media queries,
and flexible images, allowing content to adjust dynamically. By prioritizing a mobile-first approach and
employing techniques like CSS and viewport meta tags, responsive web design ensures that websites
look and function well on a wide range of screens, providing a consistent and user-centric experience.

Advantages and features of responsive web design can be summarized in five key points:

• Improved User Experience: Responsive web design ensures that your website looks and
functions optimally on all devices, providing a seamless and user-friendly experience. Content
adapts to different screen sizes, maintaining readability and usability.
• Cost-Efficiency: A responsive design approach allows you to maintain a single website that
serves all devices, reducing development and maintenance costs associated with managing
separate desktop and mobile sites.
• SEO Benefits: Search engines favor mobile-friendly websites, and responsive design can enhance
your search engine rankings. It ensures that your content is accessible and consistent across
devices, improving SEO performance.
• Flexibility and Adaptability: Responsive websites are adaptable to new and evolving devices,
ensuring your site remains relevant as technology advances. This flexibility is achieved through
fluid grids, media queries, and a mobile-first approach.
• Brand Consistency: Responsive design ensures that your brand identity remains consistent,
regardless of the device used to access your site. This consistency reinforces your brand's image
and message across different platforms and screens.

What is viewport explain with example

The viewport controls how a web page is displayed on a mobile device and is specified in the HTML code
using the <meta> tag. The viewport meta tag helps optimize the viewing experience by allowing web
developers to define the initial scale, width, and other attributes for the viewport. It ensures that web
pages are displayed correctly and at an appropriate scale on various mobile devices.

example of viewport meta tag in <head> section of an HTML document:


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> Content</body></html>
width=device-width instructs the browser to set the width of the viewport to match the device's screen
width. This is essential for making sure the content fits the screen properly on various devices.

initial-scale=1 sets the initial zoom level to 100%. This means the webpage will load at its actual size,
without any automatic zooming or scaling. This is especially important for responsive designs because it
prevents the page from appearing too small or too large when initially loaded.

By including the viewport meta tag in your HTML, you're telling the browser to adjust the web page
layout to fit the device's screen size, ensuring a better user experience on mobile devices. Without it,
web pages might be displayed as scaled-down versions of their desktop counterparts, making them
difficult to navigate and read on smaller screens.
SIZE CONTENT TO THE VIEWPORT:
used to scroll websites vertically (horizontal scroll indicate poor display)
Rules to remember
• Do NOT use large fixed width elements
• Do NOT let the content rely on a particular viewport width to render well
• Use CSS media queries to apply different styling for small and large screens (100%)

HOW TO CREATE A RESPONSIVE WEB SITE


Creating responsive websites can be broken down into 10 important points:

• Mobile-First Approach: Start by designing for mobile devices first, ensuring a solid foundation
for scaling up.
• Flexible Layouts: Use relative units like percentages for grid systems and elements to adapt to
various screen sizes.
• Media Queries: Employ CSS media queries to apply specific styles for different screen sizes.
• Fluid Images and Media: Ensure images and multimedia elements scale proportionally to fit the
screen.
• Viewport Meta Tag: Include a viewport meta tag in your HTML to control the initial scale and
width for the viewport.
• Content Prioritization: Decide what content is most important for small screens and make it
accessible.
• Mobile-Friendly Navigation: Implement navigation menus suitable for small screens, like
hamburger menus.
• Typography and Fonts: Use relative units for font sizing to maintain readability on different
devices.
• Testing and Debugging: Thoroughly test and debug your responsive design across various
devices and browsers.
• Performance Optimization: Optimize your website for fast loading by compressing images,
minifying code, and improving page speed.
• Gather feedback from users and use analytics to understand how your responsive design is
performing and make necessary improvements.
Responsive web design is an ongoing process that requires attention to detail and adaptation as
technology and user needs evolve. By following these steps and staying up-to-date with best practices,
you can create a responsive website that offers a great user experience on various devices.
RESPONSIVE IMAGES
Responsive images are a key component of responsive web design. They are designed to adapt
to various screen sizes and resolutions, ensuring that images display optimally on different
devices, from large desktop screens to small mobile screens. The goal is to deliver the most
appropriate image for a given screen without wasting bandwidth or slowing down page load
times.

Example using scrset attribute


<img src="image-small.jpg"
srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 900w"
alt="Responsive Image Example">
• The src attribute specifies the default image (image-small.jpg) to be displayed if the
browser doesn't support srcset.
• The srcset attribute lists multiple image sources and their associated widths.
• The browser selects the most appropriate image based on the available space and
screen resolution.
• For example, if the viewport is 400 pixels wide, the browser might choose image-
medium.jpg because it's a good fit for a 400-pixel-wide display.
• If the viewport is 800 pixels wide, it may select image-large.jpg for better quality on a
larger screen.

This responsive image technique helps in delivering the right image size to users, optimizing
load times, and improving the user experience. It's a simple but effective way to make sure your
website looks great and performs well on various devices.

RWD BACKGROUND IMAGE:


Creating a responsive background image involves ensuring that the image scales and adapts to
different screen sizes and devices. You can achieve this using CSS by setting the background
image property with appropriate values. Here's how to create a responsive background image:
The background-image property in the CSS is set to the image file you want as the background.
Example:
<!DOCTYPE html>
<html><head><style>
body {
background-image: url('background-image.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style></head><body>
Body content
</body>
</html>
background-size: cover; ensures that the background image covers the entire viewport, scaling
it proportionally to fit.

background-repeat: no-repeat; prevents the background image from repeating.

background-attachment: fixed; makes the background image fixed, so it remains in place as the
user scrolls, creating a parallax effect.

This CSS code creates a responsive background image that adjusts to various screen sizes while
maintaining its aspect ratio and preventing repetition. You can further fine-tune the behavior
by adjusting the background properties according to your design requirements.
Media queries are a fundamental part of responsive web design, allowing you to apply specific
styles to your web page based on the characteristics of the user's device, such as screen size,
resolution, orientation, and more. They enable you to create a responsive layout that adapts to
different devices and screen widths. Media queries are written in CSS and follow a specific
syntax.

MEDIA QUERIES are a fundamental part of responsive web design, allowing you to apply
specific styles to your web page based on the characteristics of the user's device, such as screen
size, resolution, orientation, and more. They enable you to create a responsive layout that
adapts to different devices and screen widths. Media queries are written in CSS and follow a
specific syntax.
Syntax:
@media media-type and (media-feature)
{
/* set of CSS rules to be applied */
}

Media Types:
Media types specify the type of media the query targets, such as 'screen,' 'print,' 'speech,' or
'all.' Most commonly, web developers use 'screen' for targeting screens, as it's the medium
used for web design.

Media Features:
Media features are conditions or characteristics of the user's device that you can target in your
query. Common media features include:

• width: Specifies the width of the viewport.


• min-width and max-width: Set minimum and maximum viewport widths.
• height: Specifies the height of the viewport.
• orientation: Detects whether the device is in 'portrait' or 'landscape' mode.
• resolution: Checks the screen's resolution, like 'dpi' (dots per inch).
• aspect ratio, color etc.
Example Media Queries:

• @media screen and (min-width: 768px) { /* CSS rules for screens with a width of 768px
or more */ }
• @media screen and (orientation: landscape) { /* CSS rules for screens in landscape
orientation */ }
• @media screen and (min-resolution: 192dpi) { /* CSS rules for high-resolution screens */
}

Example code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
/* less than 400px: */
body {
background-repeat: no-repeat;
background-image: url('wp.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('wph.jpg');
}
}
</style></head><body>
<p style="margin-top:360px;">Resize the browser width and the
background image will change at 400px.</p>
</body></html>

Media queries allow you to create a responsive design by customizing the appearance and
layout of your website based on the capabilities and attributes of the user's device. They help
ensure your website looks and functions well on a wide range of screens, from mobile phones
to desktop monitors, contributing to a better user experience.

Different media (video) example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>

<video width="400" controls>


<source src="ddd.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>

<p>Resize the browser window to see how the size of the video
player will scale. use different types of videos to avoid
blanks</p>

</body>
</html>

BREEAK POINT
In responsive web design (RWD), device breakpoints are specific points at which the layout and
design of a website or web application change to accommodate different screen sizes and
devices. These breakpoints are used to ensure that a website looks and functions well on a wide
range of devices, from small mobile phones to large desktop monitors.

Here are some common device breakpoints used in responsive web design:

Extra Small (XS): This breakpoint typically targets mobile phones in portrait mode. It's often set
at 0-576 pixels in width.

Small (SM): This breakpoint is designed for larger mobile phones in landscape mode and small
tablets. It's often set at 577-768 pixels in width.

Medium (MD): This breakpoint caters to larger tablets and small laptops or desktops. It's often
set at 769-992 pixels in width.

Large (LG): The large breakpoint is for larger desktop screens and some smaller laptops. It's
typically set at 993-1200 pixels in width.

Extra Large (XL): This breakpoint is for extra-large desktop monitors. It's usually set at 1201
pixels and above.

It's important to note that the specific pixel values for these breakpoints can vary from one web
project to another, and designers may adjust them to best suit the project's needs. Additionally,
modern web design often focuses on using relative units like percentages and viewport units
(e.g., vw, vh) rather than fixed pixel values, to create a more flexible and fluid responsive
design.

Responsive design isn't just about adjusting layouts at specific breakpoints but also about
adapting content and design elements to ensure a seamless user experience across different
devices and screen sizes. CSS media queries are commonly used to apply different styles or
layouts at specific breakpoints, making it possible to create responsive web designs that adapt
to various devices.

RESPONSIVE GRID VIEW


Creating a responsive grid view in a web page is a common design pattern for laying out
content, such as images or product listings. To achieve a responsive grid view, you can use
HTML and CSS
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}

.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
font-size: 24px;
}
</style>

</head>
<body>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<!-- Add more grid items as needed -->
</div>
</body>
</html>
CSS grid: properties

• Grid container: The box that holds the grid. This is the main building block of the CSS
grid
• Grid cell: A one-by-one unit on a grid
• Grid area: Either a single cell or multiple cells that take the form of a square or
rectangle (but not an L-shape)
• Grid tracks: The collection of rows and columns, defined using grid-template-columns
and grid-template-rows properties
• Grid gaps: Help to create spaces on the grid. You can not have contents on or within a
grid-gap
• Explicit grid: Defined by you using grid-template-columns and grid-template-rows
• Implicit grid: Defined for you by the browser

You might also like