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

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

  1. Если вы не знаете, оптимизирован ли ваш сайт, пройдите специальную проверку.
  2. Если сайт создан с помощью системы управления контентом (например, WordPress), прочитайте о том, как ее настроить.
  3. Если вы обладаете достаточными техническими знаниями, начните с выбора конфигурации.

Зачем делать сайт удобным для пользователей мобильных устройств?

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

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

В США 94 % пользователей смартфонов ищут локальную информацию с помощью своих телефонов. При этом 77 % поисковых запросов выполняются из дома или с работы, где наверняка есть компьютеры.

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

С чего начать?

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

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

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

Три принципа создания сайтов для мобильных устройств

1. Сайт должен быть удобным.

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

Определите вероятные действия своих посетителей

Проанализируйте действия, которые совершает пользователь при посещении сайта, чтобы сделать их максимально простыми для владельцев мобильных устройств. Подумайте, нельзя ли сократить количество таких действий, и в целом постарайтесь сделать интерфейс как можно более удобным. В примере выше клиент попадает на сайт после того, как вводит поисковый запрос "Купить лампу" (экран 1), просматривает ассортимент (экран 2), а затем покупает понравившийся товар (экран 3).

2. Чем проще взаимодействовать с сайтом на мобильных устройствах, тем он эффективнее.

Пользователь, просматривающий сайт на мобильном устройстве

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

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

3. Шаблон, тема или дизайн мобильной версии должны быть выполнены в одном стиле для всех устройств (для этого можно использовать адаптивный дизайн).

Адаптивный дизайн подразумевает, что у страницы одинаковый URL и код на всех устройствах и она автоматически подстраивается под экран компьютера, планшета или смартфона. Google рекомендует использовать именно этот вариант. Его преимущество заключается в том, что вам нужно будет поддерживать всего один сайт вместо двух. Например, если у вас было два сайта (www.example.com для компьютеров и m.example.com для мобильных устройств), то останется только www.example.com для всех посетителей.

Один сайт для всех устройств

Страница сайта с адаптивным дизайном подстраивается под размеры экрана. При этом ни ее URL, ни код не изменяются. На всех трех устройствах, показанных выше, открыт один адрес – www.example.com, а не отдельные версии для смартфонов (m.example.com) и планшетов (t.example.com).

"Благодаря адаптивному дизайну сайт Baines & Ernst одинаково хорошо выглядит на экранах разных размеров. При этом специалистам компании не пришлось создавать несколько его версий. В результате пользователи за один визит стали посещать на 11 % больше страниц, а количество конверсий с мобильных устройств увеличилось на 51 %."

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

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

Три совета для начинающих создателей сайтов

  1. Не забывайте о своих мобильных пользователях. Помните, что посетители заходят на ваш сайт с определенной целью, например прочитать интересную статью или узнать адрес вашего магазина. Создавая мобильную версию, постарайтесь упростить им эту задачу. Недостаточно просто урезанной версии в мобильном формате. Нужно создать сайт, который адаптирован для мобильных устройств (т. е. действительно удобен для пользователей и оптимизирован для выполнения стандартных задач).
  2. Не размещайте мобильную версию сайта в другом домене, субдомене или подкаталоге. Google поддерживает различные конфигурации сайтов для мобильных устройств, однако чем больше у вас разных URL, тем сложнее обслуживать и обновлять сайт и тем чаще возникают технические проблемы. Гораздо проще использовать адаптивный дизайн, чтобы обычная и мобильная версии сайта находились по одному и тому же URL. Google рекомендует именно этот вариант.
  3. Не бойтесь использовать проверенные решения. Вы всегда можете найти хорошие идеи или подходы на других сайтах. Даже если конкуренты создали мобильный сайт раньше вас, никто не запрещает вам перенять их опыт.