Фронтенд-разработчик
1,6
рейтинг
14 ноября 2014 в 14:58

Дизайн → 9 основных принципов отзывчивого веб-дизайна перевод


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

Отзывчивый vs Адаптивный веб-дизайн


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

Отзывчивый vs Адаптивный веб-дизайн

Поток


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

Поток элементов

Относительные единицы измерения


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

Относительные единицы измерения

Контрольные точки (Breakpoints)


Контрольные точки позволяют менять расположение блоков на странице только в случае использования экрана с определёнными размерами. Например, на настольных компьютерах у сайта будет три колонки, а на мобильных — только одна. Как вы расставите контрольные точки, зависит от поведения контента. Если содержимое страницы «ползёт», то определённо следует добавить контрольную точку. Однако, контрольные точки следует использовать с осторожностью — вы можете в них запутаться.

Контрольные точки (Breakpoints)

Max- и min-значения


Контент, занимающий всю ширину экрана — это здорово, если он отображается на мобильном. А если вы откроете страницу через ваш телевизор? Вряд ли увиденная картина обрадует вас. Поэтому здравым решением будет использование минимальных и максимальных значений. Например, если задать блоку свойства `width: 100%` и `max-width: 1000px`, то он будет отображаться на весь экран, если ширина экрана меньше 1000 пикселей; в противном случае, блок будет занимать 1000 пикселей.

Max- и min-значения

Вложенные объекты


Помните position: relative? Если у вас будет много элементов, зависящих от расположения других элементов, то их будет тяжело контролировать. Намного проще и правильнее обернуть эти элементы в один контейнер. Кстати, это тот случай, когда статичные единицы измерения вроде пикселей помогут вам. Они полезны для содержимого, которое вы не хотите адаптировать к размеру экрана — например, это может быть логотип или кнопка.

Вложенные объекты

Desktop или mobile first


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

Desktop или mobile first

Веб-шрифты vs системные шрифты


Хотите использовать на своём сайте круто смотрящуюся гарнитуру Futura или Didot? Используйте веб-шрифты! Хоть они и выглядят красиво, не стоит забывать, что каждый подключённый шрифт будет загружен. Соответственно, чем больше шрифтов, тем медленнее загружается страница. С другой стороны, системные шрифты загружаются моментально за исключением случаев, когда пользователь не имеет локально установленного шрифта, используемого на странице. В таких случаях браузер будет использовать шрифт по умолчанию.

Веб-шрифты vs системные шрифты

Растровые vs векторные изображения


Имеет ли ваше изображение множество мелких деталей и впечатляющих эффектов? Если да, то используйте растровый формат. В противном случае используйте векторный формат. Для растровых изображений используйте форматы jpg, png или gif, для векторных лучшим выбором будут SVG и иконочные шрифты. Каждый из форматов имеет свои преимущества и недостатки. В любом случае, помните о размере изображений — ни одна картинка не должна попасть в онлайн, не будучи оптимизированной (сжатой). Векторные изображения зачастую избавлены от лишнего размера, однако они не поддерживаются старыми браузерами. Также стоит помнить, что если векторное изображение содержит много деталей, то оно может весить больше растрового.

Растровые vs векторные изображения
Перевод: Sandijs Ruluks
Андрей Романов @andrew-r
карма
27,0
рейтинг 1,6
Фронтенд-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (17)

  • 0
    Отличная статья! Но немного рябит в глазах, когда на экране кусок текста в один абзац и сверху + снизу разные анимации. Немного ощущение, что попал на сайт от Ucoz несколько лет назад :)
  • +3
    Вот отличие адаптива от респонсива в моём понимании.
    • +1
      Интересная инфографика, спасибо. Я всегда советую статью с Frontender Magazine, если возникает путаница с понятиями.
      • 0
        Автора статьи знаю лично и, к сожалению, не доверяю ему в этом вопросе =)
    • 0
      С <picture> проблемы с загрузкой лишних изображений быть по идее не должно, кстати.
  • +13
    Уже где-то писал, и повторю — разница «Отзывчивый vs Адаптивный» высосана из пальца лишь в терминологической казуистике. Косвенным подтверждением этого служит то, что различные статьи по этой теме противоречат друг другу в каких-то деталях.

    На практике провести четкую границу затруднительно и, самое главное, не нужно. Есть 3 основных класса: статика, резина (которую, к слову, в свое время тоже пытались делить на fluid, liquid, elastic… — и кто это помнит?) и отзывчивый (он же адаптивный). Всё остальное — небольшие вариации внутри классов. Если кто-то будет в повседневной практике всерьез считать эти слова разнозначными — он вынесет всем коллегам мозг.
  • 0
    Очень дельная статья, спасибо. Хотелось бы немного более углубленно, с примерами реализации.
  • +2
    Desktop или mobile first

    С технической стороны нет никаких отличий
    Справедливости ради стоит отметить, что отличия всё же есть. Здесь я бы хотел высказаться, что лучше начинать с mobile. Как правило, мобильный вариант проще десктопного. Если двигаться от мобильного к десктопному, то получается наращивание фич. Т.е., интерфейс, по достижении некоторых необходимых размеров/наличия требуемых API, начинает приобретать дополнительные черты. Мне этот подход видится очень естественным.
    Если же мы двигаемся от десктопа, то для создания мобильной версии мы чаще, напротив, мыслим в терминах выпиливания. При этом все условия для брейкпоинтов больше похоже на хаки, которые подпиливают существующие элементы так, чтобы они себя адекватно в ограниченных условиях.
    Единственная причина почему стоит начинать с десктопной версии заключается в том, что десктопная версия уже существует. Это часто случается, когда компания-разработчик решает дополнить своё приложение возможностью работы на мобильных девайсах.
    mobile first же делает код более ясным на всех уровнях, от html-кода layout-а, до прикладной логики на JS.
    • +1
      Даже на десктопе удобно двигаться от меньшего к большему, чтобы старые браузеры, которые вовсе не понимают медиа-запросы, по умолчанию получили самую простую версию.
      • +1
        Да, верно, и это тоже. Наращивать сложность проще, чем отсекать от уже построенного.
  • +2
    Не понимаю какую разницу пытается проиллюстрировать 1 картинка. Более того, считается что это одинаковые понятия github.com/web-standards-ru/dictionary/blob/master/Dictionary.md#adaptive-design

    Статья ни о чем.

    Каким боком max-width относится к респонзив? Если у меня сайт тока для десктопа, я точно также поставлю max-width чтобы он не полз на больших экранах

    1 раз слышу, что Desktop first равнозначен Mobile first. Всегда было наоборот

    Причем здесь вообще веб-шрифты?
  • 0
    Капитанская какая-то статья. Как-будто автор потренировался в рисовании гифок. Причём не всегда удачно. Первая иллюстрация совершенно не говорит о том, как автор видит различия между двумя подходами.
    • +1
      тут как бы только посвященные поймут что на первой картинке контент «резинится», а на второй «прыгает» после изменения разрешения, сам смотрел минуту на нее
    • –2
      Ещё и перевод так себе.
    • 0
      Очень нормальная статья.
      Я вот хоть все это и знаю, т.к. уже лет 15 разработчик с упором на веб, но вот девушке своей, которая пытается дизайнить сайты, внятно объяснить не могу (без заумных терминов… простым языком).
      Эта статья для нее очень многие вещи поставила на свои места в плане понимания, а главное — статья проиллюстрированна отличной графикой.
  • 0
    Часто люди не знают, какой подход выбрать. Подумайте как следует и выберите подходящий вам подход.

    Ну прям не знаю. А вдруг подходящий мне подход не подойдёт?!
  • +1
    Теперь я узнал, что responsive и adaptive — разные вещи. Как же я без этого открытия раньше жил.
    Если я верстаю универсальный макет — то делаю его отзывчивым к изменению ширины страницы, естественно, а при достижении каких-то контрольных точек еще и адаптирую расположение элементов в потоке. Так какой я версткой занимаюсь?

    Резина — полурезина, блин.

    По поводу «mobile first» — «desktop first». У каждого джежая свой путь. Апологеты первого подхода мнят себя некой особой кастой. На самом деле, разницы вообще никакой. Мне повезло, и дизайн и верстку я делаю легкую и тонкую, и изображая мобильный макет я ничего никуда не отсекаю — только изменяю вид. Просто незачем что-то отсекать, если лишнего и так нет. Верстать я начинаю все равно с десктопа, просто элементы объединяю в группы так, чтобы их можно было переложить как надо в случае адаптации. Дополнительных услий — 0, я всегда так делал. Cтарые браузеры которые не умеют в Media Queries — там тоже ничего страшного и невообразимого не произойдет

    И вообще, к сожалению, вся адаптивность верстки у 97% заказчиков сводится к указанию device-width, потому что у них глазики закатываются, когда они слышат, что за вариант для мобильников надо бы добавить денег. Да и не спрашивают в-общем…

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.