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

Аннотация

Джурджу Л., Глигореа И. - Адаптивные методы веб-дизайна.Впервые представленная Итаном Маркоттом в 2010 году в его статье "Адаптивный веб-дизайн", концепция адаптивного дизайна относится к способности веб-сайта адаптироваться к различным разрешениям и устройствам, на которых он отображается (ПК, ноутбуки, планшеты, смартфоны и т.д.), не подвергаясь деградации. Сайт должен распознавать, на каком устройстве он отображается, и автоматически реагировать на предпочтения пользователя. Такой подход приходит на помощь тем, кто был вынужден делать множество версий сайта, чтобы к нему можно было получить доступ с iPad, Blackberry, Kindle, нетбука, iPhone и так далее[1], и становится сегодня необходимостью. При использовании одного и того же кода и URL-адреса адаптивный веб-сайт может обеспечить оптимальный опыт просмотра - без изменения размера, панорамирования или прокрутки на большинстве устройств. Веб-дизайнеры подошли к решению новой задачи с большим количеством разнообразных решений. Чтобы быть в курсе изменений, происходящих в веб-дизайне, в этой статье мы обсудим вопросы, связанные с официальным сайтом Академии сухопутных войск.

Введение

В настоящее время адаптивный веб-дизайн - это уже не новая методика тестирования, а технический тренд. С 2013 года он является наиболее часто используемым, поскольку все больше и больше владельцев веб-сайтов хотят предложить пользователям приятный опыт использования мобильного Интернета, а телефоны, планшеты и мобильные устройства находят свое применение в повседневной жизни. Согласно результатам опроса "Повседневная жизнь в Интернете", проведенного по заказу Google в пяти странах: Румынии, Чехии, Словакии, Венгрии и Польше, 67% румын, подключенных к Интернету, используют для подключения смартфоны и мобильные телефоны, а 32% - планшеты. Другими значимыми показателями являются следующие: 61% людей имеют лучшее мнение о брендах, когда они обеспечивают приятный опыт работы с мобильными устройствами, и более 20% поисковых запросов в Google выполняется с мобильных устройств. Трафик с мобильных устройств составляет более 50% от общего числа пользователей общего трафик в Интернете. Результаты другого опроса (рисунок № 1) сервиса веб-аналитики StatCounter Global Stats показывают, например, что в Румынии использование устройств с разрешением 360x640 пикселей увеличилось на 10% в период с мая 2016 года по апрель 2017 года.

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

Вопросы, которые необходимо рассмотреть

Во-первых, ответственный дизайн требует различная организация сайта в виде плавных блоков (гибких сеток), которые перемещаются относительно друг друга в зависимости от разрешения экрана, элементы с различными размерами, гибкие изображения, а также возможность распознавания размеров сайта и выбора оптимальной версии отображения для улучшения навигации. Для создания адаптивного сайта требуются три основных компонента: гибкие сетки, гибкие изображения/ медиа и медиа-запросы[3]. Эти элементы существуют в контексте другого способа мышления. Пример элементов адаптивного веб-сайта показан на рисунке № 3.

Первым шагом в адаптивном веб-дизайне является использование так называемых гибких сеток. Большинство сайтов имеют фиксированную ширину и расположены по центру в браузере, но, учитывая большое количество разрешений на сегодняшний день, преимущества гибких сеток трудно игнорировать. Размерные сетки Fluid основаны на процентных соотношениях и очень точно рассчитаны. Это гарантирует, что все элементы в макете масштабируются друг под друга; размеры больше не измеряются в пикселях, а в относительных единицах и процентах. Таким образом, при масштабировании сайта до очень низкого разрешения все его элементы уменьшаются и идеально совмещаются друг с другом. Лучший способ создать такой сайт - создать дизайн с высоким разрешением, измерить размеры каждого элемента и разделить ширину элемента на ширину дизайна.

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

Медиа-запросы (@media) Это эффективный способ загрузки различных стилей CSS для различных разрешений, чтобы обеспечить наилучшее восприятие посетителями. Медиазапросы - это, по сути, условия, накладываемые на стиль CSS в зависимости от разрешения экрана. Медиазапрос - это технология CSS, представленная в CSS3. Правило @media включает блок свойств CSS, только если выполняется определенное условие. Предположим, что размер окна браузера меньше 320 пикселей, цвет фона изменится на зеленый, а граница раздела меню исчезнет: @экран только для мультимедиа и (максимальная ширина: 320 пикселей) { тело { цвет фона: зеленый;} .меню {поле:0 пикселей;} } Используя серию аналогичных запросов, можно было бы создать различные условия для более высоких разрешений: 480 пикселей, 600 пикселей, 768 пикселей, 900 пикселей, 1200 пикселей. Можно было бы использовать любое количество необходимых условий. В идеале сайт должен выглядеть безупречно независимо от разрешения, но, учитывая его трудоемкость, лучше продумать все до мелочей. расскажите о целевой аудитории заранее.

