Адаптивная верстка что это: Адаптивная вёрстка сайта на примере создания главной страницы

Содержание

Адаптивно-отзывчивый: разбираемся в терминологии | Frontender Magazine

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

Я постараюсь разложить все по полочкам и объяснить принципиальную разницу между типами макетов и подходами к веб-разработке.

Типы HTML-макетов

Под макетом в данной статье подразумевается не изображение в формате PSD, а уже готовая разметка HTML-страницы.

Фиксированные макеты

px

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

Фиксированная верстка является пережитком прошлого, когда ширина контента страницы была строго продиктована разрешением самых популярных экранов (800 на 600, затем 1024 на 768 и так далее). Даже сейчас еще легко можно встретить сайты с фиксированной шириной контента в 960 пикселей.

Резиновые макеты

%

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

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

Адаптивные макеты

px + media-queries

Адаптивный макет является очень близким к следующему типу — отзывчивому и базируется на использовании медиа запросов (англ. media queries) для адаптации контента под различные параметры экранов.

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

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

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

Отзывчивые макеты

% + media-queries

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

В итоге, отзывчивая страница не «прыгает» по контрольным точкам, а плавно изменяется между ними.

Смешанный

px + % + media-queries

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

Например адаптация под различные устройства может быть чем-то между адаптивной и отзывчивой версткой страниц. Данная ситуация довольно часто встречается как попытка оптимизации уже существующего сайта под различные типы устройств («mobile last»).

Подходы к созданию веб-сайтов и веб-приложений

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

Отзывчивый веб-дизайн

% + media-queries + %-media

Отзывчивый веб-дизайн был описан впервые в статье на A List Apart. Название подхода взято по примеру отзывчивой архитектуры, области архитектурной практики и исследований. Отзывчивая архитектура здания предполагает адаптацию самого строения (формы, цвета) в зависимости от состояния окружающей среды.

В 2011 Маркотте опубликовал одноименную книгу, в которой он собрал в единую технику некоторые давно известные приемы адаптации контента.

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

Подход основывается на резиновых макетах, медиа запросах и отзывчивых («резиновых») медиа-элементах (изображения, видео).

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

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

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

% + media-queries + %-media + JavaScript + magic

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

Прогрессивное улучшение — это стратегия веб-разработки, которая основывается на доступности контента и семантике на самом низком уровне, а остальные же уровни, такие как стилизация (CSS) и дополнительные скрипты (JavaScript), — лишь дополнения, которые делают жизнь проще. Стратегия была представлена в 2003 году на знаменитой конференции SXSW Стивеном Чампионом. В отличие от концепции постепенной деградации, когда разработчики ориентируются только на современные браузеры и “урезают” возможности для более старых, прогрессивное улучшение идет с обратной стороны, делая контент доступным для наибольшего количества устройств и браузеров. Так как эта проблема в наше время стоит довольно серьезно, данная стратегия даже была названа Top #1 трендом в веб-дизайне на 2012-й год.

В уже далеком 2011-ом Люк Вроблевски с помощью «A Book Apart» выпустил книгу под названием «Mobile First», которая, как и многие книги этого издателя, быстро стала бестселлером. Несложно догадаться, что книга освящает стратегию, которая предполагает, что вся разработка от планирования бизнес-целей, UX и веб-дизайна до последней строчки кода будет вестись начиная от самой компактной «мобильной версии» до настольных компьютеров, приставок или телевизоров.

Адаптивный веб-дизайн как подход был описан в одноименной книге Аарона Густафсона. Подход берет лучшее из идей «сначала мобильные» и прогрессивного улучшения и дополняет их. В простом изложении данная стратегия предполагает использование чистого HTML как базиса и дальнейших улучшений и фич за счет использования слоев CSS и JavaScript. Если для какого-то определенного браузера или устройства доступна какая-то новая фича, то ее можно использовать только после проверки на ее доступность, сохраняя обратную совместимость с не поддерживающими устройствами (например, тач-события).

«Чистый HTML работает везде.»
— Кто-то на какой-то конференции

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

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

И в заключение

«Вы мне это прекратите!»
— Братья Стругацкие, «Понедельник начинается в субботу» (1965)

Ничего нового придумано не было. Прогрессивное улучшение как подход существовал с 2002. Резиновые макеты и медиа-запросы еще старше (первый черновик был опубликован еще в апреле 2001-го!). Проблема оптимизации под различные устройства и платформы встала наиболее остро с развитием смартфонов (и возможности открывать обычные веб-страницы на различного рода устройствах), а в последствии и планшетных компьютеров и других устройств, таких как Smart TV или игровых консолей. Но ускорение развития и разработки веб-стандартов, а так же систематизация подходов к веб-разработке позволило ее в некотором смысле решить.

В наше время довольно остро стоит вопрос с терминологией и ее пониманием в сообществе веб-разработчиков. Такая тенденция появилась неспроста и наблюдается не только на пост-советском пространстве, но и во всем мире (проверить достаточно просто — запросить в Google «adaptive vs. responsive web design» и посмотреть разнообразие в понимании терминологии в различных постах).

Еще одним ярким примером такого недопонимания является недавний пост русского дизайнера Ильи Бирмана.

Материалы для дальнейшего чтения

что это и как использовать

Адаптивная верстка: что это и как использовать

Адаптивная верстка: что это и как использовать

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

Что такое адаптивная верстка?

Адаптивный веб-дизайн (RWD — Responsive web design) создает систему, позволяющую одному сайту (с одним URL-адресом и одним источником контента) реагировать и адаптироваться к размерам устройства пользователя. Адаптивный веб-сайт создан с использованием верстки с гибким макетом, который подстраивается под размеры экрана устройства.

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

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

Сам термин «адаптивная верстка» был фактически придуман в 2010 году веб-дизайнером Итаном Маркоттом. Сегодня адаптивная верстка в веб-дизайне уже не новая тенденция, а скорее проверенный временем способ мышления, стоящий за созданием сайтов.

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

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

