The beginner’s guide to responsive web design (sample code and layout)

🔊 Listen to this post Now in English

 

With the internet increasingly accessible from mobile devices, it is no longer enough to have a static website whose design is of interest only on a computer screen.

Not to mention that you should also consider tablets, 2-in-1 laptops and different models of smartphones with different screen dimensions when designing a design.

So just putting your content in one column and leaving it there isn’t going to be enough.

With responsive web design, you can make your website look as attractive as possible on mobile phones, tablets, laptops and desktop PC screens.

And improved user experience means higher conversions and business growth.

This guide will give you everything you need to know about responsive website design, including definitions, a step-by-step overview, examples, and more.

What is responsive web design?
Responsive design is an approach to web design that allows your web content to adapt to different screen and window sizes on a variety of devices.

For example, your content might be separated into different columns on large screens, because they are wide enough to fit that design.

If you separate your content into multiple columns on a mobile device, it will be difficult for users to read and interact with it.

Responsive design allows you to provide different devices with several distinct layouts of your content and design depending on the screen size.

Responsive web design vs responsive design
The difference between responsive design and responsive design is that responsive design adapts the rendering of a single page version. In contrast, responsive design provides several completely different versions of the same page.

These are two crucial web design trends that help webmasters control the appearance of their site on different screens, but the approach is different.

Thanks to a responsive design, users will access the same base file through their browser regardless of the device, but the CSS code will control the layout and render it differently depending on the screen size. . With Responsive Design, there is a script that checks the screen size and then accesses the template designed for that device.

Why responsive design is important
If you are new to web design, development, or blogging, you might be wondering why responsive design is so important.

The answer is simple. It’s no longer enough to design for one device. Mobile web traffic has overtaken that of desktops and now accounts for the majority of website traffic, over 51%.

hen more than half of your potential visitors use a mobile device to browse the internet, you can’t just serve them a page designed for a computer. It would be difficult to read and use, and lead to a bad user experience.

But that’s not all. Mobile device users also account for the majority of visits to search engines.

Finally, in recent years, mobile has become one of the most important advertising channels. Even in a post-pandemic market, mobile ad spend is growing 4.8% to $ 91.52 billion.

Whether you choose to advertise on social media or use an organic approach like YouTube SEO, the vast majority of your traffic will come from mobile users.

If your landing pages aren’t mobile-optimized and easy to use, you won’t be able to maximize the return on your investment from your marketing efforts. Poor conversion rates will lead to a decrease in the number of leads and unnecessary ad spend.

 

The basics of responsive website design
In this section, we will discuss the basics of responsive website design and its various elements.

CSS and HTML
Media queries
Fluid layouts
Flexbox layout
Responsive images
Speed

CSS and HTML
The foundation of responsive web design is the combination of HTML and CSS, two languages that control the content and layout of a page in a given web browser.

HTML primarily controls the structure, elements and content of a web page. For example, to add an image to a website, you would use HTML code like this:

<img src = “image.gif” alt = “image” class = “full-width-img”>
You can define a “class” or an “id” that you can target later with CSS code.

You can also control primary attributes such as height and width in your HTML, but this is no longer considered good practice.

CSS is used instead to change the design and layout of elements you include on a page with HTML. CSS code can be included in a <style> section of an HTML document, or in a separate stylesheet file.

For example, we could change the width of all HTML images at element level like this:

img {
width: 100%;
}
Or we could target the specific “full-width-img” class by adding a period in front.

.full-width-img {
width: 100%;
}
You can also control the design beyond height, width and color. It’s using CSS in this way that you make a design responsive when you combine it with a technique called “media query”.

Media queries
A media query is a fundamental part of CSS3 that allows you to render content to suit different factors like screen size or resolution.

This works the same way as an “if” clause in some programming languages, that is, it checks whether the viewing window of a screen is large enough or too large before executing the code. appropriate.

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}
If the screen is at least 780 pixels wide, images of the “full-width-img” class will occupy 90% of the screen and will be automatically centered by margins of the same width.

Fluid layouts
A fluid layout is an essential part of a modern and responsive design. In the good old days, we used to set a static value for each HTML element, for example 600 pixels.

Rather, a fluid layout relies on dynamic values ​​like a percentage of the viewport width.

This approach will dynamically increase or decrease the different sizes of the elements of the container depending on the size of the screen.

 

Flexbox layout
While a percentage-based layout is fluid, many web designers and developers felt that it was not dynamic or flexible enough. Flexbox is a CSS module designed as a more efficient way to arrange multiple elements, even when the size of the content inside the container is unknown.

