Под какое разрешение делать сайт
Перейти к содержимому

Под какое разрешение делать сайт

  • автор:

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

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

  • Вопрос задан более трёх лет назад
  • 11167 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 3

Kadzi

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

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

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

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

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

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

В каком разрешении нужно делать макет сайта?

В каком разрешении должен быть макет сайта чтобы все корректно отображалось и в потом было понятно верстальщику?

  • Вопрос задан более трёх лет назад
  • 17984 просмотра

1 комментарий

Простой 1 комментарий

arzamas-nick @arzamas-nick
1920,1440,1600 обычно. Контент 1286,1366 примерно.
Решения вопроса 1

mixail_fet

Михаил Проскурин @mixail_fet
Дизайнер веб-интерфейсов

Другие вопросы из поиска, которые полностью отвечают на ваш вопрос:

Ответ написан более трёх лет назад
Нравится 7 1 комментарий
что в дополнении к вопросу нужно учитывать чтобы не забыть о ретинах?
Ответы на вопрос 2

Tolly

У вашего монитора какое разрешение? Вот такой макет и делайте.
Если у монитора максимум 1366, то уже сделать на 1920 не получится ))
Потом резиновой версткой доведете макет до 320px.

Ответ написан более трёх лет назад

pospelov

Руководитель веб-студии

Только 1920 макет должен быть.
Если нарисуете 1366 — растянуть не получится, программист не поймет что должно быть за пределами 1366 и сделает поля. Белые огромные поля.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

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

Однако не все дизайнеры думают о том, как их макеты будут функционировать на сайте или в приложении. Руководитель студии дизайна и разработки сайтов и сервисов Method Zero Антон Шакиров рассказывает о самых распространённых ошибках, которые последние пару лет замечал на дизайн-площадках и сайтах, и делится принципами, которые помогут их избежать.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Антон Шакиров

Сооснователь
и руководитель
Method Zero

Ошибка 1. Не учитывать адаптивную вёрстку и нестандартные разрешения экранов пользователей

Дизайнеры, как правило, создают макеты для трёх разрешений экранов:

  • под компьютеры и ноутбуки: ширина макетов — 1 920, 1 440 или 1 360 пикселей, обычно для сайтов берут только одно из этих разрешений;
  • под планшеты: ширина макетов — 767 пикселей;
  • под смартфоны: ширина макетов — 375 пикселей.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Исправить этот недочёт можно так: увеличить отступы справа и слева от картинки до краёв экрана или поместить круги в отдельные элементы и работать с ними уже там.

Случается и обратная ситуация, когда специалист не адаптирует дизайн под ультраширокие мониторы 3 440 x 1 440 и не объясняет разработчикам, как должен вести себя сайт при изменении ширины экрана. Решить этот вопрос поможет:

  • Резиновая вёрстка, когда весь сайт пропорционально растягивается по ширине экрана. Но следует учитывать, что контент может слишком укрупниться и будет видна только треть того, что должно было помещаться в рамках одного экрана.
  • Добавление полей справа и слева. Здесь стоит помнить про закреплённые на экране элементы и про фоновые видео и изображения, которые обрезаются по краям экрана на стандартных экранах.

Пример резиновой вёрстки: контент остаётся в рамках одного экрана, благодаря правильному позиционированию всех элементов на странице ↓

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

В примере ниже разные части дизайна закреплены с левой и с правой стороны. Если открыть этот сайт на ультрашироком мониторе, посередине возникает дыра:

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Для макетов для iPhone. При дизайне кнопок, закреплённых снизу на мобильном устройстве, часто забывают про индикатор «Домой» (Home indicator) — чёрную полоску снизу, область под которой не кликабельна. Кнопки следует приподнимать выше этого индикатора или ставить больше внутренних отступов под ней, но не прижимать её к низу. Это также немного повлияет на высоту элементов в рамках одного экрана сайта или приложения.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Не стоит забывать готовить и передавать разработчикам все видео и изображения в большем размере для сохранения их качества на мониторах 4K и 5K. Если изображение на весь экран, готовим его под всю ширину монитора, например, 4K — 3 440 px. Если на пол-экрана — 1 720 соответственно. Это важно, потому что часто разработчики экспортируют картинки напрямую из макетов, где эти картинки делают в небольшом разрешении. Экспорт изображений в увеличенных размерах не поможет в этом случае. Исключение составляют только векторные изображения в svg-формате, которые могут бесконечно увеличиваться и уменьшаться без потери качества.

Версия под планшет: почему её можно не делать при создании дизайн-макетов несложных сайтов

Можно не рисовать отдельно макеты под планшет, если дизайнер делает проект, который:

  • нужно оперативно запустить;
  • не содержит сложных таблиц и сеток с переносами контента на следующие строки или с его скрытием на некоторых разрешениях экранов.

Согласно данным SimilarWeb и по личному опыту, на планшеты в среднем приходится 1–2% всего трафика, поэтому нецелесообразно тратить четверть проектного времени на эти макеты. Правда, если есть нестандартный блок со сложной сеткой, можно отдельно нарисовать планшетную версию только этой части. В остальных случаях опытные разработчики сами адаптируют десктопную версию макета под планшет.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Ошибка 2. Не прорабатывать поведение динамических элементов страниц и анимаций

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

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

Чаще всего забывают нарисовать и продумать состояния ховеров, когда на элемент наводится курсор, состояния нажатия или перетаскивания, состояния фокуса у кнопок, ссылок, форм, кликабельных элементов. Все эти состояния помогают пользователям понять, что на этот элемент можно нажимать, что в фокусе этот объект или что в поле есть ошибки.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

При работе с формами — помимо состояний ошибок и невалидности полей — стоит помнить о сообщениях об успешной отправке формы. Так пользователь поймёт, что всё хорошо и его данные отправлены.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

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

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Ошибка 3. Не интересоваться форматами и типами данных контента, динамически обновляемого на сайте

Если на сайте будут размещаться вакансии, новости, события, команды, магазины и другие данные, которые будут подгружаться из внешних систем и активно обновляться, следует заранее узнать у заказчика:

  • как эти данные хранятся,
  • какая есть или будет информация,
  • как и кем данные будут актуализироваться,
  • какие сложности могут возникнуть.

Это позволит определить полный набор данных для работы — или понять новые ограничения по дизайну и вёрстке.

Например, при проектировании HR-портала компании мы не можем вслепую задизайнить страницу поиска вакансий и каждую вакансию отдельно. Сперва нам надо узнать, какая информация по вакансиям будет доступна. Так, если в вакансиях нет информации о метро, мы и не должны рисовать это в макетах. Если в поле «Регион» хотим разделить Москву и Московскую область, узнаём у клиента, есть ли такая информация в принципе, а у разработчиков — возможно ли так сделать с технической точки зрения.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Нужно выяснить обязательность полей или целых разделов. Если мы делаем дизайн вакансий, может ли поле с графиком работы или со станцией метро полностью отсутствовать? Если делаем разделы со статьями, может ли какой-то раздел оказаться пустым? Может ли не быть ближайших событий? Может ли клиент удалить все новости?

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Другая ситуация — при наличии данных они могут не успеть подгрузиться с сервера при обращении к соответствующей странице. Если дизайнер знает, что эти данные будут грузиться извне, то лучше заранее предусмотреть сообщения о том, что всё в порядке и контент загружается.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

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

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Лучше заранее продумать в дизайне варианты поведения при таких сценариях или обговорить с клиентом и разработчиками введение ограничений на количество символов в каждом отзыве.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Профессия

Веб-
дизайнер

Узнать больше

  • Получите опыт 4 ведущих дизайн-студий и создадите 7 проектов для своего портфолио
  • Научитесь создавать сайты под ключ, оформлять дизайн-проекты и презентовать их заказчику
  • Сможете искать работу и проходить собеседования уже в середине обучения

Ошибка 4. Не думать о том, как клиенты будут изменять или добавлять контент после запуска сайта

Некоторые части сайта подлежат частым правкам: портфолио с кейсами, баннер с призывом к действию, блок с информацией о следующем событии, стоимость товаров или услуг и другое.

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

Например, на первый экран сайта добавили баннер со следующим событием. В портфолио разместили профессионально отрисованные обложки работ, а на странице каждой модели часов — 3D-модель. Но сможет ли клиент самостоятельно выпускать аналогичный контент или будет ли он располагать дополнительными ресурсами на повторное привлечение дизайнеров под эти задачи?

Лучше сразу обсудить с заказчиком дизайн-решения и дальнейшее обновление контента. Показать, что нужно будет делать для добавления нового контента, какие есть условия для графики и фотографий.

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Ошибка 5. Не использовать одинаковые наборы стилей в десктопной и мобильной версиях

Дизайнеры знают про наличие в HTML заголовков H1–H6 и используют их при наименовании стилей. Однако при создании новых наборов стилей под мобильную версию сайта из-за удобства в дизайне и не знания того, что это делать нельзя, могут менять тип заголовка и стиля на элементах относительно десктопной версии. Был заголовок H1, а в мобильной версии у того же элемента стал H2. Был дополнительный стиль small text — стал просто text.

Если дизайнер создаёт с помощью HTML-тегов элемент H1, то он и должен оставаться H1 в мобильной версии. Иначе при разработке придётся делать дублирование всего элемента и создавать костыли с помощью CSS-классов — рабочее, но некрасивое и неэффективное решение.

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Один и тот же элемент не должен менять свой заголовок между различными разрешениями экранов. Если в десктопной версии (верхнее изображение) заголовок соответствует стилю H4, то и в мобильной версии этот заголовок должен соответствовать стилю H4, даже если он эквивалентен мобильному H3

В этом вопросе дизайнерам и разработчикам сильно помогает создание UI Kit, где как минимум будут указаны все стили шрифтов, цветов, состояния элементов. Это позволяет проверить правильность указания всех стилей элементам и неизменность всего набора стилей между разными разрешениями экранов.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Ошибка 6. Не подготавливать дизайн для разработчиков, рисовать не все элементы

Здесь речь идёт скорее про уменьшение вероятных ошибок на готовом сайте и про сильную помощь разработчикам и ускорение их работы, а не про прямую ошибку дизайнеров. Но иногда это и про недостаточный объём того, что нужно сделать специалисту.

Все дизайнеры знают про favicon — маленькую картинку, которая отображается на вкладке сайта в браузере. Но не все создают и передают разработчикам webclip — картинку 256 x 256, которая видна в панели закладок Safari, — и opengraph-изображения для сайта и для отдельных страниц — изображение с рекомендуемым разрешением 1 200 x 630, которое видим при вставке в соцсетях ссылки на сайт.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

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

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Ещё одна частая ошибка — делать разные иконки в разных по размеру фреймах. Часто можно заверстать и так, но для этого разработчикам нужно под каждую иконку задавать свойства размеров, отступов. Если потребуется заменить иконку на другую, придётся менять размеры и отступы. Это приносит много проблем разработчикам и тормозит разработку.

Все иконки в дизайне должны быть сделаны внутри одинаковых по размеру областей — фреймов, внутри которых они уже выравниваются и масштабируются как нужно. Таким образом, все иконки вне зависимости от их реального размера будут занимать одинаковые области этих самых фреймов.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

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

Вот примеры правильной работы с иконками:

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Как уменьшить количество подобных ошибок или полностью избавиться от них

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

Всегда просить обратную связь от разработчиков: что им не хватило при передаче дизайна. Через несколько проектов сформируется понимание, на что обращать внимание и что ещё нужно учесть и подготовить в дизайне.

Начать самостоятельно разрабатывать несложные сайты на технологиях no-code. Рекомендую Tilda, Readymag и WebFlow. После нескольких собранных сайтов станет ясно, с чем возникают сложности, где и что работает не так.

Самостоятельно проводить тестирование сайтов на различных устройствах. Такие сервисы, как BrowserStack, позволяют открыть сайт под различными ОС, браузерами и телефонами. Самостоятельно подвигать окно браузера, взять другой компьютер и посмотреть, как сайт себя ведёт в браузере Safari, где чаще возникают проблемы.

Мыслить критически. Советую моделировать все возможные ситуации и показывать в дизайне, как это всё должно работать. Задавайтесь вопросом «а что, если». А что, если клиент введёт описание в 2 раза длиннее, чем было в макетах? А что, если не будет картинки под новость? Продумывайте все ситуации, которые могут случиться, и любые возможные действия пользователей и клиента.

Читать также

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Лучшие книги для веб-дизайнера: подборка редакции Нетологии

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Кто такой веб-дизайнер: рассказываем всё о профессии

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Какие правки в дизайне стоит принимать

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Топ-10 фильмов про дизайн

Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Частые ошибки веб-дизайнеров с точки зрения разработки сайтов

Антон Шакиров

Сооснователь и руководитель Method Zero

Размеры макета сайта при разработке адаптивного дизайна

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

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

Разрабатывая же макет будущего сайта в графическом редакторе (Photoshop) или сервисе (Figma), дизайнер не можем работать с диапазонами, ему приходится задавать жесткие размеры макета. Эти макеты веб-дизайнер создает с учетом минимального и максимального разрешения популярных экранов, которое определяет для проекта.

размеры макетов экрана

Для ПК версии возьмем разрешение 1920 px с контентной частью в 1280 px. Контентную часть можно сделать и больше, например 1440 px, или во всю ширину, если создается, например сервис или административная панель. На данный момент чаще используемый первый вариант. Для смартфонов самым минимальным разрешением считается 320 px. Таким образом, определили максимальное и минимальное разрешения. Далее нужно определиться с промежуточными разрешениями.

К таким разрешениям, относим планшет с горизонтальной и вертикальной ориентацией на 1024 и 768 px. А также макет для мобильных устройств на 480 px в горизонтальной ориентации. Если не создавать макет на 480, получается слишком большой диапазон разрешений попадающих между 768-320 px. Дизайн на таком промежутке за счет версии в 480 px будет гораздо лучше продуман и удобен.

Иногда вместо 320 и 480 разрабатывается один макет на 360 px. Но тогда верстальщику придется самому проверить дизайн после верстки на разрешение в 320, иначе получим сайт с некорректным отображением.

размер макета сайта

Итак, определились с разрешениями, под которые требуется создать макеты и таких макетов будет пять.

  • ПК – 1920 px файл, контент под 1280 px без учета отступов на скролл и отступов справа и слева;
  • Планшет 1024 px без учета отступов на скролл и отступов справа и слева;
  • Планшет 768 px без учета отступов справа и слева;
  • Смартфоны 480 px без учета отступов справа и слева;
  • Смартфоны 320 px без учета отступов справа и слева;

Раньше на скролл отнималось 21 px как стандарт, но ширина скроллинга у браузеров изменилась и отличается. Но это не так важно, главное не забыть и учесть скролл при создание макета для ПК. Подробнее о том, как учесть скроллинг в макете читайте здесь.

Холст 1920 px создавайте только для ПК версии, на остальных разрешениях в размер. Разрешение в 1920 px дает возможность размещать фоновые изображения в блоках дизайна на ширину экрана.

Что касается отступов по краям

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

Обычно использую следующие отступы:

  • Мобильные 10-15
  • Планшет 15-20 px. Для разрешения в 1024 px использую холст на 1000 px это за вычетом скроллинга, потом от него отнимаю отступы.
  • ПК контентная часть делаю в размер 1200 px, отступы зависят от сетки.

Подходы к созданию макета сайта Mobile First или Desktop First?

Кроме вопроса: «Какой размер макета сайта делать, создавая адаптивный дизайн?»

Задается еще и сопутствующий вопрос: «Какой из подходов создания правильнее Mobile First или Desktop First?»

Mobile First – сначала мобильные, то есть первым делом рисуются макеты для мобильного, разумеется, перед этим делают прототип сайта. А уже потом переходят к созданию планшетной и ПК версии. Некоторые считают, что благодаря такому подходу можно сделать более удобный интерфейс. И этот подход правильнее исходя из популярности и нарастающего трафика мобильного Интернета.

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

Возможно, этот подход мне ближе, так как создаю дизайн сайтов давно. Изначально не приходилось разрабатывать столько макетов, а делалась лишь одна версия для ПК.

Если подумать, то особой разницы в подходах, лично я не вижу. Считаю, что правильно делать, так как удобнее вам, ведь главное результат! Если можете сделать грамотный дизайн, сделав сначала ПК версию, а потом остальные, зачем задумываться над подходом.

Как быть с плотностью пикселей экранов устройств?

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

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

плотность пикселей

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

размеры макета

Отсюда следует, что макеты дизайна сайта стоит создавать под обычное разрешение с 1х плотностью пикселей. Иконки и графику рисовать в векторе и использовать svg. При верстке страниц сайта через media queries определять экраны с множителем и подгружать соответствующие растровые изображения, если таковые используются.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *