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

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

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

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

На сегодняшний день разные авторитетные организации дают данные своих исследований об использовании пользователями мобильных устройств для входа в глобальную сеть. Все они предоставляют данные в диапазоне 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:

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

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

    • 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»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. WPtouch

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. В большинстве случаев адаптивный дизайн будет оптимальным вариантом. Он достаточно прост в выполнении, но при условии, что у вас есть необходимые знания и умения;
    2. Можно прибегнуть к помощи конструкторов мобильных веб-ресурсов. Однако, они по большей части, являются платными или же имеют какие-то ограничения функциональных возможностей;
    3. Самым простым вариантом, для веб-ресурсов, которые создавались на WP, является применение готовых шаблонных решений или применение плагинов;
    4. Если портал крупный, то оптимальным вариантом будет использование поддомена для отдельной мобильной веси сайта.
    Наши работы
    • УкрОборонПром
      Государственный концерн
    • Veladis
      Идеальные морепродукты из 40 стран мира
    • Досягай
      Школа футбола Алексея Гая
    • Шустов
      Музей Шустова
    • Хлебные технологии
      Одним из крупнейших производителей тонкого лаваша на территории Украины с 2009 года.
    • Vestum
      Торговая марка светодиодного освещения
    Как адаптировать сайт под мобильные устройстваКак адаптировать сайт под мобильные устройстваКак адаптировать сайт под мобильные устройстваКак адаптировать сайт под мобильные устройстваКак адаптировать сайт под мобильные устройства 5.00/5 1
    Как адаптировать сайт под мобильные устройстваLoading...
    Статьи по теме
    Закажите бесплатную консультацию!

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

    Узнать стоимость сайта

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

      • Расширенная формаСкачать бриф
      Сделать оценку проекта?