A flexible container allows items to be enlarged to fill the available free space or shrunk to prevent overflow. These flex containers have a number of unique properties, like justified content, which you cannot change with a regular HTML element.

Responsive images
The most basic iteration of responsive images follows the same concept as a fluid layout, using a dynamic unit to control width or height. The example CSS code we discussed above already achieves this goal:

img {
width: 100%;
}
The% unit is a unique percentage of the width or height of the viewport and helps ensure that the image remains proportional to the screen.

The problem with this approach is that each user has to download the full-size image, even on their mobile phone.

To serve different scaled versions for different devices, you must use the HTML srcset attribute in your img tags, to specify more than one image size to choose from.

<img srcset = “large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w ”
src = “small.jpg”
/>

Speed
When trying to create a suitable design for your website, loading speed should be a top priority.

Pages that load in 2 seconds have an average bounce rate of 9%, while pages that take 5 seconds have a bounce rate of 38%.

Your responsive approach should not block or delay the first rendering of your page more than necessary.

There are several ways to make your pages faster. Optimizing your images, caching, minifying, using a more efficient CSS layout, avoiding JS rendering blocking, and improving your critical render path are all just as much. great ideas that you should consider.

You could also try implementing Google AMP for your mobile pages, but in our Google AMP case study, our mobile leads fell 59%.

Common responsive breaking points
To work with media queries, you need to decide on “responsive breakpoints” or screen-size breakpoints. A breaking point is the width of the screen where you use a media query to implement new CSS styles.

Common screen sizes
Mobile: 360 x 640
Mobile: 375 x 667
Mobile: 360 x 720
iPhone X: 375 x 812
Pixel 2: 411 x 731
Tablet: 768 x 1024
Laptop: 1366 x 768
High resolution laptop or desktop: 1920 x 1080
If you choose a mobile-centric approach to design, with a single column and smaller font sizes as a basis, you don’t need to include moving breakpoints – unless you want to optimize the design for specific models.

So you can create a design on a responsive basis with just two breakpoints, one for tablets and one for laptops and desktops.

Bootstrap responsive breaking points
As one of the first, and most popular, responsive frameworks, Bootstrap led the assault on static website design and helped establish mobile site design as an industry standard.

That’s why many creators still follow Bootstrap’s breaking points when it comes to screen width today.

Define your media query ranges (responsive break points)
Define your media query ranges based on the unique needs of your design. For example, if we wanted to follow Bootstrap standards for our design, we would use the following media queries:

576px for portrait phones
768px for tablets
992px for laptops
1200px for large screens
Size of layout elements with percentages or creation of a CSS grid
The first and most important step is to set different sizes for different layout elements depending on the media query or the breaking point of the screen.

The number of layout containers you have will depend on the design, but most websites focus on the items listed below:

Wrapper or Container
Header
happy
Sidebar
Footer

Using a mobile first approach, you can style the main elements of the layout in this way (without a media query for basic styles for mobile phones):

#wrapper {width: 95%; margin: 0 auto; }

#header {width: 100%; }

#content {width: 100%; }

#sidebar {width: 100%; }

#footer {width: 100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width: 90%; margin: 0 auto; }

#content {width: 70%; float: left; }

#sidebar {width: 30%; float: right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) {…}

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width: 90%; margin: 0 auto; }

}
In a percentage-based approach, the “float” attribute controls which side of the screen an item will appear on, left or right.

If you want to go beyond the basics and create a cutting edge reposnive design, you need to familiarize yourself with the flexbox CSS layout and its attributes like box-sizing and flex.

Implement responsive images
One way to make sure that your images do not break is to simply use a dynamic value for all images, as we saw earlier.

img {
width: 100%;
}
But it will not reduce the load placed on your mobile visitors when they access your website.

Always be sure to include a srcset with the different sizes of your image when adding images to your pages.

Responsive typography for your website text
The main focus of responsive website design is that layout blocks, elements and media are responsive. The text is often treated as a secondary reflection.

But for a truly responsive design, you should also adjust the size of your fonts to match the screen size.

The easiest way is to set a static value for the font size, for example 22px, and adapt it in each media query.

You can target multiple text elements at the same time by using a comma to separate each one.

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

summary
There are a lot of different elements that go into designing responsive websites. Without a basic understanding of HTML and CSS, it can be easy to make mistakes.

But by familiarizing yourself with the different basics, analyzing the examples using web development tools, and testing the example code as you go, you should be able to make your website responsive. without any major problem.