В современном мире люди все чаще предпочитают стационарному компьютеру мобильные устройства, а информацию получают в основном с помощью смартфона. В 2016 году мобильный трафик в России вырос на 48%. Официальных данных по 2017 году пока нет, но аналитики уверены, что показатели продолжат расти высокими темпами. Мы собрали для вас основные аспекты, которые необходимо учесть при разработке мобильной версии сайта или создании адаптивного дизайна.
1. Сайт должен легко загружаться на мобильном устройстве
Если ссылка на ваш сайт очень долго загружается, пользователь вряд ли будет ждать – вероятнее всего, он просто уйдет к вашему конкуренту, чей сайт загрузится быстрее вашего. Следовательно, ваш ресурс должен быть легким – без различных спецэффектов, пожирающих дорогостоящий мобильный трафик. Картинки стоит сделать меньшего размера, чем на полной версии сайта. Все равно экран мобильного устройства имеет меньшее разрешение, чем экран стационарного компьютера, какой смысл ставить фотографии высокого качества, если они только тормозят загрузку вашего ресурса?
Причиной медлительности может быть не только «тяжесть» вашего ресурса. Хостинг сайта должен быть нормально доступен из сетей основных мобильных операторов. Для этого лучше, чтобы он был отечественным, а не зарубежным. А еще лучше, если датацентр будет расположен в вашем регионе. Проверить скорость загрузки можно через Google сервис.
2. Читаемый шрифт и удобные тач-элементы
Любой текст должно быть удобно читать. Для этого шрифт на сайте должен быть приемлемого размера, особенно, если дело касается мобильной версии. Экран смартфона и так довольно небольшой, не надо здесь мельчить. Это же касается и кнопок. «Купить», «перейти на другую страницу» и другие тач-элементы должны быть такого размера, чтобы человек даже с очень полными пальцами мог без проблем их нажать. Компания Apple, кстати, рекомендует делать тач-элементы минимум 44px на 44px.
3. Мобильная версия сайта должна удобно читаться с любых устройств с любой диагональю
Есть такие ресурсы, которые прекрасно просматриваются с планшента, но при заходе со смартфона просто обрезают часть необходимой информации. Это жутко неудобно. Проверьте на максимальном количестве устройств, как работает мобильный дизайн сайта. Вы же не хотите, чтобы ваш стройный и красивый сайт вдруг превращался в кривобокого уродца? Если под рукой нет большого разнообразия дейвасов, вам на помощь сервис Quirktools. Всего в пару кликов здесь вы сможете посмотреть, как смотрится ваш сайт на широких мониторах, экранах мобильных и планшетов, и даже не телевизорах.
4. Номер телефона, на который можно позвонить, просто нажав на него
Номер телефона на вашем сайте должен быть заполнен правильно - здесь мы имеем ввиду не порядок цифр, а такие ошибки, как неполный номер без кода страны или даже без кода региона. Некоторые ухитряются даже разместить телефон в виде картинки! А как потом клиент должен его набирать? Записывать на бумажку, и забивать цифры в смартфон с нее, вместо того, чтобы просто нажать на нужный номер? Особенно, если он на улице в транспорте или, тем более, за рулем. Другими словами, не хотите терять клиентов, будьте добры позаботиться о их комфорте. Тем более, для этого есть множество бесплатных виджетов, которые встраиваются в адаптивные сайты или мобильные версии.
5. Удобное заполнение данных для пользователей
Заполнять данные с мобильного устройства жутко неудобно, поэтому, если у вас на сайте есть анкета, сделайте ее максимально короткой и обеспечьте запоминаемость уже введенных данных вашего пользователя в случае, если у него вдруг отпадет интернет. Ну, чтобы по несколько раз не приходилось заполнять заявку. Сделайте поля для заполнения простыми и удобными. Если пользователю нужно заполнить номер телефона, сделайте так, чтобы на его смартфоне сразу всплывала клавиатура с цифрами, а не с буквами. Для этого в поле телефона нужно прописать input type=«tel».
6. Любой контент мобильного дизайна сайта должен без проблем воспроизводиться
Есть множество плееров, которые не воспроизводят контент на мобильном устройстве без специально скачанного приложения. К таким, например, относится Flash. Избавьтесь от него, не перегружайте смартфоны и мозг ваших пользователей. Вообще старайтесь не использовать неадаптированные под мобильную версию виджеты и поп-апы – они замедлят прогрузку вашего сайта, и вы можете потерять пользователей.
7. Оставьте пользователю возможность перейти на полную версию сайта
Как мы уже писали выше, мобильная версия должна быть легкой, именно поэтому в ней есть далеко не все, что есть на полной версии. Вполне возможно, что вы пожертвовали некоторыми функциями, которые одному клиенту особо не нужны, зато жизненно необходимы другому. На всех не угодишь, да и не надо. Просто при разработке сайта оставьте вашим пользователям кнопку «перейти на полную версию сайта», и он сам найдет именно то, что ему нужно. Быстрая, легкая и удобная в пользовании мобильная версия сайта обеспечит вам постоянный прирост трафика и, как следствие, благодарных клиентов. А если не хотите заморачиваться с отдельным созданием сайта под смартфон, вы всегда можете воспользоваться шаблонами Ucraft с уже встроенной адаптацией под различные устройства.