Today, when we talk about a website, we mean a responsive website. For the client, this means that the site will look good on all devices. But what does this mean from the designer’s perspective? The problem starts when, from the designer’s point of view, this doesn’t mean much—since they believe that responsiveness is solely a concern for the developer. A professional and good designer knows that when asked to design a responsive website, they must work according to strict rules of responsiveness requirements. It is important that when the screen is small, no part of the elements should be cut off or any content should disappear. Therefore, it’s crucial to prepare the design according to all the technical requirements of the responsive website.
First, let’s start by noting that there are two types of responsive layouts: Percentage-based layout – Fluid, and Layout with margins – Adaptive/Boxed. The percentage-based layout means that each area on the screen changes relative to the screen size. On one hand, this is an optimal situation when the design fills the entire screen. On the other hand, in some cases, elements begin to behave unpredictably and the visibility of the entire site gets disrupted. The second layout, the one with margins, provides much more control over the elements and allows you to preview how the site will look at every screen size, but as its name suggests, in many cases it involves a design with margins on the sides, and some site owners view this as a negative impact on the overall appearance.
After choosing the best option for the responsive layout, we need to receive designs from the designer that are suitable for each range. Below is a list of the ranges:
Desktop – 981 to 1200 pixels
Mobile – 320 to 480 pixels
Tablet – 481 to 980 pixels
Full Screen – 1201 to 1920 pixels
Typically, it’s common to prepare three designs: for desktop, mobile, and tablet, but often the designer presents only two versions of the design, for desktop and mobile. In this case, the ranges are slightly different:
Desktop – 651 to 1200 pixels
Mobile – 320 to 650 pixels
When designing for mobile, it’s also important to consider the height of the screen, and it’s always better to think about less tall screens. The accepted standard is the height of an iPhone 4, which is 480 pixels.
However, this does not mean that preparing different designs for different ranges is solely the designer’s task. On the contrary, creating a responsive website is a collaborative task for the designer and the developer or site owner. It is clear that on a smaller screen, such as a mobile screen, the site looks very different from how it looks on a larger desktop screen. It is not enough to simply scale down the site to the required size and say that responsive design has been achieved. There always needs to be some “playing around” with the elements. Some elements move from their original position in the desktop design, and some must be omitted entirely. For example, buttons are often stacked vertically on mobile instead of being side by side, the sidebar (right or left column) disappears, and important elements from it are moved to the bottom of the mobile screen, and so on. Therefore, from the beginning of responsive design work, it is important to understand the role of each element on the screen, which elements should stand out and be at the top, which can be moved to less prominent areas, and which can be omitted if necessary. Only when equipped with an understanding of each element on the screen, the size table for all ranges, and the experience required for quality responsive design, should you begin the work.