The adaptability of your design is one of the most important topics to pay attention to when building a website. Although it started back in 2016, mobile-first indexing is still a key topic not only in web design, but also in SEO circles. Unfortunately, too many people continue to neglect the importance of the mobile version of their site, which is why they are slowly but surely losing not only positions in search engines, but also customers.
As much as you are able, you should provide users with a similar experience on a computer, on a phone and on a tablet. Considering that each of these types of devices has an infinite number of sizes, operating systems and clients (browsers) – that is, rendering software.
The following is a non-exhaustive list of the main things to keep in mind when building a responsive design for your website.
Flexibility
Your content should be visible and accessible on all devices. Therefore, it should move its positions due to the nature of the displays on which it will be displayed. Mobile devices differ from computers not only in their size, but also in the vertical position of the display, unlike the horizontal position of computers.
The abstract grid division of the content of your site will certainly help you place the content where it needs to be. It is displayed from left to right and top to bottom. That is, if you have two elements that are in the same (abstract) row (horizontal), but in two different columns (vertical), followed by another element(s) on the bottom row, when displayed on a mobile device (unless there is additional intervention), it should be Row 1 left, Row 1 right, Row 2 left, Row 2 right.
It is good to keep this arrangement in mind especially if you use buttons or illustrations that you expect and want to appear higher up on the mobile version of your site.
Breakpoints
Breakpoints refer to the resolution of the device. That is, at what resolution size is it no longer appropriate to try to shrink your site’s content to fit in the space and it’s time to arrange it vertically. Another point to keep in mind when determining breakpoints is at what resolution your main menu can no longer fit on the display and you have to switch to a mobile menu (i.e., hide all options behind the so-called burger button).
Typography
Follow the links to learn more about the elements of typography, as well as general information about fonts and general guidelines for design basics.
In this article, discussing the adaptability of your design, typography refers to choosing the appropriate size of your font for different devices. Make sure that the titles and sub-titles of your site look good on every device. In other words, don’t need to be split into more than two lines (except when the title itself is long, of course).
Note
The spacing you can give users for the elements they interact with should be larger the smaller the display. That is, elements such as buttons, text fields, toasts, and modal elements should take up more space when on a smaller display so that users can see and use them without much difficulty.
Don’t take a cue from mobile phone ads, where the “X” is so small and hard to hit that most users end up opening ads they’re not really interested in, which only leads to frustration. Allow your users to interact with your site in a relaxed and free manner.
Mobile designs should be cleaner. There, you don’t need as many images, especially those that are abstract and serve merely as a visual break, and you can rely on a more minimalist design. Your page content should be simpler and faster to load and consume on mobile devices. Leave abstract and large visual elements for computers and tablets, whose displays are much more visible.
Finally, use vector images, especially for important elements, such as icons and other illustrative elements. The .svg file format allows each visual element to be at 100% of its resolution on every screen. Therefore, you will neither have to change the image that is displayed at individual resolutions nor accept that it will not look perfect on at least one of the devices that users will use.