Почему адаптивный дизайн важен для бизнеса
  • Расширяется охват клиентов благодаря захвату пользователей небольших устройств (планшетов и смартфонов).
  • Постоянный опыт работы с широкой аудиторией, который может увеличить количество потенциальных клиентов, продажи и конверсии.
  • Аналитика, отслеживание и отчетность по версиям сайтов для десктопов и мобильных устройств могут быть в одном месте.
  • Затраты времени и стоимость управления контентом снижается.
  • Более 60 % запросов в Google на конец первого квартала 2019 делаются с мобильных устройств.

Регулировка разрешения экрана

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

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

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

Частичное решение: делаем все гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

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

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS.

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100%.

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

Еще один способ: отзывчивые изображения

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

Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл rwd-images.js, файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc:

<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

Для любого экрана шире 480px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

Настраиваемая структура макета страницы

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

Например, у вас есть главный файл со стилями, который задает #wrapper#content#sidebar#nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

style.css (основной)mobile.css (дочерний)

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

Медиазапросы CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width, то стили будут проигнорированы. max-width делает противоположное.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width.

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный).

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

Опциональное отображение контента

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

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

Display None

display: none используется для объектов, которые нужно спрятать.

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

Заключение

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

источник

 

Человеческим языком о правильной верстке сайтов

Пришло время поговорить о правильной верстке сайтов. Фиксированная, блочная, адаптивная, мобильная, резиновая, гибкая, семантическая, валидная, кроссбраузерная верстка – звучит очень сложно и непонятно. Давайте разберемся, что это значит, и что из всего этого вам нужно.

Если коротко, верстка — это создание HTML-кода и применение стилей по отрисованному дизайну. Чаще всего страницы верстают на основе подготовленного заранее в фотошопе psd-макета.

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

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

Какие требования сегодня предъявляют к верстке?

Основной список требований таков:

  • кроссбраузерность;
  • адаптивность;
  • минимум кода;
  • высокая скорость загрузки страниц;
  • семантичность;
  • валидность.

Рассмотрим подробнее, какие существуют виды верстки сегодня и станет понятно, что все это значит.

Виды верстки сайтов

Фиксированная верстка или статическая

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

Резиновая верстка

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

Табличная верстка или верстка таблицами

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

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

Блочная верстка, верстка блоками или div-верстка.

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

и , которые вложены друг в друга. Для доступа к ним используются атрибуты id и class. Откройте исходный код (Ctrl + U) практически любой веб-страницы, и вы увидите такую верстку.

 

Адаптивная верстка или мобильная верстка

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

Гибкая верстка или flex верстка

Сначала применяется блочная верстка, а потом нужные блоки превращают во флекс-контейнеры (флексбоксы). Если говорить сложным языком, в стилях элемента указывают display: flex; элементу можно указать направление главной оси и выравнивание. Эти возможности стали доступны с приходом стандарта CSS3. Теперь страницы становятся очень гибкими. Если по-простому – элементы объединяются в специальные контейнеры, задаются простые настройки и браузеры сами выстраивают элемент максимально органично. Этот механизм является наиболее перспективным, и, хотя технология плохо поддерживается старыми браузерами, в будущем ее применения будет расширяться.

Также хорошая верстка должна обладать некоторыми свойствами.

Семантическая верстка

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

Валидная верстка или по-другому верстка без ошибок

Это верстка, выполненная в соответствии со стандартами W3C. Проверить HTML-страницу на корректность вы можете с помощью специального валидатора W3C, а невалидно сверстанные страницы нагоняют.

Кроссбраузерная верстка.

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

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

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

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

Что Такое Адаптивная Верстка? | Создание Верстки Страниц Сайта

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

Если вы на любой странице этого сайта нажмете правую кнопку и выберите пункт Просмотр кода страницы (или Исходный код страницы), вы увидите часть этого кода. Это HTML-разметка страницы. Также здесь присутствуют файлы CSS-стилей, которые задают внешний вид сайта. Если их убрать, останется только разметка страницы — блоки с текстами и ссылками друг за другом, без какого-либо форматирования.

Так выглядит сайт без стилей:

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

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

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

Обычно верстальщик делает несколько вещей:

— Превращает макет в html-шаблон.

— Адаптирует шаблон под все устройства и браузеры.

— Добавляет необходимый функционал с помощью JavaScript. Например, появляющееся по кнопке модальное окно, переход к следующему слайду по стрелочке вправо или влево.

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

Как проверить верстку вашего сайта

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

Проверить кроссбраузерность верстки можно несколькими способами.

Если ваша профессия не связана с разработкой сайтов, просто установите несколько популярных браузеров: Chrome, Firefox, Opera, Internet Explorer, а также рекомендую Blisk. Если в нем дизайн показывается без ошибок, то он, скорее всего, также будет работать и на Safari — браузере для Mac, iPhone и iPad.

Либо с помощью этого сервиса:

https://crossbrowsertesting.com

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

Адаптивность верстки можно протестировать все тем же Blisk’ом. Помните, что этот браузер платный. Однако у него есть бесплатный функционал. Если вам нужно просто проверить свой сайт либо работу верстальщика, вам будет достаточно этого функционала.

Бесплатный онлайн-сервис:

https://screenfly.org

Но в нем есть не все нужные размеры экранов.

Еще один сервис, доступный в Google Search Console:

https://search.google.com/test/mobile-friendl

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

Ошибки верстки проверяются этими сервисами:

https://validator.w3.org

http://jigsaw.w3.org/css-validator

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

Mobile Friendly сайт

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

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

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

Верхнее меню обычно скрыто. Оно открывается при нажатии на кнопку с тремя полосками. Такая иконка получило название «Гамбургер».

Телефон и емейл на экранах смартфонов часто обозначают иконками.

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

Решается эта проблема несколькими способами:

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

2. Для таблиц задается определенный вид в мобильной версии. Например, первый левый столбец становится заголовком. Верхние столбцы выносятся влево — они становятся параметрами. А справа к ним подставляются значения из ячеек таблицы. Такой вид задается для каждой строки таблицы. Функционал этот сложнее разработать, он может не подойти абсолютно всем созданным таблицам, поскольку таблицы могут иметь различную структуру.

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

Как адаптировать ваш сайт под мобильные устройства

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

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

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

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

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

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

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

Есть два вида адаптации шаблона:

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

