Размер макета сайта: Размеры макета сайта? — Хабр Q&A

07.12.2022 alexxlab

Содержание

Чек-лист проверки psd-макета сайта перед сдачей клиенту

18 правил идеального
psd-макета

Материал с Хабрахабр:
типичные ошибки при подготовке дизайна к вёрстке плюс полезный чек-лист для дизайнеров

Общий принцип — Не делай брак.
Не бери брак. Не передавай брак.
Тойота

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

«Почти» по сетке

Сетка призвана упрощать вёрстку и определять местоположение ключевых элементов. В некоторых случаях дизайнеры намеренно отходят от 12-колоночного грида для создания неординарного дизайна.

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

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

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

Сергей

Разработчик

Есть миллион случаев, когда программист говорит «это невозможно», а потом берет и делает, как нужно. Значит-таки возможно. И большинство ограничений, неудобных для программиста, но интересных с точки зрения дизайна — искусственные. Чёткую границу провести невозможно. Работает только итерационное обсуждение и попытки реализовать задуманное. Пробовать, смотреть, обсуждать, делать, экспериментировать. Иначе всё скатится к унылым шаблонам. Для части проектов это ОК. А для части — нет. Делаете ли вы в духе конвейера или делаете фестивальные работы? Мы писали про это подробнее в бегунке креативности.

Владимир

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

Копипаст слоёв

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

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

Непонятные отступы

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

Объекты тоже таят скрытые опасности — иногда при создании форм в Фотошопе, даже если дизайнер использовал сетку, случаются вот такие погрешности:

Верстальщик вряд ли станет учитывать эти тонкости и, скорее всего, обрежет размеры объекта, чтобы тот точно вписался в сетку. Поэтому правило — ВСЕ объекты должны иметь целочисленные размеры, иначе результат может очень отличаться от первоначального макета.

Цвета «на глаз»

В Фотошопе есть удобный инструмент — «пипетка», и дизайнеры любят им пользоваться — тыкнул, и не надо запоминать номер цвета. Но если тыкнуть в край элемента, цвет может исказиться оттенком фона. Другая опасность — если радиус пипетки более 1 пикселя, Фотошоп покажет среднее значение между соседними цветами.

Особенно раздражает, когда цвета дизайнер определял «на глаз», а потом ты сидишь с набором разнокалиберных серых и не знаешь, какой именно использовать. Это происходит из-за того, что нет банальной карты цветов проекта, на которую мог бы опираться и сам дизайнер при работе над внутренними страницами, и верстальщик.

Андрей

Разработчик

Негласное правило не рекомендует использовать чёрный под номером #000000 — он слишком контрастный на фоне белого. Глядите на разницу:

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

Растрированные элементы

Текст

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

Тени и градиенты

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

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

Эффекты наложения

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

Эффекты наложения в разных браузерах

Проблемы со шрифтом

Дробные размеры

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

Множество шрифтов

На весь проект желательно использовать не более 3-х начертаний — это могут быть шрифты одной гарнитуры (Light, Regular и Bold) или разных. Это не жёсткое ограничение — всё зависит от задач проекта, но определённый смысл в нём есть: чем меньше вариаций шрифта, тем выше сосредоточенность на тексте у читателя. Считается правилом вместе с макетом передавать гарнитуры, которые там использовались, или хотя бы давать ссылки на Google Fonts.

Сейчас большинство браузеров отошли от шрифтов в форматах TTF, OTF — и если разработчик будет использовать их по-старинке, не везде они будут отображаться корректно. Мы в студии давно перешли на формат WOFF или WOFF2, чтобы не было проблем. Перевести шрифт в него можно здесь или здесь.

Андрей

Разработчик

Использование нестандартных шрифтов

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

Корявая типографика

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

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

Евгений

Разработчик

Обязательно стоит показать на макете оформление параграфа, абзаца, заголовков 1-4 уровня (h2, h3, h4, h5), маркированных и нумерованных списков. А ещё лучше собрать всё это в отдельный документ — гайдлайн или UI-kit. Сюда же можно добавить поведение ссылок (активная, при наведении, посещенная).

Непонятная анимация

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

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

Желательно пометить слои с анимациями и интерактивами цветами и сопроводить их комментариями. Также очень желательно в комментариях прописать, как именно это должно работать и привести примеры.

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

Евгений

Арт-директор

Самая популярная альтернатива — Sketch

Lunacy — Sketch для тех, у кого нет Mac

Новый инструмент от InVision — InVision Studio

Иконки в PNG

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

Но бывает, что дизайнеры используют иконки в формате PNG — в нём при масштабировании на экранах с большим разрешением (а сейчас даже на мобилках плотность пикселей бешеная) края изображения расплываются. Отсюда правило: все иконки должны быть в формате SVG — так они остаются чёткими, каким бы ни был их размер.

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

Чек-лист

В творческом порыве сложно уследить за тем, чтобы всё было сделано правильно. Там слой скопировался и остался без названия, там объект немножко вылез за край колонки, тут шрифт случайно «зажирнился» встроенными фотошопными настройками вместо выбора нужного начертания — с кем не бывает? А с тем, у кого есть наш чек-лист!

Чек-лист для подготовки Photoshop-макета к передаче на вёрстку

Если дизайнер использовал сетку, все блоки на макете расположены строго по ней.
У всех объектов на макете целочисленные размеры.
Повторяющиеся элементы на страницах всегда ОДИНАКОВЫЕ.
Все слои сгруппированы по папкам и распределены по логике макета. Лишние удалены, похожие — объединены.
Отступы от элементов унифицированы.
Цвета на макете совпадают с основными цветами проекта.
Текст как текст (не растрирован).
Эффекты наложения, тени и градиенты не растрированы.
Использование эффектов наложения целесообразно.
У шрифтов недробные размеры.
Шрифты, используемые в проекте, собраны в отдельной папке.
Нестандартные шрифты и их начертания проверены на наличие веб-версии. Вес одного нестандартного шрифта не превышает 1 Мб.
Межстрочные интервалы и отступы в тексте унифицированы.
Все иконки в формате SVG и собраны в одном месте. Наименования иконок одинаковые и понятные, совпадают с наименованием идентичных слоёв на макете.
Для всех активных элементов есть слои с ховерами.
Объекты, участвующие в в анимациях/интерактивных взаимодействиях, разбиты послойно. Для баннеров — аналогично.
К анимациям и интерактивным взаимодействиям прописаны комментарии и указаны примеры, как это должно выглядеть.
Для макета создан гайдлайн с палитрой цветов проекта и стилями текста.

Требования к дизайн-макету сайта — студия Палыча

Требования к дизайн-макету сайта — студия Палыча
Главная
Вредные советы
К сожалению, дизайнеры у нас валяются на каждом углу, но толковых найти очень сложно. Поэтому и написал требования к дизайн-макету сайта в помощь дизайнеру, верстальщику и заказчику. Чтобы облегчить труд для всех жаждующих, опишем требования к макету дизайну сайта.
Жесткие требования
Сам макет дизайна должен быть представлен в форматах PSD или TIFF, сохранять строго в RGB.
Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
Слои ни в коем случае не должны быть склеены, кроме дизайнерских фишек.
Выравнивание слоев — строго по Guide. Их не удалять. Оставлять в макете.
Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо.
Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта (а то говоришь, что сайт будет фиксированный на 800px, а макет рисуют на 850px — что хошь, то и верстай после этого).
При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024px ширина браузера составляет 986px).

Важно: ширина макета — 1980 пикселей. 1000, 980 пикселей и другие размеры не принимаются. Причина: что бы понять, как будет выглядеть сайт на 100% ширины браузера.
В случаях, когда сайт тянется на 100% ширины браузера, необходимо подготовить второй макет, например на ширину 986px, что бы понять как ведут себя элементы на небольших экранах.
На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех странц в одном макете приведет к использованию дикого количества оперативной памяти.

Макет должен предусматривать резиновую/адаптивную верстку. Таким образом желательно иметь два макета: широукий 1980px по ширине и узкий, например 800px.
Отрисовать макет дизайна сайта для мобильных устройств, например 311px по ширине.
Требования к цвета в макетах
Недопустимо использовать прозрачность для элементов, содержащих текст. Допустимо, можно использовать rgba при верстке.
Требования к графическим «фишкам»
Фоны должны быть повторяющимися, текстурированые без логики повтора не принимаются.
Эффекты подсвечивания не допустимы. Например при наведении на ссылку, фон ссылки становится полупрозрачным «облаком».

Минимум элементов, которые потребуют создания графических файлов PNG-24 (полупрозрачность etc).
Для создания favicon.ico для сайта предоставить «фишку» проекта в виде картинки PNG-24 в размере 512х512 пикселей.
Все иконки должны быть в формате SVG.
Вообще стараться по максимум использовать формат SVG для оформления. При адаптации на мобильных устройствах, качество графики не ухудшается.
Требования к текстовому содержимому

Для текстовых элементов обязательно указывать шрифт и его размер (учитывая, что стандартных шрифтов всего ничего), желательно в комментариях, фотошоп умеет их делать. Никаких трасформаций с текстом. Размер меняется размером шрифта.
Быть внимательными в использовании нестандартных шрифтов. Стандартных шрифтов очень мало, которые есть в каждой операционной системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в старых браузерах.
Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
Лучше всего шрифты выбирать на сайте google.com/fonts. Выбрав тут шрифты, можно без проблем подключить их на сайте, и тем более использовать.

Минимум изменений стандартных контролов форм, таких как селекты.
Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
Описать поведение ссылок в дизайне (неактивная, при наведении, посещенная) в меню/модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.).
Обязательно должно быть указано оформление следуюших HTML-тегов: параграф, абзац (<p>), заголовки с 1 по 4 уровень (h2, h3, h4, h5), маркированный список (
<ul>), нумерованный список (<ol>), цитирование (<blockquote>).
Ui Kit
В последнее время включили в требования к дизайну разарботку обязательный макета с UI Kit. В этом макеты должно быть отрисовано поведение элементов и форм на сайте. Список элементов для отрисовки:
Ссылки, в том числе основная навигация, постраничная навигация и их состояния.
Текстовые поля: обычное состояние, в фокусе.
Кнопки: обычное состояние, наведение курсора, клик/тап.

Легкие пожелания
И самое главное — дизайнер должен быть верстальщиком, чтобы он мог сам сверстать то, что нарисовал (пусть не быстро и не на 100% валидно, но уметь).
Элементы навигации типа стрелок, иконок хорошо бы получать в отдельном SVG формате на прозрачном фоне.
Минимальный комплект материала для передачи верстальщику
Макет в формате PSD или TIFF.
Шрифты.
SVG Иконки.
Заготовка для favicon.ico (если нет возможности в ICO, то можно в PNG-24).
Паттерн текстуры, если используется для фона, в виде отдельного файла PSD.
Спасибо beliyadm, poizon и Mitrich за дополнения к требованиям к дизайн-макету сайта.
Ссылки по теме:
WEB DESIGN: Переход на личности
Когда Photoshop отображает совсем не то, что надо
Автор
Павел Сайк
14 лет назад
Самые стандартные размеры веб-страниц в 2022 году [и идеальные]
Каждый маркетолог, начинающий вести блог, должен задать вопрос: « Каковы стандартные размеры веб-страницы? » Размер вашего сайта будет определить, насколько красиво выглядит ваш сайт, а также повлияет на удобство работы пользователей, скорость страницы и многое другое.

Итак, вам нужно оптимизировать все эти переменные, чтобы активировать их до совершенства, но сначала вы должны знать стандартный размер веб-страницы .
Какой стандартный размер веб-страницы?
Стандартный размер веб-страницы использует максимальную ширину 1440 пикселей для настольных компьютеров. Это связано с тем, что большинство разрешений настольных компьютеров в настоящее время используют более широкое разрешение (1920×1080). Однако в настоящее время большинство веб-сайтов полностью адаптивны, что означает, что они не будут использовать фиксированные размеры.

Независимо от того, какой стандартный размер веб-страницы, в настоящее время веб-сайты не будут использовать одно фиксированное измерение.
Они будут адаптироваться к экрану посетителя или даже к размеру окна, если пользователь изменит размер страницы.
Этот метод известен как «Адаптивный дизайн» , и это обычная практика, которая гарантирует, что посетитель получит наилучшие впечатления независимо от того, какое устройство или экран используется для доступа к веб-сайту.
Почему размер веб-страницы имеет значение?
Важно знать стандартную ширину веб-страницы, потому что от нее зависят многие другие факторы:

Разрешение экрана. Большинство экранов имеют разрешение 1920×1080 пикселей или выше (как указано в Statcounter), поэтому, если вы разрабатываете дизайн для 800×600, вы ограничиваете себя только половиной всех потенциальных клиентов.
Читаемость текста. Если ваш текст не помещается в одну строку на экране с разрешением 1024×768, а вместо этого должен разбиваться на две строки (или более), людям с плохим зрением будет трудно читать.
Доступность.
Если на вашем сайте используются таблицы для компоновки содержимого, то стандартный размер области заголовка и нижнего колонтитула сайта должен оставаться неизменным даже при изменении размера в зависимости от разрешения экрана или уровня масштабирования браузера.
Стандартные размеры веб-сайта
Вот различные стандартные размеры веб-страницы на разных устройствах:
Стандартный размер веб-страницы для экранов настольных компьютеров
Максимальная ширина стандартной веб-страницы для экранов настольных компьютеров составляет 1440 пикселей. Обычной практикой является ограничение максимальной ширины вашего сайта. Таким образом, страница будет выглядеть хорошо даже на широких или сверхшироких мониторах.
Если вы хотите, чтобы ваш веб-сайт хорошо выглядел на всех типах устройств, важно соблюдать этот стандарт.
Ознакомьтесь с рекомендациями Microsoft по критическим точкам.
Стандартные размеры веб-страницы для мобильных телефонов
Наиболее распространенный размер окна просмотра, используемый в мобильных телефонах, составляет 360×800 пикселей. Однако большинство веб-сайтов используют гибкие макеты и могут адаптироваться к различным разрешениям.
Также следует убедиться, что размер текста достаточно велик, чтобы его можно было прочитать на экранах с разрешением менее 360 пикселей по ширине.
Стандартный размер веб-страницы для планшетов/iPad
Размеры стандартного веб-сайта для iPad или планшета должны быть оптимизированы для разрешения 768×1024 пикселей, так как это наиболее распространенное разрешение для планшетных устройств».
Если у вас есть iPad или планшет, вы знаете, как раздражает необходимость постоянно изменять размер веб-сайта, чтобы текст на экране был разборчивым. он автоматически уменьшится, чтобы поместиться в маленьком пространстве, без необходимости делать что-либо дополнительно.0005
Что следует учитывать при выборе размера веб-сайта
Вот некоторые моменты, которые следует учитывать при выборе размера веб-страницы:
1. Какой тип контента вам нужен?
Очень важно выбрать правильный тип контента для вашего сайта. Вам нужно знать, что вы хотите сообщить, чтобы убедиться, что сообщение, которое вы отправляете, понятно, и что вы знаете, кто ваша аудитория.
Если у вас много текста, вам, вероятно, понадобится экран большего размера, чтобы людям было легче его читать. С другой стороны, если на вашем сайте есть видеоконтент, то экран меньшего размера может быть лучше, потому что он позволит людям лучше видеть.
2. Как часто будет добавляться новый контент?
Если вы собираетесь создавать новый контент на регулярной основе, важно выбрать размер страницы, позволяющий быстро добавлять новый контент, не беспокоясь о том, придется ли читателю прокручивать страницу.
Также может быть полезно определить максимальное количество символов для каждого сообщения, чтобы вам не приходилось писать слишком длинные сообщения.
Если вы планируете добавлять новый контент только раз в неделю или реже, то, вероятно, лучше использовать страницу большего размера и оставлять место для комментариев читателей.
3. Сколько страниц вам нужно?
При принятии решения о размере вашего веб-сайта важно учитывать количество необходимых страниц и типы контента, которые будут включены.
На вашем сайте посетителям должно быть легко ориентироваться и находить нужную им информацию. Хорошее эмпирическое правило — ограничить свой сайт не более чем 20 страницами.
4. Сколько информации может содержать каждая страница?
Очень важно учитывать объем информации, которую посетитель захочет усвоить за один раз. Если у них недостаточно времени или интереса, чтобы прочитать весь контент на вашей странице, они могут уйти, не дойдя до сути. Хорошее эмпирическое правило — разрешать около 20 слов в строке для оптимальной удобочитаемости.
5. Достаточно ли у вас контента?
Если да, то подумайте, сколько страниц должно быть на каждой странице. На вашем сайте можно создать множество различных типов страниц, включая сообщения в блогах, целевые страницы и страницы электронной коммерции.
У каждого типа страниц свое предназначение, и они должны разрабатываться по-разному в зависимости от того, какие задачи они выполняют.
Адаптивный веб-дизайн (RWD) — это подход к веб-разработке, направленный на создание дизайна, удобного для мобильных устройств, путем создания гибких макетов и гибких медиазапросов. Это позволяет макету веб-сайта адаптироваться к устройству, на котором он просматривается, будь то настольный ПК, планшет или смартфон, без необходимости создания нескольких версий сайта.
Основная концепция RWD заключается в том, чтобы убедиться, что контент вписывается в доступное пространство, а не выходит из-под контроля или полностью исчезает.
Адаптивный дизайн дает множество преимуществ. К ним относятся:
1. Повышенное удобство использования
Пользовательский интерфейс, хорошо реагирующий на разные размеры экрана, намного проще в использовании, чем тот, который не адаптируется. Если ваш сайт не настроен должным образом, это может раздражать пользователей с маленькими экранами (например, тех, кто использует мобильные телефоны).
2. Повышение видимости в поисковых системах
Поисковые системы, такие как Google, начинают отдавать предпочтение веб-сайтам с адаптивным дизайном, а не тем, которые не поддерживают разные размеры экрана. К сожалению, это означает, что если ваш сайт не отвечает, вы можете потерять трафик от Google (и других поисковых систем).
3. Требуется меньше кода
Многие разработчики считают, что адаптивный дизайн требует больше времени и усилий, чем традиционные методы веб-разработки. Однако это совсем не так! Отзывчивый дизайн на самом деле требует меньше кода, потому что вам нужно вносить изменения только в одном месте, а не в нескольких местах.
Это значительно упрощает разработчикам поддержку веб-сайтов, созданных с использованием методов адаптивного дизайна, в долгосрочной перспективе по сравнению с традиционными веб-сайтами.
4. Google рекомендует
Google рекомендует адаптивный дизайн с 2010 года, когда он представил обновление алгоритма Mobile-Friendly для поощрения веб-сайтов дополнительным повышением рейтинга в поиске, если они созданы адаптивно или хотя бы имеют мобильную версию. это было отдельно от настольного (и, следовательно, с большей вероятностью было доступно для мобильных пользователей).
Компания обновила этот алгоритм в прошлом году, чтобы сделать больший упор на скорость страницы, а также на удобство для мобильных устройств, но по-прежнему рекомендует адаптивный дизайн, а не «мобилизацию» вашего существующего сайта, просто перенаправляя людей из браузера настольного компьютера в мобильное приложение, когда они повторный просмотр на своем смартфоне или планшете.
5. Согласованное взаимодействие с пользователем
Когда люди заходят на ваш веб-сайт со своего настольного компьютера или мобильного телефона, они должны иметь одинаковое взаимодействие на всех устройствах. Это означает, что макет и функциональность будут согласованными, даже если размер экрана меньше или больше исходного дизайна.
6. Снижение затрат на обслуживание
Одним из наиболее важных аспектов адаптивного дизайна является то, что он снижает затраты на обслуживание и время, затрачиваемое на обновление контента. Давайте рассмотрим пример:
У компании есть два веб-сайта, один для пользователей настольных компьютеров, а другой для мобильных пользователей. Чтобы вносить изменения или обновления на веб-сайт, им необходимо убедиться, что обе версии обновлены.
Это может занять довольно много времени и средств, если на веб-сайте есть несколько страниц или разделов, требующих срочного обновления.
При адаптивном дизайне все, что вам нужно, — это один веб-сайт, который автоматически настраивается в зависимости от устройства, на котором он просматривается, поэтому независимо от того, на каком устройстве кто-то просматривает ваш сайт, он всегда будет видеть последнюю версию, не беспокоясь об обновлении нескольких версий. Это.
7. Увеличение трафика и конверсий
Если у вас адаптивный сайт, людям будет легче найти ваш сайт при поиске в Google или других поисковых системах. Они также с большей вероятностью превратятся в платящих клиентов, потому что они могут легко делать покупки, независимо от того, где они находятся и какое устройство используют.
Заключение
В конце концов, хорошее эмпирическое правило — придерживаться спецификаций, рекомендованных вашим ближайшим гуру поисковой оптимизации (SEO) для вашего сайта.
Даже если ваш веб-сайт не часто меняется, четкое представление об его оптимальных размерах, вероятно, окажется полезным для проведения профилактических проверок и диагностики любых проблем, с которыми вы можете столкнуться. Гораздо лучше переподготовиться, чем сожалеть о том, что вы сделали слишком мало.
7 Плохой дизайн веб-сайта
Размер основных изображений в Squarespace
Как создать веб-сайт с полноэкранными разделами с помощью CSS
10 наиболее часто используемых типов веб-сайтов
сообщить об этом объявлении
Баланс между длиной строки и размером шрифта в адаптивном веб-дизайне — Smashing Magazine
12 мин чтения Типография, Шрифты, Дизайн, Readability
Поделиться в Twitter, LinkedIn
Об авторе
Лаура Франц — профессор Университета Массачусетса в Дартмуте, где она преподает широкий спектр шрифтовых классов, в том числе класс веб-типографики в The Graduate… Больше о Лора ↬
По мере того как мы совершенствуем наши методы адаптивного веб-дизайна, мы все больше внимания уделяем мере (другое слово для «длины строки») и ее связи с тем, как люди читают.
По мере того, как мы совершенствуем наши методы адаптивного веб-дизайна, мы все больше внимания уделяем мере (другое слово для «длины строки») и ее взаимосвязи с тем, как люди читают.
Популяризация «идеальной меры» привела к появлению таких советов, как «Увеличьте размер шрифта для больших экранов и уменьшите размер шрифта для маленьких экранов». Хотя хорошая мера действительно улучшает впечатление от чтения, это только одно из правил хорошей типографики. Еще одно правило — поддерживать удобный размер шрифта.
Дополнительная информация на SmashingMag:
16 пикселей: для основного текста. Все, что меньше, является дорогостоящей ошибкой
Дизайн для пожилых людей
10 принципов удобочитаемой веб-типографики
Идеальный абзац
Как люди читают
Люди читают текст в Интернете, чтобы удовлетворить свои собственные потребности: найти информацию, которую они ищут, открыть для себя новые идеи и подтвердить свои представления о жизни.
Больше после прыжка! Продолжить чтение ниже ↓
Люди читают тремя способами
В 2006 году группа Nielsen Norman опубликовала изображения тепловых карт, полученные в результате исследований по отслеживанию движений глаз. Области, на которые люди смотрели больше всего во время чтения, отмечены красным цветом, области с меньшим количеством просмотров — желтым, а области, которые наименее просматриваются, — синим. Как вы можете видеть ниже, красные и желтые области образуют три варианта F-образного узора. Эти вариации неудивительны, потому что люди читают тремя разными способами.
Люди читают небрежно , бегло просматривая текст, читая слова и предложения тут и там, чтобы понять содержание. На тепловой карте ниже показаны движения глаз человека, случайно читающего о продукте. Читатель проводил время, глядя на изображение продукта, читая первые пару предложений, а затем просматривая маркированный список.
Группа компаний Nielsen Norman Group в 2006 году исследовала F-образный шаблон для случайного чтения. (Просмотреть увеличенную версию)
Люди также сканируют с определенной целью, перескакивая с раздела на раздел в поисках определенной информации. Они могут прочитать только слово или первые пару символов слова, просматривая экран. На тепловой карте ниже показаны движения глаз человека, целенаправленно просматривающего результаты поиска в Google. Первые два результата человек читал медленнее. Затем их глаза перескакивали с раздела на раздел в поисках поискового запроса. Поэтому сильного вертикального штриха по левому краю текста мы не видим.
В 2006 году компания Nielsen Norman Group исследовала F-образный паттерн для целенаправленного сканирования. (Просмотреть увеличенную версию)
Наконец, люди читают увлеченно . Когда они находят интересующую их статью или запись в блоге, они замедляются и читают весь текст, возможно, даже впадая в трансовое состояние. На приведенной ниже тепловой карте показаны движения глаз человека, который увлеченно читает. Тон более непрерывный. Там больше красного (что означает больше времени, потраченного на чтение) и меньше прыжков по странице. Когда интенсивность чтения снизилась из-за того, что они потеряли интерес (корпоративная страница «О нас» могла не совпадать с их интересами), их взгляды продолжали перемещаться по левому краю текста.
Группа компаний Nielsen Norman Group в 2006 г. исследовала F-образный паттерн активного чтения. (Просмотреть увеличенную версию) люди читают — как образуются F-образные узоры.
Мы знаем, что люди. Не. Читать. Каждый. Индивидуальный. Слово. Вместо этого они используют свое фовеальное (или центральное) зрение, чтобы сфокусироваться на слове, а периферийное зрение — для поиска следующей точки, на которой следует сфокусироваться.

Люди не читают каждое слово по отдельности.
Люди используют фовеальное (центральное) и периферическое зрение для чтения.
Мы также знаем, что люди не зацикливаются на каждом слове, а склонны пропускать слова (их глаза совершают небольшие прыжки, называемые «саккадами») и дополняют остальное. Это особенно верно для тех, кто читает случайно или целеустремленно.

Люди пропускают слова и заполняют остальные.
Наконец, мы знаем, что читатели предвосхищают следующую строку, двигая глазами вдоль строки горизонтально; поэтому их глаза обращены вниз по левому краю текста. Эта постоянная борьба между горизонтальным и вертикальным движением способствует F-образному чтению.

Постоянная борьба между горизонтальными и вертикальными движениями глаз приводит к F-образным узорам.
Длина строки (мера) и чтение
Типографы писали о взаимосвязи между горизонтальным и вертикальным движением глаз почти столетие. В 1928 году Ян Чихольд отказался от центрированного текста и выступил за выравнивание текста по левому краю. Он утверждал, что это поможет читателям, предоставив постоянный левый (вертикальный) край, к которому глаз может вернуться после окончания каждой (горизонтальной) строки.
Идеальный размер: от 45 до 75 символов
У нас есть несколько «правил» для облегчения движения при чтении по горизонтали, одно из которых — устанавливать размер текста в разумных пределах. Как писал Джеймс Крейг в своей книге Designing With Type (первоначально опубликованной в 1971 году, сейчас это пятое издание):
Чтение длинной строки текста утомляет: читатель должен двигать головой в конце каждой строки и искать для начала следующей строки… Слишком короткая строка разбивает слова или фразы, которые обычно читаются как единое целое.
Если случайный читатель устанет читать длинную горизонтальную строку, он, скорее всего, пробежится по левому краю текста. Если заинтересованный читатель устает читать длинную горизонтальную строку, то он с большей вероятностью случайно прочитает одну и ту же строку текста дважды (явление, известное как «удвоение»).
65 символов (в 2,5 раза больше латинского алфавита) часто называют идеальной мерой. Из этого числа получается идеальный диапазон, к которому должны стремиться все дизайнеры: от 45 до 75 символов (включая пробелы и знаки препинания) в строке для печати. Многие веб-дизайнеры (включая меня) применяют это правило непосредственно к сети. Однако я обнаружил, что мы можем надежно расширить диапазон до 45–85 символов (включая пробелы и знаки препинания) в строке для веб-страниц.
Измерение и веб-тип
Веб-дизайнеры начали применять разумные меры для текста. Ресурсов предостаточно. Ранние работы включают в себя более поэтический подход Марка Бултона к типографике, который он называет «знанием пунктуации по длинному тире» («Пять простых шагов к лучшей типографике»). Более поздние работы включают более технический подход Гарри Робертса к типографике («Техническая веб-типографика: рекомендации и методы»).
Самая последняя (и, осмелюсь сказать, захватывающая) разработка в меру? Его роль в адаптивном веб-дизайне. Все больше дизайнеров используют длину строки для определения точек разрыва в адаптивной структуре! Крис Койер недавно разработал свой букмарклет для проверки длины строки, чтобы помочь отзывчивым веб-дизайнерам следить за своей мерой («Букмарклет для раскрашивания текста от 45 до 75 символов»).
Но хорошей мерой является только одно правило для установки читаемого текста.
Размер шрифта и чтение
Хороший, удобный размер шрифта также необходим для настройки читабельного текста. Это правило устарело. Но, учитывая количество адаптивных веб-сайтов, которые делают текст слишком маленьким или слишком большим для достижения идеального показателя, правило стоит повторить.
Статические веб-страницы и размер шрифта
Одним из преимуществ адаптивной веб-структуры является удобочитаемый текст — текст, который людям на портативных устройствах не нужно сжимать и масштабировать, чтобы прочитать. Если структура статична (например, страница с двумя столбцами, показанная ниже), то идеальная мера не поможет. Текст просто будет слишком мелким для чтения на маленьком устройстве, таком как телефон.

Слева: основной столбец имеет хороший размер (от 45 до 85 символов выделены желтым цветом). Но без адаптивной структуры текст слишком мелкий, чтобы его можно было читать на маленьком устройстве, не сжимая и не масштабируя. Справа: размер шрифта (13 пикселей Verdana для левой колонки, 18 пикселей для введения и 16 пикселей для статьи) удобен для чтения на ноутбуке.
Маленькие устройства и размер шрифта
При разработке адаптивного веб-сайта начните с удобного размера шрифта и идеальной меры, которая поможет определить точки разрыва. Но когда придет время (как это всегда бывает), отпустите идеальную меру.
На портативных устройствах текст уже выглядит меньше, чем на больших устройствах. Это нормально, потому что люди, как правило, держат маленькие устройства ближе при чтении. Текущая народная мудрость состоит в том, чтобы сохранить меру, еще больше уменьшив размер шрифта для удерживаемых устройств. На практике сохранение удобного размера шрифта, насколько это возможно, лучше сохраняет удобочитаемость. Результатом будет далеко не идеальная мера, но более комфортное чтение.
Адаптивная структура не поможет, если мелкий текст на портативном устройстве побуждает читателей сжимать и масштабировать!

Слева: для сохранения идеальных размеров размер шрифта уменьшен до 12 пикселей Verdana и 14 пикселей Georgia для портативных устройств. Текст сложнее читать. Справа: размер шрифта Verdana 13 пикселей, а для портативных устройств – Georgia 17 пикселей. Мера уже не идеальна, но текст легче читается.
Большие устройства и размер шрифта
При разработке адаптивного веб-сайта помните, что размеры и размер шрифта влияют не только на людей, использующих портативные устройства. Большинство людей по-прежнему используют более крупные устройства, такие как ноутбуки и настольные компьютеры.
В некоторых простых адаптивных структурах текст хранится в одном столбце, который расширяется и сжимается в зависимости от размера устройства. Это может быть элегантным и подходящим решением, за исключением случаев, когда для сохранения идеальных размеров используется размер шрифта (вместо ширины столбца).
Мы научились не делать текст слишком маленьким, но слишком большой текст также создает проблему. Когда шрифт становится слишком большим, глаза читателя пытаются следовать своему обычному образцу. Но слишком большой размер шрифта занимает больше места по горизонтали и мешает горизонтальному потоку, который читатели установили, используя свое фовеальное зрение и шаблон пропуска слов.
Мы привыкли, что онлайн-текст больше, чем печатный текст. Это нормально, потому что люди, как правило, кладут большие устройства на колени или на стол во время чтения. Но слишком большой текст вынуждает читателя замедляться и корректировать скорость пропуска вперед при чтении. Чтение по горизонтали становится громоздким, и читатель начинает пропускать вертикально вниз по левому краю текста.

Когда шрифт становится слишком большим, читатель пытается следовать своему обычному горизонтальному ритму. Это вынуждает их читать части слов, а не целые слова, а также замедлять и корректировать свой рисунок чтения.
Текущий популярный совет — сохранить меру, увеличив размер шрифта для больших устройств. Например, приведенная ниже структура с одним столбцом имеет идеальную меру. Но чтобы достичь этого идеального размера на больших устройствах, нам пришлось установить для текста Verdana 19 пикселей, для статьи — 22 пикселя для Georgia, а для введения — колоссальные 26 пикселей для Джорджии!
В макете выше детали показывают текст в размере 100%. Текст на этой веб-странице слишком велик для комфортного чтения! Простые адаптивные структуры с одним столбцом должны использовать более узкий столбец на больших устройствах, сохраняя размер шрифта меньше и легче для чтения. (Просмотреть увеличенную версию)
На практике лучше сохранить максимально удобный размер шрифта и просто сузить ширину столбца. Посмотрите, что происходит с A List Apart при просмотре на портативном устройстве и на ноутбуке.
A List Apart отлично читается на портативном устройстве. Но на ноутбуке текст становится слишком большим, чтобы его было удобно читать. Более короткий размер и меньший размер шрифта помогут людям следовать своему обычному горизонтальному ритму. (Посмотреть увеличенную версию)
Бонусный раздел: Высота строки и чтение
До сих пор наше внимание было сосредоточено на взаимосвязи между размером шрифта и размером шрифта в адаптивных веб-структурах. Но высота строки также влияет на то, как люди читают.
Высота строки влияет на горизонтальное движение
Поскольку читатели просматривают содержимое как по горизонтали, так и по вертикали, строки текста должны восприниматься как горизонтальные линии, а не как ткань.
Слишком малая высота строки может нарушить горизонтальное движение глаз и стимулировать сканирование вниз по левому краю. Это также может заставить людей перечитывать строки текста. С другой стороны, слишком свободная высота строки может привести к тому, что строки текста будут визуально «уплывать» друг от друга. Линии больше не будут восприниматься как единое целое, а вертикальное сканирование станет более сложным.
Хотя идеальной высоты строки не существует, рекомендуется установить ее примерно на 150% от размера шрифта.

Хотя идеальной высоты строки не существует, рекомендуется установить ее примерно на 150% от размера шрифта.
Вверху: когда высота строки слишком мала, это подрывает горизонтальный поток чтения и увеличивает удвоение. Внизу: когда высота строки слишком свободна, строки текста визуально отдаляются друг от друга.
Высота строки и размер шрифта
Установка высоты строки представляет собой сложный баланс переменных (семейство шрифтов, размер, размер шрифта, язык). Самая важная переменная при создании адаптивной веб-структуры — сюрприз! — размер шрифта.
Меньший шрифт обычно требует большей высоты строки, а не меньшей. Большая высота строки помогает глазу легче распознавать небольшие формы слов и поощряет горизонтальное движение, когда глаз устает читать мелкий текст.

Слева: Высота строки, установленная на 150%, слишком мала для iPhone. Справа: точно такой же текст с немного меньшей высотой строки способствует горизонтальному перемещению и помогает читателю распознавать формы слов.
Смотри внимательно, нарушай правила
Когда мы разрабатываем адаптивную структуру, ее легко протестировать на большом устройстве; мы можем быстро изменить размер настольного браузера. Но проектирование в браузере настольного компьютера или ноутбука означает, что мы проводим большую часть нашего времени на расстоянии вытянутой руки от текста, и мы не тратим много времени на то, чтобы увидеть, как текст отображается на небольших устройствах.