Scribd
Upload
17 views4 pages

Lab 9 Responsive Website

The document outlines the principles of responsive web design, emphasizing the importance of adapting websites to various screen sizes using techniques like viewport meta tags, responsive text sizes, CSS media queries, and flexible grid layouts. It provides examples of how to implement these techniques in HTML and CSS, including responsive images and navigation. Additionally, it includes an exercise to create a responsive portfolio website with specific features and design requirements.

Uploaded by

Rakshit Awasthi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views4 pages

Lab 9 Responsive Website

The document outlines the principles of responsive web design, emphasizing the importance of adapting websites to various screen sizes using techniques like viewport meta tags, responsive text sizes, CSS media queries, and flexible grid layouts. It provides examples of how to implement these techniques in HTML and CSS, including responsive images and navigation. Additionally, it includes an exercise to create a responsive portfolio website with specific features and design requirements.

Uploaded by

Rakshit Awasthi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lab 9

Responsive Web Design to Enhance UX


Responsive web design ensures a website adjusts smoothly to different screen sizes and
devices, from large desktop monitors to small smartphones. This is achieved using flexible
layouts, media queries, and responsive images.

1. Viewport Meta Tag

The viewport meta tag in HTML helps control how a webpage scales and displays on
different devices. It’s particularly useful for responsive design, ensuring that a website adjusts
to various screen sizes.

Here’s an example:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Explanation:

 width=device-width: Sets the viewport width to match the device's screen width.
 initial-scale=1.0: Sets the initial zoom level (1.0 means no zoom).

2. Responsive Text Size

In responsive web design, the vw (viewport width) unit scales text relative to the width of the
viewport. For example, setting font-size: 5vw; makes the font size 5% of the viewport’s
width, allowing text to resize automatically across different screen sizes. This approach
ensures that text remains proportionally readable on both small and large screens.

Here’s an example of using vw for responsive text size in CSS:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* Responsive text using viewport width */
h1 {
font-size: 5vw; /* Font size is 5% of the viewport width */
}

p {
font-size: 2vw; /* Font size is 2% of the viewport width */
}
</style>
</head>
<body>
<h1>Responsive Text Example</h1>
<p>This text resizes based on the viewport width.</p>
</body>
</html>

In this example:

 The <h1> element's font size scales with 5vw, making it 5% of the viewport width.
 The paragraph <p> scales with 2vw, keeping it proportional across devices.

3. CSS Media Queries

CSS media queries allow you to apply different styles based on device characteristics like
screen width, height, orientation, and resolution. They’re key in creating responsive designs
that adjust layouts for different devices.

@media (min-width: 768px) { ... }


@media (max-width: 767px) { ... }

 Media queries allow styles to apply based on screen size.


 (min-width: 768px): Applies styles for screens at least 768 pixels wide.
 (max-width: 767px): Applies styles for screens up to 767 pixels wide.

4. Responsive Images

To make images responsive, you can use CSS to ensure they scale appropriately across
different screen sizes. Here’s a simple approach:

img {
max-width: 100%;
height: auto;
}

 max-width: 100%: Ensures that images do not overflow their container.


 height: auto: Maintains the aspect ratio of the image as it scales.

This method allows images to resize automatically based on the screen width, ensuring they
fit properly on devices of all sizes.

5. Flexible Grid Layout


A flexible grid layout uses CSS Flexbox to create responsive designs by distributing available
space between items within a container. Elements are allowed to "flex" and adjust their size
based on available space, creating a dynamic layout.

Example:

.container {
display: flex;
flex-wrap: wrap;
}

.container div {
flex: 1 1 50%;
}

@media (max-width: 768px) {


.container div {
flex: 1 1 100%;
}
}

 display: flex enables flexbox, creating a responsive layout.


 flex-wrap: wrap allows elements to wrap to the next line if they exceed container
width.
 flex: 1 1 50% gives each child 50% width, adjusting to 100% on smaller screens.

6. Responsive Navigation

Responsive navigation adjusts based on screen size, offering a menu that can change between a
horizontal bar on desktops and a collapsible "hamburger" menu on mobile devices.

.nav { display: none; }


.hamburger { display: block; }

@media (min-width: 768px) {


.nav { display: block; }
.hamburger { display: none; }
}

 .nav { display: none; } hides the navigation by default on mobile.


 .hamburger { display: block; } shows a "hamburger" icon instead.
 At min-width: 768px, display is swapped to show full navigation.

For more information on each section, refer to the below links:

1. W3Schools Responsive Web Design Guide.


2. https://www.w3schools.com/css/css_rwd_intro.asp
Exercise: Create a Responsive Portfolio Website with Header, Footer,
Sidebar, and Images

Objective:
Design a responsive portfolio webpage with the following features:

 Header with your name and navigation links.


 Sidebar with links to different sections (About, Projects, Contact).
 Main content area with text and images (e.g., profile image, project thumbnails).
 Footer with your contact information.

Steps:

1. HTML Structure:
o Create a header containing your name and a navigation bar.
o Add a sidebar with links to sections like About, Projects, and Contact.
o In the main area, include images (profile photo and project thumbnails) with
corresponding text.
o Add a footer with your contact details (email, phone).
2. CSS Styling:
o Use Flexbox or Grid for layout.
o Make the sidebar fixed on larger screens and collapsible for smaller screens
(hamburger menu).
o Set responsive text size using vw or em units.
o Ensure images scale properly on all screen sizes (use max-width: 100%).
3. Responsive Design:
o Use media queries to:
 Stack the layout vertically on mobile (sidebar below header).
 Ensure the images are resized and the text adjusts for readability.

Deliverables:

 A responsive portfolio webpage with a header, footer, and sidebar.


 The layout adjusts from a multi-column design on desktop to a single-column layout
on mobile.

You might also like