For several years, traffic from smartphones has increased significantly. This is why it is important to take care of its responsive design! Your website may look great on desktop but unreadable on phone or tablet. Find out what responsive design is and how to improve it with different tips and what are the alternatives to responsive design to improve your website traffic!
Responsive Design: An Overview
Before the arrival of the mobile web, the landscape of end devices with Internet access was relatively homogeneous: there were laptops and desktops, which were very similar in terms of input and output media. Both types of devices had a keyboard, mouse or trackpad, and a screen with a width of 1000-2000 pixels.
Back then it was not necessary to make any special effort to develop a web page that would be displayed correctly on any device. The simplest solution was to limit the width of a page to the lowest common denominator. A popular approach was to display pages 800px wide and centered or left justified. On larger screens, there might be some extra white space, but the pages were easy to read on all devices.
This changed with the advent of mobile devices and the significant diversification of end devices. The screens of smartphones and tablets differ from those of desktop computers in several ways. Pixel dimensions now play an important role, and physical resolution (pixels per inch, or ppi) also entered the picture with the advent of retina displays. And of course these devices are operated with your finger instead of a mouse. In addition to smartphones and tablets, large, high-resolution monitors have also appeared on the market, which means that a modern web page has to work on screens with widths ranging from 320 pixels to more than 4,000 pixels.
| smaller screen | bigger screen | Factor | |
|---|---|---|---|
| Before the mobile web | ~1000 pixels | ~2000 pixels | ~2 |
| After the mobile web | ~320 pixels | > 4000 pixels | > 10 |
A responsive web page fits the space available on a screen. “Screen real estate” is often referred to in this context. A web page must look good on all devices and guarantee an optimal user experience (UX).
Responsive design encompasses a wide range of technologies and approaches that combine to develop a fully responsive web page. This includes:
- HTML5 elements like the image and attributes like srcset and sizes
- CSS media queries
- CSS units
- The use of multiple assets from a single resource
- The mobile-first approach
Why should a web page incorporate responsive design?
Designing a responsive web page offers several advantages. The main consideration is user experience (UX). In theory, you can implement a good UX without responsive design, but that would require your own mobile page or the use of JavaScript. Ultimately, this type of approach would be much more complex than a CSS-based responsive layout and would require more maintenance.
A responsive web page for optimal design
The design of a web page plays an important role in how visitors perceive the information presented on the page. A good design reflects the identity of the organization behind the website and helps connect the user with your brand. Visitors should have a positive experience when visiting your website. Let’s look at two examples of the importance of responsive design for the user experience:
- Let’s imagine that a title fills the entire screen on a mobile device. However, on the desktop version, the same heading with the same font size doesn’t stand out at all. On the desktop version, the header should be displayed larger to capture the visitor’s attention.
- Let’s imagine a web page for a blog, in which there is a sidebar next to the articles. The sidebar contains links to other articles with small thumbnails. On the desktop version, the sidebar limits the width of the articles, making the page easier to read. On a mobile device, the sidebar would take up almost half of the screen. Therefore, the design must be different on mobile devices and the sidebar must appear below the articles.
A responsive website for an optimal user experience
In general, a non-responsive web page will display on the small screen of a mobile device exactly the same as on a desktop computer, only smaller. This forces the user to zoom in on individual parts of the page. Therefore, it is much better to offer an optimized version. A couple of examples:
- In the desktop version, a button on a website is clicked with the mouse. But on mobile devices you navigate with your finger. Therefore, the button should be bigger on the mobile version and leave more space between the elements.
- Let’s imagine we have a form on our website. Normally, the text contained in the form is arranged so that it can be easily read and does not touch the edges of the form. A 20 pixel margin to the left and right is normal and looks good on large screens. But on mobile devices with screen widths of 320 pixels, we’ve just lost an eighth of screen real estate. To prevent this, the margin should be reduced on mobile devices.
Cons of non-responsive website
More and more users are browsing the Internet on mobile devices. Deciding on a responsive web page has significant disadvantages. Some notable examples are:
- Poor conversion rates and high bounce rates, due to deoptimized design and poor user experience.
- Poor positioning in search engines, since Google recognizes when, for example, web elements are located too close to each other.
- Poor performance, due to long load times for resources that have not been optimized.
Cons of responsive design
However, responsive design does not allow you to create fully mobile friendly sites. Indeed, your site will remain very similar on mobile and on desktop. Some resource-intensive features may be missing on mobile, as loading time may exceed the recommended maximum.
It can also be very difficult to implement responsive design, because you always have to do tests. Indeed, some things may not go as planned and it may take some time to have a fully functional responsive design. You have to spend a lot of time there and be meticulous in every action.
What aspects of web development are influenced by responsive design?
Responsive design includes various approaches and technologies. There are usually several solutions for the different scenarios that may arise. Development is still in flux.
Responsive design
Since the dawn of the Internet, implementing complex designs on the web has been a science. The HTML language has several types of elements that behave differently depending on the layout. Let’s look in particular at the block, inline, and inline-block element types. Block elements take up the entire available width and appear one on top of the other. Inline items only take up the space they need for their content and appear side by side. This table should give an overview of the relevant elements in responsive design.
| element type | Width | element flow |
|---|---|---|
| blocks | All available or allocated width | Column |
| inline | Width of the elements it contains | Row |
| inline block | Width of the elements it contains or assigned width | Row |
| flex | all width available | row or column |
| grid | all width available | complex layout |
Implementing a layout often requires the block elements to be placed next to each other. There are several ways to achieve this. Before the advent of CSS, table-based layouts were the standard; the advent of CSS brought with it floating layouts. Today, CSS Flexbox is used for simple column or row based layouts and CSS Grid for more complex layouts. CSS relative dimensions are used in all cases, to allow for variation in the number of elements displayed next to each other.
A good example: Let’s imagine a page with four preview elements for blog posts. Each of the preview elements contains an image, a title, a teaser, and a “Read More” button. With Flexbox, the following responsive layout can be easily implemented :
- Displayed on a large screen: All preview items appear side by side in a row. Each element occupies 25% of the available space.
- Viewing on a half-size screen: Items appear side by side in two rows, each with two items. Each element occupies 50% of the available space.
- On a small screen: All items appear one below the other in a line. Each element occupies 100% of the available space.
This is an example of a classful implementation of the Tachyons responsive CSS framework. For each preview container we define the classes “w-100 w-50-m w-25-l”. The four preview wrappers are in a wrapper labeled “flex-wrap”.
Sometimes it makes sense to display an element only on screens of a certain size. For example, tabulated data is displayed as a table in HTML using the tag
However, depending on the size of the table, it can be difficult to scale it correctly for a small screen. That’s where a simple trick comes in: tell the user to rotate their device to create enough space for the table to display. This text, of course, should only appear on small screen devices when the device is held vertically.
Elements can be easily hidden using the display: none CSS property. With a special CSS Media Query, both screen width and device orientation can be queried. The extra text should appear only if the screen width is less than 640 pixels when displayed vertically. Otherwise, the element must be hidden:@media screen and (min-width: 640px) and (orientation: landscape) { .dn-landscape-ns { display: none; } }
When combined with the following HTML code, the function is complete: Please rotate your device to see the table. Typography and Responsive Text ContentFor the best user experience, the font size of text elements should be adapted to the screen being used.
There are several responsive design techniques to implement this.The basic ingredient is the CSS rem element (“root element”), which links the font size of an element proportionally to the HTML “root” element. To scale text consistently, simply adjust the font size of the “root” element using CSS breakpoints.Let’s see an example.
First, in keeping with the mobile first approach, we’ll set the font sizes for small screens:/* mobile first */ html { font-size: 16px; } h1 { /* corresponds to 3 * 16px = 48px */ font-size: 3rem; }
Next, we’ll adjust the font size of the HTML element for larger screens. Since the size of the H1 headings is defined by rem, it will scale automatically:/* 'not-small' breakpoint */ @media screen and (min-width: 30em) { html { font-size: 18px; /* H1 then has font size 3 * 18px = 54px */ } }
Another popular approach is to use the vh and vw CSS units to fluidly scale the font size to the height or width of the screen. In theory, this approach doesn’t require breakpoints, but it can sometimes make text appear tiny on small screens. In this case, you can implement selective breakpoints or use the CSS calc function to set a minimum font size.To optimize screen-filling headers on small devices, there is a CSS-free approach.
Headlines are supposed to draw the eye to them. This makes it easy for the user to quickly understand the content of a page. However, this can sometimes lead to display issues, especially when dealing with longer words. With the HTML indications “non-divisible space” ( ) and “high dash” (), we can define where a word should be divided.Responsive ImagesIn addition to layout and typography, responsive images are an important part of responsive design.
Obviously, it wouldn’t make sense to load an image that is 1920 pixels long on a screen that is only 400 pixels wide. For one, the large image would have to be scaled down in the browser, using a fair amount of computing power. Also, the file size of the image increases gridwise with the size of its longest side.An image with dimensions of 1920 x 1080 pixels will take up four times more space than one of 960 x 540 pixels. Also, the image will take much longer to load on a mobile device.
With all this, it is clear that non-adaptive images have a very negative effect on the performance and usability of a website.The introduction of HTML5 brought with it two new attributes for the < img > tag. The srcset and sizes attributes are used to define multiple files for an image, also called “assets”. Each individual file is attached to the query for a CSS media element. This allows the browser to load an image from the list of available assets that is optimal for the device in question.Let’s see a brief example.
The following HTML code defines an image for which there are two assets that have been defined with srcset : one with a length of 480px and one with a length of 800px. It has also been determined by sizes that the 480 pixel image should be used on screens up to 600 pixels wide. Otherwise, the browser should load the 800 pixel image.
Traditionally, screens were wider than they were tall. Today, smartphone screens are taller than they are wide. Landscape format images appear relatively small on smartphone screens or any other portrait format screen. For best results, you should use a square or portrait image that you’ve cropped yourself.
The choice of the different cuts of an image is called “art direction”. This can be implemented with the HTML5 < picture > element. The < picture > element allows you to define multiple equivalent images for various use cases.Let’s see an example. The following HTML code defines a < picture > element that sets various assets for horizontal and vertical formatting. In both cases, there are different versions optimized for various screen sizes:
Responsive NavigationTraditionally, the navigation of a web page is displayed at the top of the page, usually as a horizontal list of menus with submenus that open on hover. This type of navigation is clearly unsuitable for mobile devices: there is not enough space and there is no mouse. There are several approaches to approach browsing on mobile devices.
All of them save space and do not require a mouse. The user’s attention is usually directed to navigation with an animation. The most popular approaches to responsive navigation include:
- The “hamburger menu” icon (three parallel horizontal lines): this element is touched to activate the menu.
- “Off canvas” navigation: the menu slides in from the edge of the screen and pushes the current content of the screen to the side.
| image dimensions | Screen size | Effect |
|---|---|---|
| small image | Large screen | Image loads fast and appears pixelated |
| big picture | small screen | Image loads slowly, appears sharp, and causes poor site performance |
| big picture | Large screen | Image loads slowly, appears sharp, and performs optimally |
| small image | small screen | The image loads quickly, appears sharp and performs optimally |
Important Tips for Responsive Design
Tip #1: know the internet users
Normally, when you have created your website and published content on it, you know which target audience you want to address. You should have already created your buyer persona, but it is important to know their search intentions and what they want to find.
Indeed, by studying what the target Internet users want to see on your website, it will be easier for you to give it to them, especially on a mobile medium. Most are looking for fluidity, speed of loading and comfort of use: keep these criteria in mind while keeping your personal mark!
Tip #2: Simplify your website
If you have decided to implement advanced designs and widgets on your computer website, it would surely be wise for your responsive design to give up these advanced and heavy coding. This is because a phone will have less power than a computer and could take longer to load every element of every page on your site. As you must surely know, after too long, the Internet user leaves the website, disinterested. Make sure to lighten your website as much as possible by making it certainly less impactful on mobile, but more functional and more fluid.
Tip #3: Adapt to mobile
Some widgets are more popular on mobile than on desktop. Indeed, we can notably cite the promotional banners or even the chats for the questions, when they do not take up too much space on the screen. The menus are also changing: adapt to mobile ergonomics in order to create a menu where you can easily navigate and find what you need.
Tip #4: Get into coding!
For a successful responsive design, you will need to have real notions of coding. Indeed, you will need to master HTML and CSS if you want to fully control your responsive design. But do not panic ! Many tutorials on the internet can help you with these mysterious internet languages.
First, you will need to define the dimensions of your pages using the viewport meta tag. This allows you to simulate the size of the website without losing the resolution and quality of the elements present.
You will also need to use media queries. Thanks to them, you will be able to control the width, the height or the orientation of your website on browser or mobile. These are specifications present on the CSS sheets.
Conclusion
Achieving your responsive design is essential for the traffic of your site on mobile phones. Indeed, more and more users use their smartphone instead of their computer to browse the web. Instead of responsive design, you can also opt for creating an application if you have an online store, a solution that may be more difficult to set up but much more pleasant for your customers.
Do not hesitate to call on professionals if you need coding or development help for your responsive design, it can be difficult and time-consuming to take care of this kind of task alone and without knowledge!
