Адаптивный веб-дизайн – это дизайн, который обеспечивает корректное отображение веб-страницы на любом устройстве, динамически подстраивается под заданные размеры экрана браузера. Трудиться над ним нелегко, но это то, что вы обязаны сделать, чтобы ваш сайт смотрелся одинаково хорошо на всех устройствах.
Этому мастерству можно и нужно учиться.
Даже опытные дизайнеры допускают ошибки, работая над адаптивным дизайном, но на промахах, как известно, учатся. И не только те, кто их сделал.
Сегодня Freelance.Today расскажет вам о тех ошибках, которые часто можно встретить в адаптивном дизайне, а также подскажет, как их можно исправить.
Содержимое трудно рассмотреть
Это удивительно, как легко сделать несколько простых ошибок, чтобы некогда красивый сайт на разных экранах выглядел бы то микроскопическим, то до неприличия гигантским.
Кнопки, заголовки и текст могут быть легко искажены в зависимости от бесчисленных переменных.
Что важно?
Если вы проектируете блог, заголовки и текст должны быть четкими и легко читаемыми. Не слишком большими и не слишком маленькими, в противном случае пользователи будут в конечном итоге прокручивать бесконечно, либо использовать лупу.
Равным образом, если вы разрабатываете интернет-магазин, убедитесь, что хорошо видны фотографии продукта и цены. Любой промах относительно этих двух вещей может иметь непосредственное влияние на продажи. Никто не захочет покупать товар, который невозможно рассмотреть, или когда не видна его цена. Кнопки «Корзина» и «Купить» тоже должны быть хорошо видны.
Кнопки и призыв к действию
Пользователи в основном покупают через планшеты и телефоны, поэтому позаботьтесь, чтобы ваш сайт хорошо отображался на мобильных устройствах. При этом кнопки и призывы к действию не должны мешать пользователю. Важно не нарушить тонкую грань между перегрузкой и чистым пользовательским опытом.
Если что-то работает на большом экране, но не совсем корректно на мобильных, не бойтесь отойти немного от каркаса.
Тестирование является абсолютной необходимостью при проектировании.
Никогда не думайте, что раз что-то выглядит хорошо в Photoshop, Illustrator или Sketch, то оно будет выглядеть потрясающе на любом устройстве. Не привязывайтесь к вашим проектам, пока вы не проверите их.
Страницы слишком долго загружаются
Тяжелые изображения и видео замедляют загрузку веб-сайтов.
Это становится проблемой на мобильных устройствах, с которых вы будете получать больше всего трафика. Если ваша конструкция содержит излишне тяжелые изображения и видео, то вы будете заставлять пользователя тратить больше времени, чтобы просмотреть ваш сайт.
Важно помнить: пользователям нужно обеспечить максимальный комфорт при просмотре сайта с мобильного. Если сайт грузится медленно – человек не будет ждать, он закроет его и уйдет смотреть сайт вашего конкурента, который грузится быстрее.
Это будет создавать множество проблем для разработчиков и маркетологов, так что лучше избегать создания «медленного дизайна».
Определите, что важно на вашем сайте. Удалите ненужные изображения или видео, которые не добавляют ценности.
Например, на версии вашего сайта для десктопа может присутствовать красивое фоновое видео. Но на мобильной версии без него можно обойтись – это нисколько не уменьшит значимость страницы.
Спросите себя: каковы цели сайта?
Дополнительное изображение действительно необходимо?
Дизайн убивает функциональность
Эта ошибка – одна из самых серьезных. Потеря функциональности из-за красоты – непростительный промах. Клиенты и пользователи не простят вас за это.
Пользователей обычно очень огорчает тот факт, когда они получили самые замечательные впечатления от вида сайта на большом мониторе, но на мобильной версии полностью пропадает вся функциональность.
Поверьте, человек, столкнувшийся с этим, к вам больше не вернется.
Пример: потеря функции масштабирования на мобильном телефоне. На дектопе вы можете увеличить информацию, легко настроить размер шрифта, и найти золотую середину для чтения. Для людей с плохим зрением отсутствие масштабирования реально очень большая проблема.
Не оставляйте функциональность на втором месте, ведь на самом деле это ключевой момент.
Проверьте, все ли функции сайта остаются доступными на разных устройствах, масштабируется ли страница, видно ли меню и важные кнопки. Если для функциональности нужно пожертвовать каким-то элементом дизайна – проверьте, нельзя ли без него обойтись.
Вы не понимаете пользователей
Не думайте, что разработчики могут просто забрать разработанный вами дизайн и создать идеальное решение. Это просто не справедливо.
Вот почему, как дизайнеры, вы должны рассмотреть, кто использует проект, а также где, когда и как.
Вот где пригождаются знания маркетинга. Если у вас нет маркетолога или отдела маркетинга, постарайтесь изучить целевую аудиторию сайта. Для этого можно провести анкетирование. Так вы получите ответы на несколько очень важных вопросов, которые помогут решить много проблем и создать дизайн для людей.
В анкету можно включить вопросы:
Имя: человеку приятно, когда спрашивают, как его зовут
Изображение: лица сделают этот процесс проще и более личным
Профессия: чем человек занимается? Разные профессии предпочитают разные устройства.
Адрес: если большинство пользователей находится в Бразилии, они, вероятно, используют другие устройства, чем люди в Японии
Привычки просмотра: как и где они заходят в Интернет? Используют они для этого мобильный телефон, планшет или ноутбук?
Цели: какие именно сайты интересуют и почему?
Проблемы: каковы проблемы в жизни пользователей, и как они обычно пытаются решить их?
Используйте знания маркетинга, чтобы узнать больше о ваших конечных пользователях. Чем больше вы знаете, тем легче будет решить, какие приоритеты вы должны поставить при создании адаптивного дизайна.
Это также поможет вам сделать дизайн, который будет хорош практически для всех. И пользователи, и разработчики будут вам благодарны.
Выводы
В процессе работы над дизайном вы должны думать о будущем вашего проекта и о ваших пользователях.
Важно продумать, кто, как, и на каких устройствах будет просматривать ваш сайт. Позаботьтесь о том, чтобы дизайн не вредил функциональности сайта, чтобы страницы загружались достаточно быстро, а текст легко читался и масштабировался при необходимости.
В противном случае ваш адаптивный дизайн трудно будет назвать хорошим.
0 комментариев