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

Question

[saveTibet]

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

Answer 1

[Kadzi]

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

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

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

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

4. Больше отзывчивости, больше относительных единиц, больше grid css.
5. Украшайки — в последнюю очередь.
6. Дизайн сразу в браузере. Да, дизайнить сайт сразу в браузере, использовать условные элементы, которые потом можно отрисовать уже в граф. редакторе. Чтобы дизайнить в браузере, соответственно изучить вёрстку + технологии анимаций в вебе. +доступность +производительность.
7. Фильтровать тренды.

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

Comments

[NamiDi]

Заказчик: Мне нужен дизайн сайта
Диз: Сча я вам накидаю сразу в браузере, начну с 290
Заказчик: Ты чё дебил?

Автор либо своим друзьям сайты пилит либо упоротый верстальщик.

[my298k]

ОЧЕНЬ ЧЁТКИЙ ПОДХОД К ДЕЛУ!
РЕСПЕКТ!

Answer 2

[Михаил Р.]

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

Comments

[saveTibet]

Вы кроме 2021 ничего больше в вопросе не увидели?

[Михаил Р.]

saveTibet,
В сущности, нет. Увидел много воды, без конкретики.

в сфере веб-дизайна я тружусь давно

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

Оптимальный вариант - проанализировать Ваши проекты на предмет требований к разрешению макетов и сделать закономерный вывод.

[saveTibet]

Mike, речь не о моих проектах. Я хотел бы собрать мнения от других людей. Понять, кто что использует и почему.

[Владислав Лысков]

saveTibet, т.е. провести соц. опрос?

[saveTibet]

Владислав Лысков, можете называть как хотите. А можете просто сказать "Я использую такие-то и такие то размеры артбордов, потому что... И использую 8-пиксельные или не 8-пиксельные сетки с такими то параметрами, потому что...". Это было бы более информативно. Но если не хотите, не пишите.
Я задаю вопросы на тостере не ради сарказма, а потому что надеюсь услышать мнение опытных людей.

Answer 3

[Александр Аксентьев]

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

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

https://960.gs/
https://getbootstrap.com/docs/5.0/layout/breakpoints/
https://bulma.io/documentation/overview/responsive...
https://get.foundation/sites/docs/media-queries.ht...
https://materializecss.com/grid.html#grid-responsive

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

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

Comments

[saveTibet]

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

Нет конечно. Сейчас я делаю под 320 и под 1440. Использую 8-пиксельные сетки, которые копирую из проекта в проект, но иногда настраиваю заново.
Иногда делаю под промежуточные размеры — 1024 и 768.
Под 1920 не делал никогда, потому что всю жизнь до недавнего момента работал на 1440 (банально негде было тестить бОльшие размеры).

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

Статистикой чего?

[Александр Аксентьев]

saveTibet, статистикой типа яндекс метрики.
Думаю что набор разрешений будет сильно от аудитории проекта зависеть.

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

Но в общем и целом под дефолт бутстрап обычно пилю. 300-400px / 768-1024 / 1200+ что-то вроде того.
Ну и смотрю чтобы в промежуточных сильно ничего никуда не ехало на выходе.

[Александр Аксентьев]

[saveTibet]

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

[Александр Аксентьев]

saveTibet, ну в таком случае ссылка из первого коммента - глобальная статистика по миру. Можно найти по России например еще и т.д.
В общем и целом ничего годами там не менялось уже.
Мобильники разве что больше трафика захватывают т.е. 300-400px в ширину самое мастхев - все в мобильниках сидят, уже кажется не первый год как мировой трафик мобильников перевалил за 50% от общей массы.
Дальше идёт 1920 - дефолт мониторы давно.
Потом 1366 - ноутбуки самые дешевые/старые/большинство в принципе.
Планшеты коих не очень то и много где-то посередине 768-1024.

Вот и всё. Нет никаких скрытых размеров уникальных которые никто не рассказывает.