С развитием мобильных технологий перед веб-дизайнерами возникла проблема: некорректное отображение интернет-страниц на устройствах с небольшой диагонально экрана (у смартфонов, планшетов).
Сегодня она решена за счет адаптивного дизайна сайта. Он позволяет видеть сайт абсолютно на любом устройстве. Особенность подобных ресурсов - гибкость по отношению к техническим характеристикам или платформе.
То есть адаптивный дизайн сайта предусматривает одинаковое содержимое при изменяемом внешнем виде. К примеру, на небольшом планшете контент может отображаться не в нескольких колонках, как обычно, а в одной, кнопки принимают другое расположение и т.д.
Внимание разработчикам
На что нужно обратить внимание, если требуется создать страницу с адаптируемым дизайном?
Переменными величинами в этом случае являются:
шрифт. Он задается не жестко, в пикселях (px), а в изменяемой величине em. Пример: в коде будет указано "font-size: 2.5em" вместо "font-size: 16px";
макет. При создании сетки макета используются, опять же, не пиксели (px), а проценты (%). Гибкая сетка позволяет располагать контент наилучшим образом. Как вариант: на широком мониторе выводится большее число колонок, чем на маленьком дисплее;
изображения. Они должны менять размер в зависимости от ширины колонки и разрешения экрана;
медиа-запросы. Они позволяют устанавливать особенности стиля в зависимости от характеристик устройства: ширина экрана, ориентация (портретная или альбомная) и т.д. К примеру, для монитора будет автоматически устанавливаться ширина колонки в 600px, а для телефона - в 150px.
Соответственно, необходимо тестирование на разных видах техники, с разными браузерами и их версиями. Только тогда ресурс станет удобным для пользователя.
Автор: Альберт Факиров
Обсудить
Читайте также
КОНТЕКСТ.ru - это новостной сайт нового формата, посвященный контекстной рекламе и рекламе в интернете. Управление сайтом осуществляется самими участниками
Комментарии