В последние годы мобильный трафик значительно вырос и эта тенденция сохраняется. Поэтому важно уделять особое внимание оптимизации своих проектов под мобильные устройства. В этой статье мы рассмотрим практические советы по оптимизации веб-дизайна под мобильные устройства.
№1: Использование нескольких изображений в сочетании с медиа-запросами
Надеемся, что вы уже знакомы с медиа-запросами. Для мобильного дизайна медиа-запросы являются почти основополагающими. В настоящее время проблема с медиа-запросами заключается в том, что многие дизайнеры и разработчики создают сайты для мобильных уже после основных сайтов, хотя в идеале должно быть наоборот.
Этот подход ярко заметен в большом количестве медиа-запросов под популярные размеры устройств (320 пикселей, 480 пикселей, 768 пикселей). Хотя должен преобладать подход mobile-first (верстка сначала под мобильные устройства), а медиа-запросы писать под десктопные версии.
Поэтому, в следующий раз, когда будете работать над дизайном, попробуйте использовать подход mobile-first:
№2: Оптимизация изображений
Даже если у вас полностью отзывчивый дизайн, посетителей может отпугнуть слишком долгая загрузка сайта, и картинки здесь играют большую роль. Пользователи ожидают, что картинки будут загружаться быстро, поэтому вам нужно найти способ уменьшить размер медиа-файлов и сохранив при этом их качество.
Чтобы оптимизировать изображения вы можете использовать подходящие инструменты, например, такие как TinyJPG и TinyPNG. Они позволяют уменьшить размер картинок путем выборочного уменьшения количества цветов, а также удаляя ненужные метаданные.
№3: Максимально используйте SVG
Масштабируемая векторная графика (SVG) – отличный инструмент для добавления графики на сайт. Этот инструмент особенно полезен для простой графики, например, логотипов, иконок, инфографики и подобного.
Преимущество SVG графики заключается в том, что она масштабируема и легко адаптируется под различные размеры экрана. Кроме того ею легко манипулировать с помощью CSS.
№4: Используйте правильные шрифты
Мобильный дизайн – это не только изображения. Выбор используемых шрифтов имеет большое влияние на проект, поскольку текст является основным методом передачи информации.
С точки зрения дизайнера выбор правильных шрифтов означает:
№5: Текст как часть пользовательского интерфейса
Шрифт, который вы используете, это не единственная проблема удобства и читаемости. Поскольку мобильный веб-дизайн предусматривает широкое разнообразие экранов, нужно учитывать текст как часть общего UI (пользовательского интерфейса), чтобы обеспечить максимальную читаемость. Это означает:
№6: Используйте контрастные цвета
Любой, кто даже отдаленно знаком с основами дизайна, скажет вам, что контраст играет важную роль в веб-дизайне. Использование контраста позволяет акцентировать внимание на нужных участках экрана.
Чтобы подобрать оптимальное сочетание цветов, вы можете использовать простые онлайн-инструменты, например, как Paletton, Color Contrast Checker, Color Wheel и подобные.
№7: Дизайн мобильных меню
Рассмотрите все за и против гамбургер-меню для адаптивных сайтов. Здесь мы рассматривали этот вопрос в деталях.
№8: Используйте где это возможно стили CSS3 вместо изображений
Это довольно просто. Хотя соблазн использовать инструменты графического дизайна для создания каждого аспекта вашего сайта может быть сильным, существует множество случаев, когда для использования дополнительных изображений достаточно лишь немного стилей CSS3.
№9: Тестируйте свои проекты на совместимость с мобильными устройствами
Одна из самых больших проблем с мобильным дизайном возникает из-за большого количества различных размеров экранов и разрешений, которые нужно учитывать. Хотя есть некоторый пул лидеров рынка, практически каждый месяц появляются новые устройства. И, возможно, ваша целевая аудитория заходит на сайт именно с этих устройств.
Очень тяжело протестировать свой сайт на всех возможных устройствах, но это обязательно нужно сделать для максимально широкого круга. Проанализируйте источники трафика на свой сайт, и в первую очередь протестируйте те девайсы, с которых заходит больше всего пользователей. В сети есть масса приложений для этих целей, как платных, так и бесплатных. Начать же можно с бесплатных инструментов в браузерах: Chrome Developer Tools (в Google Chrome) или дополнение Firebug (в браузере Firefox).
Хотя эти советы, безусловно, окажут положительное влияние на ваш сайт, вам нужно помнить, что мобильная оптимизация – это практически беспрерывный процесс.
Всегда появляются новые устройства, изменяются тенденции веб-дизайна, обновляются ОС, что может вызывать проблемы с вашими проектами. Имейте это в виду.
Если у вас есть другие советы по веб-дизайну для мобильных устройств, дайте нам знать об этом в комментариях ниже!
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…
Выбор идеального хостинга под свой сайт может быть довольно запутанным делом, особенно когда существует так…
Чтобы избегать ошибок, нужно набираться опыта; чтобы набираться опыта, надо делать ошибки Лоуренс Питер
Краткое определение Черного SEO Черное СЕО (или Черная оптимизация) — это любая практика, целью которой…
Получение водительских прав категории C открывает двери к профессиональной деятельности, связанной с управлением грузовыми автомобилями.…