Советы по оптимизации мобильного веб-дизайна

 

 

В последние годы мобильный трафик значительно вырос и эта тенденция сохраняется. Поэтому важно уделять особое внимание оптимизации своих проектов под мобильные устройства. В этой статье мы рассмотрим практические советы по оптимизации веб-дизайна под мобильные устройства.

 

 

№1: Использование нескольких изображений в сочетании с медиа-запросами

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

Этот подход ярко заметен в большом количестве медиа-запросов под популярные размеры устройств (320 пикселей, 480 пикселей, 768 пикселей). Хотя должен преобладать подход mobile-first (верстка сначала под мобильные устройства), а медиа-запросы писать под десктопные версии.

Поэтому, в следующий раз, когда будете работать над дизайном, попробуйте использовать подход mobile-first:

• Создавайте медиа-запросы под десктопные версии
• Избегайте использования пикселей для контрольных точек. Вместо этого попробуйте работать с em и процентами (относительными единицами) как можно чаще, чтобы сайт подстраивался под уровни масштабирования
• Не забудьте настроить медиа-запросы для адаптации под retina-устройства (т.е. с минимальным разрешением: 192dpi)

 

 

№2: Оптимизация изображений

Даже если у вас полностью отзывчивый дизайн, посетителей может отпугнуть слишком долгая загрузка сайта, и картинки здесь играют большую роль. Пользователи ожидают, что картинки будут загружаться быстро, поэтому вам нужно найти способ уменьшить размер медиа-файлов и сохранив при этом их качество.

Чтобы оптимизировать изображения вы можете использовать подходящие инструменты, например, такие как TinyJPG и TinyPNG. Они позволяют уменьшить размер картинок путем выборочного уменьшения количества цветов, а также удаляя ненужные метаданные.

 

 

№3: Максимально используйте SVG

Масштабируемая векторная графика (SVG) – отличный инструмент для добавления графики на сайт. Этот инструмент особенно полезен для простой графики, например, логотипов, иконок, инфографики и подобного.

Преимущество SVG графики заключается в том, что она масштабируема и легко адаптируется под различные размеры экрана. Кроме того ею легко манипулировать с помощью CSS.

 

 

№4: Используйте правильные шрифты

Мобильный дизайн – это не только изображения. Выбор используемых шрифтов имеет большое влияние на проект, поскольку текст является основным методом передачи информации.

С точки зрения дизайнера выбор правильных шрифтов означает:

• Не используйте мелкий шрифт. Вы же не хотите, чтобы пользователям приходилось увеличивать каждую строку, чтобы прочитать написанное
• Избегайте шрифтов, в которых используется маленький интервал между буквами
• Если вы используете медиа-запросы для текста, используйте единицы em для размеров шрифта вместо пикселей
• Используйте шрифты sans serif, поскольку они лучше масштабируются в большинстве разрешений

 

 

№5: Текст как часть пользовательского интерфейса

Шрифт, который вы используете, это не единственная проблема удобства и читаемости. Поскольку мобильный веб-дизайн предусматривает широкое разнообразие экранов, нужно учитывать текст как часть общего UI (пользовательского интерфейса), чтобы обеспечить максимальную читаемость. Это означает:

• Использование медиа-запросов для поддержания допустимого предела символов в строке (не забудьте использовать em вместо пикселей). Общее количество допустимых символов равняется 40-70
• Используйте значения CSS3 vw, vh и vhmin (все они являются относительными единицами измерения), чтобы сохранить размер шрифта в пределах размера контейнера на различных размерах экранах

 

 

№6: Используйте контрастные цвета

Любой, кто даже отдаленно знаком с основами дизайна, скажет вам, что контраст играет важную роль в веб-дизайне. Использование контраста позволяет акцентировать внимание на нужных участках экрана.

Чтобы подобрать оптимальное сочетание цветов, вы можете использовать простые онлайн-инструменты, например, как Paletton, Color Contrast Checker, Color Wheel и подобные.

 

 

№7: Дизайн мобильных меню

Рассмотрите все за и против гамбургер-меню для адаптивных сайтов. Здесь мы рассматривали этот вопрос в деталях.

 

 

№8: Используйте где это возможно стили CSS3 вместо изображений

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

 

 

№9: Тестируйте свои проекты на совместимость с мобильными устройствами

Одна из самых больших проблем с мобильным дизайном возникает из-за большого количества различных размеров экранов и разрешений, которые нужно учитывать. Хотя есть некоторый пул лидеров рынка, практически каждый месяц появляются новые устройства. И, возможно, ваша целевая аудитория заходит на сайт именно с этих устройств.

Очень тяжело протестировать свой сайт на всех возможных устройствах, но это обязательно нужно сделать для максимально широкого круга. Проанализируйте источники трафика на свой сайт, и в первую очередь протестируйте те девайсы, с которых заходит больше всего пользователей. В сети есть масса приложений для этих целей, как платных, так и бесплатных. Начать же можно с бесплатных инструментов в браузерах: Chrome Developer Tools (в Google Chrome) или дополнение Firebug (в браузере Firefox).

 

 

 

Краткий вывод

Хотя эти советы, безусловно, окажут положительное влияние на ваш сайт, вам нужно помнить, что мобильная оптимизация – это практически беспрерывный процесс.

Всегда появляются новые устройства, изменяются тенденции веб-дизайна, обновляются ОС, что может вызывать проблемы с вашими проектами. Имейте это в виду.

Если у вас есть другие советы по веб-дизайну для мобильных устройств, дайте нам знать об этом в комментариях ниже!