Качество мобильной адаптации сайта — одна из ключевых характеристик в веб-разработке. Половина ваших покупателей увидит сайт со смартфона или планшета. Поэтому в сегодняшней статье мы разберем 13 главных требований к мобильной адаптации сайта. Причем опишем их доступным языком, не уходя в технические детали слишком глубоко.
Итак, для сайта с грамотно реализованной мобильной адаптацией характерны следующие особенности:
1. Отсутствует горизонтальная прокрутка
Горизонтальная прокрутка на сайте — ужасающий моветон. Во-первых, это неудобно с практической точки зрения. Для того, чтобы посмотреть вторую половину контента, приходится запоминать, что было в первой. Во-вторых, даже для мало что понимающего в веб-разработке пользователя это сигнал о том, что сайт какой-то «допотопный». Горизонтальная прокрутка сейчас редко встречается даже на морально устаревших сайтах.
2. Есть лаконичное, аккуратное меню
Недопустимо использование громоздких конструкций, текстовки не должны быть слишком длинными. Например, на разработанном нами сайте психологического центра название каждого пункта меню исчерпывается одним словом, все крупно:
Лаконичность не исключает дополнительных функций. Например, в приведенном выше примере удобно найти интересующую информацию на сайте, воспользовавшись функцией поиска.
3. Нет огромных всплывающих окон
Нельзя допускать ситуацию, когда всплывающее окно занимает весь экран мобильного устройства. Это выглядит очень агрессивно. Попытки привлечь внимание пользователя любой ценой не оправдывают возложенных на них надежд. Тем более, что показ рекламы на мобильных устройствах требует особого подхода.
4. Используются простые формы
Вообще, формы регистрации должны быть простыми и на десктопах. Современный пользователь не любит заполнять длинные анкеты. Однако, в случае с мобильными устройствами заполнение длинной формы еще и неудобно. Желание собрать как можно больше информации о потенциальном клиенте понятно, но велик риск того, что человек просто не станет заполнять длинную форму или его что-то отвлечет.
5. Нет мелких элементов
Даже у самых продвинутых смартфонов совсем небольшие экраны. Это практически исключает возможность использования каких-либо слишком мелких элементов в дизайне. Ведь иначе пользователю придется напрягать глаза или увеличивать текст.
Нужно помнить, средняя величина подушечки пальцев составляет 10 мм. То, есть нам трудно попасть на экране в мелкие элементы. Специалисты по юзабилити называют это «синдром толстых пальцев». Неудивительно, что в рекомендациях для разработчиков интерфейсов в Android прямым текстом рекомендуют делать кликабельные элементы не менее 7 мм шириной (либо 48 пикселей).
Также следует позаботиться о легкости прочтения текстов. Для этого желательно придерживаться официальных рекомендаций от разработчиков наиболее распространенных операционных систем мобильных устройств — iOS и Android.
Еще желательно, чтобы текст не был абсолютно черным. Слишком высокая контрастность текста и фона утомляет глаза. Именно поэтому обычно тексты на сайтах темно-серые. В том числе и этот, кстати.
6. Используются относительные, а не абсолютные размеры
Не стоит указывать размеры изображений или шрифтов в пикселях. Иначе получится, что нормальные для десктопа изображения будут выглядеть гигантскими на смартфоне. Для шрифтов следует указывать размер в относительных величинах (еm), а для изображений в процентах относительно соответствующего контейнера.
7. Текст в одну колонку
Тексты должны размещаться в один столбец. Нельзя использовать несколько колонок текста, как на десктопах. Иначе будет выглядеть слишком мелко. Оптимальный размер строки составляет 45-60 символов.
Кроме строчки текста на одной линии может присутствовать только аккуратно отрисованная иконка, как на сайте, разработанном нами для стоматологической клиники «Альдента».
8. Используются карточные интерфейсы
При этом виде преподнесения данных контент располагается в прямоугольных контейнерах, которые могут перемещаться в другом порядке при адаптации под определенное устройство. Правда, не следует это воспринимать как абсолютную панацею. То, что подходит для сайта-агрегатора, может оказаться совершенно неприемлемым для претендующего на изысканность оригинального дизайнерского проекта.
9. Исключены лишние детали
Мобильная адаптация дисциплинирует в плане разработки сайта и на уровне заполнения контентом. Из-за небольшого размера экрана необходимость выражать свои мысли лаконично и емко приобретает еще большее значение. Оставляем самое важное, остальное скрываем. На десктопах для этого используются раскрывающиеся виджеты вроде аккордеона. Можно экспериментировать с ними и на мобильных.
10. Не приходится долго скроллить, чтобы добраться до основного контента
Один из признаков плохо оптимизированного сайта: громоздкая шапка занимает несколько экранов, которые пользователь прокручивает, прежде чем перейти к изучению основного контента.
11. Сайт достойно выглядит на разных версиях мобильных устройств
Мобильные устройства сильно отличаются друг от друга. Отображение сайта на дорогом планшете и бюджетном смартфоне сильно разнится. Такие моменты должны учитываться на стадии мобильной адаптации сайта.
12. При ускорении загрузки мобильным уделяется должное внимание
Когда к нам обращаются клиенты с тяжелой ситуацией по скорости загрузки сайта на десктопах, на мобильных устройствах она часто оказывается попросту катастрофической. При грамотном подходе это решаемый вопрос, однако страшно вообразить, сколько клиентов уходит с таких страниц на сайты более проворных конкурентов. Если вы обнаружили, что ваш сайт зависает на мобильных, свяжитесь с нами прямо сейчас, не теряйте деньги. Нам такие вопросы решать не впервой. Вот, например, на сайте booknets.ru мы увеличили скорость загрузки на мобильных устройствах в два раза, вывели ее в зеленую зону по Google Speeds Insights:
13. Используются векторные иконки
Все большую популярность набирают иконки в формате SVG. В этом формате используются математические формулы, позволяющие масштабировать изображения до беконечности.
Преимущества мобильной адаптации
Google еще несколько лет назад официально заявил о переходе на Mobile First — то есть, первичное внимание уделяется качеству мобильной адаптации сайта. Тесты наподобие Google Mobile Friendly уже давно активно используются веб-разработчиками.
Согласно исследованию Global Digital 2021, средний пользователь проводит в интернете с мобильного устройcтва 3 часа и 39 минут ежедневно. Внушительные цифры, не так ли?
Поэтому мы рекомендуем вам уделить особое внимание мобильной адаптации при разработке нового сайта или аудите уже существующего. Посмотрите свой веб-ресурс с разных устройств, убедитесь в его достойном отображении. Также отметим: все наши Заказчики получают сайты, достойно выглядящие даже на смартфонах с небольшим экраном. Вы можете в этом удостовериться, посмотрев наше портфолио. В каждом графическом кейсе мы показываем, как разработанный сайт отображается на смартфонах. Все главные функции сохраняются, веб-ресурсы не теряют своих маркетинговых достоинств из-за того, что пользователь просматривает их с бюджетного смартфона, сидя в пробке где-нибудь на Калужском шоссе.
Надеемся, что эта статья была для вас полезной. И пускай ваш сайт конвертит на мобильных устройствах по максимуму!
Комментарии