Хорошо резиновый макет это когда размеры элементов задаются не в пикселях
Примечание: ниже выложен перевод статьи «CSS Layouts: The Fixed. The Fluid. The Elastic.», в качестве русского аналога термина layout используется макет. В статье рассматриваются два вида «резинового» макета, поэтому один из них для различия обозначен как «эластичный» (elastic, спасибо MTonly за ценный комментарий). Автор резюмирует основные плюсы и минусы каждого из рассматриваемых макетов (способов верстки).
Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться. Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.
Макеты с фиксированной шириной
Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800×600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.
Авторский блог является примером такой верстки, хотя его можно легко привести к резиновому или эластичному макету без изменения текущих картинок.
Какой макет верстки (с использованием Каскадных Таблиц Стилей, CSS) можно считать наилучшим? Каждый из них имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли один из них более удобен для пользователя, чем все остальные? Насколько просто им будет пользоваться? Какие есть у каждого из них проблемы, и как их обходить? Верстается ли один из них проще всех остальных? Есть ли среди них какой-либо ущербный, совершенно непригодный? Скорее всего, многие однозначно ответят на эти вопросы, но я не буду так торопиться.
Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.
Создание адаптивного макета с помощью 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 и создание адаптивных сайтов
Фреймворки Bootstrap 3 и 4 версии спроектированы для создания адаптивных сайтов.
Начинают верстать сайт, который будет "строится" на Bootstrap, с создания сетки. После создания сетки переходят к наполнению её контентом и компонентами Bootstrap.
Все компоненты Bootstrap являются гибкими, а не которые из них ещё и адаптивными как, например, Navbar. Данный компонент (Navbar) может изменять своё представление, т.е. находится в мобильном или десктопном представлении в зависимости от того какую в данный момент viewport ширину имеет браузер.
Информацию по сетке Bootstrap 3 можно почитать в этой статье, а по Bootstrap 4 - в этой.
Эластичный макет
При использовании эластичного макета размер основного контейнера и других (важных) элементов задается в em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.
Пример эластичного макета можно посмотреть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Насколько я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно настолько, насколько это вообще возможно при нередактируемой (изначально заданной) разметке страницы. Я очень горжусь этим фактом (действительно, очень хороший пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).
Плюсы эластичного макета
- Если все сделано правильно, то это очень стабильная верстка, потому все изменяет размер пропорционально. В результате при любом изменении размеров все по-прежнему хорошо;
- Эластичный макет довольно сложная вещь, это неимоверно круто и каждый раз это вызов самому себе прежде всего. Первое мое знакомство с ним было на сайте Tommy Olsson (который, по видимому, является хорошим примером того, как следует делать эластичные сайты). Он поразил меня, заставил улыбнуться и глубоко задуматься о том, как я мало знаю (impressed the hell out of me). Лучшим примером может быть увеличение текста на сайтах с эластичным макетом: достаточно зажать ctrl и покрутить колесо мыши… Я уже слышу, как вы говорите «Вау»
Минусы эластичного макета
- Несмотря на его привлекательность и элегантность, я не знаю действительно хорошего его применения, это заставляет задуматься, зачем же он вообще нужен?
- Если не ограничить размеры внешнего контейнера, то этот макет может быть настоящим бедствием для пользователя: он будет растягиваться шире, и шире, и шире — безо всяких видимых преимуществ.
Немного советов по эластичному макету
Пример эластичной верстки:
В заключении
Как вы можете видеть, у каждой из описанных разновидностей макетов есть свои плюсы и минусы (может быть, вы знаете и другие?). И я не могу с уверенностью сказать, какой же из них лучше. Это просто уровень представления сайта, как я заметил в самом начале, поэтому с большой ответственностью и не меньшей уверенностью я могу заявить, что любой из этих макетов может быть применим для верстки доступных, удобных для пользователей, сайтов. Таким образом, я предлагаю не вставать не тропу приверженцев «идеологической правоты», делая что-то только потому, что она «правильно», в ущерб доступности или удобству. Я не пытаюсь их критиковать, ибо они заставляют нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто потому что» не является достаточной причиной — так я говорю своим детям.
Материал предназначен для дизайнеров и Frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.
Адаптивный макет сайта
Адаптивный макет сайта - это макет, который может «приспосабливаться» под различные устройства (ширину рабочей области окна браузера). Т.е. на одних устройствах он может иметь одну структуру, а на других - другую.
Рассмотрим пример адаптивного макета, состоящего из 2 блоков, который на разных устройствах выглядит по-разному.
- на смартфонах и планшетах (устройствах с очень маленьким размером экрана) блоки должны располагаться вертикально, т.е. один под другим;
- на ноутбуках (устройствах со средним размером экрана) блоки должны располагаться горизонтально (1 блок - 33.3%, 2 блок - 66.7%);
- на десктопах (устройствах с большим размером экрана) тоже горизонтально, но с другими размерами (1 блок - 25%, 2 блок - 75%)
Слайдер с динамической высотой
Измените ширину экрана, и увидите, как фотографии по разному вписываются в нашу сетку. В комментариях указаны подсказки, откуда берутся ширины, которые мы используем. Обратите внимание, что эти стили позволяют нам сохранять правильные пропорции фотографий на всех размерах экрана:
Разрешение экрана более 1280px Разрешение экрана менее 1280px Разрешение экрана менее 768px
Комментарии:
Супер! Каждый раз новая (для меня) и интересная тема:)) Доступно, полезно, понятно.
Спасибо Огромное за Ваш Труд! С Новым 2021 Годом Вас Поздравляю,
Желаю Счастья и Здоровья Вам и вашим близким! :)
Александр, здравствуйте! Скажите, на MODX сложно использовать RESS (Responsive Design + Server Side)? На сколько я понимаю этот метод вместе с адаптивностью самый лучший?
Здравствуйте, всё зависит от задачи. Но RESS не популярна. Её следует использовать для единичных проектов, там где это действительно нужно.
RESS используют когда необходимо создать оптимальную с точки зрения производительности мобильную версию сайта, может даже разную для разных групп устройств.
Например, одним группам мобильных устройств отдавать одну версию сайта, а другим — другую, десткопным – третью. Это может быть актуально, когда вы хотите включить в сайт какую-то важную фишку, которую должна работать на устройствах которые её поддерживают. Но чтобы эти устройства опознавать на сервере необходимо реализовать функцию определения этих устройств. Причём код этой функции определения необходимо постоянно обновлять при выходе новых браузеров или устройств. Также необходимо обратить внимание на то, что существующий механизм определения устройств далёк от идеала, он может давать осечки.
Кроме этого создание сайта с использованием RESS будет более затратной, т.к. потребуется разработка нескольких версий сайтов, а также их последующая поддержка.
В MODX для реализации RESS имеется компонент MobileDetect. Он основывается на PHP библиотеки «Mobile Detect». Если данного компонента будет недостаточно для реализации функционала, то функцию определения устройств можно организовать через сервисы, которые оказывают данную услугу или программировать что-то самостоятельно.
В большинстве сайтов RESS не используют, т.к. он не очень эффективен, а для быстрых страниц, если они нужны, используют турбо-страницы Яндекса и AMP Google.
Макеты с фиксированной шириной
Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800;600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.
Авторский блог является примером такой верстки, хотя его можно легко привести к резиновому или эластичному макету без изменения текущих картинок.
Плюсы такого макета
- Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину (у которой нет, на самом деле, кросс-броузерной поддержки на текущий момент);
- В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных эффектов или дизайнерских решений (например, для позиционирования выпадающего меню или всплывающих подсказок к полям формы). Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
- Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024;768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).
- Заявленная «оптимальная для максимальной читаемости текста» ширина не может адекватно выполнять свою роль, если текст на сайте был значительно увеличен при неизменном отношении высоты строки текста к его размеру (в данном случае получается, что текст «разреживается», и его очень трудно воспринимать). Однако, стоит заметить, что при наличии хорошего дизайна эта проблема возникает только при очень сильном увеличении текста;
- У пользователей с небольшими мониторами (640;480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на сайте шириной в 760 пикселей. Хотя и это очень нечастая проблема;
- Сайт, шириной в 760 пикселей может смотреться довольно неприглядно (слишком узко) на мониторах с большим разрешением экрана;
- Небольшая ширина основного контейнера может ограничивать разумное количество столбцов при верстке, но это может быть также и плюсом, потому что заставляет создавать сайт, учитывая такие жесткие рамки (т.е. особо много излишеств и дизайнерских приемов нельзя будет применить, потому что таковы наложенные ограничения).
Советы по макету с фиксированной шириной:
- Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640;480 не приходилось прокручивать сайт по горизонтали для нормального чтения;
- Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.
Пример блока фиксированной ширины
Все примеры «вживую» можно посмотреть в авторской статье.
Резиновые макеты
Резиновый макет получается, если у основного контейнера не задавать ширину вообще (по умолчанию будет 100%) или задать ширину в процентах. Другими словами, не учитывая границы и отступы, сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.
- При грамотной верстке резиновый макет позволяет достичь большой универсальности в отображении, независимо от ширины окна пользовательского клиента. На практике это встречается довольно редко, но, теоретически, если все делать правильно, то такое возможно;
- Резиновый макет совпадает с макетом, применяемым броузером по умолчанию, то позволяет считать его «идеологически правильным». Но можно ли считать желание разработчика сделать «идеологически правильный» сайт плюсом относительно удобства его использования? Я думаю, что можно;
- Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы). Однако…
Рассмотрим минусы такого макета
- Слишком много доступного для чтения текста страницы и его острое желание заполнить всю доступное место может служить во вред удобству пользователей. Слишком много текста может «давить» на пользователя и делать сайт перегруженным или хаотичным. Существует выражение: «Пустое пространство продает» (“White space sells”, не знаю русского эквивалента этого выражения, имеется в виду, что пустое пространство нужно для увеличения акцента на содержании), и оно справедливо даже применительно к вебсайтам;
- Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и раньше, короче говоря, вообще (плохо) поддерживается) и быть просто гуру верстки можно в результате стремления к «правильной идеологии» получить, в лучшем случае, сайт, которым будет тяжело пользоваться. Представьте себе, что нужно прочитать строку длиной более 1000 пикселей, и вы осознаете проблему.
Некоторые советы по использованию этого макета
- Используйте резиновый макет строго по назначению. Не позволяйте своим стремлениям сделать все «идеологически правильно» возобладать над здравым смыслом. Должны быть какая-то достаточно веская причина, чтобы использовать эту разновидность макета. Если вы все же решили использовать именно ее, убедитесь, что резиновый макет вашего сайта нормально смотрится на большинстве экранных разрешений. Иначе оставьте это, игра не стоит свеч;
- Если при использовании резинового макета у вас есть области с фиксированной шириной, значит, на самом деле, вы получили гибрид резинового и фиксированного макета, и его минимальная ширина будет определена шириной фиксированных блоков или самого большого из объектов (картинок, например). Будьте осторожны. Если вы хотите бесплатно создать сайт именно с резиновым макетом, оно так и должно быть на самом деле, а не только на словах;
- Если вы все же сделали гибрид резинового и фиксированного макета (как, например, изображено в моем CSS руководстве, убедитесь, что он нормально смотрится на разрешении 800;600.
И, собственно, пример:
Создание адаптивного макета с помощью Bootstrap 4
Процесс создания адаптивного макета с использованием Bootstrap 4 выполняется почти также как и на Bootstrap 3.
Для примера сверстаем следующий макет.
Фиксированный макет сайта
Фиксированный макет сайта - это макет, который имеет строго определённую ширину (в пикселях). Такой вид дизайна широко использовался для разработки сайтов в прошлом, когда интернет только начал внедряться в нашу жизнь. В это время "господствовали" компьютеры с мониторами, имеющими диагональ 14" или 15", в редких случаях встречались "монстры", имеющие диагональ 17". Эти мониторы не сильно отличались по горизонтальному разрешению. Таким образом, выбрав для разметки какую-то определённую ширину (в основном останавливались на 960px), можно было разработать сайт, который оптимально бы отображался на всех мониторах этого времени.
Код для резиновой верстки
Эти стили дают возможность сделать так, чтоб по нажатию на определённую клавишу на body добавился класс .is-grid и отобразилась данная сетка. Это позволяет не тратить время на pixelperfect, и в то же время в процессе вёрстки следить, чтобы блоки располагались правильно по сетке.
Ширину колонки $grid_width и отступ между колонками $grid_gutter будем считать не относительно общей ширины 1920px, а за минусом отступов слева и справа $grid_margin:
В стилях у сетки отрезаем слева и справа margin:
С помощью градиента зацикливаем отрисовку колонок:
Обратите внимание, значение отступа слева и справа у .wrapper будет правильным на всех разрешениях, нам не нужно писать дополнительные media queries и переопределять это значение. Это огромная экономия времени.
Добавим декоративные стили для .column-item:
Сделаем ширину .column-item равной пяти колонкам. Это можно сделать несколькими способами:
1. Просто измерить ширину 5ти колонок с отступами в макете. Либо сложить ширину колонок руками:
5 колонок * 157px + 4 отступа * 30px = 905px.
(не забываем, что 1920px минус 2 отступа справа и слева по 30px = 1840px).
2. То же самое на чистом CSS:
3. Можно сосчитать 905 / 1840 на калькуляторе (так лучше не писать):
4. Либо, если использовать наши переменные:
Результат всех этих вариантов будет одинаковый:
Ключевые принципы 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.
Различают следующие основные типы макетов сайтов, связанных с шириной:
- фиксированный;
- резиновый (гибкий);
- адаптивный.
Подключаем mixin mq, или ошибка брейкпоинтов через переменные
Часто Frontend-разработчики используют в качестве брейкпоинтов глобальные переменные в препроцессоре. Например, основные разрешения: 1920px, 1440px, 1024px, 768px и т.д. Но это загоняет разработчика в очень узкие рамки. Бывает, что возникают ситуации, когда у нас есть промежуточное разрешение: например, 905px. На нём часто не влезает текст, например, слишком длинное слово.
Самое быстрое решение — уменьшить размер текста. Если для этих нестандартных точек заводить дополнительные переменные, то это плохой путь. Этих переменных может быть очень много. В том числе, поэтому мы не используем bootstrap.
Мы хотим себе оставить свободу использовать разные значения брейк поинтов. Для этого мы используем миксин mq(), который выглядит следующим образом:
Миксин принимает 2 параметра. Второй — опциональный. Если передаётся только один параметр, то используется подход desktop first, если 2, то mobile first.
Добавим к предыдущему примеру mixin mq и брейкпоинт 768px.
При ширине экрана менее 767px ширина .column-item станет равна 4м колонкам + 5px.
Адаптив vs флуид vs респонсив
Чтобы содержимое сайта выглядело стабильно хорошо везде, используют адаптивную (adaptive), резиновую (fluid) и отзывчивую (responsive) верстку.
Они решают одну и ту же задачу, но разными способами. Лучше всего со своей миссией справляется респонсив, но об этом позже. Пока просто сравним их.
В основе адаптива — набор нескольких шаблонов (разметки) для устройств с разной шириной экрана. Флуид использует «резиновый» макет, где пропорции и размеры элементов задаются в процентах. А респонсив — это сочетание флуидной и адаптивной верстки: тут «резиновые» блоки перестраиваются в точках разрыва (условно, в разных сценариях скролла активируются разные шаблоны).
Когда страница растягивается, в адаптиве расположение и размеры контента меняются при достижении заданных параметров. Во флуиде страница расширяется плавно, но элементы не меняют положение. Респонсив похож на флуид, но структурные элементы могут менять размер и положение относительно друг друга.
Скорость загрузки страницы самая высокая обычно у адаптива (сервер определяет тип устройства и сразу выдает оптимизированный под него контент), а у флуида и респонсива — средняя.
АДАПТИВ подходит, если важна скорость загрузки страницы, или функционал мобильной и десктопной версии сильно отличается.
ФЛУИД — если мобильная и десктоп-версия примерно одинаковые, а бюджет и срок разработки ограничены.
РЕСПОНСИВ — когда мобильная и десктоп-версия примерно одинаковые, но некоторые изменения все же сделать нужно.
Самый простой способ увидеть различие между верстками — открыть в браузере разные сайты и плавно их растянуть. Адаптивная страница не будет меняться до определенной ширины, резиновая начнет плавно сжиматься или расширяться, а респонсивная начнет плавно менять размер и расположение элементов.
С чего все началось
В 2018 мы перешли на реактивные фреймворки. Наш выбор пал в пользу Vue. Мы используем его в наших проектах чаще всего. Нам понравилась экономия времени и сил за счёт компонентного подхода (HTML, CSS, JS в одном файле). Далее мы решили автоматизировать всё, что только можно автоматизировать.
Раньше, когда компания работала на субподряд, к нам приходили макеты от разных веб-студий (мы застали ещё времена макетов в Photoshop). Сетки в этих в макетах были просто ужасны. Например 12 колонок на десктопе, 10 на каких-то промежуточных разрешениях, и 2 колонки на мобильном. Отступы между колонками могли быть абсолютно разными. Всё это сводило нас с ума, потому что каждое новое разрешение — это как вёрстка нового макета. Никакой экономии, никакой выгоды, постоянно нужно доказывать, что это действительно много работы, но нас никто не собирался слушать, потому что макеты и бюджеты уже согласованы.
Как было раньше
Два блока в резиновой сетке
Продемонстрируем три варианта вёрстки для размещения двух блоков в сетке. Результат будет одинаковый:
Разрешение экрана более 1024px Разрешение экрана менее 1024px
При разрешении менее 768px padding у блоков сделаем резиновым
с помощью padding: percentage(20 / (320 — 7 * 2));
Grid в принципе позволяет писать меньше кода. Также следует отметить, что в данном случае мы можем использовать резиновый padding у блоков на всех разрешениях экрана, потому что grid делает расчёт процентов для padding от ширины ячейки, а не от всего контейнера, как в предыдущем способе.
Но, в таком случае на очень больших разрешениях экрана padding будет больше, чем на макете. Мы у себя в компании решили, что это нормально, что это добавляет живости макету. Конечно же, такие правки необходимо согласовывать.
Растягиваются колонки на всю ширину за счёт flex-basis, переносятся на следующую строку за счёт flex-wrap. В данном случае мы все расчёты переносим на сторону браузера.
В заключение, хочется написать список основных постулатов, которые позволят делать резиновую вёрстку быстро, качественно и надёжно:
Как можно больше использовать проценты.
Как можно больше использовать формулы автоматического рассчёта размеров.
Как можно больше использовать коэффициенты.
Как можно больше использовать grid.
Искать способы написания меньшего количества стилей, для того, чтобы переложить работу для рассчёта размеров на браузер.
Для корректного отображения всех изображений использовать cover или contain.
Некоторые страницы на всех устройствах выглядят одинаково. Но обычно это одинаково плохо. В лучшем случае на каком-то из экранов текст будет неудобно читать, а в худшем — потеряется часть элементов.
Если студия будет создавать отдельные мобильные версии под каждую из сотен моделей смартфонов, планшетов и десктопов, она быстро уйдет в минус. И по времени, и по деньгам, и по нервным клеткам. Лучше сделать универсальную версию для всех экранов — с responsive design.
Резиновый (гибкий) макет сайта
Резиновый (гибкий) макет сайта - это макет, который изменяется в зависимости от ширины рабочей области окна (вкладки) браузера. Потребность в такой разметке возникла, когда у многих пользователей появились мониторы, имеющие диагональ 19", 21" и больше.
В этот период времени сложилась такая ситуация, когда у одних пользователей были маленькие мониторы, а у других средние и большие. Разрешения, которые были установлены на этих мониторах стали сильно отличаться, и уже трудно было выбрать для макета какую-то определённую ширину.
Выходом из этой ситуации стало создание разметки, в которой блоки имеют не строго фиксированную ширину, а резиновую (обычно заданную в процентах). Такой макет в отличие от фиксированного уже мог «подстраиваться» под размеры монитора, т.е. изменять свои размеры.
Пример верстки первого макета:
Пример верстки второго макета:
После десктопов начали появляться и другие электронные устройства. В настоящее время просматривать сайты можно с помощью смартфонов (размер экрана от 3" до 6"), планшетов (от 7" до 10"), ноутбуков (10" и выше), десктопов (19" и выше) и TV (32" и выше).
Резиновый (гибкий) макет нельзя спроектировать так, чтобы он оптимально отображался на всех этих устройствах, т.к. он рассчитан на определённый диапазон или класс устройств.
Чтобы было понятно, выполним расчёты на примере вышеприведённого резинового макета. А именно вычислим ширину блоков (1 и 2), которые они будут иметь на смартфоне с горизонтальным разрешением 320рх. В первом варианте: 1 блок — 250рх, 2 блок - 70рх. Во втором: 1 блок - 80рх, 2 блок - 240рх.
Как видно из расчётов, сайт, имеющий такой резиновый (гибкий) макет выглядеть на смартфонах будет просто ужасно.
Примеры сеток
Вот образец, как обычно рисуются сетки. На 1920px 12 колонок:
На 1440px — 10 колонок, на 768px — 6 колонок, на 320px 2 колонки
Для нас это плохо. Мы решили уйти от этого.
Мы рисуем десятиколоночную сетку. Её легче считать на вёрстке
Далее сжимаем ширину
Мы видим, что масштабируется только ширина колонок, но не отступы колонок (gutter) и margin по краям. Это не позволяет нам нормально использовать сетку, если просто раскопировать первоначальный вариант и уменьшать ширину макета.
Для максимального масштабирования нам нужно, чтобы менялись и gutter и margin, поэтому мы переходим к ручному масштабированию. Для этого мы используем 10 колонок, margin 40px и gutter 30px.
Рассчитаем размеры в процентах. Берём за основу макет 1920px.
margin 40px займёт: 40 / 1920 = 0,020833333333 = 2,083333%
gutter 30px займёт: 30 / 1920 = 0,015625 = 1.5625%
Ширина колонок 157px: 157 / 1920 = 0,08177083333 = 8,177083%
Для проверки можем сложить все размеры:
10 колонок + 9 gutter + 2 margin
(157 * 10) + (30 * 9) + (40 * 2) = 1920px
Итак, у нас есть процентные размеры:
отступ с краю 2,083333%
отступы между колонками 1.5625%
Рассчитаем размеры на макете 1440px:
ширина колонки: 1440 * 8,177083% = 117,75px
margin: 1440 * 2,083333% = 29,99999px
padding: 1440 * 1.5625% = 22,5px
Таким же образом можно рассчитать размеры на все ширины макетов
сетка на 1024px и 768px сетка на 320px
Как мы видим, наша сетка сохранилась. Она просто уменьшилась относительно ширины макета, ширины канваса.
Из всего этого следует, что для резиновой вёрстки нам достаточно всего лишь получить процентные размеры. При этом нам не нужно брать калькулятор и считать эти коэффициенты. Эту работу мы переложим на браузер.
Как работает сейчас
Думая о том, как можно снизить расходы на разработку, делать её быстрее, мы задумались о том, что при переходе от дизайнера к разработке заносится больше всего ошибок для вёрстки. Мы начали их искать, и поняли, что сетки — это самое большое зло, которое может быть в нашей совместной работе.
Например, не понятно, на каких разрешениях дизайнер рисует макет 1440 px и на каких разрешениях переходить на макет 768 px. На 1439 px планшетный макет выглядит плохо. Кроме этого есть и другие базовые разрешения, такие, как 1366 px, 1280 px, 1024 px и т.п. Мы пытаемся делать как-то по своему. В итоге получается цепочка итераций переделок и переработок.
Мы подумали: а почему бы не сделать одну сетку и работать с ней? Ведь это должно не сильно повредить дизайнеру в его работе, но при этом очень сильно облегчит работу верстальщика. Так появилась идея стандартизированных резиновых эластичных сеток.
Резиновая верстка — это когда мы перекладываем работу по адаптации макета под доступную ширину браузера, на сам браузер. Достигается это различными CSS-свойствами и единицами измерения: vw, %. При этом макет очень и очень редко масштабируется.
Резиновым макеты делают только по горизонтали. Если мы делаем резиновую верстку по горизонтали и вертикали, то скорее всего перед нами верстка с изменением масштаба, так называемая масштабируемая верстка, она не перестраивает контент.
То есть создавая резиновую верстку, разработчик даже перестроение макета перекладывает на браузер, чтобы все расчеты производились на стороне браузера, таким образом разработчик может не тратить время на “лишние” стили.
Резиновая (называется так потому что тянется, она жидкая, но при этом возвращается в исходное состояние)
Читайте также: