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

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

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 Analytics, позволят вам получать статистику использования вашего сайта.

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

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

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

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

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

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

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