Адаптивный веб-дизайн – это намного больше, чем просто эластичные шаблоны и @media queries. На самом деле, это совершенно новый подход к дизайну. Учитывая это, предлагаем рассмотреть несколько распространенных подводных камней, которых следует избегать в вашем следующем адаптивном шаблоне.

Разрешения экранов

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

Если вы разрабатываете в первую очередь для мобильных устройств, начните построение интерфейса, ориентируясь на самое маленькое разрешение экрана, которое вы собираетесь поддерживать. Потом просто увеличивайте окно браузера, пока ваш дизайн не «поедет». Пометьте ключевую точку на этом моменте и исправьте недоработки в @media query. Повторите.

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

Скорость

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

Скорость сайта – превыше всего, выделите некоторую сумму из бюджета на производительность. Используйте Webpagetest.org чтобы убедиться, что ваш сайт загружается быстро даже на 3G. Обратите особое внимание на «Speed Index», который показывает, сколько времени проходит прежде, чем пользователь увидит контент на странице.

Изображения

Ничего не ускорит ваш мобильный сайт так, как уменьшение размера изображений. Новый HTML-тег <Picture> будет поддерживаться несколькими браузерами позже в этом году, а пока что есть polyfill-библиотека PictureFill.

Я рекомендую пользоваться PictureFill, чтобы вы могли перейти к тегу picture, когда он будет более активно поддерживаться, но есть другие, более старые варианты – такие как Adaptive Images.

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

Не прячьте контент

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

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

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