Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:

Как сделать один сайт для всех экранов

Принципы отзывчивого дизайна.
card-photo
card-photo
Ира Безкоровайная

Автор в SKVOT

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

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

 

Адаптив vs флуид vs респонсив

Чтобы содержимое сайта выглядело стабильно хорошо везде, используют адаптивную (adaptive), резиновую (fluid) и отзывчивую (responsive) верстку.

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

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


Cтраница с responsive и adaptive прии растяжении. Источник: blog.froont.com

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

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

АДАПТИВ подходит, если важна скорость загрузки страницы, или функционал мобильной и десктопной версии сильно отличается.

ФЛУИД — если мобильная и десктоп-версия примерно одинаковые, а бюджет и срок разработки ограничены.

РЕСПОНСИВ — когда мобильная и десктоп-версия примерно одинаковые, но некоторые изменения все же сделать нужно.

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

Ключевые принципы responsive design

По данным из исследования Tyton Media, 94% пользователей могут закрыть неудобный сайт. Причем мобильная версия даже важнее десктопа — отчет Hootsuite и We Are Social показал, что 52% пользователей серфят со смартфона.

Чтобы проблем гарантировано не возникло, Google рекомендует использовать responsive design (в русской версии он переведен как «адаптивный», но мы ориентируемся на английскую).

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

1. Главное — размер экрана

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

Пример — промо-сайт очков виртуальной реальности Magic Leap. В десктоп-версии при уменьшении ширины страницы пространство плавно сужается вместе со всеми элементами. В мобильной — главные элементы перестраиваются и уменьшаются, а второстепенные пропадают.


Перестройка контента в респонсиве. Источник: magicleap.com

2. Контрольные точки

Отличительная черта респонсив-верстки — способность элементов перестраиваться. Это настраивается с помощью контрольных точек.

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


Сайт Итана Маркотта, идеолога респонсив-дизайна. Источник: ethanmarcotte.com

3. Векторные изображения вместо растровых

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

Например, изображения на сайте издания New York Magazine — растровые (как и большинство фотографий в digital-мире). Чтобы такие вижуалы выглядели хорошо, разработчики задают максимальные значения, дальше которых сайт не растягивается. Пиксели видно, только если будешь упорно зумить конкретное изображение.


При увеличении всего на 200% фото становится «пиксельным». Источник: New York Magazine

На сайте Creative Dreams Design — только векторные изображения. Даже при сильном увеличении масштаба картинки будут выглядеть хорошо.

4. Закрепленные объекты

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

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

5. Размеры в процентах, а не в пикселях

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

К примеру, сайт «Новой почты» не адаптивный: все размеры заданы в пикселях:

Сайт по отслеживанию посылок Parcelmonotor сужает и расширяет контент вместе с экраном. Это признак того, что размеры в процентах, а верстка — респонсивная:

6. Max и min значения

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

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

Если максимальная ширина — не больше 3 000 пикселей, изображение будет увеличиваться ровно до этой ширины вне зависимости от масштаба. С минимальными значениями принцип тот же.

Изображения на сайте файлообменника Dropbox не только растягиваются, но и меняют ориентацию с вертикальной на горизонтальную и обратно. Однако у страницы есть границы — дойдя до определенной ширины, она не расширяется дальше. За ее пределами просто фон.

7. Веб-шрифты вместо системных

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

Веб-шрифты — универсальные и отлично отображаются на любом экране. Например, надписи на странице немецкого онлайн-журнала о дизайне Made In Germany набраны веб-шрифтом FF DIN Round.

Поделиться материалом
РАССЫЛКА SKVOT

Раз в две недели мы отправляем новые публикации и анонсы курсов на почту