pplay

Інструкція по адаптації сайту до мобільних пристроїв

Site Guide for adaptation to mobile devices

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

В современном мире популярность смартфонов и серфинга в интернете с помощью подобных гаджетов растет с каждым годом, и вопрос об адаптации сайта под мобильный трафик становится все более актуальным. Помимо стандартных целей – привлечения потенциальной публики и увеличения количества вхождений есть еще одна: уже сейчас Google помечает адаптивные к мобильным устройствам интернет ресурсы значком «Mobile-Friendly». Сам значок никаких привилегий не дает, но вот его обладатели получают трафик сайтов, которые не адаптированы под мобильные гаджеты. Интересно, не так ли?

Хотите, чтобы именно Ваш ресурс был всегда популярным? Тогда вам пригодится гайд по адаптации сайтов к мобильным устройствам!

 

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

Согласно данным Google, в 2016 году мобильный трафик в Украине в долевом соотношении превысил популярность посещений сайтов с компьютеров. Согласно этим данным около 60% пользователей заходили на сайты потребительского рынка товаров и услуг со смартфонов и планшетов. С каждым последующим годом наблюдается тенденция роста мобильного трафика этого сегмента. Взгляните на график использования операционных систем для мобильных девайсов и компьютеров:

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

Впечатляет рост популярности ОС Android, правда? Кстати, вы также легко можете увидеть количество вхождений с мобильных устройств на ваш сайт с помощью ресурса Google Analytics. Для этого необходимо:

  • 1. Выбрать меню «Обзор аудитории» и активировать «Добавить сегмент»;
    Руководство по адаптации сайта к мобильным устройствам
  • 2. На открывшейся странице установить флажок напротив следующих значений: «Трафик с мобильных устройств», «Трафик с планшетных ПК» и «Трафик со смартфонов и планшетных ПК» и нажать применить;
    Руководство по адаптации сайта к мобильным устройствам
  • 3. В «Обзоре аудитории» оцените долю общего мобильного трафика. Также учтите и долю трафика с разных устройств.
    Руководство по адаптации сайта к мобильным устройствам

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

Признаки Mobile-Friendly ресурса

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

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

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

      • Шаг 2. Замените ссылки на кликабельные кнопки. «Синдром толстых пальцев» - новое явление, которое наблюдается у пользователей, посетивших неадаптивный сайт с мобильного устройства. Но какие же должны быть «размеры» кнопок?
        • Apple рекомендует создавать кнопки 44*44 пикселя;
        • Nokia считает минимально допустимыми – 48*48 пикселей;
        • Microsoft отдает предпочтение 34*34 пикселя.
        Стоит также понимать, что близко расположенные друг к другу кнопки будут вызывать дискомфорт при нажатии, независимо от их размеров.
        Руководство по адаптации сайта к мобильным устройствам

Mobile-friendly кнопки и элементы навигации вы можете создать с помощью разных плагинов CMS.

Руководство по адаптации сайта к мобильным устройствам
      • Шаг 3. А вы точно используете удобные формы? Очень часто с мобильных устройств заходят для оформления подписки, заказа продуктов и т.д. И очень неудобно, если формы не адаптированы для заполнения с мобильных устройств. Проверить это достаточно просто: зайдите на свой же сайт с телефона и проверьте это. Если необходимо «увеличивать» форму или вы не видите поля для заполнений, то формы не адаптированы.
        Руководство по адаптации сайта к мобильным устройствам
      • Шаг 4. Читабельный контент. Для пользователей с любой диагональю гаджета текст должен быть легко читаемым. Для этого есть несколько правил:
        • 1. Необходим короткий и завлекающий заголовок. Длина не больше 10 слов и шрифт обязательно крупный;
        • 2. Тексты разделены на разделы и подзаголовки;
        • 3. Обязательно наличие списков;
        • 4. Также немаловажен визуальный контент, который не только улучшает структуризацию текста, но и облегчает восприятие информации.
          Руководство по адаптации сайта к мобильным устройствам
      • Шаг 5. Необходимо адаптировать e-mail письма к мобильным устройствам для легкого восприятия и чтения.

Не теряйте трафик - станьте участником новой мобильной эры!

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

Подивіться як виглядає ваш сайт на смартфоні або планшеті

See how your site looks on a smartphone or tablet

Посмотрите как выглядит ваш сайт на смартфоне или планшете