How to improve and work properly a responsive design
In this post we will talk about several tips that can help us a lot when facing a responsive design from a visual point of view. In addition, we briefly explain what it is and what points we must take into account to work it correctly and achieve a wow effect.
The term “responsive or adaptive” corresponds within web design, to a technique that is based on resizing the elements of a digital product and placing them so that they adapt to the size of each device to improve the display and user experience.
Any UX / UI designer has surely encounter different difficulties or doubts that have made him realize that it is not enough to create a beautiful product, but it must also be flexible, functional and adaptable.
Today it is proven that there is a large percentage of the population that surfs the internet from mobile phones, and this is likely to exceed in many cases to those that do it from the computer … therefore it is essential to have a responsive web design, otherwise it is difficult to survive in the current digital age.
The most common devices are computers, tablets, and smartphones. In addition, when creating a digital product it is important to take into account the type of content and the target it is aimed at, this way we will have more clues about from which device it is most commonly accessed from.
Finding yourself on a website and browsing it quickly and easily is very gratifying for any type of user That’s why as designers we must put ourselves in this shoes, who’s better than us to know which are the sites were we feel more comfortable and were we can navigate in a more agile way.
When developing a visual style it is important to know the different screen resolutions and analyze which grid will be the most suitable one for our type of product.
It is not the same to see a design on a small device as on a large one. It is important not to lose control of the readability and to be aware that a misuse of the graphic elements can cause the user to leave our page in less than 3 seconds because of the complexity in the reading and search information experience… and clearly we don’t want that.
Having said that .. What should we do to get a good responsive design?
1.Hierarchies matter and your eyes know it
When we work on different resolutions we have to take into account the typographical use.
It is important to do a preliminary study of the hierarchies and create only the necessary text styles while maintaining a visual coherence between them.
We will have to take into account what sizes we want to change at one cut point or another. We recommend that the text styles be modified as little as possible between resolutions, in this way we will greatly facilitate the work for front-end.
There are specific texts such as headlines, highlights or numerical elements which often cry out for us to change their size in another resolution, so in this type of case we will get them to adapt to the device and improve its readability.
2. A good composition and the right spaces can be the icing on the cake
When working on the page structure and spaces, we must take into account the grid defined in each resolution. The content will always adapt from up to down and from left to right.
It is important to know the screen height of each device well as it will give us valuable key information to better adapt the design and achieve good space optimization. At first glance, this point does not seem very relevant, but it is key for the user to quickly recognize where they are and differentiate one section from another.
Good use of vertical spaces is essential within responsive design. Depending on the device, these should be more or less optimal. Also between resolutions, it is recommended to maintain a proportional coherence between them, thus we will achieve that, when going from one cut point to another, all the content flows from top to bottom in a fine and controlled way without losing stability between the different elements that form design.
3.Appearances are deceiving, you better check the design on the device
Once we are studying the behavior of the different graphic elements, it is very important that we see it on the corresponding device. In most cases appearances are deceiving … and believe us when we say that the appearance of hierarchies, heights, spaces etc … are not 100% real without seeing it on the device itself. This advice is very important to keep in mind, since it will help us enormously in the development of the construction of the product.
For this we can use either one of the following tools such as Mirror or Crystal for Sketch, depending on whether you are on iOS or Android, or the same Figma app for smartphone and tablet devices.
4. Where to put a good image format …
Regarding images, we will also have to study their behavior and the types of formats that tend to appear more often on different devices. For example, on a tablet we already know that the screen is one of the highest, so an image should acquire a more vertical format to make a more suitable adaptation.
The same thing happens on a smartphone … images tend to have in most cases a vertical format, but it must be taken into account that the space is smaller so we will have to play with “optimal” heights so we do not bore the user with an infinite scroll.
Some images will be masked, others will be proportionally adapted and / or replaced by another with a different format.
5. Skipping the reticle is not a drama sometimes…
At this point, you may think that the clamp is gone a little, but it is not. What has been said, it is not always a drama to skip the “established rules” … and thanks to this we can achieve a wow effect by allowing ourselves certain licenses regarding the reticle.
An example with which we can experiment is in the headers or in the footers. Most of the time we tend to compose everything within a grid, and yes, that’s fine, but when we adapt a design to resolutions of “large” sizes such as 1680, 1920 or 2560 … it’s a good trick to take out these elements and give them a determined margin for each side.
Another clear example are the images. We may want a more closed grid for most modules that can appear in a template, especially more textual modules, but it is possible that for some images we want to gain more presence and it may be interesting to remove it from the grid and add specific margins to it.
6. A good clarification never hurts, and the front team will thank you for life
When we create a visual line in our heads it is very clear what we are designing… but that does not mean that when our work goes to a front development department they are going to be in the same page and have the same clarity. That is why it is a good practice to leave annotations or examples thorugh visual of the behavior of everything that may generate doubt.
It is not necessary to make a study of all the elements designed in the different resolutions, sometimes it is only enough to leave a little clarification of how it will behave when it reaches one cut-off point or another, without the need to graphically represent the example. This seems at first glance something unimportant … but it can save us a lot of work 😉
7. Don’t fool yourself! Adapting content is not making it smaller.
As the title well says, don’t be so easily fooled by the concept “adapt”, especially when we adapt down. Each device is a world, and it is not enough to proportionally reduce down an element from resolution to resolution… As we commented previously, in the case of a tablet were the information is usually consumed vertically, we should design taking into account that verticality.
To conclude, it is important to note that today we use many different devices, and that the consumption of information is essential on any digital platform. We are not just designers who give a visual format to a product, but we design by and so that the user has a good experience when browsing a web environment. So it is necessary that we look at the small details, and that we look for the best way to create visual content that can be just as impressive from any device, whether small or large.
Throughout many projects, we have encountered difficulties that have made us rethink different methodologies and ways of working. But there is one thing that we do have clear … and that is that the product must be pampered … and what better way than to analyze and study it in detail to achieve the best result. Any device is just as important. Although it is true that depending on the type of product we are designing, we must put the focus on the one with the most traffic.
A couple of tips never hurt, so we hope that this short list will help you in your future projects.