4 способа создания мобильных сайтов

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

Как уже упоминалось, существует несколько решений проблемы разработки мобильных сайтов. Независимо от используемой системы управления содержимым: 1С Битрикс или WordPress, все они сводятся к четырем основным способам.

1. Сайт на отдельном поддомене

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

Зачем нужен такой вариант:

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

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

Минусы тоже имеются и довольно существенные:

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

2. Мобильный шаблон

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

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

К плюсам такого решения можно отнести:

• Все пользователи мобильных устройств имеют доступ к контенту сайта
• Один URL адрес страниц для пользователей и поисковых машин
• Экономия на обслуживании — у сайта один администратор
• Поисковым системам нравится мобильные версии
• Пользователь получает одинаковый контент с полной версией сайта

Минусы:

• Шаблоны и плагины для поддержки мобильных устройств разрабатываются и интегрируются под конкретную версию вашей платформы. Обновление и добавление новых функций может быть сопряжено с трудностями
• Как правило, такие расширения платные и не во всех шаблонах присутствует полная поддержка устройств. Например, в стандартной теме Bauhaus для WPtouch поддерживаются смартфоны, но отсутствует поддержка планшетов

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

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

Плюсы:

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

К минусам адаптивной верстки относятся:

• Высокая стоимость. В нашем предложении создания сайтов в Санкт-Петербурге, стоимость адаптивной верстки уже включена в общую стоимость работ
• Размеры и сжатие изображений в зависимости от разрешений экрана
• Отображение документов, таких как PDF, без возможности загрузки — не очень хорошая идея
• Адаптивный дизайн никогда не будет «пиксель в пиксель». Этому способствует множество браузеров и сильная сегментация устройств. Несмотря на всестороннее тестирование и точечные правки, производители устройств, придумывают новые типы 2,5D экранов и разрешения

4. Мобильные приложения

Подавляющему большинству организаций мобильные приложения могут никогда не потребоваться. Но, несмотря на это, мы все же решили включить их в общий обзор. Приложение — специально написанное веб-приложение для AppStore и Play Store. Формально, это канал связи между вашим брендом и пользователем. Интеграция с приложением разумна в следующих случаях:

• У вас сильный и узнаваемый бренд
• Возможность оплаты услуг пользователем с помощью смартфона
• Особые функции, например, «Сфотографируйте дизайн и мы нарисуем подобный»
• К преимуществам подобных решений можно отнести постоянный push — ваши пользователи никогда не пропустят нужную информацию. Минусы — дорого, иногда даже очень

Заключение или что выбрать?

Исходя из вышесказанного, мы делаем следующие выводы:

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

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

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

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