Наступление эры портативных устройств повлияло на отрасль веб-дизайна. Современные сайты должны подстраиваться под потребности целевой аудитории, независимо от типа приборов, с экранов которых посетители просматривают ресурс. Отзывчивый дизайн используют многие информационные порталы, корпоративные ресурсы и целевые страницы (лендинги), тогда как интернет-магазины и социальные сети решили заказать мобильную версию сайта или перешли на комбинированные методы показа сайтов.
Существует три способа адаптации веб-страниц:
- Создание отдельной мобильной версии в формате приложения или сайта для портативных устройств.
- Разработка отзывчивого адаптивного дизайна (RWD/AWD).
- Комбинирование отзывчивого дизайна и мобильной версии (RESS).
Каждый из представленных способов разработки имеет преимущества и недостатки, поэтому выбор правильного метода зависит исключительно от параметров самого сайта. Необходимо учесть отраслевые стандарты, цели использования и размеры веб-площадки. Дополнительно придется изучить основные источники привлечения представителей целевой аудитории. Если проект функционирует за счет мобильного трафика, придется разработать приложение или дополнительный сайт. В остальных случаях можно сделать ставку на RWD или RESS. Комбинированный метод могут себе позволить только крупные веб-ресурсы, получающие регулярную прибыль за счет наращивания трафика из разных источников.
Мобильная версия веб-сайта
Мобильный сайт создается для комфортного просмотра на портативных устройствах содержимого оригинального веб-ресурса. Разработка мобильной версии сайта пользовалась спросом на заре развития смартфонов. Современные сайты отказываются от мобильных версий в пользу приложений или адаптивной верстки.
Преимущества мобильного сайта:
- Независимость от десктопной версии. Приложение или мобильный сайт существует отдельно от основной веб-площадки. Здесь можно размещать уникальный контент и проводить всевозможные акции.
- Отказ от избыточного и ненужного функционала, имеющего смысл только для основной версии сайта.
- Высокая скорость загрузки. Отсутствие различных надстроек и плагинов позволит быстро загружать сайт. Это чрезвычайно важно для пользователей, которые не имеют доступа к высокоскоростному интернету.
- Удобство в использовании. Если разработка мобильной версии доверена квалифицированному специалисту, к уровню юзабилити не возникнет претензий. В моде минимализм. По сравнению с десктопной версией приложение или мобильный сайт в разы проще. Логически понятная структура подобных площадок позволит быстро отыскать полезную информацию.
- Наличие выбора. Посетитель в любой момент может перейти на основную или мобильную версию.
Для создания страниц применяется HTML-разметка, XHTML 1.0 mobile для новых устройств и WML для экономии трафика или устаревших браузеров. Любой мобильный сайт можно открыть на персональном компьютере, но визуально подобная площадка будет уступать своему оригиналу. Например, с целью экономии места на экране некоторые блоки меню удаляются или соединяются. Тестовая информация на странице сокращается и прячется под кат, а размер изображений уменьшается до комфортного для просмотра уровня.
Недостатки мобильной версии сайта:
- Регистрация нескольких URL-адрес, вызывающих путаницу среди целевой аудитории.
- Проблемы с индексацией. Поисковые роботы вносят мобильные версии в фильтры из-за копирования контента оригинального сайта. Снять санкции выйдет после обращения в техническую поддержку поисковика.
- Сбои в процессе продвижения. Мобильные сайты из-за лучшей релевантности страниц, высокой скорости загрузки и оптимального юзабилити могут опережать оригинал в списке поисковой выдачи.
- Появление битых ссылок. Перелинковка меду мобильной и десктопной версией может привести к тому, что посетители будут автоматически перенаправляться на удаленные или несуществующие страницы.
- Необходимость устанавливать дополнительное программное обеспечение, если речь идет о приложениях.
- Наличие ограничений. Создание мобильных версий сайтов связано с необходимостью отказаться от части контента и некоторых функций. Урезание содержимого не пойдет на пользу информационным порталам.
- Некоторые приложения невозможно просмотреть на персональном компьютере. Исправить ситуацию позволит установка эмулятора или утилиты для удаленного управления портативным устройством.
- Дороговизна. Затраты на разработку и обслуживание приложения или мобильного сайта в разы превышают инвестиции в создание адаптивной верстки. Необходимо создать отдельную веб-площадку или полнофункциональную программу, работающую на нескольких мобильных платформах (iOS, Android).
Для запуска мобильной версии необходимо зарегистрировать отдельный URL-адрес сайта. Специальное доменное имя обычно начинается с «https://m.» или «https://mobile.». Обозначения «m.» и «mobile.» в доменной зоне верхнего уровня указывают на мобильную версию. Приложения можно дополнительно устанавливать на персональных компьютер, если разработчик удосужится произвести оптимизацию под операционную систему.
Адаптивный дизайн сайта
Суть адаптивной верстки заключается в использовании медиазапросов CSS3, технологии JavaScript и HTML-кода для автоматического изменения параметров отображения сайта с учетом размера экрана и версии браузера. Чтобы создать отзывчивый дизайн, не нужно заниматься разработкой приложения или мобильной версии. Сайт будет одинаково хорошо отображаться как на портативном устройстве, так и на персональном компьютере.
Преимущества адаптивного сайта:
- Сокращение затрат на разработку и техническую поддержку ресурса. Создать одну адаптированную площадку намного проще, чем комплекс из десктопной и мобильной версию сайта.
- Комфортность для пользователей. Не нужно запоминать несколько URL-адресов.
- Возможность применения инструментов для адаптации на этапе модификации и редизайна сайта.
- Экономия средств. Хотя создание адаптированного дизайна стоит дороже разработки стандартной площадки, если вы решили адаптировать сайт под мобильные устройства, цена по совокупности затрат намного выгоднее создания мобильного сайта. Например, отсутствуют затраты на приобретение уникального контента для мобильной версии.
- Отказ от редиректов и значительное сокращение количества битых ссылок.
- Ускорение процесса индексации и отсутствие проблем с расстановкой сайтов в списке поисковой выдачи.
- Многозадачность. Цели использования приложений и основных сайтов отличаются. Если мобильные версии используются для выполнения конкретных действий, то основные сайты приспособлены для удовлетворения разнообразных потребностей посетителя.
Структура адаптированных веб-страниц автоматически подстраивается под ширину экрана. Дополнительно сокращаются расходы на продвижение и администрирование сайта. Наличие фреймворков, обширной библиотеки шаблонов и подробных инструкций делает разработку адаптированных площадок доступной услугой.
Недостатки адаптивного дизайна:
- Медленная загрузка страниц в условиях использования мобильного интернета. Крупные десктопные сайты, перегруженные текстовой информацией и графическими элементами, будут медленно загружаться.
- Наличие технических проблем и временных багов, вызванных ошибками на этапе разработки. Зачастую «съезжают» элементы навигации, возникают проблемы с кодировкой и теряются целые блоки данных.
- Отсутствие альтернативы. При возникновении проблем с загрузкой основного сайта всегда можно попробовать запустить приложение или мобильную версию. Для адаптированных площадок подобная возможность недоступна.
Разработчики могут предложить несколько решений для борьбы с основными недостатками адаптивного дизайна. Например, браузеры на портативных устройствах имеют предустановленную функцию сжатия кода страниц, позволяющую ускорить загрузку. Веб-дизайнеры рекомендуют делать ставку на минимализм, используя «легкие» графические элементы без анимации.
Методика RESS
Программная архитектура RESS, предполагающая вывод разных HTML и CSS на одном URL-адресе, считается отличной альтернативой мобильных и адаптированных сайтов, поскольку в рамках подобной верстки применяются комбинированные инструменты. Самым известным пользователем RESS считается Google. Для разных устройств сервисы этой поисковой системы предлагают отдельные HTML-страницы.
В рамках RESS создается два сайта (мобильный и десктопный), но выдача страниц зависит исключительно от параметров устройства, которым пользуется посетитель. Метод позволяет избавиться от некоторых недостатков как мобильной, так и адаптивной верстки. К примеру, загрузка страниц значительно ускорится. Дополнительно все версии сайта будут связаны между собой, не вызывая проблем на этапе индексации и продвижения.
Преимущества RESS:
- Снижение затрат трафика и ускорение загрузки страниц. Бесполезные на мобильной версии компоненты JavaScript просто не выдаются сервером пользователю портативных устройств.
- Применение таргетирования и уникальной вёрстки для различных приборов.
- Многозадачность при упрощенной структуре сайта с сокращением количества активных элементов.
В целом идея комбинирования мобильной и адаптивной верстки чрезвычайно популярна, но у нее имеется огромный минус. На практике для реализации концепции требуются огромные инвестиции. Фактически речь идет о двойных затратах, поскольку одновременно создается несколько активных версий сайта.
Недостатки RESS:
- Необходимы большие вычислительные мощности. Сервер должен обрабатывать запросы, поступающие из нескольких практически идентичных сайтов.
- Для разработки придется привлечь обширный штат специалистов узкого профиля, в том числе программистов, оптимизаторов, контент-менеджеров и веб-дизайнеров.
- Риск возникновения ошибок в работе механизма для определения устройств. На телефонах с необычным размером экрана может открываться десктопная версия.
- Комбинированный метод часто используют интернет-магазины и социальные сети, которые могут себе позволить крупные инвестиции в развитие сайта. Для небольших веб-площадок этот способ недоступен. В теории именно использование RESS является лучшим выбором для веб-дизайна.
Мобильные версии сайтов считаются комфортными с точки зрения юзабилити. В остальном этот метод уступает аналогам. Адаптивная верстка – распространенный, экономически выгодный и простой подход к созданию сайтов, которые будут открываться на портативных устройствах и стационарных компьютерах. В процессе их запуска не нужно делать копию контента и создавать с нуля структуру дополнительной площадки.
Дороговизна является основной причиной того, что поисковые системы не настаивают на повсеместном внедрении RESS. Упомянутая выше компания Google, используя комбинированный метод на своих сервисах, рекомендует веб-мастерам применять адаптивную верстку. На практике выбор одного из способов разработки зависит исключительно от бюджета и стратегии развития сайта.