Адаптивный дизайн — роскошь или необходимость

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

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

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

Недостатки традиционных подходов

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

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

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

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

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

Недостатки адаптивного дизайна

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

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

Этапы создания сайта с адаптивным дизайном

1. Отрисовка

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

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

2. Верстка

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

3. Тестирование

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

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

Грамотно спроектированный и сверстанный с использованием технологии «responsive web design» сайт адаптируется не только под формат экрана. При его отображении учитывается специфика конкретного устройства, автоматически модифицируется ширина блоков, меняются шрифты и отключаются определенные элементы. Результат такой обработки отображается корректно и гармонично на любом из современных устройств. 

Автор: Д. Баталин

X

Заказать звонок