— Мобильная версия — это отдельный ресурс, для которого разрабатывается дизайн. Такой способ использует Вконтакте.

Сравните:

https://vk.com/fireleit

и

https://m.vk.com/fireleit

Для мобильной версии Вконтакте создал поддомен. Когда пользователь переходит на сайт ВК, скрипт автоматически определяет, с какого устройства зашел пользователь. И если со смартфона, то он перенаправляется на мобильную версию сайта.

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

Преимущества мобильной версии:

— Есть только необходимый для мобильной версии функционал.

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

— Всегда можно переключиться на десктопную версию.

Преимущества адаптивного дизайна:

— Прост в реализации, поскольку используется уже готовый шаблон.

— Не нужно создавать отдельный сайт.

— Легче продвигать в поисковиках.

Недостатки мобильной версии:

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

— Сложнее и дороже разработать.

Недостатки адаптивного дизайна

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

— Нельзя переключиться на десктопную версию, если что-то непонятно или неудобно.

Примеры неудачной верстки

https://www.theworldsworstwebsiteever.com

Этот сайт имеет название Худший сайт в мире. Возможно, есть и хуже. По крайней мере, сразу понятно, о чем сайт. А вот дизайн действительно ужасен.

http://www.arngren.net

Норвежский сайт по типу Amazon. Однако он больше напоминает газету с объявлениями. И то в газете было больше порядка.

http://www.miauk.com

Ну, как минимум, дешево и некрасиво. Но насколько нам известно, раньше сайт был еще более ужасен.

http://altenpohl.de

Жутко…

https://www.historianofthefuturex.com

Здесь помимо некрасивого дизайна еще и текст не видно.

Фреймворки для верстки

Фреймворки используются верстальщиками для упрощения верстки. В них присутствуют основные классы и элементы.

Фреймворк — это заготовка будущего шаблона.

Вот несколько популярных фреймворков:

Bootstrap

Очень известный фреймворк. Есть кнопки, меню, выпадающие списки, слайдер, модальные окна. В основе лежит сетка для адаптивной верстки.

Foundation

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

Skeleton

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

Отзывчивый дизайн — Изучение веб-разработки

На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

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

Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.

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

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

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

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

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

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

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

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.

  1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта — Fluid Grids (опубликовано в 2009 в A List Apart).
  2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
  3. Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.

Очень важно понять, что адаптивный веб-дизайн это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

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

Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
} 

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

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

Узнать больше о медиавыражениях можно в документации MDN.

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

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

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

target / context = result 

Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.

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

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

На более широких экранах они перемещаются в два столбца:

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.

Multicol

Самый старый из этих методов — это multicol, когда вы задаёте column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

.container {
  column-count: 3;
} 

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

.container {
  column-width: 10em;
} 

Flexbox

В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения flex-grow и flex-shrink вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

.container {
  display: flex;
}

.item {
  flex: 1;
} 

Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: пример, исходный код.

CSS grid

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
} 

Примечание: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

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

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

Отзывчивые изображения, используя элемент <picture> и атрибуты srcset и sizes элемента <img> оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

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

Вы можете найти подробное руководство по отзывчивым изображениям в разделе изучения HTML на MDN.

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

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px.

html {
  font-size: 1em;
}

h2 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
} 

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

В мобильных версиях заголовок меньше:

На компьютерах, однако, мы видим больший размер заголовка:

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

Using viewport units for responsive typography

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

h2 {
  font-size: calc(1.5rem + 3vw);
}

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

<meta name="viewport" content="width=device-width,initial-scale=1">

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=960px with the actual width of the device, so your media queries will work as intended.

So you should always include the above line of HTML in the head of your documents.

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

  • initial-scale: Sets the initial zoom of the page, which we set to 1.
  • height: Sets a specific height for the viewport.
  • minimum-scale: Sets the minimum zoom level.
  • maximum-scale: Sets the maximum zoom level.
  • user-scalable: Prevents zooming if set to no.

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

Адаптивная дизайн сайта или адаптивная верстка

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

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

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

У каждого устройства разный формат и разрешение экрана. Вы наверное не раз замечали, что зайдя на одну из веб страниц например с мобильного гаджета (смартфона, планшета) у нее как бы «обрезаются края» или появляется бегунок по горизонтали. Такая ситуация возникает не в самом худшем случае. Это означает, что ширина сайта просто не уместилась в ширину вашего экрана, но можно промотать вправо, чтобы досмотреть остаток. 

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

Поэтому адаптивный дизайн сайта стал не данью моде, а необходимостью.

Как работает адаптивный дизайн сайта

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

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

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

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

Как создается адаптивная верстка сайта

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

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

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

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

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

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

  • Будете ли вы вообще искать эту информацию на таком ресурсе?
  • Как долго вы останетесь на нем?
  • Удобно ли вам пользоваться им?
  • В конце концов, зачем это вам, если там в перечне у Яндекса или Гугла (смотря чем вы пользуетесь) по вашему запросу еще множество похожих сайтов?

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

За 2014 год по данным официальной статистики интернетом с мобильных устройств пользуются в 35% случаев. Это значит, что вы потеряете более трети пользователей, которая откажется от вашего веб ресурса, если у него нет адаптивного дизайна, или наоборот, приобретете треть пользователей по сравнению со своими конкурентами, если ваш сайт будет ее иметь.

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

Респонсивная Адаптивная Резиновая верстка сайта

Перейти в раздел к «Содержанию»

Верстки делятся по принципу отображения и по типу:

1) Деление по принципу отображения:

а) Фиксированная (статическая) верстка.
б) Резиновая (тянущаяся) верстка.
в) Адаптивная верстка — щелкните здесь.

При фиксированной верстке веб-страница имеет постоянную ширину, независимо от ширины окна браузера.
При резиновой верстке веб-страница изменяет свои размеры в зависимости от ширины окна браузера. Например, Вы растягиваете окно браузера, и веб-страница тоже растягивается.

Какая верстка лучше?
Однозначного ответа нет, обе верстки (фиксированная и резиновая) хорошие — главное правильно их использовать. Хотя резиновая верстка является более «продвинутой».

