9 Basic Principles of Responsive Web Design

From 1989 until the first smart phones appeared life for a designer and web developer was very simple. It was enough to dominate CSS, Javascript and Flash at times and understand how the tables worked. The definition of responsive design has covered several aspects of marketing and design itself. Considering a trend in 2018, already last year, design and responsive sites gained strength, due to the increase of consumers buying smartphones and tablets, as well as internet browsing, which also migrated to devices.

Responsive web design is a great solution when solving multi-screen problems, but solving this from the print perspective is a little more difficult. There is no fixed page size, no millimeters, no centimeters, no physical restraint that needs to be solved. Designing a site through pixels for desktop or mobile is also 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.

1. Responsive or Adaptive Design

Well, is not it the same thing? No. The responsive design flows according to the device used. Already the adaptive is the old way of working with devices, where the content waits for the browser to finish the expansion. In the adaptive, there is a code for each version of the site and device. Example: code for when the site is displayed on the monitor, another code for smartphones.

2. The flow

While on monitors you can freely design the layout horizontally, on the responsive you need to think about how the content, colors and shapes will be arranged vertically. Think of a smartphone, for example. When a website adapts, the content is pushed down and this is called stream. If something becomes static, the images that adapt will “push” or overlap the footer, for example.

3. Relative Units

Leaving pixels, a bit aside, in responsive design you need to learn how to work with percentages. In addition, you do not just talk about static units. These relative units adapt according to the screen. In this sense, when designing a layout, you do not say that it has 1000 pixels, but rather, it occupies 100% of a screen.

4. Breakpoints

Many people, working with Web Design Agencies and building responsive layouts, rely on media queries, which make it easier to adapt a responsive layout. But creating media queries for each existing size would be tricky, and would not make the breakpoints flow. “Breakpoints” are parts in the layout that should respond to the device. A website typically has three columns, but accessed from a smartphone should only have one column.

5. Max and Min-Width

A content seen on a 50-inch television is different from the one seen on a smartphone, but imagine an image occupying the entire screen of a huge television, even if there is only a small amount of information, so there are maximum and minimum values ​​that help in limiting how much a particular element should expand or compact.

6. Children’s objects

This principle is also aimed at programmers. Anyone who messes with code should think about the usability of a responsive website. Therefore, grouping codes allows them to be easier to control. In this concept, even use static pixels so that soon or columns, for example, move together, avoiding that when a site responds to a screen, these objects do not move loose.

7. Mobile or Desktop First

Everything will depend on the project worked, if it is necessary that the mobile version is ready first, set priorities. Starting with the mobile version calls for a much leaner design, which is not necessary in a desktop version.

8. Web Fonts vs. System Fonts

Web sites have a greater variety and can give a cool face to responsive website design. However, they take longer to load. Avoid heavy and time-consuming layouts to load on mobile! This causes the user to stop seeing that content. For convenience and agility, it is recommended to use system fonts.

9. Bitmap vs. Vectors images

When designing a layout, make sure that logo and images have many details. They will load better if they are in bitmap (preferably .png, .jpg). Otherwise, you can use vectors in the SVG format. They are lighter, though, think of which browsers that layout will display: older browsers do not recognize or slowly load vectors in SVG.

When migrating to responsive design, some care must be taken. Hiding content due to the limitations of a mobile layout can undermine the purpose of a website’s content. This should also be balanced to prevent “bloating” of content, which makes a site heavy to be loaded in the mobile version, for example. Keeping the layout organized prevents the user from leaving the site. Research shows that 74% of mobile users give up on a site if it does not load in 5 SECONDS! It’s too little time and keep in mind that these tablet and smartphone users will tinker with a mobile version site just as they would in the desktop version.

Conclusion

Designers and developers now need to think of mobile – creative solutions to make it easier for users to navigate, for various purposes: from e-commerce, which can now be called m-commerce, as well as common websites. What a developer and a designer should remember is usability: The way a person consumes content on a desktop is not the same as a TV, which is not equal to a smartphone. So, you need to think of buttons, scrolling, so the browsing experience is natural, regardless of the device type. It is important to know what each of the terms means and the difference between them, but it is even more to be able to design correctly for mobile phones: it is very possible that the first customer experience with your brand happens through that device, as well that a bad experience will ruin any option that you could have that would take you into consideration.