<
  • Главная
Статьи

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

  1. Частка мобільних користувачів неухильно зростає
  2. Як стати майстром наскрізний аналітики?
  3. Варіанти дружніх до мобільних пристроїв сайтів
  4. Особливості оптимізації сайту під мобільні пристрої
  5. Оптимізація CSS і настройка медіазапросов
  6. Налаштування області перегляду
  7. Оптимізація використовуваних плагінів
  8. додаткові рекомендації
  9. висновок

Ми вирішили розібратися, на що варто звернути увагу власникам подібних ресурсів при оптимізації своїх сайтів.

Частка мобільних користувачів неухильно зростає

Уже кілька років поспіль в своєму щорічному дослідження аудиторії Рунета Яндекс відзначає істотний приріст користувачів, що виходять в інтернет з мобільних пристроїв. Статистичні дані підтверджують ще одну тенденцію, що намітилася - в ряді тематик частка користувачів, які заходять на сайт з різних мобільних пристроїв, вже перевищує частку користувачів ПК. Це прекрасно ілюструють сайти соціальних мереж. Наприклад, станом на жовтень 2014 року мобільна аудиторія Facebook зрівнялася із загальною щодня активною аудиторією сервісу.

Зростає і відсоток покупок, що здійснюються з мобільних пристроїв. за статистикою Google 39% користувачів смартфонів здійснювали покупки за допомогою мобільних пристроїв, 55% користувачів, які шукають на смартфонах інформацію про товари або послуги, планують здійснити покупку протягом однієї години, 83% в той же день. У 47% випадків такий пошук конвертувався в наступну покупку з ПК, в 82% в покупку в офлайн-магазині, в 17% в покупку за допомогою смартфона.

У 47% випадків такий пошук конвертувався в наступну покупку з ПК, в 82% в покупку в офлайн-магазині, в 17% в покупку за допомогою смартфона

Як стати майстром наскрізний аналітики?

Наскрізна аналітика - головна магія інтернет-маркетингу і найпотужніший інструмент розвитку продажів без зростання бюджету. Впровадивши її, ви відразу зрозумієте, де клієнти губляться і що в вашому маркетингу треба поліпшити.
Хочете освоїти цю магію? Ось навчальний курс де детально пояснюють, як все працює, як впроваджувати і як використовувати на практиці.
Поспішайте дізнатися подробиці , Реєстрація скоро закриється!

Реклама

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

Варіанти дружніх до мобільних пристроїв сайтів

В даний час існує три основних рішення для зручного користування сайтом з мобільних пристроїв:

  • Мобільна версія сайту (у деяких сайтів так само є WAP-версія) - це винесені на окремі URL () або навіть окремий піддомен (m.domain.ru/page_1) сторінки сайту. Найчастіше це урізана версія основного сайту з обмеженим функціоналом. Останнім часом мобільні версії втрачають свою актуальність через вдосконалення CSS і ряду недоліків при розборі user-agent-ів на серверах. Додаткове незручність для користувача - необхідність запам'ятовувати кілька URL сайту.
  • Мобільний додаток сайту - спеціальний додаток, розроблене під певну мобільну платформу (iOS, Android, Windows Phone). Привабливо найбільш тісною інтеграцією з платформою, що дозволяє реалізувати звичний для користувачів інтерфейс, також відрізняється високою швидкодією. Виправданий варіант, якщо проект більше розрахований на офлайнову роботу і на мобільних користувачів. Основний недолік - необхідність скачування програми, в іншому випадку користувач бачить повну версію сайту в маленькому масштабі. Тому, навіть якщо у вас є мобільний додаток, цього не достатньо, в будь-якому випадку необхідно робити якісну мобільну версію ресурсу.
  • Сайти з адаптивним дизайном - автоматично адаптується під параметри того пристрою, з якого здійснюється вхід. Істотний плюс - один URL для всіх пристроїв, що позбавляє розробників від редиректів, а користувачів від необхідності запам'ятовувати адресу мобільної версії сайту. Найбільш популярний останнім часом варіант, так як дозволяє працювати над одним сайтом для всіх типів пристроїв і дає суттєву економію на трудовитрати при внесенні змін до сайт і його подальшу оптимізацію.

Особливості оптимізації сайту під мобільні пристрої

