Мобільна адаптація

Мобільна адаптація: як це робиться на практиці

Давайте розберемося, з чого складається процес адаптації сайту під мобільні пристрої, який необхідний сьогодні абсолютно всім сайтам. Відразу відзначимо, що цей процес не має єдиного певного алгоритму дій, тому розглянемо, як це робимо ми . Поїхали!

Правила

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

Повинно бути

  • Швидке завантаження мобільної версії

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

  • Замість текстових посилань – тапи

    Тобто кнопки і форми, зручні для кліка пальцем, а не курсором.

  • Дзвінок з сайту

    Ткнути пальцем і моментально подзвонити – це базова можливість адаптивної версії.

  • Текст і фото – під екран пристрою

    Повинні бути видимими і читабельними без масштабування.

Не повинно бути

  1. Флеш-відео

    Багато мобільні пристрої не підтримують такий формат.

  2. Великих меню

    Розгалужені меню зручні на немобільні сайті, але в адаптивної версії вони недоречні.

процес

Адаптацію сайту під мобільні пристрої вже зараз можна віддати машинам. В інтернеті безліч шаблонів, які підженуть ваш сайт під різні екрани девайсів. На ділі ж шаблонна адаптація страждає недугами будь-яких автоматизованих процесів, а саме – не враховує нюансів і аспектів сайту, специфіки ваших клієнтів і галузі бізнесу. Тому перший етап адаптації завжди полягає в проведенні дослідження і отриманні інформації від клієнта.

1 етап

Важливо домовитися ще на початку, що потрібно клієнтові, зрозуміти, як на його сайт реагують мобільні користувачі, на що вони клацають, як себе ведуть. Для цього ми вивчаємо поведінку користувачів, проводимо інтерв’ю з клієнтом, складаємо портрети користувачів і сценарії їх поведінки на сайті. Після складання такого документа, він узгоджується з клієнтом, вносяться правки.

2 етап

Складається список екранів для мобільного сайту з основними елементами (меню, кошик). Кількість екранів безпосередньо залежить від дій і інтересів мобільних користувачів. Крім того, обов’язково вивчаються адаптовані під мобільні сайти конкурентів, на яких розглядаються вдалі і невдалі рішення по адаптації. Нарешті створюється інтерактивний прототип адаптованого сайту.

3 етап

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

4 етап

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