The development and deployment of mobile devices has profoundly changed web designing and building methods in recent years. From this point of view, the technology offers the possibility to create responsive layouts, making the page visually adapt to any type of screen, be it that of a desktop PC or that of a smartphone or a tablet. The layout, logically, is not the only aspect that must be considered when we talk about responsive web design , but it is without a doubt one of the most important. So let’s dig deeper into the basic principles that govern this type of activity.
Responsive or Adaptive Layout?
First of all, a couple of concepts need to be clarified: to date there is still no uniform interpretation of the terms “adaptive” and “responsive“. Some argue that the second is a subcategory of the first , but in all honesty, it seems oversimplified. Today we tend to consider that adaptive is what gets created according to the characteristics of each device , which can result in a difference between the various versions in terms of both quantity and quality of the display content . The responsive design, however, does not account for these features and the layout suited to any type of screen with no difference in content between different devices .
7 tips for creating a responsive website layout
- A fundamental aspect in the creation of a responsive layout is represented by the so-called “flow”: when the screen restricts all the elements and they tend to “slipping” downward.
- Responsive web designs use units of measurement in percentage to define the size of the design elements.
- The so-called breakpoint allows a responsive layout to fit the width of the screen automatically by changing the layout of the graphic elements on the screen.
- It’s beneficial to set the threshold values if you don’t want a given graphic object to exceed certain widths.
- There are exceptions to the use of units of measurement as when, for example, you want to maintain the original dimensions of certain graphic elements (logo and buttons). These usually are “enclosed” in containers in absolute units and are called “nested objects”.
- Creating a responsive layout: where do you start, from the desktop or mobile? Everyone has his own approach…
- Bitmaps or vector images? You have three guesses…