Якщо ви хочете зробити сайт дружнім до мобільних пристроїв, вам обов'язково необхідно врахувати три основні складові:

  • оптимізацію CSS і настройку медіазапросов;
  • настройку області перегляду за допомогою спеціальних метатегов;
  • оптимізацію використовуваних плагінів.

Оптимізація CSS і настройка медіазапросов

Перша проблема, з якою стикається користувач, потрапляючи на повну версію сайту з мобільного пристрою і навпаки, - некоректне відображення ресурсу по відношенню до вирішення екрана.

Відбувається це, тому що верстальники, отримуючи макет, за замовчуванням прописують значення ширини або висоти різних елементів в абсолютних величинах (в пікселях) для найпоширеніших дозволів звичайних ПК, наприклад:

.container {width: 210px; height: 200px;}

Уникнути цього можна, якщо при позначення розмірів елементів на сторінці використовувати замість абсолютних величин відносні (наприклад, у відсотках):

.container {width: 21,75%; height: 20,408%;}

Це дозволить елементам сторінки підлаштовуватися під зміни масштабу всієї сторінки.

Налаштування області перегляду

Більшість сайтів при перегляді з екрану невеликого розміру показуються користувачеві в точно такому ж дозволі (зазвичай це близько 980 пікселів), як і при перегляді з ПК, наприклад:

В результаті відвідувачеві доводиться збільшувати необхідну область перегляду, щоб хоч щось розгледіти.

Використання спеціалізованого метатега "viewport" допомагає налаштувати ширину екрану під будь-який пристрій:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

Атрибут "initial-scale = 1" вказує браузеру користувача співвідношення пікселів CSS і пристрої (рівне 1: 1 незалежно від орієнтації дисплея) для коректного відображення в альбомної орієнтації.

Оптимізація використовуваних плагінів

Багато мобільні пристрої і браузери не підтримують або підтримують не всі версії сучасних полігонів, тому рекомендується переглянути необхідність наявності на сторінці плагінів Flash, Silverlight або Java. Багато елементів HTML5 на даний момент дозволяють знайти заміну всім плагинам без втрати якості відображення контенту.

Крім усього іншого скорочення або повна відмова від плагінів на сайті дозволить оптимізувати вагу сторінок, що також позитивно позначиться на його індексації пошуковими системами.

додаткові рекомендації

Крім основних моментів, перерахованих вище, існує маса додаткових налаштувань, які зроблять ваш сайт зручним у використанні з мобільних платформ:

  • Правильно підходите до вибору контрольних точок при завданні процентних величин елементів макета, на цю тему можна почитати гуру адаптивного веб-дизайну - Ітана Маркотт.

Правильно підходите до вибору контрольних точок при завданні процентних величин елементів макета, на цю тему можна почитати гуру адаптивного веб-дизайну -   Ітана Маркотт

Приклад оптимізації тексту під смартфон і ПК

  • По можливості максимально оптимізуйте JavaScript.
  • Використовуйте зрозумілу навігацію по сайту у верхній частині сторінок. Особливо це актуально для сайтів з гнучким дизайном. Пам'ятайте, що при «серфінгу» з мобільної платформи користувачеві повинно бути так само зручно користуватися сайтом, як і з ПК. Ясна меню і зручна навігація дозволять не загубитися на сторінках ресурсу. Хороший варіант верстки Лендінзі з адаптивним дизайном - http://www.theverge.com/a/virtual-reality .

com/a/virtual-reality

Приклад навігації по сайту з адаптивним дизайном на екрані ПК і смартфона

  • Не нехтуйте стисненням gzip або deflate, це позитивно впливає на швидкість завантаження сторінок сайту на всіх пристроях.
  • Обов'язково застосовуйте кешування зображень.
  • Зафіксуйте до і після доопрацювань значення таких показників, як час і глибина перегляду сторінок, показник відмов, основні позиції сайту за всіма ключовими запитами, а також статистику по мобільних пристроїв і технологій. Це дозволить оцінити, чи всі ви зробили правильно.

висновок

Мобільний пошук активно розвивається і вже в найближчі роки займе велику частку ринку. Якщо ви хочете йти в ногу з часом, випереджати своїх конкурентів, або хоча б не відставати від них, не нехтуйте оптимізацією сайту під мобільні пристрої. Це гарантований додатковий трафік і конверсії в продажу.

Як стати майстром наскрізний аналітики?
Хочете освоїти цю магію?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

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

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

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

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью