Под какие разрешения экрана готовить дизайн сайтов в 2021 году?
=================================================================

 Несмотря на то, что в сфере веб-дизайна я тружусь давно, у меня до сих пор не сложилось четкого понимания под какие размеры экранов готовить макеты. Я стараюсь внедрять в свой рабочий процесс максимум автоматизации, чтобы любой новый проект можно было начать в "2 клика", образно говоря. Дизайн-системы — наше все, но вот самый начальный этап — определение артбордов и сеток — то, что тормозит мой процесс и не до конца мне ясно.  

Я понимаю, что вопрос мой похож на сотни других, которые каждый год обсуждаются и здесь, и на других сервисах. Но хочется услышать мнения, актуальные для 2021 года.  

Я буду признателен, если вы поделитесь своими соображениями не только по размеру экранов, под которые нужно готовить дизайн, но и по настройкам сеток для каждого такого размера. Было бы здорово услышать обоснованные мнения, почему выбран тот или иной размер/сетка. 

 1. Усложнять простое проще, чем упрощать сложное.   

2. Сначала мобильные. P.S это не подразумевает обделить десктоп.  

3. Перестать мыслить сетками и точными размерами: делать в первую очередь полезные блоки. Почему у дизайнеров проблема с адаптивами? Да потому что они обвешивают блоки немощными кусками "дизайнерских" говнорешений. Когда всей этой поганой мишуры нет, то и вопрос с сетками отпадает. Хороший сайт может быть хоть в 500px шириной на десктопе, при условии что есть полезное действие.   

  

Я начинаю от 290px, но даже сверстав, смотрю что происходит если блок сжимать дальше. Всё больше прихожу к осознанию, что нужно научиться мыслить относительными единицами. На десктопе использую ширину от 700 до 1200px для контента, но плавно ухожу от точных единиц в сторону относительных.  

  

Есть отдельная категория дизайнеров-даунов, которые выставляют в редакторе ширину холста 1920 и думают что типа теперь это дизайн под широкие экраны. (хотя контентная область осталась такой же). <https://css-live.ru/> вот пример сайта с отзывчивым дизайном.  

  

Другая категория, всячески усложняет десктопные версии, чтобы не смотрелось просто. Это глупость. Не понимание факторов ранжирвоания сайтов, поведения пользователей и так далее.   

  

4. Больше отзывчивости, больше относительных единиц, больше grid css.  

5. Украшайки — в последнюю очередь.  

6. Дизайн сразу в браузере. Да, дизайнить сайт сразу в браузере, использовать условные элементы, которые потом можно отрисовать уже в граф. редакторе. Чтобы дизайнить в браузере, соответственно изучить вёрстку + технологии анимаций в вебе. +доступность +производительность.  

7. Фильтровать тренды.  

  

На мой взгляд, проблема сеток это вопрос дебильного дизайна и не понимания того, как это будет отображаться в браузере. Не вижу ни 1 плюса чтобы начинать с этого. 

 Под те же, что и в 2020 году (320/360 - 1920). 

> не сложилось четкого понимания под какие размеры экранов готовить макеты.

  

И как вы делаете? Каждый раз генератором случайных чисел что ли?  

До сих пор не взяли никакую сетку за основу для работы и не смогли придумать 3 разрешения мобильный/десктоп/планшет?  

  

<https://960.gs/>  

<https://getbootstrap.com/docs/5.0/layout/breakpoints/>  

[https://bulma.io/documentation/overview/responsive...](https://bulma.io/documentation/overview/responsiveness/#breakpoints)  

[https://get.foundation/sites/docs/media-queries.ht...](https://get.foundation/sites/docs/media-queries.html#default-media-queries)  

<https://materializecss.com/grid.html#grid-responsive>  

  

> обоснованные мнения

  

обосновать можно только под конкретный проект собранной статистикой.  

Для выбора "от балды" статистика по интернету общая <https://gs.statcounter.com/screen-resolution-stats>