9 basic principles of responsive web design – WAU

Responsive web design is a great solution when it comes to solving multi-screen problems, but solving it from the perspective of impressions is a little more difficult. There are no fixed page sizes, no millimeters, centimeters, let alone any kind of physical restrictions that need to be resolved. Design a website through […]

Responsive web design is a great solution when it comes to solving multi-screen problems, but solving it from the perspective of impressions is a little more difficult.

There are no fixed page sizes, no millimeters, centimeters, much less any kind of physical restrictions that need to be resolved.

Designing a website using pixels for the desktop or mobile is also a thing of the past, especially as new gadgets emerge and allow you to open a website, for example.

Therefore, we need to clarify some basic principles regarding responsive web design in order to consolidate the whole concept instead of going against the tide.

To make the process easier, let’s just focus on the layouts (yes, the responsive design goes far beyond what was said above and, if you really want to learn about it, the layout is the best way to start).

Responsive Design vs. Adaptive

It may look the same, but make no mistake. Both approaches really complement each other, so there is no right or wrong way to do this. Let the content decide.

gif comparing responsive and adaptive design

The flow

As soon as the device’s screen decreases in size, the content also begins to fill a more vertical space, where everything below is “pushed” down too. This process is called flow.

It may be a little tricky to understand if you are used to designing sites with pixels and dots, but it will soon make perfect sense as soon as you get used to the process.

comparison between responsive and adaptive design

Relative Units

Imagine that the screen could be a desktop, smartphone screen or anything that strikes the middle ground between the two. Pixel density can also vary, which is why we also need flexible units that work anywhere.

That’s where relative units based on percentages come in handy. Thus, doing something at the 50% scale means that it will always occupy half the screen (or the display window, which is the size of the open browser window).

comparison between responsive and adaptive design

Breakpoints

Breakpoints allow the layout to change at predefined points, that is: to have 3 columns on a desktop, but only one column on mobile devices, for example. Most CSS properties can be changed from one breakpoint to another.

Usually, where one of these points is placed will depend primarily on the type of content that is there. If a sequence occurs it breaks, you may need to add a breakpoint.

But be sure to use them with care. It is possible that everything can become a big mess quickly if you do not understand what is influencing what.

comparison between responsive and adaptive design

You may also be interested in this content!
Website Design: 10 must-see tips for 2020!

Minimum and Maximum Values

Sometimes it’s great for content to take up the entire width of a screen, just as it works on mobile devices, for example. But having that same content spanning the width of a TV screen may simply not make sense.

That is 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 exceeding the 1000 pixel mark.

comparison between responsive and adaptive design

Nested Objects

Do you remember the relative position? It is very difficult to just have a lot of elements depending on each other, as this would be difficult to control. Therefore, keeping the elements well involved and unique would make them more understandable, clean and much more neat.

This is where static units like pixels can help. They are very useful for that type of content that you don’t want to keep to scale, like logos and buttons, for example.

comparison between responsive and adaptive

Desktop or Mobile – Which comes first?

Technically there is no real difference if the project is started from a smaller screen to a larger screen or vice versa. However, there are some limitations if you decide to start with Mobile, but they can be very useful when making some decisions.

Often people even start from both ends (mobile and desktop simultaneously). This is where you need to decide what will work best for you in order to get the most out of both.

comparison between responsive and adaptive

Web Fonts or System Fonts

How about awakening that futuristic and cool look on your website? So use web fonts! However, while they are really stunning, remember that each of them must be loaded, and the greater the number of them, the longer it will take for the page to load.

System fonts, on the other hand, are much faster, except when users do not have them, which means that the entire page is only in the standard font.

comparison between responsive and adaptive

Bitmap Images X Vectors

Do the icons on your page have a lot of details and some bold effects in 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; for vectors, the best option will be SVG or an icon font. Each of them has its advantages and also some disadvantages.

However, always keep size in mind – no image should be posted anywhere on the internet without being optimized beforehand. Vectors, on the other hand, are often small images and may not be supported in older browsers.

Also, if the vector has a lot of curves, it can certainly be heavier than the bitmap, so you better choose wisely.

comparison between responsive and adaptive

Do you think we forgot anything in this text? Do you want to contribute additional ideas and information that can help when developing a responsive web design?

Leave your comment in the field below!

Website Redesign

This text is a translation of the article “9 basic principles of responsive web design”, which you can check out here in English.