Lesson 5.1 – What is Responsive Design?

🌐 Creating Websites That Work on Mobile, Tablet, Laptop, and Desktop Screens

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Responsive Design

✅ Identify Different Screen Sizes

✅ Understand Why Responsive Websites Are Important

✅ Learn Mobile-Friendly Design Concepts

✅ Create Better User Experiences

✅ Prepare for Media Queries

✅ Build Modern Websites

📖 Introduction

Imagine you create a beautiful website on your laptop.

On your laptop it looks like:

----------------------------------

WELCOME TO MY WEBSITE

Home About Contact

----------------------------------

Looks perfect.

Now open the same website on a mobile phone.

WELCOME TO MY WEBSITE

Home About Contact

Everything may become:

❌ Too small

❌ Difficult to read

❌ Difficult to click

❌ Poor user experience

This problem is solved using:

📱 Responsive Web Design

🤔 What is Responsive Design?

Responsive Design means:

A website automatically adjusts
its layout according to screen size.

A responsive website works properly on:

📱 Mobile Phones

📱 Tablets

💻 Laptops

🖥️ Desktop Computers

🌟 Simple Definition

Responsive Design is a web design technique that makes websites look good on every device.

🎯 Example

Non-Responsive Website

Desktop:

HTML CSS JS React

Mobile:

HTML CSS JS React

Everything becomes squeezed.

Responsive Website

Desktop:

HTML CSS JS React

Mobile:

HTML

CSS

JS

React

Automatically adjusted.

🌍 Why Responsive Design is Important?

Today most internet users use:

📱 Smartphones

instead of:

🖥️ Desktop Computers

Statistics show:

More than half of website visitors use mobile devices.

If your website is not responsive:

❌ Visitors leave quickly

❌ Poor user experience

❌ Lower search ranking

❌ Difficult navigation

Responsive websites:

✅ Look professional

✅ Increase visitors

✅ Improve usability

✅ Work on all devices

🎯 Types of Devices

📱 Mobile Phones

Screen Width:

320px – 767px

Examples:

• Android Phones
• iPhone

📱 Tablets

Screen Width:

768px – 1023px

Examples:

• iPad
• Android Tablets

💻 Laptops

Screen Width:

1024px – 1439px

🖥️ Desktop Computers

Screen Width:

1440px and above

🌟 Responsive Website Example

Desktop View:

--------------------------------

LOGO

HOME ABOUT CONTACT

--------------------------------

SERVICE 1 | SERVICE 2 | SERVICE 3

--------------------------------

Mobile View:

LOGO

HOME

ABOUT

CONTACT

SERVICE 1

SERVICE 2

SERVICE 3

Same website.

Different arrangement.

🎯 Why Old Websites Fail

Older websites often used:

width:1200px;

Fixed width.

Problem:

Mobile screen:

400px

Website:

1200px

Result:

❌ Horizontal scrolling

❌ Broken layout

🌟 Modern Responsive Websites Use

Instead of:

width:1200px;

Use:

width:100%;

Or:

max-width:1200px;

Benefits:

✅ Flexible Layout

✅ Better Mobile Experience

🎯 Responsive Design Principles

Modern websites follow:

Principle 1

Flexible Layouts

Example:

width:100%;

Principle 2

Responsive Images

Example:

img{

width:100%;

}

Images automatically resize.

Principle 3

Responsive Grids

Example:

display:grid;

or

display:flex;

Principle 4

Media Queries

Example:

@media

Used to change design according to screen size.

🌟 Real World Example

YouTube

Desktop:

Video Video Video Video

Mobile:

Video

Video

Video

Amazon

Desktop:

Product Product Product Product

Mobile:

Product

Product

Product

Facebook

Desktop:

Sidebar Feed Sidebar

Mobile:

Feed

Only important content shown.

🎯 Responsive vs Non-Responsive

🌟 Basic Responsive Example

HTML

<div class="box">

Responsive Website

</div>

CSS

.box{

width:80%;

margin:auto;

background-color:lightblue;

padding:20px;

}

Why Responsive?

width:80%;

adapts to screen size.

🎯 Responsive Navigation Example

Desktop:

Home About Contact Services

Mobile:

Home

About

Contact

Services

Automatically adjusted using responsive techniques.

🌟 Responsive Images

Wrong:

img{

width:1000px;
}

Correct:

img{

max-width:100%;

height:auto;
}

Benefits:

✅ No overflow

✅ Mobile friendly

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>

Welcome Students

</h1>

<p>

Learning Responsive Design

</p>

</div>

</body>

</html>

CSS

🎯 Exp

body{

font-family:Arial;

}

.container{

width:80%;

margin:auto;

padding:20px;

background-color:lightyellow;

border:2px solid orange;

}

ected Output

Responsive container:

✅ Adapts to screen size

✅ Centers automatically

✅ Mobile friendly

🏫 Real World Examples

Responsive Design is used in:

✅ Google

✅ YouTube

✅ Amazon

✅ Facebook

✅ Instagram

✅ LinkedIn

✅ Educational Websites

⚠️ Common Beginner Mistakes

Mistake 1

Using Fixed Width

Wrong:

width:1200px;

Better:

width:100%;

Mistake 2

Large Images

Wrong:

img{

width:2000px;
}

Better:

img{

max-width:100%;
}

Mistake 3

Ignoring Mobile Devices

Always test on:

📱 Mobile

💻 Laptop

🖥️ Desktop

🌟 Best Practices

✅ Use percentages.

✅ Use max-width.

✅ Use responsive images.

✅ Use Flexbox and Grid.

✅ Test on different screen sizes.

🏆 Mini Project – Responsive Information Card

Create a card containing:

Student Name

College Name

Branch

Apply:

width:80%;

max-width:500px;

margin:auto;

📝 Practical Activity

Create a responsive container.

Requirements:

✅ Width = 80%

✅ Max Width = 600px

✅ Center Alignment

✅ Background Color

Observe behavior when browser size changes.

📋 Assignment

Assignment 5.1

1. What is Responsive Design?
2. Why is Responsive Design important?
3. Which devices use responsive websites?
4. What is the difference between responsive and non-responsive websites?
5. Why should images be responsive?
6. Create a responsive container.
7. Explain the importance of mobile-friendly websites.

🧠 Quiz

Q1. What is Responsive Design?

A. Fixed Website

B. Mobile App

C. Website adapting to screen size

D. Database

✅ Answer: C

Q2. Which unit is more responsive?

A. px

B. %

C. cm

D. mm

✅ Answer: B

Q3. Which property helps responsive images?

A. width:2000px

B. max-width:100%

C. height:500px

D. size:auto

✅ Answer: B

Q4. Which devices require responsive design?

A. Mobile

B. Tablet

C. Desktop

D. All of These

✅ Answer: D

Q5. Responsive websites provide?

A. Better User Experience

B. Poor Layout

C. Broken Design

D. None

✅ Answer: A

📌 Lesson Summary

✅ Responsive Design allows websites to adapt to different screen sizes.

✅ Modern websites must support mobile, tablet, laptop, and desktop devices.

✅ Responsive layouts improve user experience.

✅ Percentages and max-width help create flexible designs.

✅ Responsive design is a fundamental skill for modern web developers.