Responsible web design is a great solution when it comes to solving multi-screen problems, but solving this from the perspective of impressions is a little more difficult. There is no fixed size of the pages, no millimeters, centimeters, much less any physical restriction that needs to be resolved.
The projection of a site through pixels for desktop or Mobile has also been passed, mainly as new gadgets arise and allow you to open a website, for example.
Therefore, some basic principles on responsible web design need to be clarified in order to consolidate the whole concept instead of going against the tide. To facilitate the process, let’s focus on the designs (yes, responsive design goes far beyond the above and, if you really want to learn about it, design is the best way to start).
Responsible Design X Adaptive
It may seem the same, but you’re not mistaken. Both approaches really are completed, so there is no right or wrong way to do it. Let the content decide.
From the moment the device screen decreases in size, the content also begins to fill a more vertical space, where everything below is also pushed down. This process is called flow.
It may be a bit complicated to understand if you are accustomed to designing sites with pixels and dots, but it will soon make all the sense, so you get used to the process.
Imagine that the screen can be a desktop, smartphone screen or anything that reaches the middle term between the two. The pixel density can also vary and that’s why we also need flexible units that work anywhere.
That’s where percentage-based relative units come into view. So doing something on the 50% scale means that it will always occupy half of the screen (or the display window, which is the size of the Open browser window).
Breakpoints allow the design to change to predefined points, i.e. to have 3 columns on a desktop, but only one column on mobile devices, for example. The vast majority of CSS properties can be changed from one breakpoint to another.
Normally, where one of those points is placed will depend first on the type of content that is there. If a sequence occurs if it breaks, you may need to add a breakpoint.
But be sure to use it carefully. It is possible that everything will become a great disaster quickly if you do not understand what is influencing what.
Minimum values and maximum values
Sometimes it is good that the content occupies the full width of a screen, as well as it works on mobile devices, for example. But having that same content that extends across the entire screen width of a TV can just not make sense.
That’s why the minimum and maximum values help a lot. For example, a width of 100% with a maximum width of 1000 pixels would mean that the content will fill the entire screen, but never surpassing the 1000-pixel mark.
Do you remember the relative position? It is very difficult to just have a lot of items depending on the others as this would be difficult to control. Therefore, keeping the elements well involved and unique would leave them more comprehensible, clean and much more well-arranged.
That’s where static units like pixels can help. They are very useful for that type of content that you do not want to keep in scale, like logos and buttons, for example.
Desktop or Mobile-which one comes first?
Technically there is no real difference if the project starts from a smaller screen to a larger screen or vice versa. However, there are some limitations if you decide to start with Mobile, but that can be very useful when it comes to some decision making.
Many times people even start from both ends (mobile and desktop simultaneously). It is there that you need to decide what will work best for you in order to get the maximum of the two.
Sources or sources of the system
How about waking up that futuristic and legal air in your place? Then use Web Fonts! However, although they are really dazzling, remember that each of them should be loaded, and the greater the amount of them, the longer it takes for the page to load.
The system’s fonts, on the other hand, are much faster, except when users don’t have them, which makes the entire page just the standard source.
Images Bitmap X Vectors
Do the icons on your page have a lot of details and some well-thrown effects on your application? If the answer is yes, use bitmap. If the answer is no, consider using vector images.
For bitmap, use JPG, png, or GIF images; Already for vectors the best option will be SVG or an icon source. Each of them has its advantages and also some drawbacks.
However, always keep in mind the size-no image should be published anywhere on the Internet without being optimized. Vectors, on the other hand, are often small images and may not be supported in older browsers.
Also, if the vector has many curves, it can certainly be heavier than the bitmap, so you better choose wisely.