Responsive design, which permissions?

Started by np.carzspa, Aug 24, 2022, 11:24 AM

Previous topic - Next topic

np.carzspaTopic starter

I plan to make an online webstore, I plan to make web site adaptive so that it is convenient for a person to use the resource at any screen resolution. Therefore, I think to make a design and layout for a monitor (1024 px wide), for a tablet and a mobile phone. In this regard, the question is, under what standard resolutions are prototypes for a tablet and a mobile phone drawn?

less expensive  + without loss of functionality and convenience, it is easier to make it under two resolutions: 980 px for monitors and tablets and 320 for mobile phones and not bother. So?


@media (min-width : 320px){}
@media (min-width: 768px) {}
@media (min-width: 998px) {}
@media (min-width: 1224px) {}

And I switched from pixels to em in responsive design a long time ago. Now the screens of mobile devices have very different resolutions and with pixels on some screens you can get not the size of the letters that you expect. And I haven't seen any complaints with em yet. Very comfortably.

Aditi Barman

When drawing any design, a technical task arises — to fit the elements of the site into the specified width. It is harder to fit into a given width than to stretch to a given width. It is easy to stretch at the layout stage. Therefore, you need to focus on the minimum width in the class.

1. Mobile phones — 320px. We focus on the viewport of the iPhone, because it is the smallest. Modern androids have a larger viewport, so we ignore them (it will stretch on the layout).

2. Tablets — 768px. Again, we focus on the iPad in portrait orientation, because Android tablets usually have viewports from 800×1200 or coincide with the iPad. Tablets with a 600×1024px viewport are outdated. In addition, it's okay if in vertical orientation the site on such a tablet will look like on a mobile phone, and in horizontal orientation — like on a desktop.

3. Desktop and tablets in landscape orientation — 1000px. Why 1000, not 1024: first, in desktop browsers, the scrollbar eats (usually) 18px width; secondly, it is more convenient for the layout designer to calculate the sizes as a percentage from 1000px, and up to 1024 will still stretch during layout.

In principle, this is enough for the layout designer to cope.
If the design does not have a maximum width and stretches from edge to edge of the browser window, then at the discretion of the designer, you can draw one or more sketches for wider screens.

In what order to draw? It depends on how the technical task is set. Most often, the task describes the full functionality for the desktop version.
Then it's easier to draw a design for 1000px and rearrange it for 768 and 320, throwing out or simplifying less significant elements of the site along the way. I.e. move from complex to simple.
At the same time, it is more convenient to make up from a smaller screen to a larger one (from simple to complex).
With mobile first, the layout designer has to add new styles for large screens on top of the basic 320px version instead of resetting the styles written for desktop browsers. As a result, css weighs less for a mobile phone and parses faster.