Оптимизация сайта под мобильные устройства (управление процессом)

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

Google с 21 апреля 2015 ввел «дружественность» к мобильникам как фактор ранжирования. Вы даже можете автоматически проверить удобство вашего сайта на мобильных устройствах на специальной странице.

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

Добавить на сайт хоть что-нибудь — обычно задача «с подвохом». Когда вы решаете заняться «адаптивкой», сразу появляются вопросы:

• как найти специалиста?
• как ставить задачу?
• сколько это стоит? как это оценить?

Мы делимся собственным опытом адаптации сайта, чтобы помочь вам избежать различных подводных камней.

Нужна ли вообще «адаптивка»?

Наша цель — привлекать заказы с сайта. Сайт должен работать.

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

Крепнущий мобильный интернет — получаем плюсы от пользователей

Ещё в декабре 2013 года (по данным исследования mail.ru) мобильных пользователей было уже 25,5 миллионов.

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

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

Разумеется, мобильный пользователь точно так же может оставляет заявки на сайте — и неправильно его ограничивать! 🙂

Поведенческие факторы — получить плюсы от поисковиков

С 21 апреля 2015 Google — лидер отрасли информационного поиска — станет выше ранжировать сайты, который правильно «подают» контент для мобильных браузеров. А мы конечно же хотим, чтобы выдача на выглядела вот так:

Активность со стороны Google — это еще один сигнал. Остается лишь подождать, и Яндекс последует этому примеру.

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

Этапы разработки и внедрения

Сразу оговоримся, что мы не вдаемся в совсем технические детали. Соответствующей литературы и различных адаптивных технологий — просто уйма. Они так и ждут, пока их начнут применять — и программисты это делать уже умеют. А мы подошли к задаче как менеджеры и для менеджеров написали статью. (Мы даже не стали делать различия между «адаптивным» и «отзывчивым» — просто потому что для конкретной бизнес-задачи это несущественно)

Оптимизация сайта под мобильные устройства состоит из нескольких этапов:

1. подбор исполнителя на фрилансе (если нет штатного);
2. адаптация дизайна под различные экраны;
3. разработка новой верстки в соответствии с дизайном;
4. тестирование и приемка.

Совместить пункты 2 и 3 — это хорошо, но дорого, так как требует участия как минимум двух специалистов: дизайнера и программиста. Обычно такую задачу

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

Шаг 1. Отбираем исполнителей

Работа с фрилансерами — это «своя атмосфера». Они могут срывать сроки или даже пропадать. Мы расскажем про 3 фишки, которые нам помогают.

Фишка-1: Правило для отбора кандидатов от Дэна Кеннеди

Хорошее правило для отбора кандидатов должно быть: простым и одновременно жестким.

Мы в «Промо Эксперте» требуем при подаче заявки отвечать на 3 вопроса (сроки, цена, есть ли портфолио по теме).

Тот, кто на этом этапе начинает «самодеятельность», будет заниматься ей и в ходе проекта. С остальными кандидатами (их где-то 20%) можно обсуждать цены.

Фишка-2: «Вопрос цены»

Есть разные «школы» установления цен.

Опыт нам подсказывает, что высокая цена гарантирует разве что высокое мнение специалиста о своей квалификации, а вот качество исполнения — это вопрос.

Ставьте свободную цену. Смотрите, что предлагают. Остерегайтесь дешевизны при отсутствии нормального портфолио.

Фишка-3: Финансовые потоки

Когда фрилансер получает 100% оплаты, он понимает: здесь ловить нечего.

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

Разбейте оплату на части, не менее 30% — например, 30%-30%-40%. Назначать цену за этап ниже 30% нет смысла, так как эта сумма не будет существенной в глазах исполнителя.

Шаг 2: Разработка дизайна под разные разрешения

Вашему сайту нужно будет «подстраиваться» под следующие разрешения экранов:

1. 479px и меньше (смартфоны),
2. 480-767px (смартфоны, развернутые «в положении лёжа» — landscape),
3. 1023-768px (планшеты),
4. 1024px и более (компьютеры, а также развернутые планшеты).

Дизайнер должен будет сделать из оригинального дизайна вашего сайта 4 варианта.

Обратите внимание, что здесь речь идет об условном разрешении устройств. Оно гораздо выше, чем настоящее: например, ширина iPhone 5 составляет 640 «настоящих» пикселей.

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

Основные вопросы, которые задает дизайнер на этом этапе:

• какой блок нужно обязательно показывать?
• какой блок можно скрывать?
• куда должен уезжать такой-то блок?

Что должно быть на выходе: 4 psd-файла с дизайнами.

Шаг 3: Разработка и внедрение верстки

Этот шаг желательно сделать по методу «одного окна».

То есть: крайне важно, чтобы специалист, выполняющий работу, был ответственен за результат — всю «адаптивность» сайта.

Когда один человек верстает, а другой занимается лишь внедрением этой верстки, можно попасть в ситуацию:

• верстальщик «как на картинке» (в дизайне) и получил деньги — дальше его ничего не беспокоит,
• внедренец обнаружил, что сайт отличается от того, что нарисовано в дизайне и теперь говорит, что нужны доработки.

Получается, что нужно договариваться, чтобы что-то сделали бесплатно (надеясь на чудо — см. выше), или доплачивать деньги.

Гораздо проще сразу найти человека, который сделает работу до конца и возьмет за нее ответственность.

Основные вопросы, которые задает верстальщик:

• какой здесь будет текст — длинный или короткий?
• будут ли «тянуться» картинки?
• можно ли сделать с помощью JavaScript то-то или то-то?

Что должно быть на выходе: сайт с адаптивной версткой (желательно делать на отдельном домене), который можно принимать.

Шаг 4: Тестирование и приемка адаптивного сайта

Для тестирования «адаптивки» хорошо подходит Google Chrome. В этот браузер добавлен специальный функционал. Для этого открываем DOM-Inspector (Ctri+Shift+I) и нажимаем на значок мобильного телефона в левом верхнем углу инспектора.

Вот какую красоту мы видели, когда тестировали наш сайт:

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

На что обратить особое внимание:

1. Блоки не должны «заезжать» друг на друга.
2. Важные элементы (номера телефонов, формы обратной связи, карты) не должны пропадать.
3. Формы обратной связи должны правильно работать.
4. Всплывающие окна не должны перекрывать всю область просмотра.

Итог

Вот и всё. Мы разработали и внедрили мобильную верстку — и проверка Google показывает, что наш сайт оптимизирован для мобильных устройств:

Также мы заметили рост позиций в Google (график за 4 недели):