Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
Today there are so many devices and so many different screen sizes that it is essential to adapt each web design to the different resolutions.
A few years ago it was very normal to see well-designed websites for desktop that, however, when viewed from mobile, looked bad. It was very common to see fonts that were too large, cut on the sides, resized images, etc…
Nowadays where the mobile is used for everything, this is inadmissible.
The importance given to responsive web design today is so great that the Google Search Console (although everything appears to be fine for the user) it could show warnings of usability problems.
For this reason, nowadays where the mobile is part of our day to day and there are so many sizes for mobile, tablets or Smart TV, it is essential that the web design is 100% responsive.
What is a responsive web design
Responsive or adaptive web design (Responsive Web Design) is a web design technique whose objective is the correct display of a website on different devices and screen sizes (desktop computers, tablets and mobiles).
In short, it’s about resizing and positioning web elements to fit the width of each device for good viewing, better user experience, and good Google ranking.
Therefore, it is important that the CSS code implemented manually or through templates make good use of the code, specifically media-queries in the style sheets.
If before it was designed first on desktop and then on mobile, today it can or should be done the other way around.
The demand rules and if people use the mobile more they should be given what they ask for and for that usability must be perfect.
In addition, when designing, try to the content is as similar as possible on desktop and mobile for a better user experience and to prevent Google from detecting duplicate content.
Reasons why your website should be responsive
The need for a responsive website is simple: without it you will be losing visits and sales.
On a site like the internet where the user has little patience, if your website is not responsive, the potential customer or buyer has a very easy time closing your site and clicking on the result of the competition.
The person who accesses a website has a few seconds to decide whether to stay to browse or not.
It is 100% certain that if the website is not adapted to the user’s resolution, it will take a few seconds to leave it.
Let’s see the reasons why you should have a responsive website.
You prestige and name of your company is at stake.
A non-adapted design will cause not only rejection, but also that user who has not been able to navigate through your site due to a bad design will probably don’t do it again.
The worst is the bad brand image that you may be creating globally.
If your website navigates smoothly, has optimized alternate images and adjusted text, it is very likely that your brand will be reinforced by the trust and usability generated and with it a greater probability of increase traffic and sales.
If Google detects that your website is not responsive, It will affect the positioning of your site.
The mobile usability is a priority for search engines.
There are many positioning factors, but without a doubt that your website adapts well to all resolutions is one of the main ones.
It is useless for you to create great content if aspects like these are not taken care of.
If the user cannot easy navigation just like it does on desktop, it will quickly leave your site.
With this you will be losing traffic, sales and consequently a worsening of your web positioning.
Tools to see if the web design is responsive
This is the first thing you should do on your site, check that everything is correct.
To see if a website adapts to all devices you have to see the different screen sizes and for this there are multiple checking tools to see it:
Windows Resizer Chrome Extension
It allows you to see the responsiveness of a website in 1080, 1680, 1050, web in usual formats 320 × 598, 376 × 667, 1024 × 768, 1440 × 900, 1920 or 2560 × 1440.
In this way, simply clicking on the extension When we have opened a website in the browser you will be able to see if your web design is responsive.
If it is not, you can start to remedy it.
Responsive Web Design Tester Extension
This other extension allows you to select by device.
Thanks to the usual mobile classification, you can see if it adapts to the screen correctly.
In addition, through its configuration you can add new devices and resolutions.
designmodo.com/responsive-test
Another good app to see the different responsive formats is .
Access their website and include your domain to check how it will look on the different mobile devices they offer you, and you can preview them.
element inspector
The Chrome or Firefox element inspector It is a good way to reliably check that everything works ok in the responsiveness of your site.
To use it is easy, enter your website in the browser and once it is open, click on the right button.
Choose >Inspectand then the button for responsive and set the pixel density and device type.
I leave you this video so you can see how it is:
Google Measurement Tool
Google has its own to check that everything fits perfectly on mobile.
There are many more online tools such as “Responsitator” which is online and also works very well or “Am i responsive”.
With any of them you will ensure a good user experience observing its good responsive adaptation on all devices.
How to deal with different sizes in responsive
In order for the design to adapt as well as possible, we must first focus on two types of screens:
- big screenswhere all the content of a website fits and there is even enough space to view it comfortably.
- Small or old screens, where the text is too small for the marked width. It doesn’t fit, sticks out, or on extremely small devices, a bottom bar appears to finish viewing the content.
The solution to this is to work so that this does not happen, yeThe user is comfortable at all times regardless of whether the screen is larger or smaller.
The response time, a higher or lower bounce rate or having more or fewer conversions on the web, depends largely on it.
- Responsive solution on large screens
Normally, and large formats are becoming more and more commonthere is no major problem on these screens, since a website has to be created to be seen on large screens (at least today)
It is normal for a website to have a centered frame of 960px on the screen.
If the website is a bit old, it may even have a few more pixels as it was designed for 1024px wide screens.
Be that as it may, the logical thing is that our website has containers of this type.
The integration of the internet in Smart TV is common and must be adjusted well.
- Responsive solution on small screens
Although mobile web design is responsive, the work done on it is more specific.
In other words, when a website is adapted to mobiles, you have to work page by page.
Working absolutely all sizes is very difficult. The best is establish standard measurements based on the most used devices and resolutions.
This is where things get complicated, and this is where most attention is paid today, and this is where WordPress templates for example, the batteries are put on since it is essential that the responsive on these devices works perfectly.
Points to discuss:
- Design on small screens has to look good on both horizontal as vertical.
A mobile device in portrait (as most commonly used), regardless of its true resolution, typically adopts a device resolution of 320px wide.
Horizontally, this resolution adapts to the real size of the screen, but it is usually between 400px and 600px.
On tablets, this resolution depends on the device but is usually above 600px, although it can reach 1024px.
- If you use Google Analytics or any other page analytics system, you can find not only the screen resolutions of your users, but also devices are using.
This can give us an idea of whether there are many differences in display times and where there may be a problem in the responsiveness.
- You have to decide is At what point does the small screen end and when does the mobile begin? (breakpoint)
In other words, it is clear that our website does not fit in small resolutions and we will have to shrink it a bit for them, but there will come a time when this simple “shrinkage” will no longer make sense because it brings together too many elements on the screen with it.
The standard is usually up to 400px wide, a measurement from which it is understood that the device must radically change its viewing and possibly basic operation.
The minimum width we have to think about is 320px wide, which also allows us to have a margin from which we should not work.
For this, choosing one like Divi or Generatepress is a good option that allows you to mark the breakpoint easily.
With what tools to make a good responsive web design
To make a responsive design you have several tools in your hand.
The first is to be able to count on a good wordpress templatethis is vital today and although most are, you can still get some surprises.
Divi, Generatepress, Astra, Ocean, Bridge, any of them make a good responsive feature.
Elementor is a layout designer that allows you to design a web design with a simple system of dragging and dropping elements (Drag and drop) but the strong point is being able to design the web specifically in version, desktop, Tablet and mobile.
In this way you make a 100% responsive design by laying out directly on mobile.
100% mobile adaptability is possible with a .
MPA
Amp is a technology that hosts websites that use this system in Google’s own cache.
This makes the web display faster, but the main thing is that generate a simple website in fully responsive html on mobile devices.
Amp (Accelerated mobile pages) are accelerated pages that eliminate all the script making the reading by the user more fluid, since delete boasts, effects, pop up and intrusive elements.
Today this technology has come a long way and is perfectly compatible with and templates making the design not lose in quality.
However, AMP is not required on all web pages because if, for example, you need those elements with…
Facebook Comments
Disqus