Согласно недавнему исследованию, четверть всех американцев используют мобильные устройства только для того, чтобы получать доступ к сети. Каждый пятый житель планеты владеет смартфоном, и больше половины из них используют смартфон для просмотра интернета.
Если ваш веб сайт плохо выглядит на мобильных устройствах, то вы теряете большую часть мобильных пользователей. Настало время адаптивного дизайна. И если вы испытываете трудности в начале пути, то вот несколько советов, которые помогут их преодолеть.
1. Mobile First
Прежде, чем начать планировать дизайн для лэптопов или десктопов, подумайте о мобильных устройствах. Множество дизайнеров практикуют концепцию mobile first. Почему? Потому, что мобильные устройства становятся всё более актуальными.
Примерно 1 из 7 человек использует мобильные устройства для получения доступа к интернету. Сначала обращайте внимание на то, как с вашим веб сайтом взаимодействуют пользователи мобильных устройств, а уже затем создавайте дизайн для больших экранов.
2. Познакомьтесь с медиа запросами
Медиа запросы — это функция CSS3, позволяющая контенту реагировать на различные условия на определенном устройстве. Медиа запросы проверяют разрешение экрана, его высоту, ширину, и ориентацию. Затем эта информация используется для определения того, какое правило будет применено. Медиа запросы — это та сила, которая стоит за адаптивным дизайном.
3. Поймите, что для ваших пользователей значат мобильные устройства
Смартфоны и десктопы предлагают отличные друг от друга способы взаимодействия с веб сайтами. Используйте аналитику, чтобы понять почему пользователи посещают ваш сайт с мобильного телефона. Возможно они хотят быстро получить информацию при помощи панели поиска. Если это поведение доминирует, то выделите панель поиска, и сделайте ее постоянно видимой.
4. Используйте проценты
Одна из самых сложных частей адаптивного дизайна — применение плавающей сетки. Плавающая сетка работает вместе с медиа запросами для отображения контента в разных областях.
Вместо создания брейк-поинтов для каждой отдельной области просмотра, вы размечаете всю область. Затем, определяете высоту и ширину в пропорциях, а не пикселях. Это позволяет веб сайту перестраивать разметку основываясь на процентном соотношении.
5. The Need for Speed
Один из недостатков адаптивного дизайна — скорость загрузки. Недавнее исследование показало, что большинство адаптивных веб сайтов (48%) загружаются примерно за 4-8 секунд. Такое время загрузки было приемлемым в 1997, но сейчас, 64% пользователей ожидают, что сайт загрузится меньше, чем за 4 секунды.
Главная причина, стоящая за этой проблемой — неоптимизированные изображения. Не позволяйте этому стоять на вашем пути. Уменьшите большие изображения при помощи таких инструментов, как Adaptive Images and TinyPNG.
6. Удалите всё ненужное
Избавьтесь от ненужных элементов, при чем это будет полезно не только для UX, но и для скорости сайта. Пользователю будет не очень приятно использовать или смотреть на сайт, перегруженный чрезмерным количеством элементов.
7. Быть или не быть гамбургеру
Гамбургерная иконка — иначе известная как три полосы, показывающие скрытое меню — стала причиной жестоких споров. Кому-то она нравится, кому-то нет, но что же выбрать?
В адаптивном дизайне, лучший выбор — это удобство. Если пользователю постоянно приходится нажимать на иконку для того, чтобы увидеть меню, то в конце концов это его утомит. Поберегите нервы пользователя, и расположите самые популярные опции меню на виду, а менее популярные спрячьте за гамбургер.
8. Удобочитаемость
Не заставляйте пользователя щуриться, или увеличивать текст чтобы его прочитать. Увеличьте текст настолько, чтобы его можно было удобно читать с маленького экрана. Я рекомендую размер 16 рх, 1 еm, или 12 pt.
9. Правильно выбирайте размер кнопок
Экранное пространство — это самое важное на мобильных устройствах. Избегайте кнопок маленького размера. Убедитесь, что ваши кнопки имеют размер, по крайней мере 44х44 рх. Также, я советую использовать объем, вместо окантовки.
10. Учитывайте ориентацию экрана
Согласно статистике, альбомная ориентация (59%) выигрывает у портретной (41%). Создавайте сайт, который будет хорошо смотреться в обоих случаях, но больше внимания уделяйте альбомной ориентации. Убедитесь, что ваши изображения не будут растянуты.
Перевод статьи Жаклин Томас
