It is not necessary to work in web development or web design to have already heard of “responsive design”.
Summary
Moreover, if you operate in the e-commerce or digital marketing sector, you must have seen this term on a specialized website or heard developers talk about it during conversations with their customers.
It is clear that in 2022, responsive design will be on everyone’s lips, and we will try to understand why in the rest of this article.
However, here are some answers to start with.
In recent years, mobile web traffic has greatly exceeded desktop/desktop traffic, so much so that it represents most of the website traffic worldwide.
Moreover, it is considered that today the vast majority of search engine queries are made from mobile devices.
Finally, the smartphone has become the preferred advertising channel for businesses and marketers.
It is also one of the few channels to have done well in online advertising during the COVID-19 pandemic.
It’s a fact: whether you rely on organic traffic with Google or Paid Media with Facebook Ads to drive leads to your online sales platform, most of your traffic will come from mobile users.
It is, therefore, no longer possible in 2022 to design websites adapted to a single device.
Imagine yourself, as an e-commerce site owner, offering your leads and customers web pages designed for a desktop or a laptop, while more than half of them use a mobile device to browse. Internet?
Their appearance on the mobile screen would be of poor quality, and the user experience of Internet users would undoubtedly be altered.
In the case of your landing pages, this can be disastrous for your conversions.
If they are not optimized for mobile devices, all your marketing efforts are wasted, and you can say goodbye to any ROAS (return on advertising spend).
Before going into the details of responsive design, let’s start by defining the term.
I- Definition
Americanweb designer Ethan Marcotte coined the term “Responsive Web Design” — often abbreviated to “RWD” — in 2011 to describe a new web design technique.
His main books published on this subject – “Responsive Web Design” and “Responsive Design: Patterns and Principles” – have had a significant impact on the world of web design, but not only since all companies that sell online can take advantage of this innovation to offer their audience web pages with impeccable design and UX, both on mobile, tablet and desktop, and all types of connected screens.
But then, what is it?
RWD/Responsive web Design, called “Responsive Design” or sometimes even “Design Responsive” in French, is similar to a digital interface design technique that allows the display of a website’s page to automatically adapt to the screen size of the terminal that supports it.
It’s a slightly different technology than Adaptive Design, which we’ll discuss later in this article, but both have the same ambition: to improve the usability of websites on any device.
It is for this reason that we even speak of “self-adaptive” web design to eloquently illustrate the capacities of this technology to be displayed impeccably on the screen of a tablet, a desktop computer or a mobile device to make navigation and reading easier for Internet users, regardless of the type of terminal used.
Thus, thanks to responsive web design, all the web pages that you open on your smartphone, tablet, or even on your connected television appear in their entirety, in the same way as they would be revealed on your PC, without you needing zoom or scroll the page to take full advantage of it.
How does it work?
We will come back to this in detail later, but basically, it is the code of the website designed to adapt its layout according to each type of screen on which the content of the pages appears. Everything is done automatically, from resizing blocks of text and graphic content to rearranging each element that makes up the page.
This development comes mainly in response to the current trend, which sees Internet users increasingly using their mobile phones to browse the Internet, hence the expression “Mobile first”, which is regularly associated with the notion of responsive web design, and which was made possible thanks to the Media Queries of CSS3, which we will discuss later.
The secret of this “self-adaptive” technology lies in identical HTML code for the different types of terminals, a system of fluid grids, graphics with characteristics and adaptive resolutions, and finally, the CSS3 Media Queries in charge of managing style sheets.
All this jargon looks pretty complicated if you have no notion of coding, but we will have the opportunity to explain all these notions in part III of this article before seeing concretely how the creation of a website goes. Responsive design.
But for now, let’s see the difference between two types of web design that are often confused: responsive design and adaptive design.
II- Responsive Design Vs. Adaptive Design
Responsive design and so-called “adaptive” design are some of the most common website design methods employed by web developers today, and they can be easily confused.
However, they are radically different in their very principle.
For this reason, we will briefly explain the difference between these two design techniques.
We have already mentioned the case of responsive design, a design technique that consists of creating unique web page layouts whose content and dimensions adapt according to the size of the browser.
On a responsive design website, your content can thus be organized and arranged dynamically and automatically, depending on the space available in the browser window, to display an interface optimized for any device type.
In this model, the width of the browser influences the graphical interface of the site.
The adaptive design aims for the same result as responsive design but takes a different path.
The adaptive design thus consists of designing layouts adapted to each type of screen, using several fixed configurations of different sizes, and leaving it to the browser to detect the screen size of the user’s medium. Select the most appropriate layout for the screen size.
As you will have understood, adaptive design makes it possible to design tailor-made web interfaces that are displayed optimally on each type of device, and it is optional for the pages’ content to adapt automatically depending on the different instruments used.
This solution, therefore, works based on several fixed layouts, and it is the site that automatically chooses the most suitable design among those available, depending on the screen size of the device used, whether it is a tablet, a mobile phone or a desktop computer.
It is an entirely different design philosophy: we create several layouts upstream that can meet the characteristics of varying screen sizes to ensure an optimal level of display performance in all cases.
This is the whole problem of adaptive design; you have to develop as many versions as there are screen resolutions.
There are 6 to date: 320 pixels, 480 pixels, 760 pixels, 960 pixels, 1200 pixels, and 1600 pixels.
Adaptive design is, therefore, a design solution that is more expensive and more difficult to implement.
It forces you to develop several versions of the same page to offer a quality interface, regardless of the screen size used by Internet users.
Such a design mode, therefore, requires much more work and costs much more than responsive design.
This latest solution allows website owners to develop a single layout that can automatically adapt to all media types.
So you don’t need to create a particular tablet or mobile version for your website.
III- The key elements to know to understand responsive design better
Without going into details, we will now review the few fundamental notions on which the entire RWD/responsive web design system is based.
CSS and HTML
These two programming languages, CSS (Cascading Style Sheets) and HTML (HyperText Markup Language), form the basis of responsive web design. Their task is to control the content and presentation elements of the pages of your website within a given web browser.
HTML is responsible for controlling the structure and content of a web page.
For example, if you want to add an image to one of your web pages, you must use HTML code.
This language also controls so-called “primary attributes” in design, such as page height and page width.
On the other hand, CSS is used to modify the design and layout of the elements you include in a web page with HTML. CSS code is usually included in a <style> type section inside an HTML document or a separate style sheet file.
CSS lets you control design elements other than width, height, and colour.
Coupled with a technique called “media query”, CSS gives rise to a “responsive” web design.
Currently, most developers use CSS3, the latest version of CSS.
The Media Query
The Media Query is one of the essential CSS3 specifications in the design of a responsive website, which allows you to modify the display of a web page according to the height and width of the screen used for navigation.
The Media Query works similarly to an “if” clause in some programming languages, i.e. it checks if the viewing window of a screen is large enough or too large before running the appropriate code.
Responsive Breakpoints
To use media query type specifications, defining “responsive breakpoints” in your style sheet is essential.
A breakpoint is the screen’s width in which you use a media query to implement new CSS styles.
To set up a breakpoint, write a media query for larger sizes and a media query for smaller sizes.
A lot of developers today use the free Bootstrap frontend framework and its specific breakpoints that use media queries to target landscape phones (576px), tablets (768px), laptops (992px) and extra large (1200px) desktop screens.
loading speed
The loading speed of web pages is a priority for any commercial website.
Pages that take more than 2 seconds to load have a bounce rate of almost 10%; beyond 5 seconds, this bounce rate increases to nearly 40%.
Recall that the bounce rate is an indicator that indicates the percentage of visitors who access a web page and leave it almost immediately, most of the time because the loading time is too long.
This is why loading speed should be one of your priorities.
To improve the loading speed of your pages, there are several solutions, such as caching, minification (reducing the size of the code), optimizing your images, using a more efficient CSS layout, etc.
A fluid layout
The fluid layout concept is based on dynamic values that consider the viewing window’s width, and it is an essential factor in responsive design.
It allows for a decrease or increase of the different sizes of the elements of the container according to the size of the screen and in a dynamic way.
The mise en page Flexbox
Flexbox is a CSS module that greatly facilitates layout tasks. It is a layout solution that works from the central axis and allows you to arrange the different elements of your web page in rows or columns. These elements will expand or contract to fill the available space.
Flexbox is an efficient way to lay out multiple items, even when the container size is unknown.
Les images responsive
The responsive image layout uses a dynamic unit to control the width or height.
Here is an example of the most basic coding that will allow your image always to take 100% of the width of its parent:
img {
width: 100%;
}
The % unit corresponds to a single percentage of the viewing window’s width (or height) and helps to ensure that the image remains proportional to the size of the screen.
This technique still poses a problem: users must download the image in full size, even on their mobile phones.
Thanks to the “srcset” HTML attribute integrated into your img tags (an HTML attribute that facilitates the integration of images in responsive design sites), you can specify different image sizes.
It is this functionality that the WordPress CMS automatically uses for the images that you incorporate into your blog posts or on your web pages.
IV- How to make your website responsive in 5 steps
Now that you have the basics in responsive design, let’s see concretely how to apply these principles to your website:
1- Define your media query ranges (responsive breakpoints)
It would help if you determined your media query ranges based on your unique design needs.
For example, if you want to follow the Bootstrap standards we discussed above, you should use the following media queries:
- 576px for mobile phones (portrait)
- 768px for tablets
- 992px for laptops
- 1200px for large screens
2- Define the size of layout elements via CSS grid creation or percentages
Then it is essential to set different sizes regarding the other layout elements, depending on the media query or screen break point.
The number of layout containers you have will depend on the design, but most websites focus on the following elements: container (container), header (top of page), content (content), sidebar (bar or column side) and footer (footer).
If you’re using a mobile-first approach, you can style the main elements of your layout like this:
#wrapper {width:95%; margin: 0 auto ;}
#header {width:100%;}
#content {width:100%;}
#sidebar {width:100%;}
#footer {width:100%;}
@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;}
And so on for larger screens.
If you take a percentage-based approach, the “float” attribute will determine which side of the screen an element should appear on.
3- Add responsive images
To ensure images are not corrupted or damaged on your web pages, use a dynamic value for each image you want to display, which we have already mentioned.
However, always include a “srcset” with the different sizes of the images you add to your web pages.
This task can be tedious if done manually, but fortunately, CMS like WordPress do it automatically.
4- Don’t forget to adopt responsive typography for your web texts
Textual content is often seen as the poor cousin of responsive web design, which mainly focuses on the layout of blocks and elements.
To obtain a 100% responsive web design website, you must consider this textual aspect and adjust the size of your fonts to correspond to the different screen sizes.
To achieve this is simple. Determine a static value for the font size, for example, 14 px, and adapt it for each media query.
5- Check the quality and performance of your responsive design
Finally, you have to test the quality of your responsive design in situ, especially on the type of device that matters most today: the mobile.
Google offers a free optimization test here.
Searching by Google may take a bit of time, but that has nothing to do with how fast your website loads.
During this testing phase, ask yourself the following questions:
- Does your content fit well into layout elements and containers on different screens?
- Does the layout include the correct number of columns?
- Is the font size suitable for each screen?
Then, thanks to the Chrome development tools ( chrome dev tools ), you will have the opportunity to test your website on several different screen sizes.
Press CTRL + Shift + I to open the device view, and then select the device of your choice (mobile, tablet, laptop, etc.) to check if your design qualifies as “responsive”.
V- The reasons why responsive design is crucial for your online business
Finally, let’s see the seven main reasons that should encourage you to adopt responsive web design for the design of your following website:
1- RWD is profitable
As we have already pointed out, a single responsive web design adapts to all formats, so there is no need to develop several versions to meet the requirements of different screen sizes.
But, what is interesting, then, is that an RWD site will save you money in the long run, for example, during updates or when a new screen size appears on the market.
2- RWD improves the user experience
Users today expect a consistent and seamless online experience across all channels. In the field of e-commerce, for example, an Internet user can start his shopping journey on a mobile and continue on a desktop computer or tablet at home.
However, RWD provides users with a consistent experience at every touchpoint.
In addition, responsive design ensures that your web pages appear optimally, and there is no need to zoom or scroll the page all the time.
3- RWD is suitable for your SEO
Responsive web design is both interesting for your natural referencing, which improves your visibility on search engines) and it also protects you against the risks run by websites with separate mobile websites, such as duplicate content/duplicate and loading speed.
By using a mobile version of the website, you risk being penalized by Google, as search engine bots will have difficulty identifying which version of your website should be indexed or tracked for links.
A single version of your website reduces this risk and allows your teams to focus all their SEO efforts on a single site.
Then there is the loading speed. Google uses over 200 ranking factors in its algorithm, and the loading speed is one of them. Responsive design websites generally load faster than sites specifically designed for mobile devices.
4- The RWD increases your reach/range for tablet and mobile phone users
When a website is designed to cater to mobile users, it results in more sustainable customer experiences. It is estimated that three-quarters of people who visit a mobile-friendly site are more likely to return to that site, and nearly 70% are more likely to make a purchase.
Conversely, 60% of users who don’t find what they’re looking for on a mobile site will probably never return.
5- RWD facilitates maintenance and development
As stated earlier, developing a single version of a website will always be faster than creating multiple versions of the same site, even with the added task of ensuring that the RWD design is implemented correctly.
This is an essential factor for development and marketing teams, whose job is to ensure that each version of a website runs efficiently and contains the latest content and updates.
Developing a responsive website simplifies maintenance, updates and improvements over time, and your teams have more time for value-generating activities, such as product development, A/B testing or content marketing.
Finally, choosing a responsive web design ensures that your website is armed against new screen size options that may emerge as technologies evolve.
6- RWD gives you better analytics capabilities to measure your performance
With responsive design, your IT and marketing teams have to track, collate, and analyze data across two or more different web properties, doing the job much harder.
Thanks to a single responsive website, it is easier to set up all your analytics actions and obtain meaningful information.
7- RWD gives you higher conversion rates
It is estimated that in 2022, 65% of online retail traffic will come from mobile, but conversion rates on mobile still need to be higher than those seen on desktop.
Many factors influence conversion rates on mobile, including difficulty navigating (20%), not being able to see product details (22%), or difficulty navigating (19%).
In other words, many websites still need responsive design technology to obtain satisfactory conversion rates.
Conversely, a recent study indicates that RWD can lead to a more than 10% increase in conversion rates yearly.