Под какие контентные области делать дизайн?

Question

[yana33311]

Как понять, под какие разрешения делать дизайн сайта? Сколько колонок должно быть, и какой ширины в том числе отступы и отступы для контентной части, Наверное также нужно соблюдать требования Bootsrap. Пользователи заходят с дисплеями таких разрешений (за год):
360х640 посетителей 12463
1920х1080 посетителей 11419
1366х768 посетителей 8371
360х780 посетителей 5688
360х720 посетителей 5389
375х667 посетителей 4046
393х851 посетителей 3762
360х760 посетителей 3218
1024х600 посетителей 3036
1536х864 посетителей 2755
412х892 посетителей 2659
1280х1024 посетителей 2454
1600х900 посетителей 2334
414х896 посетителей 2202
412х846 посетителей 1709
360х740 посетителей 1690
375х812 посетителей 1680
320х568 посетителей 1580
1440х900 посетителей 1387

Comments

[Алекс Глебов]

1920 стандарт сейчас
макеты адаптива по необходимости, кому то проще верстать когда они есть, кому то проще без них.

Answer 1

[Дмитрий Кузнецов]

Подскажите пожалуйста нубу как понять под какие разрешения делать дизайн сайта.

Возьмите тот же Bootstrap, TailwindCSS и возьмите те же разрешения под медиа-запросы, не прогадаете.
Кто-то предлагает начать вёрстку для мобилок, а потом до десктопа расширять. Кто-то наоборот. Тут как вам нужно и смотря что за проект.

Сколько колонок должно быть, и какой ширины в том числе отступы и отступы для конкретной части.

Это сугубо индивидуальное должно быть. Всё зависит какой у вас дизайн должен быть.

Наверное также нужно соблюдать требования Bootsrap

Не знал, что у Bootstrap есть какие-то требования...

Answer 2

[Николай Миронов]

Обозначу несколько тезисов, в которых уверен и, надеюсь, что-то из этого будет вам полезно

1. Контентная часть в 1000 - 1200 пикселей является удобной для чтения текста на больших мониторах. Если растянуть текстовый блок, например на 1600px или больше его просто неудобно будет читать.

2. Если у вас контент и дизайн-элементы ограничены 1200 пикселями, то в принципе все равно в каком размере вы рисуете макет / с каким разрешением пользователь будет просматривать сайт 1366px / 1440px / 1600px / 1920px. Везде будет один дизайн, отличаться будет только размер полей. (Для макетов выберите любую ширину > 1300px)

3. Количество макетов, которые должен предоставить дизайнер зависит от многих факторов. В некоторых случаях достаточно только десктопа, нормальный верстальщик сам добавит адаптивность или будет использовать тот же бутстрап. В других дизайнер может нарисовать дополнительно макет для мобильной версии, например, чтобы показать как изменится размер шрифтов, отступов, положение интерфейсных элементов. Если дизайн не квадратно-гнездовой и содержит сложные элементы, состоящие из разных блоков, то стоит отрисовать несколько состояний.

4. В принципе для мобильной версии хорошо-бы нарисовать 2 варианта, для больших и маленьких экранов. Минимальное размер сайта для мобильного телефона 320px, максимальный приближается к 900px (длинная сторона 11-го айфона).

Маленькие экраны, это разрешение от 320px (и меньше) и до 480px/576px/640px. Для адаптивной верстки берите минимальное разрешение, для резиновой верстки любой размер из данного диапазона. По идее, вы как дизайнер сами можете выбирать как должен сайт себя вести в данном диапазоне.

Сверстал пару примеров, сузьте окно браузера, чтобы посмотреть поведение карточек
Адаптивная верстка https://codepen.io/solidcreature/pen/zYoOZVa
Резиновая верстка https://codepen.io/solidcreature/pen/vYyBmGY

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

Comments

[Николай Миронов]

Дополнение к пункту 2. Если у вас фон блока занимает весь экран и не ограничен контентной частью, то не зависимо от ширины макета, картинку фона лучше делать размером 1920х1200px, чтобы качественно смотрелось на любых разрешениях