What is responsive web design and what are its basic principles? Find out here!
Responsive web design is a great solution when it comes to solving the multi-screen problems of a site, but solving it from the print perspective is a bit more difficult.
There are no fixed page sizes, no millimeters, no centimeters, and certainly no physical restrictions that need to be addressed.
Designing a website using pixels for desktop or mobile devices is also a thing of the past, especially as new devices emerge that allow you to open a website, for example.
Therefore, we need to clarify some basic principles about responsive web design to consolidate the whole concept instead of going against the flow.
To make the process easier, let’s focus on layouts (yes, responsive design goes far beyond this, and if you really want to learn about it, layout is the best way to start).
Adaptive Design vs Responsive Design
It may seem the same, but don’t be mistaken. Both approaches actually complement each other, so there is no right or wrong way to do it. Let the content decide.
The Flow
From the moment the device screen decreases in size, the content also begins to fill a more vertical space, where everything is “pushed” downward. This process is called flow.
It can be a bit tricky to understand if you’re used to designing sites with pixels and points, but it will soon make sense once you get used to the process.
Relative Units
Imagine the screen could be a desktop, a smartphone screen, or anything in between. Pixel density can also vary, so we need flexible units that work anywhere.
This is where percentage-based relative units are useful. So, making something at a 50% scale means it will always take up half the screen (or the viewport, which is the size of the open browser window).
Responsive web design is a great solution when it comes to solving the multi-screen problems of a site, but solving it from the print perspective is a bit more difficult.
There are no fixed page sizes, no millimeters, no centimeters, and certainly no physical restrictions that need to be addressed.
Designing a website using pixels for desktop or mobile devices is also a thing of the past, especially as new devices emerge that allow you to open a website, for example.
Therefore, we need to clarify some basic principles about responsive web design to consolidate the whole concept instead of going against the flow.
To make the process easier, let’s focus on layouts (yes, responsive design goes far beyond this, and if you really want to learn about it, layout is the best way to start).
- Adaptive Design vs Responsive Design
- The Flow
Adaptive Design vs Responsive Design
It may seem the same, but don’t be mistaken. Both approaches actually complement each other, so there is no right or wrong way to do it. Let the content decide.
The Flow
From the moment the device screen decreases in size, the content also begins to fill a more vertical space, where everything is “pushed” downward. This process is called flow.
It can be a bit tricky to understand if you’re used to designing sites with pixels and points, but it will soon make sense once you get used to the process.
Relative Units
Imagine the screen could be a desktop, a smartphone screen, or anything in between. Pixel density can also vary, so we need flexible units that work anywhere.
This is where percentage-based relative units are useful. So, making something at a 50% scale means it will always take up half the screen (or the viewport, which is the size of the open browser window).
Breakpoints
Breakpoints allow the design to change at predefined points, such as having three 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, the location of one of these points will mainly depend on the type of content found there. If a sequence breaks, you may need to add a breakpoint.
But be sure to use them carefully. Everything can quickly become a mess if you don’t understand what is influencing what.
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 across the entire width of a TV screen might not make sense.
Minimum and maximum values help a lot. For example, a width of 100% with a maximum width of 1000 pixels means the content will take up the whole screen but never exceed the 1000-pixel mark.
Nested Objects
Remember relative positioning? It’s really hard to have a bunch of elements that depend on each other, as it would be difficult to control. Therefore, keeping elements well integrated and unique makes them more understandable, clean, and much more organized.
This is where static units like pixels can help. They are very useful for content you don’t want to scale, such as logos and buttons, for example.
Desktop or Mobile: Which Comes First?
Technically, there is no real difference if the project starts from a smaller screen to a larger one 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 start from both simultaneously. This is where you should decide what will work best for you to make the most of it.
Web Fonts or System Fonts
How about giving your website a futuristic feel? Use web fonts! However, while they are really amazing, remember that each one must be loaded, and the more you use, the longer the page will take to load.
System fonts, on the other hand, are much faster, except when users don’t have them, which makes the whole page just the default font.
Bitmap Images vs Vectors
Do your page icons have a lot of detail and some pretty bold effects in their application? If the answer is yes, use bitmap. If the answer is no, consider using vector images.
For bitmaps, use jpg, png, or gif images; for vectors, the best option is SVG or an icon font. Each has its advantages and also some disadvantages.
However, always keep size in mind: no image should be published anywhere on the Internet without optimizing it first. Vectors, on the other hand, are usually small images and may not be compatible with older browsers.
Also, if the vector has many curves, it can certainly be heavier than the bitmap, so it’s best to choose wisely.
Do you think we should add any information to this text? Do you want to contribute ideas and additional information that can help when developing a responsive web design?
Leave your comment in the field below!
