Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design
Webdesign

Состояние Отзывчивого Веб-Дизайна

by
Length:MediumLanguages:

Russian (Pусский) translation by Narine Hovhannisyan (you can also view the original English article)

Поскольку мы переходим в 2015 год, то это прекрасное время, чтобы рассмотреть “Состояние Отзывчивого Веб-Дизайна”.

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

История До сих Пор

До того, как мы приступим, давайте начнем с определения того, что мы на самом деле имеем в виду, когда говорим “Отзывчивый Веб-Дизайн".

Когда Ethan Marcotte пять лет назад изначально придумал термин в своей статье A List Apart, он привел сетку, гибкие изображения и медиа запросы в виде трех "технических ингредиентов" ОВД. 

Accompanying illustration by Kevin Cornell
Бессмертная сопроводительная иллюстрация Kevin Cornell

Однако, он сразу же расценил эти характеристики, сказав:

“...но это также требует другого способа мышления.”

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

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

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

На мой взгляд этот образ мышления можно суммировать следующим образом.

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

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

Отзывчивый веб-дизайн - как мы его знаем

Не смотря на то, что много чего поменялось в ОВД, есть несколько вещей, которые остались прежними, и многие разработчики согласятся, что это хорошая практика.

Вот некоторые из наиболее широко распространенных аспектов нынешнего ОВД как мы его знаем.

Поддержка Нескольких Типов Дисплея

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

Поддержка Нескольких Механизмов Ввода

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

Touch screen gestures

Использование Медиа Запросов и Точек Останова

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

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

Гибкое Отображение Медии

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

Box showing the dimensions of uploaded media

Другие виды медии, такие как видео и аудио, также должны быть гибкими.

Использование Мета Тега Viewport

Мы должны включить мета тег viewport (и, глядя вперед, CSS эквивалент) так, чтобы наши макеты вели себя так, как мы от них этого ожидаем:

На Пути

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

“Десктоп” против “Мобильного” Мышления

Рассмотрим следующий набор устройств для просмотра веб-страниц:

  • A 10.1 inch 1024x600 Acer eMachine Netbook без каких-либо сенсорных взаимодействий.
  • A 20 inch 3840x2560 Panasonic Toughpad Tablet только с сенсорным взаимодействием.
  • A 78 inch 3840x2161 Ultra HD Television, с Xbox работающий на IE навигации через Kinect жесты и голосовые команды.
  • 27-дюймовый монитор, перевернутый в портретный режим, работающий на 1020px в ширину и 1980px в высоту.
  • 24-дюймовый 1920x1080 монитор с пользовательскими настройками браузера на 125% размер зума и установленным по умолчанию шрифтом в 20px, навигацией с вспомогательной клавиатурой и без мыши.

Имейте в виду, что этот список полностью состоит из реально существующих вещей, используемых в повседневной жизни.

Предположим, что мой сайт имеет множество малоразмерных, сенсорных, мобильных свойств и свойств более больших размеров, зависящих от мыши и с дизайном для десктопа. Для какой ширины я должна настроить свои медиа запросы для применения моих “мобильных” свойств и свойств “десктопа”, чтобы всем пользователям этих устройств было удобно?

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

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

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

Код, основанный на фиксированных пикселях “px”

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

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

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

Фронт-енд фреймворки “Big 2” покидают Хорошее Судно PX и высаживаются на Гибкой Земле.

Bootstrap 4 работает и будет полностью основан на rem / em / %, оставляя позади макеты Bootstrap 3, основанные на px. И Foundation 5 уже завершил свой переход к работе с гибкими единицами.

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

px on a gravestone

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

Говоря о Flash...

Зависящий от Flash (и других плагинов браузера) Контент

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

Message This site uses Adobe Flash Player to display videos

Среди мобильных устройств очень распространено не поддерживать Flash, так что предоставление контента, ссылаясь на него, не самый надежный способ.

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

Настало время для представления медиа слайдов, основанных на плагинах, и их перехода в новую эру методов отображения.

Участники Мира ОВД

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

Медиа HTML5

Только потому, что Flash и его коллеги особо не поощряются, это не означает, что мы не можем иметь красивые вещи. Видео, аудио, анимация, и даже 3D и игры все еще употребляются благодаря HTML5 и CSS3 и JavaScript.

Когда-то у нас были плагины браузера, а теперь у нас есть HTML5 видео и аудио проигрыватели, CSS3 анимации, инструменты как Google Web Designer, Canvas, WebGL и возрастающий список интересных вещей.

Использование <picture> для Отзывчивого Использования Изображений

HTML5 элемент <picture> создает сопоставимый тип функциональности для изображений, как мы видим, в уже хорошо зарекомендованных элементах <video> и <audio>.

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

Это еще не полностью поддерживается в браузерах, однако есть очень твердый полифил под названием Picturefill (от Scott Jehl, человека, отвественного за Ответственный Отзывчивый Дизайн), который позволяет <picture> начать работу незамедлительно.

Читайте подробнее о том, как все это работает в Quick Tip: How to Use HTML5 “picture” for Responsive Images.

Шрифтовые Иконки

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

С помощью удивительных библиотек веб-шрифтов таких, как Font Awesome, Entypo, Typicons и многих других, вы можете иметь все виды изображений в ваших сайтах, от ракет до скрепок, до логотипов социальных сетей. И поскольку они предоставляются в виде шрифтов, а не изображений, вы можете изменять их цвет и размер с помощью CSS.

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

Появление На Горизонте

Flexbox

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

Есть только одна проблема для полного функционирования Flexbox: процент по использованию браузеров, не поддерживающих его, еще слишком значителен. Если вы работаете над проектом, который исключает поддержку IE8, IE9 и Opera Mini, то включите ее.

Тем не менее, CanIUse.com подсчитал общий процент использования этих трех браузеров в 3.18%, 2.13% и 2.82% соответсвенно. Также нет надежного резерва для Flexbox на данный момент. Это означает, что для страницы с объемом трафика от среднего до высокого, каждый месяц сотни и тысячи пользователей будут выходить на страницу, которая не работает.

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

Веб-Компоненты

Мы говорили недавно о веб-компонентах, которые по-прежнему спешат к нам и с каждым днем становятся нормой.

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

Это существенным образом демократизирует HTML, что является большим шагом.

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

Например, мы ранее упоминали о том, что ОВД требует гибкого размещения медии, и это включает разрешение iframe встроенных медиа, как видео YouTube, масштабировать и сохранять их соотношение.

Разработчик Joselito Junior создал с исходным кодом веб-компонент, который делает именно это, используя этот обычный HTML код:

Подробнее об этой увлекательной новой технологии в How to Create Your Own HTML Elements With Web Components.

Заключение

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

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

Если вы хотите потренироваться над вашими собственными методами отзывчивого веб-дизайна, вы, возможно, захотите посмотреть мой курс Responsive Web Design Revisited. За немногим более двух часов я последовательно проведу вас через все, что вам нужно знать о создании полностью отзывчивого веб-сайта. Первые два видео бесплатны, так что вперед, и получите предварительный просмотр сайта, который вы будете создавать, и всего остального, что вы будете учить.

Счастливого 2015 года, и пусть отзывчивый веб-дизайн развивается дальше!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.