Хорошо резиновый макет это когда размеры элементов задаются не в пикселях
Обновлено: 05.07.2024
Когда продумывается дизайн сайта, учитывается объём будущей информации на нём, привычки потенциальных посетителей, удобство доступа к материалу и множество других вещей. Типовые элементы вроде заголовка, навигации, контента, контактной информации надо разместить на одной странице, в совокупности это и называется её макетом. Таким образом, макет это способ организации материалов на веб-странице. Самих макетов существует огромное количество, но их, тем не менее, можно систематизировать по ряду признаков, например, по ширине, по количеству колонок, по расположению элементов, по устройствам на которые они ориентированы и др. Наиболее популярным является деление макетов по ширине и количеству колонок, которые и рассмотрим далее.
Макеты по ширине
Различают пять типов макетов, связанных с шириной:
- фиксированные;
- резиновые;
- эластичные;
- адаптивные;
- комбинированные.
Фиксированный макет
Альтернативные названия: фикс (жарг.), fixed (англ.), фиксированный дизайн.
Макет обычно располагается по центру окна браузера, а его ширина ограничивается заданными размерами в пикселах (рис. 5.1).
Рис. 5.1. Фиксированный макет в браузере
Преимущества
- Из-за того, что ширина всех колонок известна, проще указывать размеры изображений, видео и других элементов страницы.
- Браузеры, как правило, лояльнее относятся к таким макетам, поэтому на вёрстку и отладку уходит меньше времени.
Недостатки
- Сайт смотрится плохо на мониторах с высоким разрешением, неэффективно используя свободное место. Некоторые владельцы таких мониторов даже уменьшают окно браузера по ширине, чтобы скрыть пустое место слева и справа от макета.
Сайты
Резиновый макет
Альтернативные названия: резина (жарг.), liquid (англ.), резиновый дизайн.
Ширина колонок задаётся в процентах или сочетаются проценты и пикселы таким образом, что макет занимает всю свободную ширину окна браузера. При изменении размеров окна или другом разрешении монитора макет подстраивается под них (рис. 5.2).
Рис. 5.2. Резиновый макет в браузере
Преимущества
- Используется вся эффективная область страницы.
- Веб-страницы удобно печатаются на бумаге любого формата.
- Веб-страницы хорошо смотрятся на разных устройствах от iPhone до ноутбука.
Недостатки
- На мониторах с высоким разрешением сайт плохо читается из-за чрезмерного удлинения строк текста. Здесь помогает ограничение ширины контента с помощью свойства max-width . Опять же некоторые владельцы больших мониторов уменьшают окно браузера до комфортных для них размеров.
- Резиновые макеты сложнее верстать и отлаживать в разных браузерах.
Сайты
Эластичный макет
Этот макет по своему виду может не отличаться от фиксированного или резинового макета. До тех пор, пока вы не измените размер шрифта в браузере, тогда вы заметите, что размер поменяли и элементы веб-страницы. Размер элементов задаётся не в пикселах и процентах, а в em, привязанному к размеру шрифта. Значение em можно использовать не для всех элементов, оставляя ширину некоторых фиксированной.
Преимущества
- Макет целиком или отдельные его части легко масштабировать, подгоняя под комфортный для восприятия размер.
- Макет будет одинаково смотреться на разных операционных системах, имеющих различия в выборе размера и типа шрифта.
Недостатки
- В современных браузерах функция масштаба страницы уже встроена, и пользоваться ей довольно удобно.
- Верстать эластичный макет крайне сложно, поскольку единица em имеет относительные размеры и зависит от используемого шрифта.
- В действительности сфера применения этого макета очень ограниченна.
Адаптивный макет
Этот макет подстраивается под разрешение монитора и окна браузера, меняя при необходимости ширину макета, число колонок, размеры изображений и текста. Для этого заготавливается несколько стилевых правил или файлов под разный диапазон разрешений, выбор правил происходит через скрипты или CSS3, которые и определяют нужную для этого информацию о пользователе.
Преимущества
- Этот тип макета наиболее удобен для пользователя, поскольку не зависит от разрешения и ширины окна браузера, приспосабливаясь под них.
- Макет комфортно можно смотреть на любом устройстве.
Недостатки
- Это самый сложный тип из всех макетов, ведь, по сути, вместо одного требуется сделать несколько макетов со своей графикой и CSS, а также прописать механизм определения разрешения монитора или ширины окна браузера.
- За счёт универсальности макет сложно проверять на разные условия, которые возможны у пользователей.
Рис. 5.3. Сайт W3C при обычной ширине
Рис. 5.4. Сайт W3C при узкой ширине
Комбинированный макет
Альтернативные названия: гибрид, hybrid (англ.).
Этот макет предполагает использование разной ширины для отдельных частей страницы, например, шапку и подвал делают резиновыми, а контент фиксированным (рис. 5.3).
Рис. 5.5. Комбинированный макет
Этот макет в действительности не является самостоятельным типом, поэтому наследует все плюсы и минусы фиксированного и резинового макета.
Надо отметить, что некоторые макеты, хотя и выглядят комбинированными, в действительности ими не являются. Резиновая шапка страницы может оказаться всего-навсего широким фоновым рисунком.
Макеты по колонкам
Колонки в веб-дизайн пришли из полиграфии, где они используются в качестве способа разбивки широкого текста на более узкие фрагменты, а также для разделения различной информации. На сайтах текст всегда идёт одной колонкой, потому что универсальных способов для создания многоколоночного текста пока не существует. Кроме того, сайт по своей структуре и виду отличается от страницы в журнале, которую можно охватить одним взглядом, это тоже накладывает свои ограничения на распространение многоколоночного текста. Возможно в недалёком будущем сайты, специально «заточенные» под iPad и другие планшеты, станут активно применять колонки по своему прямому назначению. Пока же колонки преимущественно применяются для смыслового деления материала. Например, одна колонка содержит контент, другая навигацию, а третья рекламный баннер и т.д.
Наиболее распространенным вариантом является наличие на веб-странице двух колонок — одна из них, как правило, содержит навигацию, а во второй, более широкой колонке, размещается контент. Для резиновых макетов имеет смысл установить три колонки, чтобы эффективно использовать полезную площадь веб-страницы. В любом случае выбор числа колонок зависит исключительно от объема информации на сайте и способе её организации.
Некоторые страницы на всех устройствах выглядят одинаково. Но обычно это одинаково плохо. В лучшем случае на каком-то из экранов текст будет неудобно читать, а в худшем — потеряется часть элементов.
Если студия будет создавать отдельные мобильные версии под каждую из сотен моделей смартфонов, планшетов и десктопов, она быстро уйдет в минус. И по времени, и по деньгам, и по нервным клеткам. Лучше сделать универсальную версию для всех экранов — с responsive design.
Адаптив vs флуид vs респонсив
Чтобы содержимое сайта выглядело стабильно хорошо везде, используют адаптивную (adaptive), резиновую (fluid) и отзывчивую (responsive) верстку.
Они решают одну и ту же задачу, но разными способами. Лучше всего со своей миссией справляется респонсив, но об этом позже. Пока просто сравним их.
В основе адаптива — набор нескольких шаблонов (разметки) для устройств с разной шириной экрана. Флуид использует «резиновый» макет, где пропорции и размеры элементов задаются в процентах. А респонсив — это сочетание флуидной и адаптивной верстки: тут «резиновые» блоки перестраиваются в точках разрыва (условно, в разных сценариях скролла активируются разные шаблоны).
Когда страница растягивается, в адаптиве расположение и размеры контента меняются при достижении заданных параметров. Во флуиде страница расширяется плавно, но элементы не меняют положение. Респонсив похож на флуид, но структурные элементы могут менять размер и положение относительно друг друга.
Скорость загрузки страницы самая высокая обычно у адаптива (сервер определяет тип устройства и сразу выдает оптимизированный под него контент), а у флуида и респонсива — средняя.
АДАПТИВ подходит, если важна скорость загрузки страницы, или функционал мобильной и десктопной версии сильно отличается.
ФЛУИД — если мобильная и десктоп-версия примерно одинаковые, а бюджет и срок разработки ограничены.
РЕСПОНСИВ — когда мобильная и десктоп-версия примерно одинаковые, но некоторые изменения все же сделать нужно.
Самый простой способ увидеть различие между верстками — открыть в браузере разные сайты и плавно их растянуть. Адаптивная страница не будет меняться до определенной ширины, резиновая начнет плавно сжиматься или расширяться, а респонсивная начнет плавно менять размер и расположение элементов.
Ключевые принципы responsive design
По данным из исследования Tyton Media, 94% пользователей могут закрыть неудобный сайт. Причем мобильная версия даже важнее десктопа — отчет Hootsuite и We Are Social показал, что 52% пользователей серфят со смартфона.
Чтобы проблем гарантировано не возникло, Google рекомендует использовать responsive design (в русской версии он переведен как «адаптивный», но мы ориентируемся на английскую).
Собрали несколько опорных точек, которые помогут сделать крутую респонсив-верстку.
1. Главное — размер экрана
Самый крупный кит, на котором держится отзывчивый дизайн, — фокусировка на ширине и высоте экрана. Тип устройства здесь не важен, поэтому в огромном мире гаджетов с разными экранами и их расширениями респонсив-дизайн — победитель.
Пример — промо-сайт очков виртуальной реальности Magic Leap. В десктоп-версии при уменьшении ширины страницы пространство плавно сужается вместе со всеми элементами. В мобильной — главные элементы перестраиваются и уменьшаются, а второстепенные пропадают.
2. Контрольные точки
Отличительная черта респонсив-верстки — способность элементов перестраиваться. Это настраивается с помощью контрольных точек.
Они позволяют трансформировать макет, когда пользователь доходит до определенных точек. Например, по достижении 600 пикселей по ширине несколько колонок на десктопе перестроятся в одну в мобайле.
3. Векторные изображения вместо растровых
Если увеличивать небольшое растровое (пиксельное) изображение, можно сильно потерять в качестве. Оно будет «тяжелым» и повлияет на скорость загрузки страницы. Поэтому в респонсив-дизайне используют векторы — они не утяжеляют страницу и, растягиваясь по ширине, выглядят все так же хорошо.
Например, изображения на сайте издания New York Magazine — растровые (как и большинство фотографий в digital-мире). Чтобы такие вижуалы выглядели хорошо, разработчики задают максимальные значения, дальше которых сайт не растягивается. Пиксели видно, только если будешь упорно зумить конкретное изображение.
При увеличении всего на 200% фото становится «пиксельным». Источник: New York Magazine
На сайте Creative Dreams Design — только векторные изображения. Даже при сильном увеличении масштаба картинки будут выглядеть хорошо.
4. Закрепленные объекты
Всегда есть объекты, которые не нужно увеличивать, уменьшать или гонять по странице. Например, логотип компании или кнопки. Для них устанавливают статичные размеры в пикселях.
Также объекты на сайте можно группировать. Тогда они будут реагировать на изменения как один элемент.
5. Размеры в процентах, а не в пикселях
В респонсивном дизайне ширину и высоту элементов задают в процентах относительно размера экрана. Если указать ширину текста или картинки в 100%, они всегда будут занимать весь экран. А если в пикселях — часть контента потеряется.
К примеру, сайт «Новой почты» не адаптивный: все размеры заданы в пикселях:
Сайт по отслеживанию посылок Parcelmonotor сужает и расширяет контент вместе с экраном. Это признак того, что размеры в процентах, а верстка — респонсивная:
6. Max и min значения
Размеры в респонсив-дизайне задаются в процентах, но максимальные и минимальные значения нужно указывать в пикселях.
Например, если указать ширину и высоту изображения в 100%, оно займет весь экран. Но если экран огромный, картинка получится очень большой. К тому же, может пострадать качество. В таком случае нужно указать максимальное значение.
Если максимальная ширина — не больше 3 000 пикселей, изображение будет увеличиваться ровно до этой ширины вне зависимости от масштаба. С минимальными значениями принцип тот же.
Изображения на сайте файлообменника Dropbox не только растягиваются, но и меняют ориентацию с вертикальной на горизонтальную и обратно. Однако у страницы есть границы — дойдя до определенной ширины, она не расширяется дальше. За ее пределами просто фон.
7. Веб-шрифты вместо системных
Для респонсив-верстки используют кастомные веб-шрифты. Девайсов много, у каждого свои системные шрифты, и если выбранного не окажется среди системных написаний, он заменится на дефолтный.
Веб-шрифты — универсальные и отлично отображаются на любом экране. Например, надписи на странице немецкого онлайн-журнала о дизайне Made In Germany набраны веб-шрифтом FF DIN Round.
Сейчас будем пытаться понять принцип работы данного инструмента, а не просто запоминать куда тыкать чтоб вот так вот как там получилось.
Фигма нам предоставляет два варианта как задать ограничения, визуальный или по названиям
Итак у нас есть 5 вариантов по горизонтали и 5 по вертикали, давайте разберем каждый из них.
Горизонтальные ограничители
Сейчас смотрим только каждый ограничитель по отдельности, после разберем как они работают в связке, рассматривая горизонтальные ограничители будем держать вертикальные на позиции «Top»
Привязывает ваш объект к левой границе макета. Когда вы будете тянуть макет за правые края ваш объект не будет двигаться, а если будете тянуть за левые края то объект будет соответственно перемещаться вместе с фреймом.
Тянем там где красное, объект на месте, тянем там где синее, объект перемещается Тянем там где красное, объект на месте, тянем там где синее, объект перемещаетсяДанное ограничение удобно использовать например для разных элементов интерфейса которые расположены слева такие как бургер меню на макете ниже, или кнопки смены языка или валюты.
Бургер меню, смена языка или валюты останутся на месте при масштабировании фрейма. Бургер меню, смена языка или валюты останутся на месте при масштабировании фрейма.Right
Все так же как и в «Left» но прявязка идет к правому краю. Тянем фрейм там где синее объект не двигается, тянем красные, объект перемещается вместе с фреймом.
Можно так же назвать что у объекта ограничивается расстояние до границы фрейма, и при привязке к одной из сторон соответственно оно остается неизменным.
Left&Right
Вот это уже поинтереснее, если предыдущие никак не влияли на размер объектов при изменении размеров фрейма то данный ограничитель будет это делать. Итак что же он делает.
Поставили ограничения, тянем фрейм и получаем изменение объектов по горизонтали, тянем вправо увеличивается вправо, тянем влево увеличивается влево.
Механика очень простая, наш объект приклеивается к границам, и соответственно тянется вместе с ними, удобно делать плашки которые занимают всю ширину макета
Если у вас есть элементы которые при увеличении фрейма должны оставаться на всю ширину, смело используем данный ограничитель.
Center
С центром все просто, объект равномерно отдаляется от каждой из сторон. Выше логотип был ограничен слева, поменяли на центр и получаем вот такую прелесть.
Если же объект находится не по центру, например на картинке выше я так же изменил ограничители смены валюты на центр. У нас при увеличении ширины будут равномерно увеличиваться отступы от границ, добавили 100 пикселей к ширине, получили по 50 пикселей с каждой стороны.
Scale
С этим типочком както вообще неуютно, может вам все размеры в дроби выгнать при изменении размеров фрейма, кстати не только он но и Left&Right так что следите за ними.
Чтоб проще понять «Scale» (масштабирование по русски) возьмем фрейм размером 300х300 пикселей и поместим в центр квадрат 100х100 пикселей. У нас получится квадрат 100 пикселей с отступами в 100 пикселей от границ фрейма. Задав ограничитель «Scale» увеличим размер фрейма в два раза по ширине и получим фрейм 600х300 пикселей и внутри будет прямоугольник 200х100 пикселей.
Из этого получается что ограничение «Scale» равномерно увеличивает расстояние как расстояние до границ так и сам объект. Расчет идет в процентром соотношении.
Это значит что если у вас 1 объект то все пропорции будут увеличиваться или уменьшаться на 33%, если объекта 2 то на 25%. В расчете участвуют вс элементы ширина которых выше 0.
По рисунку выше слева на право у нас будет учитываться расстояния(при учете того что на обеих прямоугольника стоит ограничение «Scale» ):
- От левой границы фрейма до первого прямоугольника;
- Ширина первого прямоугольника;
- Расстояние от первого до второго прямоугольника;
- Ширина второго прямоугольника;
- Расстояние от границы второго прямоугольника до правой границы фрейма.
В итоге получается что каждый объект увеличится на 20%.
Вещица интересная, над применением нужно подумать еще, может у вас идеи есть?)
Вертикальные ограничители
То же самое что и горизонтальные, но в другую сторону, и замените Left и Right на Top и Bottom .
Комбинируя данные инстументы можно получить приличный резиновый дизайн, однако не стоит думать что так вы можете получить мобильную версию из десктопа или наоборот.
Данный способ позволяет адаптировать макет например для экранов шириной 1280-1440, а вот для 1920 будет уже смотреться пустовато, а 320 будет завален и непонятен вообще.
Различают следующие основные типы макетов сайтов, связанных с шириной:
- фиксированный;
- резиновый (гибкий);
- адаптивный.
Фиксированный макет сайта
Фиксированный макет сайта - это макет, который имеет строго определённую ширину (в пикселях). Такой вид дизайна широко использовался для разработки сайтов в прошлом, когда интернет только начал внедряться в нашу жизнь. В это время "господствовали" компьютеры с мониторами, имеющими диагональ 14" или 15", в редких случаях встречались "монстры", имеющие диагональ 17". Эти мониторы не сильно отличались по горизонтальному разрешению. Таким образом, выбрав для разметки какую-то определённую ширину (в основном останавливались на 960px), можно было разработать сайт, который оптимально бы отображался на всех мониторах этого времени.
Резиновый (гибкий) макет сайта
Резиновый (гибкий) макет сайта - это макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера. Потребность в такой разметке возникла, когда у многих пользователей появились мониторы, имеющие диагональ 19", 21" и больше.
В этот период времени сложилась такая ситуация, когда у одних пользователей были маленькие мониторы, а у других средние и большие. Разрешения, которые были установлены на этих мониторах стали сильно отличаться, и уже трудно было выбрать для макета какую-то определённую ширину.
Выходом из этой ситуации стало создание разметки, в которой блоки имеют не строго фиксированную ширину, а резиновую (обычно заданную в процентах). Такой макет в отличие от фиксированного уже мог «подстраиваться» под размеры монитора, т.е. изменять свои размеры.
Пример верстки первого макета:
Пример верстки второго макета:
После десктопов начали появляться и другие электронные устройства. В настоящее время просматривать сайты можно с помощью смартфонов (размер экрана от 3" до 6"), планшетов (от 7" до 10"), ноутбуков (10" и выше), десктопов (19" и выше) и TV (32" и выше).
Резиновый (гибкий) макет нельзя спроектировать так, чтобы он оптимально отображался на всех этих устройствах, т.к. он рассчитан на определённый диапазон или класс устройств.
Чтобы было понятно, выполним расчёты на примере вышеприведённого резинового макета. А именно вычислим ширину блоков (1 и 2), которые они будут иметь на смартфоне с горизонтальным разрешением 320рх. В первом варианте: 1 блок — 250рх, 2 блок - 70рх. Во втором: 1 блок - 80рх, 2 блок - 240рх.
Как видно из расчётов, сайт, имеющий такой резиновый (гибкий) макет выглядеть на смартфонах будет просто ужасно.
Адаптивный макет сайта
Адаптивный макет сайта - это макет, который может «приспосабливаться» под различные устройства (ширину рабочей области окна браузера). Т.е. на одних устройствах он может иметь одну структуру, а на других - другую.
Рассмотрим пример адаптивного макета, состоящего из 2 блоков, который на разных устройствах выглядит по-разному.
- на смартфонах и планшетах (устройствах с очень маленьким размером экрана) блоки должны располагаться вертикально, т.е. один под другим;
- на ноутбуках (устройствах со средним размером экрана) блоки должны располагаться горизонтально (1 блок - 33.3%, 2 блок - 66.7%);
- на десктопах (устройствах с большим размером экрана) тоже горизонтально, но с другими размерами (1 блок - 25%, 2 блок - 75%)
Bootstrap и создание адаптивных сайтов
Фреймворки Bootstrap 3 и 4 версии спроектированы для создания адаптивных сайтов.
Начинают верстать сайт, который будет "строится" на Bootstrap, с создания сетки. После создания сетки переходят к наполнению её контентом и компонентами Bootstrap.
Все компоненты Bootstrap являются гибкими, а не которые из них ещё и адаптивными как, например, Navbar. Данный компонент (Navbar) может изменять своё представление, т.е. находится в мобильном или десктопном представлении в зависимости от того какую в данный момент viewport ширину имеет браузер.
Информацию по сетке Bootstrap 3 можно почитать в этой статье, а по Bootstrap 4 - в этой.
Создание адаптивного макета с помощью Bootstrap 3
Создания адаптивного макета в Bootstrap 3 осуществляется под различные устройства. По умолчанию в Bootstrap 3 проектирование выполняется под 4 контрольные точки (xs, sm, md и lg). Область контрольной точки xs – это смартфоны, sm – планшеты, md – ноутбуки, а lg – десктопы.
Для примера сверстаем с помощью сетки Bootstrap 3 макет страницы, изображенный ниже. В качестве вида макета выберем, например, адаптивно-гибкий.
Разработку адаптивного макета обычно начинают с самых маленьких устройств (смартфонов), по отношению к Bootstrap 3 – это область xs .
На xs блоки должны располагаться вертикально и иметь ширину, равную ширине родительского контейнера (т.е. 12 колонок Bootstrap).
На sm блоки должны располагаться на 3 строках по 2 блока в каждой строке. Каждый блок должен иметь ширину, равную 50% ширины родительского элемента (6 колонок Bootstrap).
На md блоки должны располагаться на 2 строках по 3 блока в каждой строке. Каждый блок должен иметь ширину, равную 33.3% ширины родительского элемента (4 колонки Bootstrap).
На lg блоки должны располагаться на 2 строчках. На первой строчке 2 блока, а на второй – 4 блока.
Оптимизируем код, уберем, где возможно классы col-*-12, т.к. адаптивные блоки Bootstrap по умолчанию занимают ширину, равную 100%.
Создание адаптивного макета с помощью Bootstrap 4
Процесс создания адаптивного макета с использованием Bootstrap 4 выполняется почти также как и на Bootstrap 3.
Для примера сверстаем следующий макет.
Комментарии:
Супер! Каждый раз новая (для меня) и интересная тема:)) Доступно, полезно, понятно.
Спасибо Огромное за Ваш Труд! С Новым 2021 Годом Вас Поздравляю,
Желаю Счастья и Здоровья Вам и вашим близким! :)
Здравствуйте, всё зависит от задачи. Но RESS не популярна. Её следует использовать для единичных проектов, там где это действительно нужно.
RESS используют когда необходимо создать оптимальную с точки зрения производительности мобильную версию сайта, может даже разную для разных групп устройств.
Например, одним группам мобильных устройств отдавать одну версию сайта, а другим — другую, десткопным – третью. Это может быть актуально, когда вы хотите включить в сайт какую-то важную фишку, которую должна работать на устройствах которые её поддерживают. Но чтобы эти устройства опознавать на сервере необходимо реализовать функцию определения этих устройств. Причём код этой функции определения необходимо постоянно обновлять при выходе новых браузеров или устройств. Также необходимо обратить внимание на то, что существующий механизм определения устройств далёк от идеала, он может давать осечки.
Кроме этого создание сайта с использованием RESS будет более затратной, т.к. потребуется разработка нескольких версий сайтов, а также их последующая поддержка.
В MODX для реализации RESS имеется компонент MobileDetect. Он основывается на PHP библиотеки «Mobile Detect». Если данного компонента будет недостаточно для реализации функционала, то функцию определения устройств можно организовать через сервисы, которые оказывают данную услугу или программировать что-то самостоятельно.
В большинстве сайтов RESS не используют, т.к. он не очень эффективен, а для быстрых страниц, если они нужны, используют турбо-страницы Яндекса и AMP Google.
Читайте также: