Золотой партнер
1С-Битрикс + компетенция
«Интеграция с 1С»
+7 8512 41-41-61

Как избежать ошибок в адаптивном дизайне

01.07.2016

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

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

Начинайте работу с малого, а не большого

Многие сначала проектируют сайт, предназначенный для полноформатных экранов, а затем переходят к его сжатию. На самом деле гораздо проще начать наоборот: сделайте сайт, оптимизированный для телефонов, учтите все потребности целевой аудитории и затем переводите его в более традиционный крупный вариант.

Оптимизация для телефона

Не ленитесь тестировать

Прежде чем отправлять самолёт с туристами из Австралии в Англию, необходимо проверить, как он летает. И ещё раз проверить. И ещё раз. То же самое с сайтом – не следует запускать его в открытый доступ до того, как были выявлены все ошибки и недостатки. Никому не понравится, если половина интерфейса у готового сайта окажется совершенно нерабочей и нефункциональной. После каждого изменения, внесённого в систему, следует проверять работоспособность хотя бы основных действий во всех популярных браузерах(в том числе и мобильных) и операционных системах. В этом вам помогут такие ресурсы, как BrowserStack и Viewport Resizer.

Тестирование

Анализируйте потребности пользователей

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

Потребности

Убедитесь, что страницы быстро грузятся

Мало кто согласится пользоваться сайтом, загрузки страниц которого приходится ожидать длительное время. Не используйте слишком крупные и «тяжёлые» картинки, видео- и аудиозаписи – они могут увеличить время загрузки. Равномерно распределяйте информацию по различным вкладкам и разделам. Не забудьте о ресурсных файлах, которые также могут замедлять работу сайта.

Долгая загрузка

Не делайте слишком мелкие кнопки

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

Адаптивный дизайн

Адаптируйте изображения для разных устройств

Крупные картинки, возможно, и смотрятся хорошо на больших экранах, но при открытии их с телефона неизменно возникает ряд проблем. Современные средства позволяют подстраивать размер изображения в зависимости от площадки, с которой загружается страница. Используйте плагины WordPress, HTML5 и так называемые «гибкие» картинки – они позволят автоматически менять разрешение изображения до оптимальных размеров.

Адаптация сайта

Оптимизируйте электронные письма

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

Электронная почта

При написании статьи использовались материалы Practicalecommerce.