Макет, контент и скорость – вот три кита, на которых базируется успех сайта у пользователей.

Макет

  • Ориентируйтесь на сенсорные экраны. Размер элемента, на который можно нажать, должен составлять как минимум 48 пикселей, а промежуток между двумя такими объектами – не менее 8 пикселей. Если элементы интерфейса слишком маленькие, пользователь будет часто промахиваться и в конце концов просто уйдет с вашего сайта.
  • Выберите хороший шрифт. Шрифт должен иметь размер не менее 12 пикселей, быть четким и простым для восприятия. По возможности избегайте использования текста на основе изображений.
  • Задайте подходящую ширину. Интернет-пользователи привыкли прокручивать страницы вверх и вниз, а вот от прокрутки в сторону лучше отказаться: люди могут подумать, что ваш сайт не предназначен для смартфонов.
  • Не используйте элементы, срабатывающие при наведении мыши. На экране компьютера наведение мыши часто используется для показа скрытого содержания. Однако для этого нужна мышь. На сенсорных экранах смартфонов и планшетов пользователь не может навести пальцы вместо мыши. Поэтому для показа скрытого содержания лучше использовать кнопки.
  • Никаких всплывающих окон! На мобильных сайтах они раздражают пользователей ничуть не меньше, чем на обычных. По этой же причине не стоит рекламировать приложение с помощью межстраничных объявлений. Вместо этого добавьте предложение скачать его прямо на сайт.
  • Названия кнопок должны быть понятными. Не заставляйте пользователей гадать, куда они попадут в результате клика. Давайте кнопкам понятные названия, используйте строки навигации и четко определяйте категории (например, "Этап 2: оплата").

Содержание :

  • Не перегружайте сайт информацией. Больше – не значит лучше. Не пытайтесь уместить в мобильной версии весь контент с основного сайта. Но избегайте и другой крайности, а именно...
  • Адаптируйте, а не урезайте. На смартфонах и планшетах должны быть доступны те же основные функции, что и на компьютере (например, возможность просмотреть видео или купить офисные принадлежности). Вместо того чтобы урезать важный контент, реорганизуйте его.
  • Выносите основные операции на передний план. Все основные операции должны быть легкодоступны. Например, если вы занимаетесь электронной торговлей, то поиск товаров, корзина покупок и карта с адресами магазинов должны находиться на переднем плане. Добавьте ссылку на обычный сайт, чтобы у пользователей был выбор.
  • Проверьте медиафайлы. Например, Flash-видео не будет воспроизводиться на многих мобильных телефонах. Убедитесь, что медиафайлы открываются на тех устройствах, для которых они предназначены.
  • Упростите процесс покупки. На мобильных устройствах сложно заполнять длинные формы и вводить полные адреса. Чтобы увеличить количество конверсий, максимально упростите процесс покупки.

Скорость

Чем быстрее загружается сайт, тем лучшее впечатление он оставляет у пользователей. Это особенно актуально для мобильных устройств, которые, как правило, используются на ходу и при медленном интернет-подключении. Высокая скорость загрузки позволяет удержать пользователей и способствует конверсиям. Повысив быстродействие, многие компании увидели положительные результаты и отметили увеличение прибыли. Кроме того, скорость загрузки влияет на рейтинг в Google Поиске.

Ниже перечислены распространенные ошибки.

  • Слишком много HTTP-запросов. Производительность смартфонов ниже, а интернет- подключение может быть ненадежным. Чтобы ускорить работу на мобильных устройствах, уберите элементы страницы, вызывающие дополнительные HTTP-запросы.
  • Слишком большие изображения. Поскольку экраны смартфонов становятся все больше, может возникнуть мысль передавать крупные изображения, чтобы устройство уменьшало их до нужного размера. Плохая идея! Это напрасная трата времени и производительности. Изображения должны соответствовать размеру экрана.
  • Слишком много файлов. Подумайте, нужны ли фрагменты кода JavaScript и стили CSS мобильным пользователям. Слишком много файлов JavaScript и CSS могут снизить скорость загрузки. Максимально сократите свой код и попробуйте реорганизовать стили CSS. Убедитесь, что ресурсы сохраняются в кеше и браузеру не приходится получать их при каждой загрузке страницы.

Подробнее о скорости загрузки и способах ее оптимизации читайте на странице https://developers.google.com/speed.