Создание сайтов с адаптивным дизайном

Теги статьи

Бизнес
Социальные сети

13.09.2017 << ко всем темам

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

Преимущества от использования ресурсов с адаптивной версткой:

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

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

Перед созданием сайта:

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

Создание сайтов с динамическим дизайном

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

Проектирование по первому методу

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

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

Текстовый материал делают гибким путем использования относительных величин при указании размера шрифта. Изображения ограничивают рамками с помощью простого правила – «img {width: 100%; max-width: 100%;}». Этот код не позволит картинкам автоматически увеличиваться на больших экранах, выходя за пределы своих контейнеров.

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

Несколько эффективных приемов реализации динамического шаблона:

1 Использование svg-изображений. Они автоматически изменяют размеры, сохраняя высокое качество картинки.
2 Увеличение кликабельного пространства на сайте, даст возможность посетителю со смартфоном легко передвигаться в пределах сетевого ресурса.
3 Проектирование дизайна, который изначально имеет параметры, позволяющие удобно работать с сайтом на устройствах с небольшим экраном.
4 Использование только необходимых элементов управления, которые будут всегда доступны пользователю независимо от того, на каком устройстве он просматривает страницу.
5 Создание сетевых проектов на основе отдельных карт с вложенным материалом. Благодаря независимости они легко перемещаются относительно друг друга, удобно размещаясь на экранах любого размера.

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

Варианты для создания сайтов с динамическим дизайном:

1 Макет на основе изменяющейся сетки. Элементы шаблона выстраиваются друг под другом подстраиваясь под размер экрана, на котором отображается страница. На больших мониторах изменяются только параметры полей. Преимуществом является использование всего одной контрольной точки.
2 Использование столбцов. Как и в предыдущем варианте, при просмотре страницы на экране, неспособном вместит весь предлагаемый материал, происходит сдвиг столбцов, в результате которого отдельные элементы выстраиваются друг под другом. Определение контрольных точек зависит от содержимого. Разработчик подбирает их для каждого варианта дизайна.
3 Перемещение контента. В отличие от других вариантов созданный макет не изменяет положение отдельных элементов конструкции в зависимости от размеров экрана. Для удобного отображения страницы происходит перемещение информации. Недостатком решения является сложность реализации и поддержки таких проектов.
4 Шаблон из одного столбца. Вариант подходит для одностраничных сайтов или ресурсов с большим количеством текстового материала. В процессе адаптирования под размеры устройства происходит изменение размера шрифта, параметров изображений, перемещение содержимого.
5 Шаблон со скрытыми элементами навигации. Некоторые элементы сайта, которые редко используют посетители, автоматически скрываются во время просмотра содержимого на небольшом экране.

Проектирование по второму методу

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

Создание адаптивного шаблона при помощи мета-тега

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

В код добавляют строчку: meta name="viewport" content="width=device-width, initial-scale=1.0", где параметр content заставляет приложение показывать страницу во все окно браузера, а параметр initial-scale сообщает программе, что отображаемый материал должен оставаться в области просмотра.

Если этот тег отсутствует, то мобильные браузеры отображают страницу согласно параметрам, заданным по умолчанию.

В результате часть контента может выводиться неправильно или, вообще, не показываться на экране из-за недостатка места. Подобное поведение вынуждает пользователя самостоятельно подгонять масштаб материала под размеры экрана. Значение 1.0 в параметре initial-scale запрещает браузеру производить масштабирование. Например, текст на странице будет легко прочитан посетителем, как на экране большого монитора, так и на маленьком дисплее смартфона.

Адаптация при помощи JavaScript

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

Достоинства сетевых ресурсов с адаптивным дизайном

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