Responsive Web Design (RWD) Tutorial
Learn how to create websites that automatically adapt to smartphones, tablets, laptops, desktops and large screens.
23rd August, 2026
What is Responsive Web Design?
Responsive Web Design (RWD) is a web development approach in which a website automatically adjusts its layout, images, text, navigation and other elements to fit different screen sizes and devices.
Smartphones
Tablets
Laptops
Desktop Computers
Large Screens
Instead of creating a separate website for every device, responsive design uses flexible layouts, CSS media queries, flexible images and scalable typography.
1. Mobile-First Development
Mobile-first development means designing and developing the website for small screens first, and then progressively adding features for larger screens.
Since mobile devices have limited screen space, developers first focus on the most important content and functionality.
Mobile Layout
[Logo]
[Menu ☰]
[Main Heading]
[Image]
[Content]
Desktop Layout
[Logo] Home About Services Contact
[Main Heading]
[Large Image]
[Content]
Advantages
- Provides a better mobile experience.
- Forces developers to prioritize important content.
- Usually results in cleaner and simpler designs.
- Makes it easier to scale the design to larger screens.
Mobile-First CSS Example
/* Basic styles - Mobile */
.card {
width: 100%;
}
/* Larger screens */
@media (min-width: 768px) {
.card {
width: 50%;
}
}2. Responsive Layouts
A responsive layout changes its structure according to the available screen width.
Instead of using fixed widths such as
width: 1000px, developers commonly use:
Percentages
Example: width: 90%;
max-width
Prevents content from becoming too wide.
min-width
Defines a minimum usable width.
Flexbox
Creates flexible one-dimensional layouts.
CSS Grid
Creates flexible two-dimensional layouts.
Relative Units
Examples: rem, em and vw.
Responsive Container
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}Responsive Columns
On desktop, the three columns can appear side-by-side. On smaller screens, they automatically stack vertically.
3. Breakpoints
Breakpoints are screen widths at which the website's layout or styling changes.
They are usually implemented using CSS media queries.
/* Mobile styles */
.card {
width: 100%;
}
/* Larger screens */
@media (min-width: 768px) {
.card {
width: 50%;
}
}Below 768px → card uses full width.
768px and above → card uses half width.
Approximate Breakpoint Ranges
| Device Type | Approximate Width |
|---|---|
| Mobile | < 576px |
| Tablet | 576–991px |
| Laptop / Desktop | 992px+ |
4. Flexible Images and Typography
Flexible Images
Images should resize according to the available space instead of overflowing their containers.
img {
max-width: 100%;
height: auto;
}The image above can shrink when the screen becomes smaller while maintaining its aspect ratio.
Responsive Images with srcset
<img
src="image-800.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 600px) 100vw, 800px"
alt="Example image">Flexible Typography
Text should remain readable across different devices.
body {
font-size: 1rem;
}Using clamp()
h1 {
font-size: clamp(2rem, 5vw, 4rem);
}Responsive Heading
Readable Font Size
Text should remain easy to read.
Line Spacing
Use appropriate spacing between lines.
Contrast
Text should have sufficient contrast.
Line Length
Keep text lines comfortable to read.
Clear Headings
Use headings to create a clear hierarchy.
6. Testing Across Devices
A responsive website should be tested at different screen sizes and with different interaction methods.
📱 Smartphones
Test small touch screens.
📱 Tablets
Test medium-sized screens.
💻 Laptops
Test common desktop layouts.
🖥️ Desktops
Test larger screens.
🌐 Browsers
Test different browsers and operating systems.
🛠️ DevTools
Use browser developer tools for responsive testing.
Layout Testing
- ✓ Does content fit the screen?
- ✓ Is there unwanted horizontal scrolling?
- ✓ Do columns rearrange correctly?
Image Testing
- ✓ Do images resize correctly?
- ✓ Are they cropped appropriately?
- ✓ Do they load efficiently?
Navigation Testing
- ✓ Can users easily open menus?
- ✓ Can users easily close menus?
- ✓ Are links and buttons easy to tap?
Typography Testing
- ✓ Is text readable?
- ✓ Are headings too large or too small?
Interaction Testing
- ✓ Do forms work correctly?
- ✓ Are buttons large enough to interact with?
- ✓ Does the site work with keyboard navigation?
7. Accessibility and Usability
Responsive design should make a website usable by as many people as possible, including people with disabilities.
Accessibility means ensuring that people with different abilities can perceive, understand, navigate and interact with a website.
Important Accessibility Practices
Color Contrast
Use sufficient color contrast between foreground and background.
Alternative Text
Provide meaningful alt text for informative images.
Semantic HTML
Use elements such as nav, main, button and headings.
Keyboard
Make interactive elements usable with a keyboard.
Focus Indicators
Provide visible focus indicators.
Don't Rely on Color
Do not use color as the only way to communicate information.
Form Labels
Properly associate labels with form controls.
Touch Targets
Make touch targets sufficiently large.
Zoom
Ensure text remains readable when users zoom in.
Usability
Usability focuses on how easily users can accomplish their goals.
Example: Responsive Shopping Website
- Find a product.
- Read its information.
- Add it to the cart.
- Complete checkout.
These tasks should remain straightforward whether the user is on a phone, tablet or desktop.
How All the Topics Work Together
Responsive web design is not just about making a website "fit" on a mobile screen. All these concepts work together.
In Simple Words
Responsive Web Design = One website that adapts to different devices while remaining readable, usable, accessible and visually consistent.