VIII Международная студенческая научная конференция Студенческий научный форум - 2016

РЕШЕНИЯ ДЛЯ АДАПТИВНОЙ ВЁРСТКИ WEB-ИНТЕРФЕЙСОВ

Кошлоков Д. В., научный руководитель Абрамова О. Ф.

Волжский политехнический институт (филиал) ФГБОУ ВПО "Волгоградский государственный технический университет"

Волжский, Россия

SOLUTIONS FOR THE ADAPTIVE LAYOUT OF WEB INTERFACES

Koshlokov D. V., scientific director Abramova Oksana Fyodorovna

Volzhskiy Polytechnical Institute, branch of the Volgograd State Technical University

Volzhskiy, Russia

Введение.

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

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

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

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

Адаптивная вёрстка

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

Фундаментальные принципы, на основании которых мы можем судить о качестве WEB-интерфейса, говорят нам, что пользователь будет просматривать содержимое страницы только в том случае, если он видит всё содержимое в пределах ширины своего экрана. Согласитесь, не удобно крутить страницу влево и вправо, если текст или картинка «улетели» за боковые границы открытого окна браузера. Максимум, что пользователь готов выполнить — это крутить колесо мышки или водить пальцем по экрану в вертикальных направлениях. Адаптивная вёрстка подразумевает тот факт, что при использовании её принципов разработки WEB-интерфейса, страница будет одинаково хорошо отображаться на всех устройствах с различными разрешениями экранов.

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

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

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

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

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

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

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

Общий механизм реализации адаптивной вёрстки обычно сводится к использованию CSS 3 Media Queries, который задаёт параметры отображения блоков страницы в зависимости от ширины окна браузера. Популярным и в тоже время достаточно эффективным методом управления объектами в адаптивной вёрстке является использование табличного макетирования, то есть расположения элементов относительно общей сетки. При построении объектов страницы блоки собираются в строку, где указывается сколько колонок сетки будет занимать тот или иной блок. Благодаря совокупному использованию стилей и JavaScript можно добиться полностью автоматического перестроения элементов страницы при различных размерах экрана.

Широкое применение адаптивных WEB-интерфейсов за последние несколько лет повлекло за собой появление универсальных инструментов. Изначально они использовались как внутренние рабочие концепции в популярных интернет проектах и студиях. Эти концепции дорабатывались, исправлялись ошибки, обзаводились универсальными элементами, что в итоге дало почву для появления целых CSS фреймворков, позволяющих разработчикам легко и быстро строить свои проекты на адаптивных вёрстках.

CSS фреймворки

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

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

Рассмотрим самые популярные на сегодняшний день CSS фреймворки, позволяющие верстать адаптивные WEB-интерфейсы.

Gumby (http://gumbyframework.com/) - позиционируется как простой в использовании фреймворк для создания адаптивных макетов, позволяет индивидуально настраивать сетку, содержит множество универсальных компонентов, часто используется новичками из-за своей простоты использования.

Bootstrap (http://getbootstrap.com/) - пожалуй одна из самых популярных CSS библиотек от разработчиков Twitter. Также позволяет создавать адаптивные макеты на основе 12-ти колоночной сетки, содержит множество элементов, поддерживает использование тем оформления и подключения дополнительных плагинов.

Foundation (http://foundation.zurb.com/) - тоже очень популярный фреймворк для создания «резиноых» адаптивных макетов. Обладает широким арсеналом готовых предустановок для WEB-сайтов, мобильных приложений. Отличительной особенностью фреймворка является то, что разработчики придерживаются принципа «mobile first», то есть макет изначально готовится для мобильных устройств, а уже потом для десктопных разрешений экрана. Такой подход сказывается на качестве отображения контента в мобильном виде. Они также ушли от использования JS библиотеки jQuery и добавили в пакет более лёгкую Zepto.js, при этом сохранив совместимость с jQuery, что позволяет разработчику иметь выбор при использовании той или иной библиотеки.

Это далеко не конечный список CSS фреймворков для разработки адаптивных WEB-интерфейсов. Выбор его зависит от поставленной задачи, ориентировании больше на десктопное или мобильное использование, в конце концов от пристрастий самого разработчика.

Аппаратные и системные требования.

Технология разработки адаптивных WEB-интерфейсов подразумевает использование современных браузеров с поддержкой HTML 5, CSS3, JavaScript. Эти технологии поддерживаются популярными браузерами в графических средах операционных систем GNU/Linux, Windows, Mac OS, мобильных системах Android, iOS, Windows. Стоит учитывать, что рендеринг вёрстки и отображение элементов рассчитывается на стороне клиента. Использование «тяжёлых» интерфейсов с большим числом элементов и блоков может приводить к увеличению времени загрузки страницы. Конечно, современные мобильные устройства имеют под капотом достаточно мощные процессоры, оснащены порой 1-2 гигабайтами оперативной памяти, но существуют и бюджетные устройства, для которых прогрузка и обработка сложных страниц становится настоящим испытанием как для оборудования, так и для нервов ожидающего загрузки страницы пользователя. Стоит учитывать также и тот момент, что пользователи мобильных устройств могут использовать мобильный интернет с низкой пропускной способностью канала, поэтому не стоит пренебрегать функцией генерации CSS библиотек с удалением неиспользуемого функционала для уменьшения объёма загружаемых компонентов страницы.

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

Заключение

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

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

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

Библиографический список

1. Арбузов В.П. Использование технологии Landing Page при проектировании современного сайта [Электронный ресурс] / В.П. Арбузов, О.Ф. Абрамова // Современные научные исследования и инновации. - 2015. - № 1. - C. Режим доступа : http://web.snauka.ru/issues/2015/01/43465.

2. Мельниченко Д.В. Исследование логических проблем юзабилити сайтов и анализ существующих решений [Электронный ресурс] / Д.В. Мельниченко, О.Ф. Абрамова // Современная техника и технологии. - 2015. - № 1. - C. Режим доступа : http://technology.snauka.ru/2015/01/5360