Резиновую верстку выполнять сложнее, чем фиксированную, т.к. приходится учитывать, как будет выглядеть веб-страница на экранах разной ширины. Выполняя резиновую верстку часто ориентируются на то, чтобы страница сайта хорошо отображалась на экранах шириной от 1024рх до 1280рх, т.е. содержимое веб-страницы будет растягиваться и сжиматься по ширине от 1024рх до 1280рх. Чтобы содержимое страницы (контейнеры, картинки) могло резиниться, ширину элементам веб-страницы задают в процентах — в этом случае ширина элемента вычисляется браузером относительно ширины контейнера-родителя этого элемента. В результате получается, что при увеличении ширины контейнера-родителя происходит увеличение ширины элемента страницы, а при уменьшении ширины контейнера-родителя происходит уменьшение ширины элемента страницы. Сложность резиновой верстки во многом зависит от макета — при этом не каждый дизайн веб-страницы подходит для резиновой верстки. Из-за сложности выполнения, в резиновой верстке чаще возникают ошибки, поэтому выполнение качественной резиновой верстки требует дополнительных знаний и умения. Например, наверно, Вы видели, что на квадратном мониторе сайт выглядит вроде хорошо, но этот же сайт на широкоэкранном мониторе размазывается по всей ширине экрана (дизайн сайта портится). Либо наоборот, на широкоэкранном мониторе сайт выглядит хорошо, а на квадратном мониторе дизайн сайта портится, содержимое веб-страницы начинает налезать друг на друга. Это показатели неправильно сделанной резиновой верстки.

2) Деление по принципу верстки:

а) Табличная верстка.
б) Блочная верстка.
в) Комбинированная верстка (Табличная и Блочная верстки).

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

Так в чем же дело?
Дело в том, что верстать весь сайт на таблицах, когда в ячейках одной таблицы создается другая таблица и т.д. — это устаревший подход и современные сайты так создавать не нужно (исключение можно сделать для сайтов с простой структурой, когда таблица используется для создания каркаса сайта). А вот использование на сайте таблиц для представления в них табличных данных — это правильный подход в использовании. По этой причине таблицы находятся в стандарте HTML5

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

Адаптивная (Респонсивная) верстка

Адаптивная верстка (или как ее еще называют Респонсивная верстка — от англ. Responsive) — суть этой верстки в том, чтобы сверстанная веб-страница хорошо отображалась на экранах устройств разного размера, например, смартфон, планшет, монитор компьютера. Под размер экрана каждого из указанных устройств задаются свои настройки стилей CSS. Респонсивная верстка получается путем использования техники резиновой верстки, а также применения через CSS правила @media , с помощью которого указывается размер ширины экрана устройств, под которые делается адаптив верстки.

Примеры адаптивной верстки смотрите щелкнув по указанным ссылкам.

Пример 1
Пример 2
Пример 3

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

Проблема масштабирования в мобильных браузерах

Иногда случается так — Вы сделали адаптивную верстку страниц сайта, но мобильные браузеры (Opera, Mozilla, Яндекс и др.) не обращают ни какого внимания на ваш адаптив, как будто и нет никакого адаптива. Мобильный браузер просто уменьшает масштаб всей веб-страницы, чтобы веб-страница целиком поместилась на экране устройства, в котором вы смотрите сайт.

Исправить возникшую ситуацию можно тем, что в контейнере head, в исходном коде веб-страниц, нужно написать мета тег viewport. Например,
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>

Разберем значение атрибута content
1) width=device-width этим мы показываем, что ширина области просмотра равняется ширине экрана устройства, на котором смотрят наш сайт.
2) initial-scale=1.0 этим мы показываем, что масштаб страницы при загрузке 100% При этом пользователь, просматривая сайт, может сам изменить масштаб.

Иногда на сайтах запрещают пользователю изменять масштаб просматриваемой страницы, т.е. пользователь всегда видит веб-страницу такой, какая она есть, и не может ее сделать крупнее или меньше. Это делается тем, что в значении атрибута content указывают maximum-scale=1.0, minimum-scale=1.0, user-scalable=no   Например.
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no»>

Размер шрифта в мобильных браузерах

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

Есть некоторые решения через CSS, но они помогают не везде и не всегда. Например.

html * {
      max-height: 1000000px;
      text-size-adjust: none;
}

Чтобы уменьшить самоволие мобильных устройств относительно размера шрифта, каждый используемый шрифт можно подключить как файл. Для лучшей кроссбраузерности, шрифт подключается в нескольких форматах: ttf, woff, svg, eot (для IE8 и меньше). Это относится и к безопасным шрифтам. Файлы шрифтов подключаются правилом @font-face

При этом использование файлов шрифтов, может усилить разность шрифта при отображении на ПК в разных браузерах.

Адаптивный дизайн против адаптивного: что лучше?

Google всегда рекомендовал адаптивный веб-дизайн (RWD), особенно после выпуска большого обновления 21 апреля 2015 г., которое повысило рейтинг мобильных сайтов.

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

Имея это в виду, давайте рассмотрим плюсы и минусы адаптивного vs.отзывчивый дизайн с точки зрения производительности и UX.

Один из самых больших споров, который мы наблюдали с момента появления мобильных устройств, заключается в том, следует ли выбрать разработку адаптивного веб-дизайна (AWD) или автономный мобильный сайт (со своим собственным m. URL). В целях данного обсуждения мы не будем использовать отдельные файлы m. сайты, так как это кажется наименее любимым решением для дизайнеров и предприятий, поскольку они должны создаваться отдельно (что приводит к увеличению первоначальных затрат и затрат на обслуживание).

В чем разница между адаптивным и адаптивным дизайном?

Итак, прежде всего, каковы ключевые различия между адаптивным и адаптивным дизайном?

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

Адаптивный дизайн

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

Adaptive определяет размер экрана и загружает для него соответствующий макет — обычно адаптивный сайт разрабатывается для шести стандартных размеров экрана:

  • 320
  • 480
  • 760
  • 960
  • 1200
  • 1600.

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

Примечание редактора: в UXPin можно использовать различные точки останова. Если вы хотите поиграть с ними, запустите бесплатную пробную версию.

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

Зачем нужен адаптивный дизайн?

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

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

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

Если вы хотите создать адаптивный сайт с нуля, это тоже нормально. Начните снова с проектирования с минимальным разрешением и постепенно увеличивайте его.Затем вы можете использовать медиа-запросы для расширения макета для просмотра с более высоким разрешением. Однако, если вы делаете дизайн для нескольких разрешений, вы можете обнаружить, что это заставляет макет «прыгать» при изменении размера окна.

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

Зачем нужен адаптивный дизайн?

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

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

Фотография предоставлена: Smashing Magazine

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

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

Соображения, которые необходимо учитывать

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

Responsive также требует большего количества кода, чтобы гарантировать, что сайт подходит для всех без исключения экранов, которые к нему обращаются.Однако дополнительная работа является спорной (по сравнению с адаптивным дизайном), поскольку адаптивный дизайн требует, чтобы вы разрабатывали и поддерживали отдельный код HTML и CSS для каждого макета. Модификация адаптивных сайтов также более сложна, поскольку, вероятно, вам придется убедиться, что все по-прежнему работает на всем сайте (например, SEO, контент и ссылки), когда придет время для внедрения.

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

Согласно Nielsen Norman Group: «Адаптивный дизайн часто превращается в решение головоломки — как реорганизовать элементы на больших страницах, чтобы они соответствовали более тонким, длинным страницам или наоборот. Однако , гарантирующего, что элементы умещаются на странице, недостаточно . Чтобы адаптивный дизайн был успешным, его также необходимо использовать при любом разрешении и размере экрана ».

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

Решение — адаптивный дизайн против адаптивного

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

Это также во многом будет зависеть от того, есть ли у вас уже существующий сайт или вы начинаете с нуля.Адаптивный дизайн стал популярной техникой дизайна, и считается, что около 1/8 веб-сайтов теперь используют адаптивный дизайн (в то время как данных о том, сколько из них используют адаптивный, практически нет). Показатели принятия адаптивных сайтов также быстро растут и почти достигли того же уровня, что и отдельные мобильные сайты.

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

Однако, если у клиента или компании есть бюджет, адаптивная версия может быть лучшим выбором, согласно тесту, проведенному Catchpoint.Они создали два сайта на WordPress, один с использованием стандартной адаптивной темы WP TwentyFourteen, а другой с использованием плагина Wiziapp.

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

Результаты по времени загрузки говорят сами за себя:

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

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

Итак вывод?

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

Следующие шаги

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

Присоединяйтесь к лучшим дизайнерам мира, использующим UXPin.

Подпишитесь на бесплатную пробную версию. Попробуйте бесплатно!

Что такое адаптивный дизайн? | Фонд дизайна взаимодействия (IxDF)

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

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

Автор / Правообладатель: Стефани Вальтер. Условия авторских прав и лицензия: CC BY-SA 3.0

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

Адаптивный дизайн

Автор / Правообладатель: Мухаммад Рафизельди .. Условия авторских прав и лицензия: CC BY-SA 3.0

Термин «Адаптивный дизайн» впервые был придуман веб-дизайнером и разработчиком Итаном Маркоттом в его книге « Адаптивный веб-дизайн ». Адаптивный дизайн реагирует на изменений ширины браузера, на , настраивая размещение элементов дизайна так, чтобы поместилось в доступном пространстве.

Адаптивный веб-сайт отображает контент в зависимости от доступного пространства браузера. Если вы откроете отзывчивый сайт на рабочем столе, а затем измените размер окна браузера, контент будет динамически перемещаться, чтобы упорядочить сам (по крайней мере, теоретически) оптимально для окна браузера . На мобильных телефонах этот процесс происходит автоматически; сайт проверяет наличие свободного места, а затем представляет себя в идеальном расположении.

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

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

Адаптивный веб-дизайн был представлен в 2011 году веб-дизайнером Аароном Густафсоном в его книге « Адаптивный веб-дизайн: создание богатого опыта с прогрессивным улучшением». Он также известен как прогрессивное улучшение веб-сайта.

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

Некоторые сайты быстро внедрили адаптивный дизайн. Amazon, USA Today, Apple и About.com сконфигурировали себя как веб-сайты, оптимизированные для мобильных устройств. Макет, отображаемый на мобильном веб-сайте с использованием адаптивного дизайна, может отличаться от версии для настольного компьютера. Однако это связано с тем, что дизайнеры выбрали другую компоновку экрана телефона, а не оставили дизайн, чтобы попытаться изменить его сами.

В адаптивном дизайне обычно разрабатывают шесть дизайнов для шести наиболее распространенных значений ширины экрана; 320, 480, 760, 960, 1200 и 1600 пикселей.

Автономный мобильный дизайн

Существует также возможность создать веб-сайт только для мобильных устройств (они обычно обозначаются в строке URL-адреса браузера с помощью префикса «m.»). Этот вариант когда-то был отличным подходом. Дизайнеры создавали сайты для мобильных устройств, настраивая элементы и макет для определенного формата. Google обеспечивает рейтинг мобильных сайтов в поисковых системах, но сегодня те же предпочтения отдают адаптивным и адаптивным сайтам.

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

Выбор между адаптивным и адаптивным дизайном

Автор / правообладатель: Стефани Уолтер. Условия авторских прав и лицензия: CC BY-SA 3.0

Адаптивный дизайн проще и требует на меньше работы для реализации. Он обеспечивает меньший контроль над дизайном для каждого размера экрана, но на данный момент это, безусловно, предпочтительный метод для создания новых сайтов.Это также может иметь какое-то отношение к большому количеству дешевых шаблонов, доступных для большинства систем управления контентом (CMS), таких как WordPress, Joomla и т. Д. — в конце концов, кто хочет изобретать велосипед?

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

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

SEO — еще один большой аргумент в пользу использования адаптивного дизайна. Сайты с адаптивным дизайном (то есть с URL-адресами, обслуживающими все устройства) в настоящее время более удобны для поисковых систем.

У адаптивного дизайна есть веские основания для использования. Что ж, могло бы; однако имейте в виду следующее:

  • Поскольку ваш веб-сайт будет «перетекать» с устройства на устройство, адаптируясь к размеру экрана, любые рекламные объявления, которые вы добавили, могут не уместиться в пространстве. Внезапно «ярлык», предлагаемый с помощью адаптивного дизайна, может нуждаться в некотором переосмыслении и доработке.
  • Время загрузки зависит от настольного и мобильного устройства. Здесь большое внимание уделяется гибкости изображений. Большой дизайн, который быстро отображается на большом экране дома или в офисе, требует больше времени (и данных), чтобы появиться на вашем мобильном телефоне. Может быть, для мобильной версии лучше использовать превью меньшего размера?

Адаптивный дизайн (теоретически) обеспечит лучший пользовательский интерфейс в зависимости от того, какое устройство пользователь использует для интерфейса.В отличие от адаптивного дизайна, когда экран «перетекает» из дизайна рабочего стола в устройство меньшего размера, адаптивный дизайн предлагает индивидуальные решения. Как следует из названия, они адаптируются к ситуативным потребностям и возможностям пользователя. Как дизайнеры, мы можем показать пользователям, что мы адаптированы к их потребностям на мобильных устройствах, сделав наш дизайн удобным для сенсорного ввода. Между тем, мы можем сделать то же самое для пользователей настольных компьютеров. Мы начинаем с версии сайта с самым низким разрешением и постепенно поднимаемся до самой высокой. Шесть дизайнов являются текущим стандартом, но в зависимости от данных ваших пользователей вы можете использовать меньше дизайнов.

Сильной стороной адаптивного дизайна является то, что он кажется более релевантным современному пользователю, тогда как адаптивный дизайн демонстрирует более ориентированный на рабочий стол подход (при этом потребности других устройств занимают второстепенное, почти пассивное место). Как пользователи, мы делаем больше с нашими умными устройствами. Нам нравится чувствовать, что наши устройства знают, что мы переживаем. Давайте рассмотрим буквальный пример. Если бы вы ехали по длинному туннелю, разве вы не предпочли бы иметь экран GPS, который адаптируется к окружающей среде и регулирует ее яркость? Эта контекстно-зависимая производительность и удобство использования обнадеживают, в то же время подтверждая, что ваше интеллектуальное устройство достаточно умно, чтобы адаптироваться и быть дополнительным полезным.

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

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

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

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

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

Наконец, в то время как боты поисковых систем становятся все лучше в области фильтрации и сортировки обращений, чтобы различать ваши сайты «.com» и «m .com», разумно принять статус-кво. Большинство поисковых систем по-прежнему неравномерно ранжируют идентичный контент по нескольким URL. Это означает, что нужно помнить о том, что адаптивный дизайн может удержать вас от SEO.

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

The Take Away

Автор / правообладатель: Brisbane Web Design. Условия авторских прав и лицензия: Public Domain

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

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


Плюсы

Минусы

  • Равномерное и бесшовное = хороший UX.
  • Обилие шаблонов для использования.
  • SEO оптимизирован.
  • Часто проще реализовать
  • Меньше управления дизайном экрана.
  • Элементы могут перемещаться
  • Рекламные объявления теряются на экране.
  • Более длительное время загрузки с мобильного телефона.

Адаптивный дизайн , разработанный в 2011 году, больше связан с тем, что у дизайнера есть несколько фиксированных размеров макета. Он предлагает альтернативу подходу «один размер для всех».

Плюсы

Минусы

  • Позволяет разработчикам создавать лучший UX для соответствующего устройства.
  • Мобильные устройства могут определять среду своего пользователя.
  • Дизайнеры могут оптимизировать рекламу на основе пользовательских данных со смарт-устройств.
  • Трудоемкое создание — большинство адаптивных проектов модернизируют традиционные сайты, чтобы сделать их более доступными.
  • У планшетов и нетбуков могут возникнуть проблемы с конфигурацией сайта, ориентированной на смартфон или настольный компьютер.
  • Задача для SEO — поисковые системы не могут оценить идентичный контент на нескольких сайтах.

Выбор между адаптивным и адаптивным дизайном требует особого внимания. Хотя может быть разумным придерживаться адаптивного дизайна ради удобства (экономии средств, улучшения SEO и обеспечения бесперебойной работы пользователей между устройствами), крайне важно полностью проверить плюсы и минусы обоих дизайнов . Адаптивный дизайн может больше адаптироваться к различным потребностям пользователей в этой области; Таким образом, очень важно держать руку на пульсе перемен.

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

Подумайте о своем продукте или услуге. Имеет ли он доступ к пользователям в определенных настройках? Что в их поведении вы можете использовать, чтобы держать их в курсе и вовлекать? Помните, что умнее становятся не только мобильные устройства.В наших домах и офисах у нас больше, чем традиционные настольные компьютеры. Теперь широкий спектр интеллектуальных устройств распознает окружающую среду и реагирует на нее, от часов и обогревателей до множества устройств, составляющих «Интернет вещей». Эта эпоха полна умных вещей. Мы должны все больше и больше помнить об этом умном дизайне.

Ресурсы и где узнать больше

Изображение героя: Автор / Правообладатель: tfinc. Условия авторских прав и лицензия: CC BY-SA 3.0

Holst, C.(2012). «Адаптивные и адаптивные макеты и оптимальные метки полей форм». Smashing Magazine. Получено с: http://www.smashingmagazine.com/2012/11/08/ux-desi … [2014, 1 сентября]

Ицкович, А. (2012). «Создание адаптивной системы для улучшения UX». Разрушительный журнал . Получено с: http://www.smashingmagazine.com/2012/12/creating-an-adaptive-system-to-enhance-ux/

Найт, К. (2011). «Адаптивный веб-дизайн: что это такое и как его использовать». Smashing Magazine. Получено с: http://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/The Smashing Editor. (2012). «Рекомендации и учебные пособия по адаптивному веб-дизайну». (NB — это отличный ресурс для поиска лучших статей Smashing Magazine об адаптивном дизайне.) Источник: http: //www.smashingmagazine.com/responsive-web-des …

Цао, Дж. (2015). «Адаптивный или адаптивный дизайн: что лучше для дизайнеров?», Студия UXPin.Получено с: http://studio.uxpin.com/blog/responsive-vs-adaptive-design-whats-best-choice-designers/

Бин Узайр, С. (2013). «Адаптивный дизайн против адаптивного». Крутящий момент . Получено с: http://torquemag.io/responsive-design-vs-adaptive-design/


Адаптивный дизайн | Определение дизайна

Вы когда-нибудь задумывались, подходит ли вам адаптивный дизайн? Мы рассмотрим основы адаптивного дизайна, его отличия от адаптивного дизайна и несколько способов выяснить, когда (и если) он подходит вам.

Что такое адаптивный дизайн?

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

Адаптивный дизайн и адаптивный дизайн

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

Адаптивный дизайн обычно соответствует шести наиболее распространенным значениям ширины экрана: 320 пикселей, 480 пикселей, 760 пикселей, 960 пикселей, 1200 пикселей или 1600 пикселей. С другой стороны, адаптивный дизайн основан на динамическом макете и подгонке содержимого под экран независимо от его размера.

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

  • Для адаптивного дизайна мы могли бы создать три разных макета для каждого из устройств.Или у нас может быть два макета: один для мобильного устройства, а другой для настольного компьютера / планшета. Разрешение рабочего стола, вероятно, было бы шире, чем у планшета, но мы могли бы использовать его повторно в крайнем случае.
  • Для адаптивного дизайна каждое из этих устройств будет иметь дизайн, который динамически загружается и отображается, и подходит для всех разрешений экрана. Это означает, что один дизайн подходит для всех устройств, но они не будут выглядеть одинаково. И они могут не быть оптимизированы для каждого конкретного разрешения.

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

Преимущества и недостатки адаптивного дизайна

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

Преимущества

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

Новые iPhone X, XR и XS были представлены без физических кнопок «Домой» в нижней части экранов. Из-за этого требуется большая область заполнения, чтобы соответствовать новому соглашению о дизайне, введенному в ОС. Адаптивный дизайн будет адаптирован к новым спецификациям и, поскольку вы точно знаете, на какое устройство настроен таргетинг, будет оптимизирован для повышения производительности, что сделает его быстрее.

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

Недостатки

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

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

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

Как определить, подходит ли вам адаптивный дизайн

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

Новое строительство или существующий участок

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

Если вы создаете новый сайт, в адаптивный дизайн все равно стоит инвестировать; вам просто нужно рассмотреть еще несколько вещей.

Посмотрите на свой текущий трафик

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

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

Учитывайте целевые устройства

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

Экономьте время и деньги с самого начала

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

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

Адаптив против. Адаптивный дизайн — юзабилити Компьютерщик

Адаптивные и отзывчивые веб-сайты очень похожи, поскольку они оба настраивают пользовательский интерфейс (UI) веб-сайта в зависимости от ширины окна браузера. Однако способ, которым они это делают, отличает эти две техники.

Как агентство UX design , в Codal нас всегда просят дать рекомендации, основанные на проекте, бюджете и ресурсах.Кроме того, некоторые специалисты в этой области даже не знают о существовании адаптивного дизайна .

Итак, давайте погрузимся в это!

Адаптивный дизайн

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

Адаптивный веб-сайт полностью гибок и будет настраиваться и реагировать на окно просмотра независимо от размера окна (или экрана) браузера.Это потому, что он использует правила CSS на основе процентов для изменения стиля в зависимости от размера устройства.

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

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

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

Адаптивный дизайн

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

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

Каждой версии дизайна присваивается определенная ширина браузера, называемая «опорными точками».Точки привязки сообщают браузеру, когда нужно перейти к следующему макету.

Легко представить, что содержимое и элементы страницы почти «встанут» на место, как только область просмотра превысит установленный порог.

Как правило, дизайнер разрабатывает разные макеты для каждой из шести наиболее распространенных ширины области просмотра. К ним относятся здоровый диапазон размеров, включая как самые маленькие мобильные устройства, так и самую большую ширину панели рабочего стола: 320 пикселей, 480 пикселей, 760 пикселей, 960 пикселей, 1200 пикселей и 1600 пикселей.

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

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

Выбор того, что использовать для вашего веб-сайта

Адаптивный

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

Данные

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

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

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

Адаптивный

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

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

Здесь, в Codal, все наши веб-сайты спроектированы так, чтобы быть адаптивными, независимо от того, какие дизайнеры или разработчики работают над проектом.

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

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

Заключение: выбор за вами

Дизайнеры UX : Какой бы маршрут вы ни выбрали, помните, что ваш выбор (по крайней мере частично) повлияет на общее удобство использования веб-сайта.

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

Умные часы

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

Хотите узнать больше?

Вас интересует пересечение UX и UI-дизайна? Онлайн-курсы по шаблонам дизайна пользовательского интерфейса для успешного программного обеспечения и дизайн-мышления: руководство для начинающих могут научить вас нужным навыкам.Если вы пройдете курс, вы получите признанный в отрасли сертификат курса для продвижения по карьерной лестнице. С другой стороны, если вы хотите освежить в памяти основы UX и юзабилити, попробуйте онлайн-курс по пользовательскому опыту (или другой теме дизайна). Удачи в вашем познавательном путешествии!

(Ведущее изображение: Tranmautritam — Creative Commons)

Построить адаптивные макеты | Jetpack Compose | Разработчики Android

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

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

Явное внесение больших изменений в макет корневых компонентов

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

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

Избегайте использования физических параметров оборудования для принятия решений по компоновке. Это могло бы быть соблазнительным принимать решения, основанные на фиксированной материальной ценности (Является ли устройство планшет? Есть ли у физического экрана определенное соотношение сторон?), Но ответы на эти вопросы могут оказаться бесполезными для определения площади вашего UI может работать с.

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

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

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

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

  enum class WindowSizeClass {Compact, Medium, Expanded}

@Composable
весело MyApp (windowSizeClass: WindowSizeClass) {
    // Выполнение логики для класса размера, чтобы решить, показывать ли
    // верхняя панель приложения.val showTopAppBar = windowSizeClass! = WindowSizeClass.Compact

    // MyScreen ничего не знает о размерах окон и выполняет логику
    // на основе логического флага.
    Мой Экран (
        showTopAppBar = showTopAppBar,
        / * ... * /
    )
}
  

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

