Responsive web design – how to make a site work on phones, tablets, and desktops without building separate versions. The core idea is simple: layouts and assets adapt to the screen they are viewed on.
Understanding responsive design
Responsive design adjusts a site’s appearance based on screen size and orientation. The aim is readable text, usable navigation, and minimal horizontal scrolling or zooming.
Core principles
- Fluid grids: Layouts that scale proportionally to fit the screen.
- Flexible images: Images that resize within their container.
- Media queries: CSS rules that apply based on device characteristics, usually viewport width.
Starting with a fluid grid
Older sites often used fixed pixel widths. Responsive design favours relative units – percentages, or viewport units like vw, vh, vmin, and vmax:
.container {
width: 80%;
margin: 0 auto; /* Centering the container */
}The container takes 80% of the screen width and centres itself.
Making images flexible
Stop images breaking the layout on small screens:
img {
max-width: 100%;
height: auto;
}Images will never exceed their container width and keep their aspect ratio.
Implementing media queries
Media queries apply CSS only when certain conditions are met – most often viewport width:
@media screen and (max-width: 600px) {
.container {
width: 100%;
}
}On screens narrower than 600 pixels, the container goes full width.
A basic responsive template
Putting it together in a minimal page:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
text-align: center;
padding: 20px;
background: #333;
color: white;
}
.nav-bar {
overflow: hidden;
background-color: #f2f2f2;
}
.nav-bar a {
float: left;
display: block;
padding: 14px 20px;
text-align: center;
text-decoration: none;
}
.container {
padding: 20px;
}
.footer {
text-align: center;
padding: 10px;
background: #333;
color: white;
}
@media screen and (max-width: 600px) {
.nav-bar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Welcome to My Website</h1>
</div>
<div class="nav-bar">
<a href="#">Home</a>
<a href="#">Services</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="container">
<h2>Responsive Design</h2>
<p>This is a paragraph in the container.</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>Tips for effective responsive design
- Start small: Style for mobile first, then add rules for larger screens. Often easier than the other way around.
- Test frequently: Use browser dev tools to check different viewport sizes and adjust media queries as needed.
- Prioritise content: On small screens, space is limited. Make sure the important information is visible without scrolling past clutter.
- Consider touchscreens: Buttons and links need enough tap area on touch devices.
Responsive design is a baseline skill, not a passing trend. Fluid grids, flexible images, and media queries are the foundation. Test on real devices when you can, and adjust layouts until the site works at every size you care about.