ИНЖИНИРИНГ И ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННЫХ СИСТЕМ ДЛЯ ОБЪЕКТОВ АВТОМАТИЗАЦИИ:

АНАЛИЗ ПРОБЛЕМ, ПРАКТИКА РЕШЕНИЙ

УДК 004.514

ОСОБЕННОСТИ РАЗРАБОТКИ АДАПТИВНОГО ДИЗАЙНА ДЛЯ WEB-ПРИЛОЖЕНИЙ

DESIGN FEATURES RESPONSIVE DESIGN FOR WEB APPLICATIONS

А. А. Колебер

Сибирский государственный автомобильно-дорожный университет (СибАДИ), Россия, г. Омск

Аннотация. В данной статье охарактеризованы способы создания дизайна web-страниц, обеспечивающих правильное отображение сайта на различных устройствах. Выделены основные решения проблемы web-дизайна. Приведены принципы технологии адаптивного web- дизайна, особенности использования модульной сетки Bootstrap. Рассмотрен пример использования данных классов в HTML разметке.

Ключевые слова: CSS, HTML, Bootstrap, адаптивный дизайн, разрешение экрана.

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

По этой причине владельцам web-сайтов становится необходимым обеспечить, удобство

использования предоставляемых ими ресурсов, потому что иначе они потеряют большую часть посетителей. Одним из решений, позволяющих устранить проблему удобства просмотра сайта, 691 является создание мобильной версии (приложения) сайта, но данный подход обладает рядом проблем:

1)разделение трафика – с точки зрения продвижения сайта мобильное приложение не удобно

тем, что разделяет весь траффик ресурса на траффик приложения и трафик сайта, т.е. уменьшением показателя посещаемости сайта пользователями;

2)необходимостью интеграции приложения с сайтом – владельцам сайта необходимо будет

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

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

многие пользователи, которые не уверены в том, что они будут его регулярно использовать не осуществят эту загрузку;

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

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

страниц и концентрации ссылочной массы на одном домене.

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

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

Впервые понятие отзывчивого веб-дизайна ввёл Итан Маркотт в одной из своих статей в мае

2010 года. Впоследствии он выпустил книгу под названием «Responsive Web Design», посвященную

Фундаментальные и прикладные исследования молодых учёных: материалы Международной научно- практической конференции студентов, аспирантов и молодых учёных, 8-9 февраля 2017 г.

ИНЖИНИРИНГ И ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННЫХ СИСТЕМ ДЛЯ ОБЪЕКТОВ АВТОМАТИЗАЦИИ:

АНАЛИЗ ПРОБЛЕМ, ПРАКТИКА РЕШЕНИЙ

данной технологии. Потом Джеффри Зельдман предложил расширить понятие Итана Маркотта, чтобы оно покрывало любые подходы, обеспечивающие ясное визуальное восприятие независимо от характеристик экрана и других ограничений пользовательского устройства[3].

С другой стороны, Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich

метод «постепенного улучшения» [4].

Адаптивный веб-дизайн – это технология создания веб-страниц, которая обеспечивает

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

рисунке 1. Из данного рисунка видно, что данная технология обеспечивает удобство пользования сайтом на различных типах устройств [2].

692

Рисунок 1 – Пример web-приложения построенного по технологии адаптивного дизайна

Основным принципом данной технологии выступает:

1)проектирование дизайна web-приложения начиная с версии web-сайта для мобильных

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

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

Фундаментальные и прикладные исследования молодых учёных: материалы Международной научно- практической конференции студентов, аспирантов и молодых учёных, 8-9 февраля 2017 г.

ИНЖИНИРИНГ И ПРОЕКТИРОВАНИЕ ИНФОРМАЦИОННЫХ СИСТЕМ ДЛЯ ОБЪЕКТОВ АВТОМАТИЗАЦИИ:

АНАЛИЗ ПРОБЛЕМ, ПРАКТИКА РЕШЕНИЙ

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

представлен пример использования макета с блоками [2].

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

дизайна.

Рассмотрим особенности использования модульной сетки Bootstrap, а также принципы ее работы. Сетка представляет собой 12-столбчатую адаптивную разметку. Web-разработчик может

размечать разрабатываемую страницу, используя любое количество строк, но обязательным условием является использование 12 столбцов, которые образуют ряд. Каждый столбец занимает 1/12 ширины сайта или HTML блока, в который заключена сама сетка. Каждый элемент может занимать от одного до 12 столбцов. На рисунке 3 представлены различные способы использования модульной сетки [5].

Рисунок 3 – Пример комбинирования столбцов модульной сетки

Обозначениям блоков данного рисунка выступают встроенные в фреймворк CSS классы,

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

Фундаментальные и прикладные исследования молодых учёных: материалы Международной научно- практической конференции студентов, аспирантов и молодых учёных, 8-9 февраля 2017 г.