9 basic principles of responsive web design

0
8
responsive web design

Responsive web design is a great solution when it comes to solving the problems of multiple screens on a site, but solving it from an impressions perspective is a bit more difficult.

There are no fixed page sizes, no millimeters, no centimeters, let alone any kind of physical constraint that needs to be resolved.

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 grain.

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

  • Adaptive X Responsive Design
  • the flow

Adaptive X Responsive Design

It may seem the same, but make no mistake. Both of these approaches really complement each other, so there’s 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” downwards. This process is called flow.

It can be a bit tricky to understand if you are used to designing sites with pixels and dots, but it will soon make sense once you get used to the process.

relative units

Imagine the display could be a desktop, a smartphone screen, or anything somewhere in between. Pixel density can also vary, so we also need flexible units that work anywhere.

This is where percentage-based relative units come in handy. So doing something at 50% scale means that it will always take up half the screen (or viewport, which is the size of the open browser window).

breakpoints

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

Generally, the location of one of these points will depend mainly on the type of content that is located there. If a sequence happens to break, you may need to add a breakpoint.

But make sure you use them carefully. It can all quickly become a big mess if you don’t understand what’s influencing what.

Minimum and maximum values

Sometimes it’s great to have content span the full width of a screen, the way it works on mobile devices, for example. But having that same content spread across the width of a TV screen might not make sense.

The minimum and maximum values ​​help a lot. For example, a width of 100% with a maximum width of 1,000 pixels means that the content will fill the screen, but never exceed the 1,000 pixel mark.

nested objects

Do you remember the relative position? It’s really hard to have a bunch of elements that depend on each other, as it would be hard to control. Therefore, keeping the elements well integrated and unique would make them more understandable, cleaner and much more orderly.

This is where static units like pixels can help. They are very useful for that type of content that you do not want to keep at scale, such as logos and buttons, for example.

Desktop or mobile: which comes first?

Technically, there is no real difference if the project is launched 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 helpful when making some decisions.

Often people start from both simultaneously. This is where you need to decide what will work best for you to get the most out of them.

Web fonts or system fonts

How about awakening that futuristic air on your website? Use web fonts! However, while they are really amazing, remember that each of them must be loaded, and the higher the number, the longer it will take for the page to load.

System fonts, on the other hand, are much faster, except when users don’t have them, which makes the entire page just the default font.

Bitmap Images X Vectors

Do your page icons have a lot of detail and some pretty bold effects in your app? If the answer is yes, use the bitmap. If the answer is no, consider using vector images.

For bitmaps, 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 published anywhere on the internet without first optimizing it. Vectors, on the other hand, are usually small images and may not be compatible with older browsers.

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