Как повысить продажи на своем сайте за 1 мес + десятки рабочих кейсов из каждой отрасли для директоров и маркетологов. Подписывайся
Как повысить продажи на своем сайте за 1 мес + десятки рабочих кейсов из каждой отрасли для директоров и маркетологов. Подписывайся
Адаптивный дизайн – настоящая находка для разработчиков. Используя его методы, можно на различных устройствах демонстрировать свой контент и не поддерживать при этом несколько версий ресурса. Кроме того, можно избежать недостатков, которые присущи некоторым другим методам, например, «жидким макетам» и масштабированию.
Чтобы правильно воспользоваться всеми возможностями, которые дает адаптивный дизайн, следует избегать трех основных ошибок, которые довольно часто допускают разработчики. Остановимся на них подробнее, но для начала разберемся с терминологией.
Адаптивный, «жидкий» макет или масштабирование
Нередко возникает путаница при использовании этих понятий. Дизайнеры ошибочно считают их тождественными, хотя в действительности это разные методы, которые являются последовательными этапами в развитии техники макета, связанными с технологическими достижениями, которые возникали на протяжении довольно продолжительного периода.
Масштабирование используется с целью приведения размеров элементов в определенное соотношение друг с другом. По мере изменения окна просмотра в размерах динамически масштабируется контент. Макет при этом остается неизменным, то есть картинка сохраняется, но меняется ее размер. При использовании такого метода страдает читаемость.
Для «жидких» макетов характерно масштабирование отдельных объектов в соответствии параметрами окна просмотра. Этого удается достичь благодаря относительным таблицам, позволяющим справиться с проблемой уменьшения размеров текста. При изменении размеров окна дизайн искажается, но зато не страдает читаемость. Вот пример использования «жидкого» макета.
При использовании адаптивного дизайна ничего не масштабируется. Происходит изменение отображаемой информации в соответствии с параметрами окна просмотра. Ниже вы можете ознакомиться с примером адаптивного дизайна.
Теперь перейдем к ошибкам адаптивного дизайна.
1 проблема: неправильное размещение меню
Использование navbar вверху страницы при отображении на небольшом экране дает эффект трансформации меню в более компактное. При этом результат далеко не всегда удовлетворителен, когда все пункты меню не умещаются в одной строке, и область отображения по ширине больше точки останова.
Справиться с этой проблемой можно разными способами. Первый – точку останова изменить на нижнее значение. Второй – количество элементов, которые отображаются горизонтально на панели навигации, уменьшить, сгруппировав по категориям. При этом могут применяться раскрывающиеся элементы меню, отображающие подкатегории. И третий способ избежать ошибки – это использование другого типа меню.
2 проблема: фиксированная ширина изображений
Если область просмотра меньше фиксированной ширины картинки, она обрезается. Выход – устанавливать относительные размеры изображений или использовать функцию class responsive image, если ваш фреймворк ее поддерживает.
3 проблема: искажение пропорций объекта
Выглядит это таким образом. Колонки на макете, если они не были обработаны, отображаются в маленьком окне просмотра как строки. На первый взгляд можно не увидеть в этом проблемы, но на самом деле это существенный недостаток. Вследствие происходящего искажения контента меняется иерархия дизайна.
Справиться с этой проблемой элементарно просто. Решение лежит на поверхности, но, тем не менее, многочисленные разработчики продолжают разбираться с подобными ошибками. Выход – задать отступы, ширину и высоту объекта явно. Если он выходит за рамки и задевает другие объекты, можно перевести элемент в div и задать поля, что позволит зафиксировать его в нужном месте.
Чтобы уберечь себя от ошибок, планируйте
Мы обсудили всего 3 проблемы адаптивного дизайна, которые возникают чаще всего, но существует множество других ошибок. Избегать их не составляет особого труда. Самый простой выход – использовать инструменты тестирования на адаптивный макет, которыми оснащены все современные браузеры. Если вы будете планировать дизайн как можно тщательнее и чаще его тестировать, проблем не возникнет.
Прямо сейчас консультируем
клиентов