Сделать оценку проекта?

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

Как адаптировать веб-ресурс под мобильные гаджеты?

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

На сегодняшний день разные авторитетные организации дают данные своих исследований об использовании пользователями мобильных устройств для входа в глобальную сеть. Все они предоставляют данные в диапазоне 45 – 60% от общего числа пользователей. Кроме того, и системы поиска считают адаптивность сайта одним из наиболее важных критериев ранжирования веб-ресурсов. Именно поэтому так важно адаптировать свой сайт под мобильные устройства.

Особенности адаптации веб-ресурса под мобильные гаджеты

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

Есть ряд причин, по которым стоит проводить адаптацию сайта:

  1. Ежегодно увеличивается число пользователей, которые заходят в глобальную сеть со своих планшетов, смартфонов или других мобильных устройств;
  2. Поскольку сайт становится удобно использовать с мобильных гаджетов, то количество отказов значительно снижается, а также способствует более лояльному отношению пользователей;
  3. Увеличивается количество потенциальных клиентов, и растут объемы продаж;
  4. Адаптивность сайта является одним из самых важных критериев ранжирования веб-ресурса в поисковой выдаче.

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

  • все элементы навигации должны быть удобными. Это позволит пользователям без проблем нажимать на любые необходимые кнопки, не зависимо от того с какого мобильного устройства они зашли на сайт;
  • отсутствие горизонтальной прокрутки, легкий поиск товаров/услуг на сайте, быстрый переход на главную страницу;
  • текст должен быть правильно структурирован (заголовки, разделы, списки, графические элементы), что облегчит его восприятие пользователем;
  • высокая скорость загрузки страниц веб-ресурса. (Google предлагает специальный сервис, который позволяет проверить, насколько скорость загрузки сайта соответствует требованиям);
  • отсутствие «тяжелых» элементов (flash), чрезмерного количества рекламных объявлений и всплывающих окон;
  • минимальное количество полей в формах, которые необходимо заполнять, совершая конверсионные действия;
  • все изображения должны быть адаптированы, а видеоматериалы поддерживаться YouTube;
  • читабельный текст, не зависимо от того, на каком элементе он расположен;
  • понятная разметка номера телефона <a href=”tel:+**********”>0(**)***-**-**</a>; возможность набрать телефонный номер с веб-ресурса, просто кликнув на нужный контактный номер;
  • если версия сайта – мобильная, то она должна иметь отдельную карту сайта, где будут содержаться все страницы, которые имеются на основном веб-ресурсе.

Возможные варианты оптимизации веб-ресурса под мобильные гаджеты

  1. Адаптивный дизайн является наилучшим выбором для небольших сайтов (landing page, блоги, сайты-визитки, веб-ресурсы услуг).
  • Шаблоны стоит применять для онлайн-магазинов средних размеров, форумов, информационных сайтов. Для реализации стоит использовать скрипт, который будет определять устройство и отображать, исходя из проведенного анализа, необходимый шаблон.

Если используются шаблоны, то дизайн веб-ресурса мобильной версии должен быть упрощен: все «тяжелые» и лишние элементы изымаются. Благодаря таким действиям увеличивается скорость загрузки страниц;

  • Использование специальных плагинов и тем с адаптивным дизайном является оптимальным вариантом для тех сайтов, которые разрабатывались на WP или других, не менее популярных CMS;
  1. Отдельная мобильная версия, располагаемая на субдомене. Такой вариант является очень трудоемким, однако остается оптимальным для социальных площадок, крупных онлайн-магазинов, имеющим большой ассортимент, и крупных порталов;
  • Конструкторы, позволяющие создать мобильную версию сайта.

Теперь о каждом варианте более подробно.

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

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

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

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

Вот так будет выглядеть десктопная версия сайта:

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

А так мобильная версия этого же сайта:

А так мобильная версия этого же сайта:

Чтобы правильно осуществить настройку, можно применять фреймворки, к примеру, bootstrap, где можно адаптировать веб-ресурс для мобильных гаджетов или же применять медиа-запросы (CSS3 Media Queries).

Теперь подробнее о Bootstrap:

Теперь подробнее о Bootstrap:

Данный инструмент включает в себя такие составляющие:

  • HTML и CSS-шаблоны;
  • типографика;
  • сетка;
  • веб-формы;
  • блоки навигации;
  • кнопки;
  • JS-расширения.

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

Итак, перечень пошаговых действий таков:

  1. Необходимо подключить к проекту файлы CSS. Если возникает необходимость, то JS и jQuery;
  2. Проверить, соответствует ли сайт последним требованиям веб-рарзработки: использование HTML5, meta-теги viewport, которые необходимы для того, чтобы осуществлять контроль параметров окна просмотра и масштабирования страницы;
  3. Если возникают сложности с определенными сервисами, например, Гугл Карты, то необходимо переопределить box-sizing: border-box для нужного элемента управления;
  4. Необходимо дописать в код предопределенные классы Bootstrap Grid, либо применять для собственной разметки препроцессоры Sass.

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

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

Тарифные планы этого конструктора позволяют бесплатно его использовать, чтобы создать один веб-ресурс:

Данный инструмент включает в себя такие составляющие:

На сервисе необходимо зарегистрироваться:

На сервисе необходимо зарегистрироваться:

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

Конструктор предложит создать новый мобильный веб-ресурс при условии, что на нем имеется RSS-лента. После того, как введен нужный URL, можно нажимать кнопку «Mobilize Blog»:

Конструктор предложит создать новый мобильный веб-ресурс при условии, что на нем имеется RSS-лента. После того, как введен нужный URL, можно нажимать кнопку «Mobilize Blog»:

Теперь можно указывать домен и начинать редактировать:

Теперь можно указывать домен и начинать редактировать:

Конструктор имеет возможность предварительно просмотреть мобильный сайт:

Конструктор имеет возможность предварительно просмотреть мобильный сайт:

Доступен выбор одной из трех предлагаемых моделей телефонов:

Доступен выбор одной из трех предлагаемых моделей телефонов:

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

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

Мобильная версия web-ресурса для сайтов, разработанных на WP

Оптимизируя веб-ресурс под мобильные устройства в WP наиболее простым вариантом будет просто изменить тему на адаптивную. Можно также установить специальный плагин для мобильной версии. Если используется тема с адаптивным дизайном, то сайт будет выглядеть следующим образом в десктопной версии:

Мобильная версия web-ресурса для сайтов, разработанных на WP

Такой вид будет иметь мобильная версия сайта:

Такой вид будет иметь мобильная версия сайта:

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

Для выбора нужной темы необходимо перейти «Внешний вид» — «Темы» — «Добавить новую»:

Для выбора нужной темы необходимо перейти «Внешний вид» - «Темы» - «Добавить новую»:

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

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

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

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

Кроме того, для WP можно применять и другие плагины:

  1. AMP для WordPress – ускоренные мобильные страницы

Кроме того, для WP можно применять и другие плагины:

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

Принцип работы таков: проводится создание дубликата сайта, используя AMP HTML. Скрипты, замедляющие скорость загрузки будут отключены. После этого страницы веб-ресурса будут обрабатываться средствами Гугл для скорейшей загрузки.

Плагин следует установить и активировать. После чего можно приступать и к его настройке: раздел «AMP» — «Settings». Теперь можно загружать логотип и сохранять все внесенные изменения:

Плагин следует установить и активировать. После чего можно приступать и к его настройке: раздел «AMP» - «Settings». Теперь можно загружать логотип и сохранять все внесенные изменения:

После необходимо перейти в «Design», чтобы можно было корректировать внешний вид мобильной версии веб-ресурса:

После необходимо перейти в «Design», чтобы можно было корректировать внешний вид мобильной версии веб-ресурса:

Необходимо выбрать тему оформления:

Необходимо выбрать тему оформления:

Теперь можно вносить свои изменения. Раздел «Global» позволяет подобрать нужный цвети шрифт. «Header» откроет возможности настройки хэдера и футера, например, будет можно добавить кнопку совершения звонка. «Social» предоставит возможность добавить кнопки социальных площадок.

В разделе «Advance Settings» необходимо выставить перенаправление на АМР-версию веб-ресурса для мобильных гаджетов после того, как все настройки будут завершены:

Advance Settings

После проведенных операций сайт на мобильных гаджетах будет отображаться так:

После проведенных операций сайт на мобильных гаджетах будет отображаться так:

  1. WPtouch

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

WPtouch

Теперь можно активировать плагин и начинать его настраивать:

Теперь можно активировать плагин и начинать его настраивать:

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

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

Есть возможность регулировки цветового оформления веб-ресурса, а также добавления иконки, если она нужна. Можно предварительно просмотреть все внесенные изменения на эмуляторе:

Есть возможность регулировки цветового оформления веб-ресурса, а также добавления иконки, если она нужна. Можно предварительно просмотреть все внесенные изменения на эмуляторе:

После того как все изменения будут внесены, в реальности веб-ресурс будет иметь такой вид:

После того как все изменения будут внесены, в реальности веб-ресурс будет иметь такой вид:

В футере будут показываться кнопки, позволяющие переключать версии сайта:

В футере будут показываться кнопки, позволяющие переключать версии сайта:

Кроме этих двух, можно также применять и другие:

  • PageBuilder – конструктор, позволяющий создавать адаптивный дизайн:

PageBuilder

  • Mobile Smart – способен определить, какое устройство использовалось для посещения сайта пользователем, и демонстрирует необходимую версию веб-ресурса:

Mobile Smart

  • WP Mobile Edition – предоставляет возможность создания мобильной версии веб-ресурса на субдомене:

WP Mobile Edition

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

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

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

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

<link rel=»alternate» href = «m.domen (ru) /страница/» >

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

<link rel=»canonical» href = «domen (ru) /страница/» >

Вот так будет выглядеть десктопная версия веб-ресурса:

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

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

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

Осуществление проверки отображения сайта на различных устройствах

Применение специальных инструментов, например, Screenfly, даст возможность посмотреть, как будет отображаться веб-ресурс на различных мобильных устройствах:

Осуществление проверки отображения сайта на различных устройствах

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

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

Данный сайт, как видно, не был адаптирован под мобильные гаджеты:

Данный сайт, как видно, не был адаптирован под мобильные гаджеты:

Подведение итогов

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

  1. В большинстве случаев адаптивный дизайн будет оптимальным вариантом. Он достаточно прост в выполнении, но при условии, что у вас есть необходимые знания и умения;
  2. Можно прибегнуть к помощи конструкторов мобильных веб-ресурсов. Однако, они по большей части, являются платными или же имеют какие-то ограничения функциональных возможностей;
  3. Самым простым вариантом, для веб-ресурсов, которые создавались на WP, является применение готовых шаблонных решений или применение плагинов;
  4. Если портал крупный, то оптимальным вариантом будет использование поддомена для отдельной мобильной веси сайта.
Web-студия MyMaster 5,00 из 5 на основе 1 оценок. Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
Статьи по теме
Закажите бесплатную консультацию!

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

Узнать стоимость сайта
  • Отправьте нам заявку на бесплатный просчет стоимости сайта и наш специалист с Вами свяжется. Или звоните:
    066-55-303-88 093-55-303-88 098-55-303-88

  • Расширенная формаСкачать бриф
Сделать оценку проекта?
мы выпустили книгу Интернет магазины секреты
успеха
Подробнее