Гибкие вложенные составные элементы многоразового использования

Компоненты более пригодны для повторного использования, если их можно разместить в самых разных места. Если составной объект предполагает, что он всегда будет помещен в определенный место с определенным размером, то будет сложнее повторно использовать его в другом месте в в другом месте или с другим доступным пространством.Это также означает, что многократно используемые составные объекты без полномочий root должны избегать неявной зависимости о «глобальном» размере информации .

Давайте посмотрим на пример. Представьте себе вложенный составной объект, который реализует макет списка-деталей, который может отображать одну или две панели рядом.

Снимок экрана приложения, показывающий типичный макет списка / деталей. 1 — это список area, 2 — область детализации.

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

  @ Составной
весело AdaptivePane (
    showOnePane: Boolean,
    / *... * /
) {
    if (showOnePane) {
        OnePane (/ * ... * /)
    } еще {
        TwoPane (/ * ... * /)
    }
}
  

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

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

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

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

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

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

  @ Составной
fun Card (/ * ... * /) {
    BoxWithConstraints {
        if (maxWidth <400.dp) {
            Столбец {
                Изображение(/* ... */)
                Заголовок(/* ... * /)
            }
        } еще {
            Ряд {
                Столбец {
                    Заголовок(/* ... */)
                    Описание(/* ... */)
                }
                Изображение(/* ... */)
            }
        }
    }
}
  

Убедитесь, что все данные доступны для разных размеров

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

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

  @ Составной
Веселая карта (
    imageUrl: String,
    название: Строка,
    описание: Строка
) {
    BoxWithConstraints {
        если (maxWidth <400.dp) {
            Столбец {
                Изображение (imageUrl)
                Заголовок (заголовок)
            }
        } еще {
            Ряд {
                Столбец {
                    Заголовок (заголовок)
                    Описание (описание)
                }
                Изображение (imageUrl)
            }
        }
    }
}
  

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

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

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

  @ Составной
Веселая карта (
    imageUrl: String,
    название: Строка,
    описание: Строка
) {
    var showMore by Remember {mutableStateOf (false)}

    BoxWithConstraints {
        если (maxWidth <400.dp) {
            Столбец {
                Изображение (imageUrl)
                Заголовок (заголовок)
            }
        } еще {
            Ряд {
                Столбец {
                    Заголовок (заголовок)
                    Описание(
                        description = описание,
                        showMore = showMore,
                        onShowMoreToggled = {новоеЗначение ->
                            showMore = newValue
                        }
                    )
                }
                Изображение (imageUrl)
            }
        }
    }
}
  

Узнать больше

Чтобы узнать больше о настраиваемых макетах в Compose, см. Следующие дополнительные Ресурсы.

Примеры приложений

  • JetNews. показывает, как разработать приложение, которое адаптирует свой пользовательский интерфейс, чтобы использовать доступное пространство.

Видео

Об адаптивных макетах

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

Адаптивный дизайн

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

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

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

Пресеты адаптивного макета

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

Адаптивная структура макета

Структура адаптивного макета основывается на текущей структуре Представления бизнес-объектов в формы.

Для каждого представления бизнес-объекта существует форма по умолчанию. Например, в Portal View для инцидента используется форма портала инцидента. Вы можете создать столько форм, сколько вам нужно для данного представления бизнес-объекта, но всегда есть одна форма по умолчанию.

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

Примечание. При обновлении системы до версии 9.3.0 или более поздней существующие формы сохраняются и становятся базовыми макетами.

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

Что такое адаптивный и отзывчивый дизайн?

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

  • Это правда, или это одно и то же?
  • Или «адаптивный дизайн» означает совсем другое?
  • И причем тут «жидкий дизайн»?

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

Кажется, есть два конкурирующих определения адаптивного:

Определение 1. Адаптивный дизайн - это палка для селфи - Адаптивный дизайн - это зонтик

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

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

Селфи-палка против зонтика

Есть несколько GIF-анимаций, которые хорошо иллюстрируют эту концепцию.

В 2015 году Джефф Грэм изложил свой взгляд на различия, заявив, что адаптивные макеты адаптируются к ширине браузера в любой момент времени , тогда как «адаптивные макеты» адаптируются к ширине браузера только в определенных точках останова .

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

Определение 2: Адаптивный дизайн реагирует на всю среду устройства (а не только на экран)

Однако, как видно из комментариев под статьей Джеффа, не все согласны с этим определением.

Вот главный комментарий:

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

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

Многие громкие имена высказали свое мнение, начиная от UXPin и заканчивая Mozilla, но это все еще остается нерешенным.

Вот мой взгляд на проблему

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

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

Почему адаптивный дизайн не является адаптивным дизайном

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

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

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

Почему я считаю «адаптивный дизайн» более точным

Поскольку размеры экрана обычно используются по умолчанию (в том смысле, что вы не можете или не должны изменять его размер), термин «адаптивный дизайн» может быть более точным. Веб-сайты (по крайней мере, хорошо разработанные) будут изменять свой макет в соответствии с устройством пользователя; это действие непроизвольно, то есть пользователю не нужно взаимодействовать с веб-сайтом, чтобы заставить его адаптироваться.Адаптивный дизайн может также описать, как мы оптимизируем время загрузки и воспринимаем производительность для небольших портативных устройств.

Итак, что же такое гибкий дизайн?

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

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

«Адаптивный дизайн» был прямым ответом Итана Маркотта - без каламбура - на эти дизайнерские затруднения. Классический «эластичный» задний привод похож на зрелую, «взрослую» версию плавного дизайна: он растягивается, чтобы заполнить окно, но при необходимости реорганизуется.

Определение адаптивного дизайна, данное Джеффом, хотя и не согласовано многими, похоже на «взрослую версию фиксированного дизайна» - не одного фиксированного макета, а 3, 4 или более макетов.

Заключение

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

Вы когда-нибудь использовали термин «адаптивный дизайн» и не получали ничего, кроме пустого взгляда?

Мне любопытно, дайте мне знать в комментариях ниже!

(Пожалуйста, не бойтесь!).

.
Оставить комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

© 2019 Штирлиц Сеть печатных салонов в Перми

Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.