Главная › Новости

Секреты адаптивного дизайн

Опубликовано: 01.09.2018

Адаптивный веб-дизайн: типы адаптивных макетов

Совсем недавно, буквально 10 лет назад, веб-дизайнеры при создании сайтов ориентировались на определенную среднюю ширину экрана монитора пользователей. Сначала наиболее распространенное разрешение было 800*600, потом выросло до 1024*768. В Интернете можно было встретить такие слова: «Сайт оптимизирован под такое-то разрешение». С увеличением количества размеров экрана стала популярной резиновая верстка сайтов, о которой я писал в одноименной статье. Благодаря этому виду верстки можно было просматривать сайты на мониторах с различным разрешением.

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

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

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

Дизайн одежды. Секреты от кутюр. Контрасты фактур

Как же решить проблему нормального отображения сайта на различных устройствах? Выхода здесь два:

Использовать две версии сайта, обычную – для настольных компьютеров, и мобильную. Использовать адаптивный дизайн.

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

Секреты эффективного web-дизайна

Что такое адаптивный дизайн?

Что же это за дизайн и чем он отличается от резинового?

Резиновый шаблон не изменяет свою структуру при изменении ширины экрана, а меняет только размеры. Например, веб-страница имеет три колонки: слева – меню шириной 25% от ширины окна, в центре – контент – 50 %, справа — сайдбар – 25 %. При ширине окна в 1000 px они будут иметь размеры соответственно 250, 500 и 250 px, что вполне нормально. Но если использовать мобильный телефон с маленьким экраном шириной 320 px, то колонки сожмутся до размеров 80, 160, 80 px и станут нечитаемыми.

В чем выход? Он – в кардинальном изменении веб-страницы. Это изменение состоит в том, что после постепенного уменьшения ширины колонок происходит перестроение структуры страницы – она вытягивается в одну колонку. Но это не единственное отличие.

Требования к адаптивному дизайну

Адаптация к размеру и ориентации экрана, начиная от больших мониторов настольных ПК и заканчивая мобильными телефонами. Изменение размеров изображений при смене разрешения экрана. Даже на сайтах с «резиновым» дизайном размеры картинок не изменяются, и при определенной ширине экрана появляется горизонтальная полоса прокрутки для их просмотра. При использовании адаптивного дизайна изображения также «подстраиваются» под размер экрана. Удаление несущественных элементов шаблона. Ими могут быть как декоративные элементы, так и программные, не работающие на мобильных устройствах. Высокая скорость загрузки. Скорость мобильного Интернета пока еще сравнительно невелика, и это надо учитывать при разработке сайта, предназначенного для просмотра на мобильных устройствах. Использование относительно больших кнопок. Мобильные устройства используют сенсорный ввод и отсутствие курсора должно учитываться при разработке дизайна. Работа с мобильными функциями, например, геолокацией.

Как создается адаптивный дизайн

Такой дизайн строится на использовании CSS media queries (медиа-запросы). Благодаря этим запросам вначале определяются параметры устройства, которое использует посетитель, и, в зависимости от этого выбора, подключается соответствующий стиль, то есть при адаптивном дизайне используется один сайт с набором стилей для разных устройств. К примеру, если посетитель заходит на сайт с обычного компьютера, подключается одна таблица стилей, и он видит сайт с большой красочной шапкой, горизонтальным меню, несколькими колонками контента, а при использовании iPada применяется другой стиль, и вместо огромной шапки отображается небольшой логотип, меню превращается в вертикальный список, а контент вытягивается в одну колонку.

Адаптивные шаблоны

Можно ли переделать существующий шаблон сайта под адаптивную версию? Конечно, можно, если вы в достаточной мере владеете HTML и CSS. Но, если вы используете какую-либо систему управления контентом — WordPress, Joomla!, Drupal, то лучше найти готовый шаблон, сейчас адаптивных шаблонов разработано много. Кстати, в моей статье «Как выбрать шаблон для WordPress» теперь следует добавить еще один пункт «Проверка шаблона на адаптивность».

Итак, можно сказать, что адаптивный дизайн на настоящий момент является наиболее современным способом разработки сайтов и, несмотря на его относительную сложность, за ним будущее. Прогресс не стоит на месте, появляются новые, более сложные устройства, и программное обеспечение к ним тоже усложняется.

Кстати, только что появился уникальный курс Андрея Кудлая «Фреймворк Bootstrap:  практика адаптивной верстки от А до Я» . Используя фреймворк Bootstrap, сегодня можно сверстать сайт с красивым, приятным, профессиональным дизайном, при этом не нужно быть профи в верстке. Используя фреймворки, даже самый новичок в сайтостроении способен сверстать страницу, создать одностраничный сайт или лэндинг. Причем сайт будет достаточно профессиональный, а время, затраченное на его создание минимально.

ССЫЛКА НА КУРС

Все это очень серьезно, а чтобы отвлечься, предлагаю пособирать пазлы и посмотреть еще одну картину моего земляка, народного художника России Н. П. Ерышева.

Напишите в комментариях свое мнение по поводу адаптивного дизайна.