что лучше мобильная версия сайта или адаптивный дизайн

Адаптивная верстка vs Мобильный сайт: почему адаптив круче

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

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

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

1. Размер шрифта в адаптиве остается читабельным

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

2. Изображения в адаптивной верстке подстраиваются под экран

Помните предыдущий пункт про текст? Это работает и с изображениями.

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

3. Адаптив сохраняет весь функционал

В мобильной версии сайта пользователь будет искать тот же функционал или информацию, что и в полной версии. Если не найдет, то просто закроет сайт и уйдет к конкурентам.

Адаптивная верстка тут выигрывает: она не влияет ни на структуру, ни на функционал. Это абсолютно тот же сайт.

4. Адаптивная верстка устроит любой браузер

Продуманная адаптивная верстка одинаково адекватно выводит страницу в каком угодно браузере. Это очень важно: не у всех пользователей последний айфон или обновленный Google Chrome.

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

5. У адаптивной верстки больше преимуществ при ранжировании доменов

Благодаря адаптивной верстке у сайта будут лучше позиции в SERP. Чем больше трафика с разных типов устройств (компьютер, смартфон, планшет) – тем лучше. Это сигнал, что сайт популярен у разной аудитории.

6. Адаптив делает веб-аналитику точнее

Если у сайта разные версии для ПК и смартфонов, анализ посетителей будет проводить сложно. А единая версия позволит эффективно следить за динамикой и параметрами аудитории. И объединять отчеты.

7. Адаптивная верстка оптимизирует элементы сайта

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

8. Быстрее публиковать контент и вносить изменения – в адаптиве

Если у сайта есть мобильная версия, на внесение изменений придется тратить в два раза больше времени: сначала для полной, а потом для мобильной. При адаптиве достаточно один раз опубликовать контент или добавить новую функцию.

9. Адаптивная верстка дешевле, чем мобильная верстка

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

В «B2B-Creative» мы делаем адаптивную верстку для всех наших сайтов. Основы закладываются еще на этапе дизайна: продумываем, чтобы сайт выглядел красиво на любом устройстве.

Хотите крутой современный сайт? Форма для заявки ниже 🙂

Источник

Что выбрать: мобильную версию или адаптивный дизайн?

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

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

Мобильная версия сайта — это отдельная его версия, предназначенная для смартфонов и планшетов. Как правило, имеет дизайн, оптимизированный под мобильные устройства, чтобы контент подавался в удобочитаемом виде и загрузка происходила почти мгновенно. Обычно выносится на поддомен в виде m.site.ru или mobile.site.ru.

Преимущества

Удобство

Скорость загрузки

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

Правки по сайту

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

Переход на основную версию

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

Недостатки

Дублирование

Обновление

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

Ограничение функционала

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

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

Адаптивная верстка

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

Преимущества

Удобство реализации

Как правило, при адаптивной верстке ширина экрана подгоняется под нужный размер дисплея. Все это можно реализовать посредством HTML и CSS. А современные CMS и фреймворки позволяют сделать это буквально в пару кликов. Да и современные шаблоны уже сразу предоставляют адаптивный дизайн. Остается только его установить? и за пару минут у вас адаптивный дизайн, который удобен для любой аудитории.

Если в мобильной версии мы сталкиваемся с дублированием контента на разных поддоменах, то здесь подобной проблемы нет. У страницы будет один адрес (URL)? и при изменении разрешения экрана либо устройства у нас не будет ломаться дизайн или нас не будут перенаправлять на мобильную версию. Этот вариант лучше решает проблему дублирования контента, нежели атрибуты rel=»canonical» или запреты в robots.txt на мобильной версии.

Недостатки

Тяжеловесность

Обычно при адаптивности оставляют весь функционал, доступный пользователям. А значит мобильные посетители могут столкнуться с нагромождением скриптов и большим количеством информации, которую будет сложно сразу охватить на небольшом дисплее смартфона. Если для десктопа нормально иметь размер в 200-250 Кб, то мобильная обычно занимает менее 50 Кб.

Цели посещения

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

Нет выбора

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

Итог: адаптивная верстка или мобильная версия?

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

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

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

Источник

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

С каждым годом посетители все чаще заходят в Интернет и осуществляют покупки с мобильных устройств. С них, согласно данным Яндекс.Метрики от весны 2016 года, в России совершается 29% всех визитов на сайты, и эта цифра постоянно растет.

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

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

Адаптивный дизайн

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

Преимущества:

Недостатки:

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

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

