Адаптивный веб-дизайн сайта

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

Адаптивный веб-дизайн сайта, AWD, что это значит?

Адаптивный веб-дизайн при создании сайта, в английской версии «responsive web design», что можно трактовать также как отзывчивый или реактивный, призван обеспечить хорошее восприятие сайта на любых устройствах, подключенных к сети. В том числе и на мобильных, экраны которых имеют сравнительно небольшие размеры. Это означает, что сайт с таким видом веб-дизайна можно просматривать на устройствах с любым форматом экрана и любым разрешением: на ноутбуках, планшетах, смартфонах. При этом просмотр окажется удобен любому пользователю. Так, например пользователю мобильного устройства с маленьким экраном не придется расширять те или иные участки сайта, чтобы точно попасть на желаемую ссылку. AWD преобразует веб-страницы, и отображает их содержимое так, чтобы они полностью соответствовали устройству, с которого их просматривают.

Почему AWD — востребованное направление?

• 1. Во-первых, потому, что сегодня мы имеем большое количество разных устройств, используемых для тех или иных целей, и также для того, чтобы выходить в сеть с их помощью . Устройства имеют разные габариты экрана, различные разрешения, а значит, и сайты могут отражаться по-разному. В любом случае, нам важно, чтобы сайт просматривался удобно и выглядел привлекательно, с какого бы устройства его не просматривали.
• 2. Мобильный интернет-трафик постоянно увеличивается, а популярность мобильных устройств с выходом в сеть продолжает расти. Игнорировать число посетителей сайта, зашедших на него с мобильного устройства, уже невозможно: их не пара человек в несколько месяцев, а достаточно большая часть целевой аудитории. И всем этим людям должно быть комфортно пользоваться сайтом, иначе они просто не будут на него заходить.
• 3. Оперативная информация. Допустим, на вашем сайте присутствуют срочные новости, или другая информация, прочитать которую потребуется немедленно. Пользователь в немалом количестве случаев будет делать это, используя телефон, так как других способов срочно заглянуть за этой информацией на сайт у него не будет. В таком случае, нужно сделать так, чтобы у пользователя действительно оказалась возможность эту информацию получить. А почему не воспользоваться мобильной версией сайта ( приложением), также способной решить проблему удобства просмотра, и к тому же, разработанной специально для мобильного устройства?

Мобильные приложения имеют ряд недостатков:

• 1. Каждой операционной системе требуется своё приложение, или своя мобильнаяверсия, а для их разработки может потребоваться и определённое время исущественные денежные ресурсы.
• 2. Приложение необходимо загружать, и это потребует от пользователя выполненияопределённых действий. Далеко не все пользователи будут загружатьприложение, не будучи уверенными, что будут в дальнейшем его регулярноиспользовать.
• 3. Мобильные приложения делят общий трафик на части: на трафик сайта и трафикприложения. Такое разделение неудобно с точки зрения продвижения, так каквыглядит как уменьшившаяся посещаемость сайта.
• 4. При использовании приложения потребуется интеграция материалов. Сайт иприложение необходимо будет синхронизировать между собой, а это означаетзатрату дополнительных ресурсов. Другой вариант решения этой проблемы -параллельное наполнение и сайта, и приложения, то есть, по сути, выполнениедвойной работы.

Чем адаптивный веб-дизайн отличается от мобильного приложения?

Тем, что при его использовании сайт имеет один адрес, одно содержание, и соответственно, одни единый дизайн. Система управления сайтом тоже одна.

Есть ли у AWD недостатки?

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

Основные принципы AWD

Первый этап проектирования — это версия веб-сайта для мобильных устройств. Цель дизайнера — передать общий смысл и идеи сайта, используя только одну колонку, и рассчитывая на небольшой экран. Оставляют при этом только самое важное: сокращая содержание, если в этом есть необходимость, и убирая блоки, имеющие второстепенное значение.

• mobile first — проектирование с начальных этапов непосредственно для мобильных устройств;
• flexible, grid-based layout — гибкий макет, в основу которого положена сетка;
• flexible images — действия с гибкими изображениями;
• media queries — применение медиазапросов;
• использование способа постепенного улучшения.

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

• 1. Резиновый макет. Основные блоки сайта сжаты до размеров экрана мобильного устройства. В том случае, если осуществить это невозможно, блоки перестраиваются в единую ленту большой протяжённости. Такой способ представления сайта очевиден для пользователя и не вызывает трудностей при выполнении.
• 2. Макет с переносом блоков. Может применяться для сайта, состоящего из нескольких колонок. Если ширина экрана уменьшена, дополнительные блоки размещаются внизу макета.
• 3. Способ переключения макетов. Отдельные макеты сайта разрабатываются под каждое разрешение, таким образом, макет оказывается очень удобным для чтения с одного или другого мобильного устройства. Проектирование достаточно трудоёмкое, поэтому способ применяется намного реже, чем первые два.
• 4. Адаптивность «малой кровью». Простое масштабирование, как типографики, так и изображений. Способ простой, но не обладающий должной гибкостью, поэтому популярность его не слишком высока. Но для несложных сайтов он достаточно эффективен.
• 5. Макет с панелями. Вертикальный и горизонтальный тап вызывают появление дополнительного меню. Способ появился из мобильных приложений, но пока не стал популярным из-за того, что действие для пользователя не являются очевидными. Но в будущем, популярность способа будет возрастать. Вышеобозначенные макеты не претендуют на универсальность решения, поэтому для каждого проекта выбирается способ, оптимально соответствующий его требованиям.