Адаптивный дизайн или мобильная версия?

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

Два способа решения этой задачи:

• делать две версии сайта: для десктопов и для мобильных девайсов
• создавать сайт с адаптивным дизайном: RWD-сайт

В чем отличие адаптивной верстки от мобильной версии?

RWD-сайт — сайт, который подстраивается под любую версию просмотра ресурса, имеет один URL как для ПК, так и для мобильных устройств.
Это значит, что графика, изображения и функционал будут отображаться на любом экране, разница только в размере и позиционировании на странице. Как это работает? Представим, что вы и еще один сотрудник вашей компании открывают один и тот же сайт, только вы это делаете на смартфоне, а он использует ПК. При переходе на выбранный URL браузеры загружают одинаковый HTML-код. Загруженный код включает метатег viewport, который сообщает браузеру о необходимости масштабировать контент в зависимости от ширины экрана.

Пример мобильной версии сайта. Адаптивный дизайн

Пример версии сайта для ПК. Адаптивный дизайн

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

Преимущества RWD-сайта

1. Высокие позиции интернет-ресурса в мобильной поисковой выдачи. Наличие или отсутствие адаптации влияют только на мобильную выдачу.
2. Улучшение поведенческих метрик сайта. Что бы отслеживать эффективность всех типов трафика, можно использовать Яндекс.Метрика и Google Analytics, Отчеты о трафике будут разделены, поэтому вы легко определите эффективность ресурса.
3. ЭКОНОМИЯ. Разработка сайта с адаптивным дизайном будет стоить гораздо дешевле, чем создание отдельной версии для мобильных устройств.
4. Нет дублей контента. Один URL. Пользователи любых устройств посещают один и тот же ресурс, адрес не изменяется. Это очень удобно, так как пользователю не нужно запоминать другой адрес мобильной версии.
5. Удобство разработки. При адаптивной верстки сайта код автоматически подстраивается под любую ширину экрана просмотра веб-страницы. С учетом существования различных фреймворков, например Bootstrap, процесс разработки адаптивного сайта значительно упрощается, а для популярных CMS можно использовать специальные плагины, которые помогут сделать дизайн отзывчивым к разным версиям просмотра.

Мобильная версия сайта

Здесь, для завоевания тех самых 40% аудитории, потребуется создание двух версий сайта: для ПК и мобильная. Сразу отметим, это будут два разных сайта с разными URL. (Определение устройства пользователя и перенаправление на нужный ресурс осуществляется на стороне сервера).

Преимущества использования мобильной версии

1. Дифференциация контента. Можно публиковать отдельный контент для пользователей мобильных устройств, или наоборот.
2. Функционал и дизайн можно изменять и настраивать согласно потребностям пользователей мобильных девайсов. Некоторые разделы сайта могут быть не актуальны при просмотре страницы в мобильной версии, поэтому их можно легко отключить или изменить их внешний вид.
3. Экономия трафика устройства.

Итак, мы разобрали специфику двух способов адаптации сайта к мобильным устройствам, где у каждого есть свои преимущества. Так какую стратегию выбрать? Мы могли бы оставить право этого выбора за вами, но делать так не будем.

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

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