Мобильная версия предполагает, что создается два сайта: основной для просмотра с компьютеров и мобильный для смартфонов и планшетов.

Преимущества:

Недостатки:

Итоги сравнения

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

Опыт платформы для создания сайтов Nethouse

На базе Nethouse сегодня работает более 50 000 активных ресурсов: интернет-магазинов, сайтов фирм и специалистов, лендингов, портфолио и блогов. В декабре 2016 мы запустили новые адаптивные шаблоны и предложили пользователям перейти на них в пару кликов мыши, без потери информации и абсолютно бесплатно.

На сегодняшний день на адаптивные шаблоны перешли около 25% наших пользователей. Давайте посмотрим, как это отразилось на статистике их сайтов.

1. Поисковый трафик.

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

2. Поисковый мобильный трафик.

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

3. Поведенческие факторы.

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

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

Вывод:

Переход на адаптивный дизайн позитивно влияет на трафик сайта из поисковых систем и поведенческие факторы. Отрицательных моментов не обнаружено.

Источник

Что выбрать: адаптивный дизайн или мобильную версию?

Всем привет! Помню, лет 5 назад фраза «мобильная версия сайта» воспринималась для меня как что-то ненужное и сделанное только некоторыми крупными онлайн-проектами. Об адаптивном дизайне в то время речи не велось вообще. Но интернет — это быстро меняющееся пространство и сейчас этими понятиями часто оперируют вебмастера и разработчики сайтов.

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

Перед тем, как что-то предпринимать я задался логичным вопросом — «Что лучше: мобильная версия или адаптивный дизайн?». Уверен, что и вы задавались данным вопросом, либо он у вас стоит на повестке дня. В посте я хочу разобрать все плюсы/минусы данных типов удобного отображения сайта для мобильных пользователей и «нарисовать» небольшую сводную таблицу. Вам будет легче определиться с выбором.

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

UPD. Новая wordpress-тема была разработана адаптивная (старая mobile-версия удалена).

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

1. Стоимость

Мобильная версия для блога обошлась мне в 50$. Адаптивный дизайн в районе 120-150$ (это именно цена за адаптивность wordpress-темы слегка портального типа). Здесь выигрывает первый вариант. Стоит учитывать то, что сайты бывают разные и стоимость будет разной. Многое зависит от сложности. Я публикую цифры, которые получились у меня.

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

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

2. Монетизация

Сейчас в рекламных системах идет тренд на адаптивность, поэтому многие сервисы предлагают рекламные блоки, подстраивающиеся под устройства пользователей. Например, google adsense.

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

3. Отображение

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

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

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

4. Удобство и функционал

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

5. Скорость загрузки

А здесь обычно выигрывает мобильная версия. Все из-за того, что в ней нет ничего лишнего.

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

Источник

Адаптивная верстка vs. мобильный сайт, или Какая стратегия адаптации к мобильному трафику выиграет в будущем?

В марте 2016 года основатель Facebook Марк Цукерберг в разговоре с создателем Alibaba Group Джеком Ма объявил скорое завершение эпохи смартфонов и планшетов. По словам Цукерберга, каждые 10 лет появляются принципиально новые девайсы, меняющие представления человека о способах взаимодействия с компьютером.

Думаете, пророчества Цукерберга должны интересовать только производителей и продавцов смартфонов? Они касаются и вас лично. Если вы планируете адаптировать ресурс к мобильному трафику, этот материал для вас. Из него вы узнаете о преимуществах и недостатках адаптивной верстки и мобильных сайтов. Также вы узнаете, что выбрать на перспективу: RWD-сайт или отдельные ресурсы для пользователей мобильных девайсов и десктопов.

Какие стратегии адаптации к мобильному трафику работают сегодня

Есть две основные стратегии создания дружественных к мобильным пользователям ресурсов. Первая предполагает использование адаптивной верстки. Страница с RWD (от англ. Responsive Web Design) автоматически подстраивается под размеры экрана посетителя. Благодаря этому ее удобно просматривать на любом устройстве: десктопе, планшетном ПК и смартфоне.

Вторая стратегия предполагает создание для мобильных пользователей отдельного сайта. Он адаптирован исключительно для просмотра на небольших экранах. Поэтому с мобильных версий сайта исчезают многие элементы десктопной версии, включая flash-анимацию и «тяжелую» графику. Мобильные версии имеют отдельный URL. Например, несмотря на использование адаптивного дизайна, «Лента.ру» предлагает пользователям отдельный мобильный сайт. Он находится по адресу m.lenta.ru.

