I would bet something that, in recent years, you’ve heard the term ” responsive ” a lot of times . And rightly so, since today it is absolutely essential to have a functional website. But do you know what exactly this term implies and how to implement it in your marketing ? Let’s see it step by step.
First of all … what exactly is a responsive web design?
A responsive web design is one that is capable of adapting to screens of different sizes with a single website. The system automatically detects the width of the screen and from there adapts all the elements of the page, from the font size to the images and menus, to offer the user the best possible experience. It looks like magic!
Sometimes the responsive is confused with mobile websites , but it is not the same. In the case of responsive design, we have a single website that can be adapted for all types of devices, from desktop computers with large monitors to mobiles, tablets and others. On the other hand, creating a mobile site implies designing an independent website from scratch, whose contents and format are specially adapted to work better on mobile devices.
In my opinion, the most recommendable option is undoubtedly responsive design, since creating a mobile website implies having two different sites and duplicating maintenance and updating tasks. In addition, the responsive automatically adapts to all types of sizes. That said, we can use a plugin to create mobile sites (such as WordPress) as a temporary solution while designing a really adaptable site.
Why do you need to have a responsive website?
- Because the world is increasingly mobile . In Spain, 27.1 million people access content from their tablet or smartphone and six out of ten have purchased through them. One in two users check the smartphone in the first five minutes after it gets up and three out of ten check the phone every ten minutes. Worldwide, more than half of web traffic comes from mobile. In short, if your website is not properly viewed from mobile devices, you have a serious problem.
- Because it improves the user experience . The responsive offers an optimized experience for all users, regardless of the device they use, and that results in benefits for the brand. According to Google Think Insights, if a user has a positive experience with your site, the possibility of converting is 67%.
- Because it is essential for your SEO . In 2015 Google updated its algorithm to penalize the positioning of websites that were not prepared to offer a good experience from mobile. If you do not have a responsive website, you are positioning worse every time a user searches for you and losing a large source of traffic.
- Because it will help you improve your branding . First impressions count, and a lot. If a user tries to access your website from their mobile phone and does not have a satisfactory experience, they will get the impression that your brand is outdated and your company does not care about customer satisfaction. On the other hand, a responsive, modern website with good usability will create a good impression that will naturally “infect” your products and services.
- Because you will get more conversions and leads. Improve navigation in different devices ensures that users have it easy to find what they are looking for, spend more time on your website and are more likely to end up leaving your data or confirming the purchase in your landing pages .
- Because you will be ready for the future . Today, users use a variety of devices with different screen sizes and resolutions. It is already complicated to design an individual solution for each type of device … but it is also that we do not know what is coming. If you have a responsive site, not only will be prepared to look good on all devices that exist today, but also you can adapt to resolutions and screen types that do not yet exist. Think of all the work you are going to save!
What elements must be taken into account to design a good responsive site?
Responsive web design is an integral discipline , which takes into account many factors to ensure a satisfactory user experience. These are some of the elements that need to be adapted to offer a good experience on screens of all sizes:
- The typographies . Obviously, the font size must be different depending on the screen, so that we can read the texts without having to zoom. This implies, for example, that we should not include columns with a predetermined width in a responsive site. The typographic family that we choose is also very important when determining readability.
- The images and videos . The visual elements of the page must follow a logical proportion depending on the device where they are displayed, so that we can see them comfortably.
- The horizontal or vertical format . In particular, it is necessary to take into account that mobile users usually prefer vertical, but can alternate between them to visualize a certain content.
- Usability . Mobile and tablet users use touch screens to interact with content, while on computers this interaction takes place through the mouse. This implies that menus, buttons and other elements must be rethought to offer a good user experience in both cases.
- The loading times . Attempting to load a desktop web from a mobile phone can be an extremely frustrating experience for the user and make it easily quit. Therefore, it is necessary to optimize load times on all devices to the maximum.
- The effects . For example, the hover works on desktop computers, but not on mobile, so if you put in it the “read more” of an article or news mobile users will not be able to access it.