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

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


2014-07-24 18-23-47 Скриншот экрана.png

Адаптивный веб-дизайн (в английском языке «responsive web design») – это дизайн веб-страниц, обеспечивающий отличное восприятие на различных устройствах, подключенных к Интернету.

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

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


Отличие адаптивного сайта от мобильной версии (приложения) сайта


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

1) Под каждый тип операционной системы нужно свое приложение / версия сайта.

2) Необходимость загрузки приложения.

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

Принципы адаптивного дизайна


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


ex.png







Мы используем следующие виды адаптивного дизайна:


1)Перенос блоков


Очевидный способ для многоколоночного сайта: при уменьшении ширины экрана дополнительные блоки (сайдбары) переносятся в нижнюю часть макета.

2responsive-620x300.png

Перенос блоков. Фрагмент сайта LukeW Ideation + Design Перенос блоков. Фрагмент сайта LukeW Ideation + Design

2)Переключение макетов


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

3responsive-620x202.png

Переключение макетов. Фрагмент сайта LukeW Ideation + Design Переключение макетов.Фрагмент сайта LukeW Ideation + Design

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

Готовы обсудить проект?
Готовы обсудить проект?
Заполняя данную форму вы принимаете условия Пользовательского соглашения об использовании сайта, в том числе в части обработки и использования персональных данных