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

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

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. Google рекомендует именно эту конфигурацию.

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

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

Что нужно учесть при сотрудничестве с разработчиком?

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

1. Попросите у нанимаемого разработчика рекомендации и портфолио уже сделанных сайтов.

Спросите разработчика, приходилось ли ему заниматься раньше адаптивным веб-дизайном (АВД) или есть ли у него опыт преобразования обычной версии сайта в адаптивную. Посетите созданные им веб-ресурсы, обсудите с его партнерами и прежними заказчиками их впечатления от сотрудничества. Также советуем проанализировать сайты разработчика с помощью инструмента PageSpeed Insights. Он позволяет выявить факторы, которые замедляют загрузку страницы или препятствуют комфортному взаимодействию с веб-страницами.

В руководстве по основам веб-дизайна описано, как PageSpeed Insights помогает протестировать скорость загрузки и удобство сайта.

2. Объясните разработчику потребности и желания клиента, пользующегося мобильными устройствами.

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

3. Попросите разработчика обеспечить высокую скорость загрузки.

Клиенты не должны долго ждать загрузки страницы. Спросите разработчика, знает ли он об инструменте PageSpeed Insights (см. выше) и может ли ускорить загрузку страницы. Оговорите в контракте, что страницы должны загружаться не хуже, чем у конкурентов, согласно инструменту WebPagetest. Или, если этого слишком сложно добиться, оговорите обязательство получить в инструменте PageSpeed Insights зеленую отметку без проблем, которые "Нужно исправить". Если страницы не получат зеленую отметку, то вам вместе с разработчиком придется решить, стоит ли исправлять проблему. Больше полезной информации об ускорении загрузки вы найдете в видео Как повысить скорость загрузки сайта.

4. Попросите разработчика добавить решения для веб-аналитики.

Средства веб-аналитики, например Google Аналитика, позволят вам получать статистику использования вашего сайта.

5. Попросите разработчика изучить Рекомендации для веб-мастеров от Google.

В этих рекомендациях можно узнать, как Google находит, обрабатывает и оценивает контент вашего сайта.

6. Оговорите в контракте улучшение мобильной версии сайта после его первого запуска.

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

Не забудьте изучить список разработчиков, рекомендуемых Google AdWords. Подробнее о создании мобильной версии сайта

Оставить отзыв о...

Текущей странице