@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
  • Вопрос задан
  • 172 просмотра
Пригласить эксперта
Ответы на вопрос 3
dima9595
@dima9595
Junior PHP
Подскажите пожалуйста нубу как понять под какие разрешения делать дизайн сайта.

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

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

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

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

Не знал, что у Bootstrap есть какие-то требования...
Ответ написан
sashabeep
@sashabeep
Дней без вопросов про Slick на тостере : 0
xs = Extra small <576px. Max container width None (auto)
sm = Small ≥576px. Max container width 540px.
md = Medium ≥768px. Max container width 720px.
lg = Large ≥992px. Max container width 960px.
xl = Extra large ≥1200px. Max container width 1140px.

Причем, на самом сайте bootstrap не такие медиа-запросы

XS - я бы не стал рисовать вообще. Для sm удобнее использовать сетку из 4 колонок.
Во всех случаях стандартное расстояние между ячейками 30px. С краев - по 15.
Лично я, хоть и верстаю на bootstrap, никогда не использую фиксированную ширину контейнера. Только максимальную для десктопа, во всех остальных случаях без ограничения по ширине
Ответ написан
solidcreature
@solidcreature
WordPress-митапы в Москве (vk.com/wpmeetup)
Обозначу несколько тезисов, в которых уверен и, надеюсь, что-то из этого будет вам полезно

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-й бутстрап на столько гибкий, что в нем легко можно верстать элементы, не попадающий в сетку. Поэтому ориентируйтесь на хорошую композицию, логичное расположение элементов и т.д.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы