Адаптивный или адаптированный сайт – как выбрать наилучший подход?

Словосочетание «Адаптивный дизайн» стало собирательным термином, обозначающим обеспечение работоспособности сайта на устройствах с низким разрешением экрана.

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

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

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

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

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

Адаптивный или адаптированный дизайн?

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

Большинство дизайнеров в обоих подходах использует медиа-запросы (media queries), поскольку они сверхнадёжны. Но только до тех пор, пока нет нужды обеспечивать совместимость с Internet Explorer 8.

Для тех, кому приходится иметь дело со старыми версиями IE, Скотт Джел сделал JavaScript-библиотеку под названием respond.js.

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

От анализа посещаемости до принятия решений о перемещении порций контента при смене ориентации экрана – дизайнер и верстальщик (если это не один и тот же человек) в равной степени ответственны за всё.

Чтобы вдохновиться хорошими примерами дизайна, посетите галерею mediaqueri.es, в которой каждый сайт представлен четырьмя снимками экранов разных типов.

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

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

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

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

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

Дизайн

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

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

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

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

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

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

Вёрстка

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

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

/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }
/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }
/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }

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

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

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

Проектирование и разработка адаптивного дизайна

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

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

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

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

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

Дизайн

Если правила разработки адаптированного дизайна очень просты и консервативны, то с адаптивным дизайном всё не так легко. Наиболее радикальным и неоднозначно воспринимаемым приёмом адаптивного дизайна является «проектирование в браузере» – фактически, совмещение дизайна с вёрсткой.

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

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

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

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

Вёрстка

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

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

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

Смешанные типы дизайна

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

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

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

Тестирование адаптивных и адаптированных сайтов

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

Так, чтобы быстро проверить сайт на малом разрешении, я использую расширение для браузера Google Chrome, которое называется Ripple Emulator.

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

Заключение

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

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

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

Сообщество веб-разработчиков постоянно изобретает новые решения вопросов, с которыми мы только начинаем сталкиваться. Информации по адаптивному дизайну существует достаточно, но самой концепции ещё не хватает зрелости.

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

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

Перевод статьи «Responsive vs adaptive webdesign, which is best for you?» был подготовлен дружной командой проекта Сайтостроение от А до Я.