Main Principles of Responsive Web Design

Responsive Web Design is a key solution to correct page viewing on screens of all sizes. Different devices that have different screen sizes appear every day, so designing in pixels for either desktop computers or smartphones is a thing of the past. This is why it’s so important to study the principles of responsive web design – a design that compares the adaptability and flexibility of a web page and can be effective in our multi-device age.

Responsive vs Adaptive Web Design

It seems that this could be the same thing. However, both of these types of web design complement each other and can be used for different types of tasks.

The Flow

When a screen size is getting smaller, the page content begins to use more vertical space and the elements begin to get push down. This is what is called the flow. It could be difficult to understand if you only previously used fixed size elements, but it will really make sense when you get used to it.

Relative Units

A page can be view on a desktop screen, mobile screen or anything else. The pixel density on different screens can vary, so we need flexible units that work everywhere. Responsive design is an example where relative units like percents become very useful. So making something 50% means that it will take half of the screen no matter the device.

Breakpoints

Breakpoints allow you to change the location of blocks when you use a screen of a certain size. For example, if there are three columns on a desktop, this could be only one column on a mobile device. How you arrange the breakpoints depends on the content of a web page. If the content breaks, then you might need to add a breakpoint. But be careful with this – you can get confused when it’s difficult to understand what is influencing what.

Max and Min Values

Content, which takes up the entire width of a page, might look great if it’s displayed on a mobile. But showing the same content on a TV screen width can look not so great. This is when max/min values help. For example, if you set the size of the block ‘width: 100%’ and ‘max-width: 1000px’, the content will fill the screen, but won’t go over 1000 pixels.

Nested Objects

If you have a lot of elements that depend on each other, then it could be difficult to control them. Therefore wrapping elements in one container keeps them more understandable and easier to control. This is an example when pixels can help you. This can be useful for the elements which you don’t want to adapt to the size of the screen, like logos and buttons.

Desktop or Mobile First

From a technical point of view there is not any difference: you can start a project from a smaller screen (mobile) and go to a bigger (desktop) or vice versa. Often people don’t know what approach to choose first. Think first and choose which one works better for you.

Webfonts or System Fonts

Do you want to have a great looking Futura or Didot on your website? Then use webfonts!
Although they look nice, remember that each font will be downloaded and the more you have of such fonts the more time will be needed to load a page that has them. On the other hand, system fonts are downloaded instantly, except in the situation were a user doesn’t have them locally. In such a case the browser will use a default font.

Bitmap Images vs Vectors

Does your image have lots of details and impressive effects? If yes, then use a bitmap image. In other cases, use vectors. For Bitmap images use a jpg, png or gif, and for vectors it would be better to use a SVG or an icon font. Each has its own advantages and disadvantages. Any way, you have to keep in mind the size of the images – no picture should be published on a website without optimization. Vector images are often tiny, but some older browsers won’t support them.

These are the basic principles of getting a better responsive web design for mobile pages. But each site is unique so it can be best to use several additional development tips for gaining a better design and usability.

Source