Начало работы

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

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

Помогите посетителям своего сайта найти то, что их интересует: записи в вашем блоге, адрес компании или отзывы о ваших товарах. Аби Дхар (Abhi Dhar), вице-президент и технический директор по электронной торговле в компании Walgreens, излагает этот принцип так: "С помощью мобильных технологий мы хотим облегчить жизнь наших клиентов".

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

Проанализируйте все действия, которые совершает пользователь при посещении сайта, чтобы сделать их максимально простыми для владельцев мобильных устройств. Подумайте, нельзя ли сократить количество таких действий, и в целом постарайтесь сделать интерфейс как можно более удобным. В данном примере (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.

Ошибка № 3. Не используются проверенные оптимальные решения

Вы всегда можете найти хорошие идеи или подходы на других сайтах. Может, ваша компания реализовала мобильную версию не раньше всех в отрасли, зато у вас есть шанс позаимствовать стратегии и приемы у первопроходцев. Множество полезных идей вы найдете на сайте The Mobile Playbook, а также в разделе с историями успеха на ресурсе Think with Google.