Skip to main content

In today’s digital days, our whole life is focused on the mobile world, especially when we talk about selling products and services, where the reference of your business is the websites, which serve for various purposes: landing pages, onepages, e-commerces and a lot more..

Having a responsive website is to simplify the lives of its users, making them have a more comfortable experience when searching for different types of information.

SEO para site responsivo

For your website to have a good optimization strategy, it is essential that the developer follow some important points.

1 – Use grid system

Grid systems are partners for responsive development, where it is possible to determine the sizes of elements within the layout. This helps a lot when the device’s screen size changes.

2 – Optimize images for the Web

Optimizing images for the web is an essential item for your SEO strategy, in addition to making life easier for users who don’t have to wait to load on their devices. Loading time is crucial so you don’t increase your site’s bounce rate.

Bounce rate is when a visitor accesses a website and does not navigate to any page other than the one where he entered. That is, for some reason, he had no interest in exploring that site beyond the first page.

Google PageSpeed Developers recommends that, for mobile devices, a page takes 2 seconds to fully load. A non-responsive website, that is, one that will load the layout made for desktop, on the smartphone, will hardly be loaded in this time, losing points in relation to google.


SEO para Sites Responsivo - otimização de imagens
Otimização de imagens para sites presponsivos

3 – Fonts with flexible sizes and Media Queries

The big benefit is the code savings we make when using fonts with flexible sizes. Because depending on the resolution, they automatically adjust the font to the other elements.

Media queries are an element present in CSS development when it comes to responsive websites. Conditions added to the code, so that at a given resolution some element behaves differently.


4 – Elements with fixed width and height: divs and the like…

It should be avoided as much as possible, when we are building a responsive website, this simply crashes its entire structure. The ideal, if really necessary, is to use a percentage.

5 – Images as Background

Any image on your site has to fit and be proportional to the other elements. Using an image as a background causes a break in the layout, in addition to slowing down the loading of the site. Imagine the scenario where a 1000px wide image is in the background. Think about how it will open on a mobile device, for example.

6 – Use of many scripts, mainly external ones

For a good user experience, minimal use of external scripts on your website is required. Try to minify as much as possible the main scripts that carry their various frills within the site.

Jorge Cruz

Frontend | React JS | React Native | WordPress | Wine lover, Runner and proud to be Carioca. Not necessarily in that order.