As you know, Responsive web design is one of the keys to page positioning and Google is giving more and more importance to this aspect. But do you know what are the nine basic concepts that you should keep in mind?
If you don't know for sure what responsive web design is and the most important concepts it has, we recommend that you continue reading this article where you will find out everything. Shall we start?
What is responsive web design
Responsive web design, also known as responsive, is one of the best solutions for web design. And the thing is, before, when you built a website, you had the problem that it looked different depending on the mobile phone, a tablet or even in different web resolutions. However, with this option you have the possibility of having the website adapt to the device. Here we are no longer talking about fixed pages, centimeters, sizes, etc. but rather it is built knowing that later, when changing the different devices, it will adapt (of course, sometimes you have to make some minimal changes).
In other words, We are talking about a programming format. With it, we can make a website automatically adjust to the user's device, whether it is a mobile phone, tablet or a computer with a resolution different from the one it was designed for.
This allows the website to look good in all aspects.
Basic principles
Now that it is clearer to you what responsive web design is, it is time to talk to you about the basic principles of this format and how it helps websites look better. These would be the following:
Element flow
We are referring to what happens when the screen where the web page is to be displayed becomes smaller and smaller. For example, in the case of a mobile phone. The smaller the screen, the format tends to organize all the information that is part of the template.
And it does it in a vertical way, not horizontally. This way, the user is not forced to have to scroll left and right to see the entire page, as well as up and down, for the web.
It also prevents the content from overlapping, but rather from always being organized in a vertical format.
And before you ask, yes, many templates can set a specific order for each part of the template, or even disappear, when the screen reaches a certain size. This is done with the objective of prioritizing the information and also to lighten the design so that you do not have to scroll a lot to find out what it says.
Desktop vs mobile
Mobile design is becoming increasingly important due to the fact that it is displacing computers. But when it comes to doing web design, In reality, it does not imply a big difference in terms of designing the website first and then the computer version, or the other way around. In reality, any responsive web design on the computer is reflected on the mobile and vice versa.
Now, it is true that there will be some details to take into account in each of the designs that will make it personalized. In fact, some companies choose to create a unique web design for computers, and another special one for mobile phones, although this can cause them to lose functions or cause users to get lost when navigating between one and the other, especially if they are used to to a guy.
Fonts, web or system?
An important aspect in web design is the typography to be used. That is, the types of sources to use. And, as you know, there are millions you could use. But always It is recommended to use those that are legible, easy to load and that are quick to load.
You should keep in mind that fonts can reflect a modern style, or a simple style. The former can make it take longer to load; while the latter, although more classic, allow better functioning of the website.
And which would be better? Well, it will depend on the needs of that project. If impact must prevail on your page, even if it takes longer to load, it may be a better choice than those with simple designs that do not stand out much.
Of course, you should keep in mind that it is better to use fonts that ensure that users will have them installed; otherwise you won't get that effect.
Relative units
Another principle of responsive web design is to use what are called “relative units.” Of them, the best is the percentage.
What is it used for? You see, imagine that you have a web design for the computer, a tablet and a mobile phone. Instead of providing specific measurements for each one, the percentage will be used so that the format takes care of after making different scales as the size of the screens is reduced.
If fixed measurements are used, this may not look good when reducing these screens.
breakpoints
Breakpoints refer to the space you have to work on a computer and mobile phone. While in the first you can basically have three columns, in the case of mobile you only have one. This makes when the design changes to smaller screens, it is laid out naturally; while, if you do not have breakpoints, what it will do is make all the content smaller while maintaining the same design.
Values
When designing a responsive website, one of the basic keys that must be into account are the minimum and maximum values regarding the width and height of the website and the elements themselves.
The big difference between one and the other is that, if there is no maximum width, what it does is that the content extends in width, which can make it look more deformed.
Nested objects
Imagine that your website has many elements. And in the mobile version you have decided that you are going to make them more focused. Having nested objects allows you to move several objects that are part of a unit at the same time., thus saving a lot of time. In addition, it allows for a cleaner and tidier design.
Not only that, but by making the elements go “all in one”, they can adapt faster to small screens.
Images vs vectors
In this case we focus on the web icons. These can be made with bitmap images or with vectors. And what would be the best? Vectors, without a doubt. This is because By making them larger or smaller, they won't look pixelated or blurry.
Adaptive vs Responsive Design
To finish with the principles of responsive web design, you should know that many confuse it with adaptive design, when in reality there is a big difference between them.
What responsive design does is that The structure adjusts fluidly and naturally to the device being used. And what about responsive design? In this case the adaptation occurs in fits and starts and shows something different depending on the browser and device used. In other words, it will show you a different design for each device.
Did you know these basic principles of responsive web design?