What is meant by Responsive web design or RWD?
Responsive web design (RWD) is an approach that allows web designers to make any web page or website change its layout according to the size of the device being used to view the content, whether it is a phone, a tablet, a laptop or a desktop. In other words, using responsive web design (RWD), we can view the same exact web page content in a single column on small screens (instead of being rendered full view and user has to zoom in to see the contents), or double column on larger screens.
Responsive web design became the default in designing websites nowadays and every web designer or developer need to master this technique. In this article, I’ll show you the best practices to apply to have a responsive web page or website. You can apply those steps to new or existing websites.
How to make a site responsive?
To create a responsive website, you can follow a few steps. These include meta viewport tag and media queries.
1. Meta Viewport Tag
First we need to add a certain Meta Viewport Tag to the <head> of html page to control the width and scaling of the browser’s viewport.
<meta name="viewport" content="width=device-width, initial-scale=1">Using this value "width=device-width" matches the screen’s width in device independent pixels.
Using initial-scale=1 establishes a 1:1 relationship between CSS pixels and device-independent pixels.
This allows the page to re-flow content to match different screen sizes, whether rendered on a mobile phone or a large monitor.
2. Media Queries
Media Queries allow us to apply CSS selectively to style the page appropriately for the user’s needs according to the screen width. The best way to use media queries is to create a separate stylesheet (we can name it responsive.css) and add a link to this stylesheet in the <head> of html page.
We can include more than one media query in one stylesheet for various breakpoints. Breakpoints are the points or certain width where the page layout changes or content is adjusted to fit the screen size.
For example;
Add this line of code to the <head> of your html
<link rel="stylesheet" type="text/css" media="screen" href="responsive.css" >
Add these lines of code to responsive.css. We can then add our alternate CSS for small screen and width devices inside the curly braces. Start from the smaller size first (this is called a mobile first design) then increase accordingly. Make sure you place all media queries last in your CSS so it can overwrite the previous rules.
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}How to make your images responsive?
A responsive website should have all images scale with the different screen size, you can add these lines of code to responsive.css to make the images responsive.
img {
max-width: 100%;
height: auto;
}How to have a responsive typography?
One font size will not work for all screen sizes, therefore we need to set some media queries to adjust that. Using mobile first approach, we initially set the sizes for paragraphs and headings for small screens, after that we use media queries to overwrite those values with larger sizes appropriate to various breakpoints.
for example;
html, p {
font-size: 16px;
}
h1 {
font-size: 28px;
}
@media only screen and (min-width: 992px) {
h1 {
font-size: 36px;
}
} What are the benefits of responsive web design?
- Responsive web design makes your site mobile-friendly, hence increase the amount of time visitors spend on your site.
- Mobile-friendly sites rank higher on Google Search engines as they provide great user experience to mobile searchers.
- Saves time and money instead of building and maintaining separate sites for mobile and desktop users.
Want to learn more about responsive web design?
Check out these helpful resources. Moreover, if you have any question about this article, feel free to contact me & I’ll do my best to help you.
If you enjoyed reading this article, don’t forget to share it on social platforms below.
