📜 ⬆️ ⬇️

How are we going to impose when the screens become multi-pixel and the pixels are barely distinguishable

This post is not about specific decisions on the layout of sites in the future, but a gathering of the opinion of the habrasoobshchestva how to live further.

This question came to me not by chance. There is an interesting project, which customers are fans of Aipad and Aiphon. It is very important for them that the site is equally well displayed here and there. That is, the screen width floats from 800 to 2000 pixels wide.


What do we do with the pictures in the design?


Yes, now all browsers have learned to scale sites well. I pressed Ctrl, twisted the scroll, and your site is as big as you like. But if the raster image of 30 by 80 pixels is increased in three, it will not add beauty.
')
In our routine work of web designers, we have become accustomed to the fact that we are completely dependent on pixels. We all count in pixels. It doesn't matter how we embed the picture: in the background or with the Img tag.

I see 2 fundamental decisions:

1. Using different files for a specific resolution, JS determines the screen size, offers a specific CSS file, which in turn loads the desired images.

2. Go to vector graphics in the design of the site.


We use several sets of CSS files and images.


In general, this is a decision. We define some gradations, say:
2,048—1,601 pixels
1,600–1,281 pixels
1,280—1,025 pixels
1,024—800 pixels.

Perhaps even lower resolution for phones.

In this case, the site will surely open in good quality on different screens, it is not necessary to turn the scroll. If some paranoids have JS disabled - they are to blame, they knew what they were going to. But such, according to statistics, is not enough.

Disadvantage: extra images, extra css files, timed layout. Well, making changes is also four times longer.


Vector graphics


The main drawback: the lack of support for IE below version 9. But, this lack leaves, we speak about the future.

The second drawback: translate photorealistic images into a vector may not be the best option. No, if the site is initially drawn in curves, then there is no problem. And if we have a good photo, or the designer works exclusively with Photoshop, then the problems are serious. Software rendering may be overweight and manual overwork.

And what to do with warm lamp textures in the background? They also translate into a vector? And if left in a raster, then on different screens the scale of the texture will be different.


There are more questions than answers.


I honestly admit that I myself look uncertainly into the future. Maybe the problem is generally contrived and no doctrinal changes await us.

I would be extremely grateful to any comments.


Topics on Habré on this topic


Goodbye pixels
Font Zoom and Layout
The right "tires"
How to make one website for all devices (Responsive Web Design)

The desire to write this post-opinion poll arose after:
The vagueness of the icons weary


And the main question: what about pixel art?


I am a big fan of pixel graphics and I demand to return the normal resolution of 320 by 240 to all monitors without exception.

Source: https://habr.com/ru/post/141875/


All Articles