How to adapt the design to different devices so that it remains user-friendly? We figured this out.
Life was easier when web designers had to worry only about desktop versions of the site. For most monitors and displays it was easy to create a design; one size fits almost everything. And then came the rise of the mobile Internet.
With the rise of mobile Internet, one of the important topics for discussion was the choice between creating an adaptive web design, responsive web design, which will change to different standards, and the design of an autonomous website, also known as m (dot) design with the structure of http://m.site.com URL.
In today’s conversation, we will consider sites with the design m (dot) as an idea from the past. They are no longer considered the optimal solution since they imply the creation of a completely new site with less content, images, and simplified navigation. With this in mind, let’s look at different design approaches for multiple devices.
What is a responsive and responsive web design?
At the beginning of the century, disputes in web design were about a fixed layout and adaptive. Adaptive layouts were regulated by a percentage ratio, and they were stretched to fit the browser, while fixed layouts were limited by the pixel width set by the designer.
None of these approaches were error-free. Adaptive layouts worked on screens of different sizes but looked unattractive on wide monitors. Fixed designs worked well on the screens for which they were drawn, but it was almost impossible to use on mobile devices with a smaller screen.
The most relevant topics for discussion now are responsive and responsive web design. Using both methods, it’s easier to follow Google’s recommendations so that the site is accessible on the mobile version, has good UX and performance, but each approach has its pros and cons.
For starters, responsive web design is similar to a fixed design that uses static layouts based on breakpoints. Responsive design determines the size of the screen and loads a suitable layout for it. This approach involves creating a design for at least 6 resolutions, which means additional development and design for several screen sizes.
This approach allows more control over the style and content strategy, which is not always possible using responsive web design. But in the long run, creating at least 6 “new sites” from scratch is a large amount of work that does not have to be done by choosing responsive web design.
Responsive Web design layout
Responsive web design, on the other hand, does not give you such control over the content and style as responsive but requires much less work to create and maintain. Also, Responsive web design as a descendant of adaptive layout: it adapts to screen size, no matter which device. Responsive design uses CSS queries to change styles based on the target device and then loads the page layout to fit the screen size of your device.
As a responsive design moves content around the screen, adjusting to the size of the browser, device, you need to pay attention to the visual hierarchy of content. Testing in different browsers and on different devices will help here.
Many designers find the responsive design a more time-consuming method because it needs to be planned for an almost infinite number of screen sizes. Even with this flaw, a responsive design almost always results in better code and better adaptability.
- Why is responsive design the future of the web?
- Still not convinced why responsive design is a responsible approach to design?
How about this:
It is more convenient for your users.
There are no set screen size limits like responsive design. While a responsive design guarantees good performance on any screen size, responsive design will only work on the number of screens for which layouts are made.
Responsive design loads faster.
A responsive site should load ALL possible layouts, while a responsive site should only download one that works on all platforms.
It is aimed at the demands of the future.
Since it is not limited to the specified screen sizes, your page will load and look good on the next Samsung phone or iPhone (not to mention tablets and smartwatches), regardless of screen size.
So, welcome to a world where it takes very little effort to ensure that all versions for your iPad, iPhone, Android exist inside a single file. You will be able to see the changes in real-time as soon as you adjust the sizes.
Web Design Trends 2020 Infographic
How do they work in the agency “NEXT”
For all our projects, we create an adaptive version of the site. We use the desktop first methodology: first, we decide how the design will be displayed on the desktop, and then we adapt it to a lower resolution.
We draw layouts for 3 standard resolutions
- narrow desktop,
- tablet, and
- mobile.
In design, we take into account breakpoints, this is a basic solution because at certain points something must still change, the elements must be adjusted to fit the screen. But in the layout, we take into account all the resolutions so that the image stretches between the intervals, and all the elements remain in place.
If the smartphone screen turns out to be slightly wider than the standard size, the site will still look good, menus, images, and headlines will not go anywhere. We layout only by layouts so that the site looks exactly as the designer intended.