Опциональное отображение контента
Возможность сжимать и менять местами элементы, чтобы они уместились на маленьких экранах, — это замечательно. Но это не лучший вариант. Для мобильных устройств обычно используется более широкий набор изменений: упрощенная навигация, более сфокусированный контент, списки или строки вместо колонок.
К счастью, CSS дает нам возможность показывать и прятать контент с неимоверной легкостью.
используется для объектов, которые нужно спрятать.
Пример:
Вот наша разметка:
В главном файле стилей мы меняем ссылки на колонки, т. к. у нас достаточно большой экран, чтобы отобразить весь контент.
style.css (основной):
Теперь прячем колонки и показываем ссылки:
mobile.css (упрощенный):
Если размер экрана уменьшается, можно, например, использовать скрипт или альтернативный файл со стилями, чтобы увеличить белое пространство или заменить навигацию для большего удобства. Таким образом, имея возможность прятать и показывать элементы, изменять размеры картинок, элементов и многое другое, можно создавать адаптивную вёрстку под любые устройства и экраны.
О примерах использования адаптивной вёрстки сайтов вы можете почитать в лучших практиках по реализации адаптивного веб-дизайна.
Адаптированный перевод статьи «Responsive Web Design: What It Is And How To Use It»
Как проверить адаптацию сайта под мобильные устройства
Как уже отмечалось выше, поисковые системы стараются улучшать результаты выдачи для пользователей смартфонов. Именно поэтому сайты с адаптированным дизайном ранжируются на более высоком уровне. Среди основных признаков такого ресурса можно отметить:
- Хорошо читаемый текст, который не нужно увеличивать для просмотра.
- Отсутствие прикладных программ и плагинов, увеличивающих размер страницы и мешающие ее просмотру с телефона.
- Отсутствие необходимости прокручивать страницу горизонтально.
- Быстрая загрузка контента и удобная навигация по разделам.
Это лишь часть признаков. Чтобы тщательно проверить адаптацию сайта под мобильные устройства, можно воспользоваться специальными онлайн-сервисами: Google Mobile Friendly, Яндекс.Вебмастер, средство проверки адаптации Bing, I love adaptive и т. д. Все что для этого нужно сделать – зайти на онлайн-сервис и ввести в специальное поле.
viewport
Мобильные устройства в наши дни, как правило, довольно прилично выполняют работу по отображению сайтов. Иногда им может понадобиться небольшая помощь, связанная, в частности, с определением размера области просмотра, масштабированием и разрешением сайта. Чтобы исправить это, Apple внедрил метатег viewport.
Рис. 4.04. Хотя это всего лишь демонстрация медиа-запросов, многие мобильные устройства до сих пор не знают о начальной ширине или масштабировании сайта. При этом они могут не препятствовать медиа-запросам.
Высота и ширина области просмотра
Использование метатега viewport со значениями height или width будет определять, соответственно, высоту или ширину области просмотра. Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принимается ключевое слово device-height, а для свойства width принимается ключевое слово device-width. С помощью этих ключевых слов будет наследоваться ширина и высота устройства по умолчанию.
Для достижения наилучших результатов и красиво выглядящего сайта рекомендуется использовать значения устройства по умолчанию путём применения device-height и device-width.
Рис. 4.05. Разрешив устройствам узнать предполагаемую ширину сайта, device-width в данном случае, это позволило сайту принять правильный размер и подобрать любые точные медиа-запросы.
Масштабирование области просмотра
Для управления масштабированием сайта на мобильном устройстве и насколько пользователи могут его масштабировать, применяются свойства minimum-scale, maximum-scale, initial-scale и user-scalable.
initial-scale для сайта должно быть установлен в 1, так как это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, то это будет соотношение между шириной устройства и размером области просмотра. Значением initial-scale всегда должно быть положительное целое число от 0 до 10.
Рис. 4.06. Использование целого числа больше 1 будет увеличить сайт больше, чем масштаб по умолчанию. Вообще говоря, это значение наиболее часто устанавливается в 1.
Значения minimum-scale и maximum-scale определяют, насколько область просмотра может масштабироваться в меньшую и большую стороны. При использовании minimum-scale значение должно быть положительным целым числом меньше или равным initial-scale. Используя те же рассуждения, значение maximum-scale должно быть положительным целым числом больше или равным initial-scale. Оба значения также должны быть от 0 до 10.
Вообще говоря, эти значения не должны быть установлены на то же значение, что и initial-scale. Это позволит отключить любое масштабирование, которое может быть выполнено взамен применения значения user-scalable. Установка значения user-scalable в no отключит любое масштабирование. В качестве альтернативы, установив значение user-scalable в yes мы включим масштабирование.
Выключение возможности масштабирования сайта является плохой идеей. Это вредит доступности и удобству, мешая людям с ограниченными возможностями просматривать сайт по желанию.
Разрешение области просмотра
Давая браузеру решать, как масштабировать сайт основываясь на любых значений масштаба области просмотра, обычно делают один трюк. Когда требуется больше контроля, в частности, над разрешением устройства, может быть использовано значение target-densitydpi. target-densitydpi принимает несколько значений, включая device-dpi, high-dpi, medium-dpi, low-dpi или конкретное число точек на дюйм.
Значение target-densitydpi применяется редко, но оно чрезвычайно полезно, когда необходим попиксельный контроль.
Комбинация значений
Метатег viewport принимает отдельные значения наряду с множеством значений, позволяя установить несколько свойств за раз. Установка нескольких значений требует разделения запятыми в значении атрибута content. Одно из рекомендованных значений приведено ниже, в котором используются свойства width и initial-scale.
Рис. 4.07. Комбинация width=device-width и initial-scale=1 обеспечивает начальный размер и требуемое масштабирование.
Правило @viewport
Поскольку метатег viewport вращается преимущественно вокруг установки стилей, которые определяют как должен отображаться сайт, то рекомендуем переместить его из HTML в правило @viewport в CSS. Это помогает сохранить стиль отдельно от содержания, обеспечивая более семантический подход.
В настоящее время в некоторых браузерах уже реализовано правило @viewport, однако поддержка не так повсеместна. Ранее рекомендованный метатег viewport будет выглядеть следующим правилом в CSS.
Расположение адаптивных блоков в ряду
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.
<div class="container">
<div class="row">
<div class="col-6"> (1) </div>
<div class="col-6"> (2) </div>
<div class="col-12"> (3) </div>
<div class="col-8"> (4) </div>
</div>
</div>
Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на xs-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на sm-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на xs и md-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
<!-- Этот адаптивный блок перенесётся на новую линию на xs, sm и lg-->
<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
</div>
Conclusion
As you can see, it is all about the screen sizes and page layouts.
So, if your newest phone has a non-standard display aspect ratio or an unusual resolution, you may find it difficult to adjust some of the web pages, videos, and apps to fit your screen. Having in mind that phones with aspect ratio 18:9 have flooded the market lately, in contrast to the standardized 16:9, but the majorities of videos or even websites have not been adjusted yet, it becomes clear that some changes in design should be made. And the best solution is to adjust them automatically through a responsive design.
Responsive design preview on different screen sizes / Iamge source: Pixabay
To conclude – if you want your website to be functional, usable, easily approachable, and highly pleasurable to interact with, you would want to choose responsive design. Right now, it might be called ideal solution for your design projects.
We might also add that responsive design would be the winner of this triangle battle of fluid vs. adaptive vs. responsive design.
We hope that this was helpful to distinguish the differences between fixed, fluid, adaptive, and responsive design. What do you think? What type of design is your favorite, and why? Let us know in the comments below or on our Facebook page.
Take a look at similar articles as well:
- How to use design thinking principles in UI/UX design
- Web design trends in 2018
- UX design methodology for beginners (Part 1)
Шаг 1: выбор технологииСкопировать ссылку
Что вы будете использовать для создания сетки — CSS-гриды, флексы или старые добрые флоаты? Решения и детали реализации зависят от выбранной технологии.
CSS-гриды, безусловно, лучше всего подходят для создания сетки (потому, что гриды ). К сожалению, сегодня поддержка гридов оставляет желать лучшего. В каждом браузере они скрыты за флагом, поэтому мы не будем рассматривать гриды в этой статье. Я настоятельно рекомендую ознакомиться с работой Рейчел Эндрю, если вы хотите узнать о гридах больше.
На момент публикации перевода гриды уже поддерживаются без флагов в Chrome, Firefox и Safari — прим. редактора.
Перейдём к флексам и флоатам. Соображения по их применению схожи, так что можете выбрать то, что вам по душе и двигаться далее. Я буду использовать флоаты, потому что они проще и понятнее новичкам.
Если вы выбрали флексы, помните об отличиях от флоатов, которые нужно учесть.
Как заказать разработку пластичного сайта у фрилансера?
Разработка гибкого шаблона представляет интересный, но трудоемкий процесс. От того, насколько правильно он будет выполнен, зависит функционирование веб-ресурса и его привлекательность в глазах пользователей. По этой причине, для его создания следует тщательно подбирать исполнителя. Такого легко найти на фриланс-бирже.
Не все веб-дизайнеры могут работать с адаптивом. Для этого требуются знания особых технологий, а также время на кропотливый труд с обязательным тестированием. Чтобы найти действительно подходящего специалиста, достаточно посмотреть на портфолио его аналогичных работ, а также почитать отзывы других заказчиков.
Важно понимать, что оплата труда freelancer будет зависеть от объема и сложности проекта. Перед началом сотрудничества следует подробно обговорить нюансы будущего веб-ресурса, чтобы рационально оценить стоимость его разработки
В любом случае, если вам требуется адаптивная верстка, фрилансер выполнит ее дешевле, чем отдельная студия. Работа на дому ничем не отличается от офисной, поэтому не стоит бояться доверять удаленщикам.
Настоящий профи обязательно изучит бренд и ваши потребности, задаст уточняющие вопросы. Исходя из этой информации, он предложит идеи о размещении элементов дизайна так, чтобы получить высокую конверсию. Также он порекомендует подходящую систему управления сайтом или предложит свой вариант.
Фрилансер будет заинтересован качественным результатом так же как и вы. И это можно понять уже по первому диалогу в рамках сотрудничества. Найти достойного специалиста бывает нелегко, но реально. На бирже фриланса так точно.
Что лучше, адаптация под мобильные устройства или полноценная версия для смартфонов
Прежде чем решить, какой из возможных вариантов наиболее эффективен, необходимо подробно разобраться в том, что означают эти понятия. Так, адаптивный дизайн применяется только для того, чтобы придать веб-ресурсу внешний вид, при котором его содержимое будет корректно отображаться на различных устройствах пользователей, будь то ПК, ноутбук, планшет или телефон. Мобильная версия, напротив, создается как принципиально новое решение. При ее разработке главное – учесть все потребности посетителей и сделать удобный и интуитивно понятный интерфейс.
Адаптивный дизайн
Данный вариант позволяет при минимальных финансовых и временных затратах создать дружественный веб-ресурс, который можно использовать через смартфон без потери качества. Если максимально упростить объяснение, можно сказать, что в этом случае не нужно заниматься специальной разработкой. Достаточно совместить размеры страниц и их содержимое с расширением экрана конкретного смартфона или планшета. В итоге получается удобный в применении ресурс, не лишенный, однако, минусов: во-первых, изменится только разрешение, в то время как размер страницы и контента сохранится; во-вторых, скорость загрузки будет медленной, поскольку интернет здесь заметно уступает проводному. В этом случае может возникнуть риск увеличения показателя отказов, то есть пользователи не будут дожидаться полной загрузки, и будут закрывать вкладки.
Версия для смартфонов
Это, как правило, отдельная версия сайта, находящаяся на поддомене и дублирующая основную версию и представляющаяся посетителям в урезанном (или сокращенном) виде, относительно ПК. Если разбирать вопрос с точки зрения поисковой оптимизации, то в сравнении с предыдущим вариантом мобильная версия представляет некоторую сложность веб-мастеру: ему приходится использовать огромное количество дополнительных инструментов для автоматической переадресации пользователей с одного URL-адреса на другой. Ведь с точки зрения поисковых машин адрес vebresurs.ru/str и m.vebresurs.ru/str – это разные страницы. Данная версия имеет меньший размер и быстрее загружается, однако ее создание требует большого бюджета.
Чтобы было проще сделать выбор между данными вариантами и не ошибиться, следует знать, в каком случае разумнее прибегать к адаптации или созданию полноценной мобильной версии.
Какие бывают типы HTML-макетов сайтов?
Для начала небольшая ремарка. В этой конкретной статье, HTML-макетами мы будем называть готовые сверстанные HTML-страницы, а не PSD-макеты.
Я рассмотрю фиксированные, резиновые, адаптивные, отзывчивые и смешанные HTML-макеты. В конце подведу итог.
Фиксированные макеты (static, fixed)
Фиксированный или статичный HTML-макет — такой макет сайта, у которого ширина контента страницы является строго зафиксированной в пикселях. Ширина не зависит и не меняется вслед за изменением размеров окна браузера.
В 2016 году считается, что такие макеты — пережитки прошлого. Раньше, когда веб-технологии еще не получили достаточного развития, ширина вебстраниц была продиктована разрешением популярных экранов устройств пользователей: 800х600, 1024х768, 1200х800 и так далее.
Даже сейчас можно встретить фиксированную ширину макетов сайтов, скажем, в 960 пикселей. Такой макет можно было бы использовать 10 лет назад, но сейчас…
Резиновые макеты (liquid)
Резиновый или тянущийся («жидкий» от англ. liquid) макет — такой макет сайта, при котором контент сайта может принимать размер любого экрана пользователя. Достигается это за счет того, что величины структурных элементов сайта выражаются не в абсолютных показателях (px), а в относительных (%). Т.е., допустим, ширина элемента в css так и прописывается: не 560px, а 50%.
И снова макеты HTML-сайтов данного типа можно назвать устаревшими. Потому что резиновые макеты учитывают только один тип устройств (ПК), а их создатели не учитывают того, как резиновый макет будет выглядеть на больших и маленьких экранах.
Адаптивные макеты (adaptive)
Не путайте с адаптивным веб-дизайном, позже я объясню почему и покажу разницу.
Адаптивный макет базируется на использовании медиа запросов css (css media queries) — так контент адаптируется под разные экраны.
При изменении ширины экрана устройства пользователя адаптивный макет «прыгает» по контрольным точкам. Контент при этом каждый раз смещается, уменьшается или увеличивается не точь в точь под размеры экрана, а под размеры ближайших контрольных точек.
Т.е. несколько контрольных точек задают фиксированное положение и размеры контента на разных экранах.
Выглядит это так, как будто у вас есть несколько статичных, фиксированных макетов, подстроенных под несколько видов экранов.
Минус таких адаптивных макетов в том, что заранее мы не предугадаем вид контента и макета на всех устройствах. Потому что расстояния между контрольными точками могут быть большими.
Тем не менее, этот подход хорош и актуален, если критические точки обуславливаются дизайном самой страницы, а не шириной устройств наиболее часто встречающихся у посетителей сайта.
Отзывчивые макеты (responsive)
В данной классификации макетов, отзывчивые макеты идут еще дальше адаптивных: используют «резину» вместо статики — «%» вместо «px».
Т.е. мы также расставляем контрольные точки при помощи медиа-запросов, но приспособление контента к этим контрольным точкам идет в относительном выражении (процентах), а не абсолютном (пикселях).
Таким образом, некогда «прыгающие» резиновые и адаптивные страницы больше так не делают. Отзывчивый макет плавно изменяется между контрольными точками.
Смешанные макеты (adaptive + responsive)
Кропотливые перфекционисты идут еще дальше и проверяют отображение макета на экранах устройств по всем контрольным точкам.
Число контрольных точек увеличивается, для задания величины элементов используются то пиксели, то проценты — по необходимости.
Так получается нечто среднее между адаптивным и отзывчивым макетом, но еще более приближенное к качественному отображению на экранах всех пользователей, с любыми устройствами.
Иногда такой подход используется для адаптации и оптимизации существующего макета под мобильные устройства. В этом случае его называют «mobile last».
Итог
Итак, теперь у вас есть минимальное представление о макетах сайтов. Но макет это не дизайн. Макет это макет. А дизайн это комплексное понятие, помимо всего прочего включающее и подход к веб-разработке, и методологию, и решение проблем пользовательского взаимодействия с сайтом на различных устройствах.
Вот о веб дизайне и поговорим. Сначала об отзывчивом, потом о «mobile first» и концепции постепенного улучшения, потом об адаптивном веб-дизайне.
Ну и в самом конце отвечу на некоторые вопросы об адаптивных макетах сайтов.
Сетка и колонки
Бутстрап для себя делит экран на 12 колонок, независимо от размера экрана. Даже маленький экран старого телефона Бутстрап разобьёт на 12 колонок и будет ими управлять. На этом холсте вы можете создавать блоки шириной с какое-то количество колонок. Например, чтобы написать текст на половину ширины экрана, нужно создать блок шириной 6 колонок.
Блоки живут не сами по себе, а как бы в таблицах. Вы говорите Бутстрапу: «Создай мне контейнер для блока, в контейнере — строку, внутри строки — колонку, а внутрь колонки — положи этот текст». Сейчас это выглядит странно, но позже вы привыкнете.
Строка заполняется ячейками слева направо. Когда кончается строка, можно создать новую строку и снова заполнить её ячейками разной ширины. Ширина ячеек выражается в колонках. Ячейка шириной на весь экран будет иметь ширину 12 колонок, на пол-экрана — 6 колонок. Чтобы разбить экран на три части по горизонтали, нужно 3 ячейки шириной по 4 колонки. Чтобы сделать сетку, как у обычного трёхколоночного сайта, попробуйте три ячейки: 2 колонки, 8 колонок, 2 колонки.
Можно сказать Бутстрапу: «Когда экран маленький, эту колонку выводи на всю ширину, а ту вообще прячь». Например, у нас в левой колонке было меню сайта, в центральной — основной текст, а в правой — всякие вспомогательные ссылки. Тогда говорим левой колонке на мобилке вывестись на всю ширину, основной колонке — тоже на всю ширину, а правой — скрыться. Получится мобильная версия сайта.
И так можно долго куражиться. Если интересно, прочитайте документацию по сеткам Бутстрапа — там всё понятно по картинкам.
Смещение адаптивных блоков
В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:
- классов offset (на определённое количество колонок);
- служебных (утилитных) margin классов.
Классы offset
Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.
Данные классы имеют следующий синтаксис:
оffset-{1} или offset-{breakpoint}-{1}
– контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).
– величина смещения, указываемая с помощью количества колонок Bootstrap.
В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.
<div class="row"> <div class="col-4"> (1) </div> <div class="col-4 offset-4"> (2) </div> </div> <div class="row"> <div class="col-3 offset-3"> (1) </div> <div class="col-3 offset-3"> (2) </div> </div> <div class="row"> <div class="col-6 offset-3"> (1) </div> </div>
Смещение с помощью margin классов
В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left: auto и (или) margin-right: auto). Эта вариант смещения появился благодаря тому, что сетка в новой версии Bootstrap (4) основывается на CSS Flexbox.
Данный вариант смещения (с помощью margin классов) используют, когда блоки необходимо сместить относительно друг от друга не которую переменную величину.
В Bootstrap 4 для более удобного и адаптивного задания блокам margin отступов ( и (или) ) можно использовать классы , , и .
<div class="row"> <div class="col-4"> (1) </div> <div class="col-4 ml-auto"> (2) </div> </div> <div class="row"> <div class="col-3"> (1) </div> <div class="col-3 ml-auto mr-auto"> (2) </div> <div class="col-3"> (3)</div> </div> <div class="row"> <div class="col-4 ml-auto mr-auto"> (1) </div> <div class="col-4 ml-auto mr-auto"> (2) </div> </div>
Основные компоненты
Веб-сайт, разработанный по принципу RWD, использует технологию медиа-запросов , расширение правила для адаптации макета к среде консультаций благодаря гибкой сетке, в которой организовано различное содержимое страницы.
- Медиа-запросы позволяют странице использовать различные правила CSS в зависимости от характеристик консультационного терминала. Чаще всего это правила, применяемые в зависимости от ширины терминала. Эти разной ширины называются «точками разрыва» и соответствуют необходимости изменить макет от определенного критического порога для облегчения навигации и чтения контента.
- Концепция гибкой сетки состоит из относительного определения размеров различных блоков страницы. Относительные единицы, такие как проценты или EM , подходят для этого в гораздо большей степени, чем абсолютные единицы, такие как пиксели или точки .
- Размеры изображений, требующих гибкости, также изменяются в относительных единицах, чтобы предотвратить возможное переполнение содержимого за пределы содержащего его элемента .
Выводы
В данной статье описаны основы адаптивной верстки, которые позволяют понять «как это работает». Проверить работу примеров этой статьи по реализации адаптивности можно по ссылкам этого обзора — https://moonback.ru/page/check-adaptive.
Благодарности
- https://habrahabr.ru/sandbox/89063/
- http://webformyself.com/kak-adaptirovat-shablony-dlya-wordpress/
- http://whiteprofit.ru/wordpress/kak-sdelat-shablon-wordpress-adaptivnym.htm
- http://1zaicev.ru/adaptivnyj-dizajn-sajta-kak-adaptirovat-shablon-wordpress/
- http://frontender.com.ua/mobile-web/wtf-viewport/