Владельцы десктопов и мобильных девайсов видят разные сайты. Для первых открывается полная версия ресурса, а вторых браузер перенаправляет на мобильную версию.

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

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

Адаптивный дизайн: преимущества и недостатки

Крупнейшая в мире поисковая система Google рекомендует делать сайты mobile-friendly с помощью адаптивного дизайна («We recommend using responsive web design»). Представьте, что ваш коллега просматривает страницу сайта на смартфоне, а вы открываете ту же страницу на стационарном ПК. При переходе на выбранный URL ваши браузеры загружают одинаковый HTML-код.

Загруженный код включает метатег viewport (более подробно о нем читайте по ссылке, указанной чуть выше). Он сообщает браузеру о необходимости масштабировать контент страницы в зависимости от ширины экрана. Также он содержит инструкции по масштабированию. Благодаря этому ваш коллега видит сайт так:

А вы видите сайт так:

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

Как видите, Google не зря рекомендует RWD для адаптации ресурсов к мобильному трафику. Значит ли это, что отзывчивый дизайн можно считать панацеей? Нет, так как…

… адаптивная верстка имеет недостатки

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

Потребности аудитории не учитываются

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

Страдает юзабилити и пользовательский опыт

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

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

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

Страницы долго загружаются, создается избыточная нагрузка на «железо»

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

Факт остается фактом: чтобы открыть страницу, мобильный телефон и стационарный компьютер загружают одинаковый объем информации и совершают одинаковый объем вычислений, который нагружает процессор. Подключенный к быстрому интернету десктоп с мощным «железом» справляется с этой задачей на ура. А как себя чувствует смартфон с менее мощным процессором? Если вы подключаетесь к интернету не через офисный Wi-Fi, а через мобильные сети, объем загружаемой информации играет критически важную роль.

Отсутствие выбора

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

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

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

Эта стратегия предполагает создание двух разных сайтов. Базовая версия открывается на экранах десктопов, а мобильный вариант предназначен для просмотра с планшетов и смартфонов. Определение устройства пользователя и перенаправление на нужную версию ресурса происходит на стороне сервера. В качестве примера обратите внимание на отмеченные выше стационарную и мобильную версии «Ленты.ру».

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

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

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

… недостатки мобильной версии сайта

Мобильная версия имеет целый ряд серьезных недостатков.

Мобильный сайт подходит не для всех мобильных устройств

Как вы помните, RWD гарантирует корректное отображение ресурса на экране любого девайса. Мобильные сайты также корректно открываются с любого устройства. Однако мобильная версия обычно смотрится нелепо на экране десктопа. Более того, большинство мобильных сайтов невозможно использовать на планшетах с большим экраном. Посмотрите, как выглядит мобильная версия «Живого Журнала» на экране 10”:

Управлять двумя сайтами сложнее, чем одним

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

Кроме того, приготовьтесь следить за эффективностью двух разных сайтов.

Дополнительные расходы

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

Проблемы с дублированием контента

Представьте, что опубликовали на основном сайте классную статью. Если вы тут же опубликуете ее на мобильном сайте, он будет пессимизирован за воровство контента. Чтобы решить проблему, вам придется потрудиться: информировать «Яндекс» и Google о родственности основной и мобильной версии ресурса с помощью атрибутов rel=alternate и rel=canonical.

Кастрированная функциональность и контент

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

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

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

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

Динамический показ: шах или мат мобильному сайту?

Динамический показ или RESS — это улучшенный вариант адаптивного дизайна. Он работает так: после запроса к URL сервер определяет характеристики устройства посетителя. Затем браузер получает HTML-код страницы, адаптированной к просмотру на конкретном экране. Благодаря динамическому показу устраняется один из главных недостатков RWD: большой расход трафика и нагрузка на устройство пользователя.

Когда вы заходите на сайт с RESS со смартфона и десктопа, ваши браузеры загружают разный код. При этом вы получаете всю информацию, содержащуюся на странице. Более того, вы можете адаптировать навигацию, меню, дизайн и контент страниц к нуждам владельцев конкретных девайсов. Самый простой пример адаптации контента: благодаря определению сервером устройства пользователя вы можете показывать владельцам девайсов под управлением iOS и Android ссылки на скачивание приложений в App Store и Google Play соответственно.

Корректную работу сайтов с RESS обеспечивает HTTP-заголовок Vary, содержащийся в ответе сервера на запрос. С его помощью браузер загружает соответствующий характеристикам устройства HTML-код. Также благодаря HTTP-заголовку Vary поисковые системы определяют мобильную дружественность ресурса.

RESS используют SlideShare, CNN, WordPress.com и другие сайты. Например, если вы откроете сайт CNN со стационарного компьютера, в коде страницы будет JavaScript.

В коде страницы, загруженной со смартфона, JavaScript отсутствует.

Почему Google рекомендует адаптивный дизайн, если есть улучшенный вариант? Почему владельцы сайтов массово не внедряют динамический показ? Как любой другой инструмент, RESS имеет недостатки:

Google рекомендует RWD, а не RESS, из-за ресурсозатратности второго инструмента. Чтобы обеспечить динамический показ, придется решать проблему определения устройств пользователей, увеличивать расходы на хостинг и тратить время и деньги на создание разного HTML-кода для одного URL. Позволить себе дополнительные затраты может далеко не каждый проект. Поэтому в настоящее время RESS нельзя назвать матом и даже шахом мобильным сайтам и адаптивному дизайну.

Как влияет на выбор стратегии эволюция мобильных экранов

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

Дисплеи становятся гибкими

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

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

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

Смартфоны, планшеты и носимые устройства создают дополненную реальность

Простой пример: если во время путешествия посмотреть на улицу незнакомого города, можно увидеть красивые здания и памятники. Если посмотреть на эту же улицу через Google Glass или Samsung Gear VR, можно увидеть красивые здания и получить информацию о них.

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

От трехмерных изображений к объемным голограммам

Смартфоны и планшеты уже умеют воспроизводить 3D-изображения. Что дальше? Некоторые производители разрабатывают системы, которые позволят оснастить смартфоны и планшеты проекторами голограмм.

Стоит ли веб-дизайнерам и владельцам сайтов уже сейчас думать, как адаптировать свои ресурсы к голографическому интернету? Разве что на досуге.

А как насчет интернета без экранов?

Знаете, к чему ведет рост популярности носимых девайсов и развитие интернета вещей? Люди будут чаще выходить в Сеть с помощью устройств с очень маленьким экраном. Но это еще не все.

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

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

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

Какую стратегию выбрать

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

Характеристика /Стратегия

Адаптивная верстка

Мобильный сайт

Динамический показ

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

Есть готовые решения. Но обычно речь идет о разработке нового сайта.

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

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

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

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

Влияние на опыт мобильных пользователей

Сайтом удобно пользоваться. Могут быть проблемы со скоростью загрузки страниц и нагрузкой на «железо» смартфонов.

Сайтом удобно пользоваться. Если на мобильном сайте нет полной информации, потребности некоторых посетителей останутся неудовлетворенными.

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

Влияние на опыт пользователей десктопов

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

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

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

Управлять просто, дополнительные действия не требуются.

Придется управлять двумя сайтами.

Если используется разная верстка и публикуется разный контент, управлять сложно.

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

Да, особенности проекта и нужды его аудитории учитывать необходимо. Да, основные стратегии адаптации к мобильному трафику имеют преимущества и недостатки. Да, каждая из стратегий имеет сторонников и противников. Например, основатель Nielsen Norman Group Якоб Нильсен не любит адаптивный дизайн и рекомендует делать мобильную версию сайта. А автор бестселлера «Изучаем HTML 5» Брюс Лоусон рекомендует использовать RWD и отказаться от мобильных сайтов. Но это теория.

А что, если посмотреть на проблему с точки зрения среднестатистического практика: блоггера, предпринимателя от сохи, владельца небольшого медицинского центра? Для него важно быстро адаптировать ресурс под мобильный трафик с минимальными расходами и затратами времени на обслуживание. Вот вам авторская позиция: в настоящее время и в ближайшей перспективе при прочих равных для большинства проектов оптимальной стратегией будет внедрение адаптивного дизайна. Основным конкурентом RWD выступает не мобильный сайт, а динамический показ.

А как насчет перспективы появления новых экранов и технологий, о которых говорит Цукерберг? Судя по актуальным тенденциям, потребность получать информацию на ходу не исчезнет. Значит, сайты нужно тем или иным способом адаптировать к использованию на маленьких экранах. Каким будет веб-дизайн, когда людям в головы вставят чипы и человечество погрузится в виртуальную реальность? В настоящее время этот вопрос неактуален. Не согласны? Аргументируйте.

В Google и «Яндексе», соцсетях, рассылках, на видеоплатформах, у блогеров

Источник