Чтобы сделать новый веб-сайт адаптивным, необходимо выполнить несколько шагов, которые будут описаны ниже. Первый шаг - Добавление области просмотра Окно просмотра - это мета-тег для создания адаптивного веб-сайта, без которого весь процесс был бы невозможен. Он указывает браузеру, что страница должна быть масштабирована в соответствии с размером экрана. Существует несколько способов применения этого окна просмотра, но он используется (наиболее часто) в разделе HTML-страниц сайта. Параметр width=device-width устанавливает ширину страницы в соответствии с шириной экрана устройства, а параметр initial-scale=1 устанавливает начальный уровень масштабирования при первой загрузке страницы. Второй шаг - установка точек останова Далее, масштабирование страницы для мобильных устройств выполняется с помощью ряда изменений в CSS. Необходимо установить несколько точек останова в тех местах, где это необходимо, чтобы элементы страницы перемещались соответствующим образом и хорошо отображались на экране. Размеры элементов страницы должны быть измерены в пикселях, чтобы установить точки останова, в которых содержимое начинает выглядеть плохо при уменьшении размера экрана. Эти размеры можно найти в Google Chrome, активировав режим “Проверка элемента”, а затем обводя край появившегося раздела до тех пор, пока страница не начнет выглядеть плохо. Точки останова устанавливаются с помощью медиазапросов в CSS. Таким образом, можно добавить точку останова, в которой определенные части дизайна будут вести себя по-разному с каждой стороны от точки останова.

Разница между классами (см. пример на рис. 4) заключается только в названии, и это дает возможность определить в html, как точки останова влияют на классы: Для телефонов с очень маленькими размерами (менее 768 пикселей) следует учитывать префикс класса . Здесь место очень ограничено. Поэтому расположение элементов должно быть хорошо продуманным, чтобы сохранить четкость изображения. В большинстве случаев понятно, что меню в области навигации будет представлено в виде значка. Меню адаптируется к небольшому пространству с помощью переносов строк, а поля выбора целевой группы исчезают. Параметры в полях выбора перемещаются на другой уровень и подуровень меню. Для небольших устройств, планшетов (более или равное 768 пикселей), следует учитывать префикс класса col-sm-*. Планшеты, как правило, меньше мониторов, поэтому содержимое страницы должно соответствовать новым требованиям к пространству. Для настольных компьютеров устройств среднего размера (более 992 пикселей и менее 1200 пикселей) следует учитывать префикс класса col-md-*. Для настольных компьютеров с большими устройствами (более 1200 пикселей) следует учитывать префикс класса col-lg-*. Символ “*” может быть заменен цифрой. Например, .col-md-4 создает столбец, размер которого в четыре раза превышает размер столбца .col-md-1; .col-xs-12 создает столбец, размер которого в двенадцать раз превышает размер .col-xs-1 и т.д. 2.5. Порядок загрузки Для создания адаптивного сайта мы можем использовать два способа, в зависимости от существующего контента. Первый способ, если сайт уже существует, нет смысла начинать с нуля. Его просто нужно переделать. Таким образом, мы можем использовать постепенную деградацию, когда подробный сайт для большого экрана должен постепенно уменьшаться. Чем меньше экран, тем больше элементов страницы нужно опустить, сократить или переназначить, чтобы сайт был понятным и простым в использовании. Для нового веб-сайта, созданного с нуля, исходной концепцией является использование мобильных устройств, что называется прогрессивным улучшением. Это означает, что страница сначала создается для самых маленьких и, наконец, для больших экранов, потому что чем лучше страница сведена к абсолютно необходимой, тем более понятной и полезной она будет на небольших конечных устройствах. Затем этот вид сайта, ориентированный на мобильные устройства, постепенно расширяется до более совершенного вида на планшете и, наконец, до большой настольной версии со всей информацией, изображениями, анимацией и дополнительными функциями, которые также отображаются на экране меньшего размера.

Третий шаг – уменьшение размера текста В узком окне просмотра, когда сайт отображается на маленьких экранах, пространство для отображения текста недостаточно велико для корректного отображения настроек форматирования (заголовки сайтов, выделенные жирным шрифтом сайты, списки, таблицы и т.д.). С другой стороны, для большего окна просмотра, хотя ранее текст был настроен на фокусировку и не отображался очень длинными строками, необходимо учитывать, что посетитель находится в пределах пешей досягаемости и существует риск того, что текст с размером шрифта 12 или 14 не будет прочитан. Таким образом, окончательная настройка, которая должна быть выполнена в CSS, относится к согласованию размера отображаемого на экране текста. Например, вот как увеличить размер заголовков для каждого раздела контента, сохраняя при этом их размер не более чем на 5% от ширины: #заголовок {отступ : 20 пикселей на 5%} 2.6. Четвертый шаг – Настройка элементов Когда дело доходит до ручного изменения сайта, чтобы он стал адаптивным, необходимо выполнить ряд тонких настроек после выполнения описанных выше действий. Это необходимо сделать, особенно в областях, где есть визуальные элементы (фотогалереи, видео), дополненные текстом или таблицами. Таким образом, корректировка будет заключаться в следующем: Адаптация элементов форм к их целевым визуальным элементам; Изменение расположения видео и изображений; Адаптация форм для небольших экранов; Расширение таблиц для больших экранов. Эти настройки предполагают внесение некоторых дополнений в CSS-код с учетом калибровки границ визуальных элементов и их масштабирования по ширине контейнера. Выполнение этих настроек зависит от сложности каждого сайта. 4 Адаптивных служебных класса Чтобы сайт был адаптивным на разных устройствах, рекомендуется использовать адаптивные служебные классы bootstrap. С их помощью мы можем сделать контент скрытым или видимым, в зависимости от устройства (с помощью медиа-запроса).

Выводы

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

Список использованной литературы

1. E. Markotte Responsive web-design// A Book Apart, 2015Источник
2. Bootstrap// Интернет-ресурс Источник