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

Их несколько, и они действительно дают сайту массу положительных очков в сравнении с менее расторопными конкурентами:

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

А каким требованиям должна отвечать мобильная версия?

Мы это определяем следующими характеристиками:

• Простая и удобная навигация. Не должно быть зависимости от разрешения устройства, прокрутка – исключительно вертикальная, не перегруженное меню и так далее.
• Обязательно – отдельная (мобильная) карта сайта, но с количеством страниц основного ресурса.
• Все формы должны быть простыми и удобными для заполнения, последующие действия – с минимумом манипуляций.
• Четкое структурирование контента: картинки, графики, заголовки, списки упрощают восприятие текстов.
• Максимальная скорость загрузки всех страниц ресурса (можно проверить через Google PageSpeed Insights).
• Необходимо исключить любые элементы на базе Flash-технологий, с рекламой, всплывающими окнами.
• Все фото/видео материалы и тексты должны поддерживаться на устройствах (размер, четкость, прочее).
• Номер телефона на контактной странице должен иметь формат, позволяющий осуществить звонок без проблем (пример разметки <a href="tel:+**********">8 (***)***-**-**</a>)

Есть два варианта адаптации своего ресурса. Первый – брать готовый  конструктор мобильной версии для субдомена (макетов в сети много, и этот вариант актуален при создании сайта с нуля). Это отдельная версия, которая потребует и много времени, и определенных навыков, так как используется для соцсетей, мощных порталов или интернет-магазинов с большими каталогами.

Второй, и более оптимальный вариант для скромного ресурса (сайт-визитка, лэндинг, блог) – делать адаптивный дизайн.

У каждого варианта – свои особенности…

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

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

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

• для стационарного компьютера:

• для мобильного устройства:

При настройках используются CSS-фреймворки (для адаптации в основном Bootstrap) или медиа-запросы для доставки таблиц стилей на планшет или телефон.

Если говорить о Bootstrap, то он содержит солидный перечень инструментов – CSS-шаблоны, сетка, HTML, навигационные блоки и web-формы, JavaScript-расширения. При этом нужно точно выполнять определенного порядка действий (в инструкции к Bootstrap все расписано подробно).

При работе следует придерживаться определенному (разработчиками) алгоритму:

• Подключаем CSS файлы, иногда – JavaScript и jQuery.
• Для соответствия стандартам веб-разработки используем HTML5 и viewport (метатег отвечает за контроль размеров и масштабов страниц и окна просмотра).
• Добавляем в код переопределенные Bootstrap Grid классы или делаем собственную разметку (предпочтение – препроцессорам  Sass).

Выбор конструктора мобильной версии

В работе мы отдаём предпочтение варианту, который отвечает требованиям – простота в использовании, бесплатна версия, реализации на отдельном домене с RSS-лентой. И этим требованиям отвечает Wirenode.

С помощью бесплатной версии Wirenode (всего их 5) можно создать только один сайт. И выглядит это так:

• Регистрация (7 простеньких полей):

• В окне ввода добавляем URL-адрес:

• На новой странице указываем домен:

• Начинаем редактирование и просматриваем предварительный вариант будущего сайта:

• Из предложенных моделей телефона выбираем оптимальный вариант (всего 3 предложения):

• Редактирование заканчиваем добавлением в базовую версию сайта информационного виджета с пометкой, что о доступности мобильной версии, размещенной на другом домене:

Как бы все – о работе в конструкторе Wirenode

Адаптация под ресурсы WordPress

Если сайт использует CMS WordPress, то самыми простыми решениями будут или установка плагина для новой версии нашего ресурса (мобильной), или изменение существующей темы на адаптивную.

Мы отдаем предпочтение второму варианту – посмотрите, как выглядят полная и адаптивная версия:

• полная:

• мобильная:

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

При выборе темы с адаптивным оформлением под конкретный проект мы «гуляем» по разделу «Внешний вид (конкретно – в подразделе «Темы):

А после этого переходим в фильтры  характеристик, выбираем пункт «Адаптивный дизайн» и активируем фильтр:

На выходе – перечень тем для выбора на свой вкус:

Работая с Wordpress, мы периодически используем:

• Ускоренные мобильные версии AMP. Это библиотека с открытым кодом для создания упрощенной версии с быстрой загрузкой страниц для смартфонов. В основе работы – создание дубликата на базе AMP HTML, отключение тормозящих загрузку скриптов и ускорение загрузки с помощью инструментов Google.

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

• Плагин PageBuilder. Простой и комфортный конструктор для получения адаптивного дизайна.

• Плагин Mobile Smart. Автоматически определяет тип устройства, с которого зашли на сайт, и автоматически выдает пользователю или мобильную, или десктопную версию.

• Плагин WP Mobile Edition. Простенький инструмент для создания мобильных версий на субдоменах.

Создание мобильных версий на субдоменах

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

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

В этом случае есть вероятность, что поисковые роботы посчитают одну из версий – мобильную или основную – дублированием, и заблокируют ее. Выход есть: славный парень Google предлагает усовершенствовать код каждой страницы в основной версии – добавляют <link rel="alternate" href="http://m.domen.ru/страница/" >, а в мобильных страницах код добавляют ссылкой <link rel="canonical" href="http://domen.ru/страница/" > - она ведет на базовую версию.

Как результат, получаем две картинки:

• основная версия:

• мобильная версия, которая отображается на субдомене:

Отображение сайта на разных устройствах

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

Программа упрощает выбор – указывайте разрешение экрана для конкретной модели домашнего ПК, ноутбука, смартфона, планшета, телевизора, и вносите корректировки:

Как итог

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

• У веб-мастера обязательно должны быть навыки верстки: в противном случае он не справится с самым простым конструктором.
• Можно использовать адаптивный дизайн или пользоваться существующими конструкторами мобильных версий. Во втором случае потребуются определенные финансовые расходы, и вы столкнетесь с рядом ограничений.
• При работе на WordPress используйте адаптивные версии – используйте или плагины, или готовые шаблоны.
• Работая с крупными проектами, при создании отдельной мобильной версии воспользуйтесь поддоменом.