Динамическая верстка: универсальная сетка под все брейкпоинты, примеры и правила / Хабр

28.02.2023 alexxlab

Содержание

5. Фиксированная и резиновая верстки · Неожиданный HTML

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

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

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

.container {
    width:980px;
    margin:0 auto;
}

В резиновой верстке ширина задается в процентах

.container_fluid {
    width:100%
}

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

В фиксированной верстке центральный блок имеет ширину обычно 980px, так чтобы помещаться на мониторы с любым разрешением, включая iPhone и iPad.

Примеры сайтов:

http://alawar.ru
http://film.ru

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

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

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

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

min-width и min-height

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

например вот так

. container_fluid {
    width:100%;
    min-width:980px;
}

calc

Давайте рассмотрим следующий шаблон

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

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

Для этого нам может пригодиться функция calc

Допустим ширина родительского блока 100%, ширина левой колонки 200px. Тогда ширину правой колонки мы можем записать как

width:calc(100% - 200px)

НАЛИЧИЕ ПРОБЕЛОВ КРИТИЧНО!

Пропорциональное изменение ширины и высоты

Допустим наш шаблон выглядит вот так

Если блоки резиновые при сжатии, мы получим следующую картину

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

Хотелось бы, чтобы блоки уменьшались пропорционально, то есть квадраты оставались бы квадратами

Добиться этого можно следующим образом. Поставить высоту блока 0px, а padding-top равным ширине. Например

.chained_sizes_block {
    height:0px;
    width:25%;
    padding-top:25%;
}

    <div>
    </div>

Если Вы попробовали реализовать данную схему, нам остается понять, почему это работает:) Дело в том, что padding, указанный в процентах высчитывает эти проценты не от ширины самого блока, а от ширины блока-родителя, точно также как и ширина. Поэтому 25% в padding-top’e будут равны 25% ширины.

Фиксированные и резиновые верстки в дизайне

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

Пример бесплатных PSD-шаблонов можно найти на сайте http://freebiesbug.com/psd-freebies/website-template/

Практика:

Резиновый шаблон с фиксированной левой колонкой
Резиновый шаблон с двумя фиксированными колонками по бокам
«Резиновая» галерея картинок
Сделать, чтобы картинки были резиновые, а отступы между ними были фиксированные(шаблон должен занимать весь экран)
Сделать два квадрата. Меньший квадрат должен быть посередине по вертикали и горизонтали меньшего
Используя calc выровнять блок по центру экрана
Сверстать шаблон сайта. Сайдбар справа фиксированный по ширине, синий хедер резиновый, блоки контента фиксированные по ширине и выровнены посередине хедера.
Шаблоны c http://signature.ai/

Всё о вёрстке в помощь начинающему разработчику | GeekBrains

Фиксированная, адаптивная, резиновая вёрстка. В чём разница?

06 апреля 2016

2 минуты

18778

Автор статьи

Наталья Игнатова

Автор статьи

Наталья Игнатова

https://gbcdn.mrgcdn.ru/uploads/post/483/og_cover_image/dd5a4c4ecedc98c308f1d0d2036c23ef

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

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

Типы отображения:

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

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

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


#block1, #block2 { width: 400px; }

Резиновую вёрстку выполнить сложнее, нежели фиксированную. Здесь размеры принято задавать в процентах от ширины экрана, на котором выполнено открытие страницы. Такая страница с резиновым дизайном займёт всю ширину окна браузера и, казалось бы, всё хорошо, но! На широких мониторах сайт расплывётся, хотя, к примеру, на квадратном может быть всё красиво.


#block1, #block2 { width: 50%; }

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

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

Под эту верстку обычно создаётся несколько макетов под основные разрешения девайсов. Для реализации подобной вёрстки под каждый размер экрана прописывают свои стили CSS и правила @media.


#block1, #block2 { width: 430px; }

//для экранов с максимальной шириной 1200px
@media (max-width: 1200px) {
  #block1, #block2 { width: 380px; }
}

// для экранов с максимальной шириной 768px
@media (max-width: 768px) {
  #block1, #block2 { width: 200px; }
}

Принципы создания вёрстки

Существует табличный и блочный принцип вёрстки.

Табличная верстка считается устаревшей, хотя элемент «таблица» входит в спецификацию HTML5 и не помечен как устаревший. Но вот верстать таблицу, внутри ячейки которой содержится другая таблица — является устаревшим методом. В отображении же табличных данных в таблице нет ничего плохого. Весомым недостатком в случае использования таблиц будет задержка вывода страницы: пока браузер полностью не загрузит таблицу на локальную машину – содержимое не будет отображено; браузер видит таблицу как отдельный объект.

При блочной вёрстке особое внимание уделено тегу <div>. Он является каркасом, на который с помощью CSS накладывается тот или иной вид. С помощью <div> код выглядит отдельными блоками, который к тому же намного лучше индексируется. Помимо <div> в HTML5 добавлены теги блоков: <header>(заголовок), <footer>(подвал), <nav>(навигация) и <aside>(боковая панель).

Какой же метод использовать

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

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


#block1, #block2 { width: 50%; }

@media (max-width: 1200px) {
  #block1, #block2 { width: 100%; }
}

Домашнее задание читателям: с помощью какого метода верстки был создан дизайн данного портала и какой принцип вёрстки использовался?

Лучшее — людям: профессия «Верстальщик».

адаптивный дизайн, резиновый дизайн, адаптивная и резиновая верстка
Нашли ошибку в тексте? Напишите нам.
Динамический макет во время разработки. Динамическая компоновка необходима для… | Райан Лукас | Subform
Динамическая компоновка необходима для современных пользовательских интерфейсов.
Можем ли мы упростить работу с визуальным инструментом?
«Дизайн во многом зависит от ограничений». —Чарльз Имс
«Ограничения не являются ограничениями; они — проницательность». — Стив Сандерсон
При проектировании цифровых продуктов общим ограничением является то, что интерфейсы должны работать на различных устройствах. Дизайнеры полиграфии знают физический размер своей продукции, будь то страница формата А4 или 48-футовый рекламный щит. Дизайнерам пользовательского интерфейса не так повезло — одному программному продукту может потребоваться поддержка смартфонов, планшетов, ноутбуков, настольных компьютеров, телевизоров и т. д.¹
Исследование и проектирование с учетом этого ограничения могут быть затруднены при использовании статических визуальных инструментов. Нарисовать изображение каждого возможного макета — это куча усилий (хотя, возможно, это проще, чем пытаться смоделировать всю сложность в своей голове). Часто проекты просто отправляются в производство с полностью или частично нерешенными аспектами динамической компоновки: дизайнерские решения передаются инженерам.
Конечно, инструменты на стороне производства немного более мощные: механизмы динамической компоновки, такие как flexbox в CSS, AutoLayout в iOS и ConstraintLayout в Android, позволяют разработчику внешнего интерфейса создавать правила и отношения между элементами, а затем позволяют компьютеру обрабатывать нажатие на пиксель. Однако замена инструмента визуального дизайна кодом имеет свои недостатки. Если вы когда-либо делали макет с помощью CSS, вы, вероятно, знакомы с этим танцем:
Жонглирование запутанным синтаксисом
( «какая разница между align-items и justify-content еще раз?» )
Отладка непредвиденных результатов или ошибок
( »подождите, куда делась моя кнопка? ” )
Перезагрузка, проверка результатов, настройка значений, перезагрузка… до тошноты
Напряжение здесь в том, что, хотя динамическая компоновка функционально сложна, ее создание — это скорее визуальный процесс. И задачи визуального дизайна действительно выигрывают от прямого манипулирования и жесткой обратной связи:
«Хм, этот макет действительно не работает, когда окно просмотра узкое. Что, если я перенесу это сюда? Нет, это неправильно. Может быть, эти значки должны располагаться вертикально? Да, так лучше. Давайте добавим больше пространства между ними. Ой, слишком много места. Давайте попробуем сократить это пополам. Идеальный.»
Возникает несколько интересных вопросов. Если создание динамических макетов для производственных пользовательских интерфейсов — это визуальный процесс, почему для него нет визуальных инструментов? И разве дизайнеры не должны исследовать и определять поведение макета — очевидно, в рамках своей предметной области — вместо того, чтобы полагаться на инженеров?
Инструменты проектирования, ориентированные на производство, не получили широкого распространения.
Честно говоря, создание динамических макетов программно — не единственный вариант: такие IDE, как Apple Interface Builder, Android Studio и Microsoft Blend для Visual Studio, имеют визуальные редакторы макетов². Но хотя эти инструменты иногда используются фронтенд-инженерами, они не особо прижились у дизайнеров продуктов.
Визуальные редакторы компоновки в IDE, такие как Interface Builder, Android Studio и Visual Studio Blend, не очень понравились дизайнерам продуктов.
Вполне вероятно, что для этого есть несколько причин, но наша основная теория проста: инструменты, которые выявляют производственные ограничения, часто кажутся дизайнерам слишком ограничивающими. Это особенно верно во время расходящихся этапов проектирования, когда вам нужно быстро концептуализировать и изучить множество возможностей. Инструменты, основанные на ограничениях, могут заставить вас формализовать проектные решения и разобраться с деталями, прежде чем вы будете готовы. Часто кажется, что инструмент борется с вами, а не является средством для размышлений³ 9.0005
С другой стороны, полностью произвольные инструменты рисования позволяют дизайнерам слишком легко игнорировать реальные производственные ограничения. Признание ограничений и реагирование на них, возможно, является ключевым моментом процесса проектирования. Это то, что отличает дизайнерское решение от случайного действия. Работа внутри ограничений часто дает более целенаправленные, проницательные и полезные решения.
Можем ли мы сбалансировать ограничения макета и прямое манипулирование?
Эта конкретная проблемная область — балансирование знакомого опыта прямого манипулирования инструментами рисования с реалиями производственных ограничений — это то, что мы с Кевином Лайнахом исследовали вместе с Подформа .
Поскольку динамическая компоновка кажется особенно острой проблемой как для дизайнеров, так и для инженеров, мы решили сосредоточить наше глубокое погружение на ней: можем ли мы выявить ограничения компоновки во время разработки полезным и удобным способом, но при этом оставаться верными производственная среда?
Вот несколько принципов, которые мы уже придумали, а также несколько примеров из реальной жизни. (Приведенные ниже демоверсии Subform были записаны непосредственно из последней бета-версии.)
Допустим, вы разрабатываете экран с разбивкой по макронутриентам для приложения по питанию. Первоначальная идея состоит в том, чтобы упорядочить счетчики белков, жиров и углеводов в виде горизонтального стека, охватывающего всю ширину окна просмотра.
После проверки команда предложила, чтобы на этом экране также отображались пищевые волокна. При простом рисовании в произвольной форме⁴ макет изменения выглядит примерно так: продублируйте одно из полей, выполните некоторые вычисления, чтобы определить новые размеры для всего, сохраняя при этом одинаковый интервал, измените размер и выровняйте все поля, затем измените текст.
Добавление нового блока макронутриентов в Sketch требует большого количества ручных операций с пикселями.
Это изменение можно легко внести в неограниченный инструмент, но это не easy — это отнимает много времени и увеличивает вероятность того, что вы случайно испортите существующий дизайн.
В Subform работа в рамках ограничений механизма компоновки может упростить это изменение. Механизм компоновки достаточно умен, чтобы автоматически делить доступное пространство между счетчиками питательных микроэлементов. Чтобы добавить поле для клетчатки, вы можете просто продублировать одно из существующих полей и изменить текст:
Добавление нового поля макронутриентов в подчиненную форму — это просто двойная операция.
Это здорово, но такое изменение дизайна часто вызывает дополнительные вопросы. Где должно располагаться волокно в порядке — первое, последнее? Должна ли коробка из волокна быть шире, чем другие, для акцента?
Это еще один случай, когда использование ограничений позволяет дизайнеру переложить эту рутинную работу на компьютер. В Subform вы можете просто перетащить волокнистую коробку, чтобы переупорядочить ее в любую позицию в стеке:
Изменение порядка элементов внутри стека можно выполнить с помощью перетаскивания.
Во время перетаскивания появляется наложение интервала стека вместе с индикатором того, где будет размещен элемент. При сбросе вы увидите, что другие элементы в стеке автоматически перестраиваются с сохранением всех интервалов.
Перестановка и изменение размера элементов внутри сетки работает почти так же. Если пользовательский интерфейс макронутриентов настроен как сетка, при перетаскивании отдельных элементов или изменении их размера они будут привязаны к линиям сетки, показанным на наложении:
Перестановка и изменение размеров элементов внутри сеток также является быстрым перетаскиванием.
Просто возможность перемещать объекты внутри одного стека или сетки по-прежнему довольно ограничена. Визуальное исследование должно быть более гибким.
Представьте, что вы разрабатываете форму. После размещения всех необходимых входных данных вы хотели бы посмотреть, можно ли сделать его более компактным, возможно, удвоив некоторые входные данные в отдельные строки.
В Subform элементы можно перетаскивать между различными стопками. Вначале вы разработали форму как одну основную вертикальную стопку элементов:
Чтобы поместить два входа в одну строку, вам нужно вложить дочерний горизонтальный стек внутрь этого основного стека, а затем перетащить в него входы:
Прямое управление иерархией: создание горизонтального стека внутри вертикального стек и перетаскивание элементов.
В производственной среде интерфейсы обычно строятся на основе такой иерархии (например, иерархии представлений в iOS или веб-модели DOM). Иерархия формализует отношения между элементами. Затем эти отношения используются для управления такими вещами, как размер и положение.
Иерархии могут быстро становиться глубокими, поэтому навигация по ним только с помощью дерева или меню слоев может быть громоздкой. (Возможно, вы сталкивались с этой проблемой при работе с большим количеством вложенных групп в Photoshop или Sketch.)
Чтобы улучшить ситуацию, мы ввели контекстный помощник для навигации по иерархии прямо на холсте. При перетаскивании элемента вы можете просто нажать клавишу Tab для циклического просмотра всех элементов под курсором мыши:
Нажатие клавиши Tab циклически перемещает всю иерархию элементов под курсором мыши, что поможет вам найти намеченную цель.
Это значительно упрощает перемещение элементов между разными частями макета. Элементы можно перемещать не только между разными стопками, но и между стопками и сетками. Возможно, вы хотите начать изучать форму как сетку, а не стопку. Удерживая клавишу alt , вы можете скопировать элемент ввода между стеком и сеткой (а не просто переместить его) и даже поместить его в определенное место сетки:
Быстрое перемещение элементов между стопками и сетками упрощает изучение различных вариантов компоновки.
Иногда просто хочется быстро изложить идею. В этом трудно превзойти наброски произвольной формы, поэтому Subform по-прежнему позволяет вам рисовать и управлять текстом и блоками традиционным способом…
Манипулирование произвольной формой по-прежнему присутствует в Subform.
… когда вы будете готовы, элементы могут быть формализованы в компоновку, где они извлекают выгоду из силы ограничений: постоянный интервал, быстрое изменение порядка, адаптация к размеру родителя и так далее.
По мере того, как все начинает складываться, вы можете формализовать дизайн в виде взаимосвязей компоновки.
Вы также всегда можете извлечь любой элемент из его стека или макета сетки. В этом «самоуправляемом» режиме элемент игнорирует правила компоновки своего родителя и может более свободно преобразовываться:
Элементы всегда можно сделать самоуправляемыми и более свободно манипулировать ими.
Мы слышали от многих дизайнеров разочарование тем, что современные инструменты визуального дизайна на самом деле не отражают реалии и требования производственной среды. Программное обеспечение условное, с отслеживанием состояния, управляемое данными. Рисование изображений интерфейсов (даже анимированных) просто не имитирует это.
Тяжело балансировать. Простой в освоении и свободный характер традиционных инструментов рисования хорошо подходит для быстрого изучения идей. Введение производственных ограничений часто может просто превратить инструмент в паршивую подобие реальной вещи, что приводит к большому количеству дополнительной работы по созданию артефактов, которые на самом деле бесполезны при создании продукта. Обе стороны в конечном итоге страдают от своих усилий: «Кто за двумя зайцами гонится, тот ни одного не поймает».
С другой стороны, выявление ограничений в процессе проектирования обещает новые идеи, более быстрый цикл обратной связи и более легко реализуемые решения. Благодаря функциям динамического макета Subform мы пытаемся пройти по этому канату. У нас определенно нет ответов на все вопросы, но мы хотели бы услышать, как это подходит для вашей работы.
Если вы хотите попробовать Subform, вы можете присоединиться к бета-тестированию на нашем веб-сайте и загрузить его сегодня. ✌️
Сноски
¹ Физический размер экрана устройства — не единственная переменная. Apple рекомендует, например, чтобы приложения для iPhone и iPad фактически поддерживали 22 различных размера области просмотра. Расстояние чтения и тип ввода (например, сенсорный экран, мышь или пульт от телевизора) также могут влиять на решения дизайнера по компоновке.
² Конечно, этот список не является исчерпывающим (есть и примеры не для IDE). Следует отметить: многие инструменты для рисования, такие как Sketch, добавили основные ограничения «закрепления» или «изменения размера» (то, что Apple назвала «пружинами и стойками»). Я не включаю их здесь, потому что, хотя они просты в использовании и понимании, на самом деле они не имитируют большинство систем производственной компоновки и, как правило, ломаются при любой сложности реальной компоновки. (По этой последней причине Apple добавила решатель ограничений AutoLayout.)
³ Существует довольно много интересной литературы о таких вещах, как дивергентные и конвергентные этапы проектирования, а также о том, как наброски и рисунки служат средством размышлений для дизайнеров. Эта тема лучше подходит для отдельной статьи, но если вам интересно, можно начать с книги Дональда Шона «Рефлексивный практик».
⁴ Этот пример взят из Sketch и использует функции изменения размера этого приложения (например, размер гистограмм автоматически изменяется вместе с их группой). Как упоминалось в сноске №3, эти — это тип ограничений, так что это не настоящий пример полностью произвольного инструмента. Но это более точное представление того, как вы, вероятно, сделали бы этот процесс в современных визуальных инструментах.
Динамические макеты, темы, шаблоны и загружаемые графические элементы на Dribbble
Посмотреть исследование макета
План исследования
Просмотр богатого музыкального веб-сайта

Веб-сайт Rich Music
Посмотреть брендинг производителя мебели
Брендинг производителя мебели
Посмотреть блог веб-сайта беспроводной настольной лампы
Аккумуляторная настольная лампа Веб-сайт Блог
Посмотреть динамический побег
Динамический выход
Посмотреть брендинг производителя мебели
Брендинг производителя мебели
Посмотреть солнцезащитные очки TINT
Солнцезащитные очки TINT
Просмотр динамической панели вкладок
Динамическая панель вкладок
Посмотреть Представляем HAJINSKY — журнал Fashion Psychology
Представляем HAJINSKY — журнал Fashion Psychology
Посмотреть анимированный 3D-баннер героя
Баннер с анимированным 3D-героем
Посмотреть блог Vivd Minds
Блог Vivd Minds
Посмотреть динамическую идентификацию MarketMove
Динамический идентификатор MarketMove
Посмотреть концепцию логотипа сквоша, часть 1. 1 (. для продажи)
Концепция логотипа сквоша, часть 1.1 (. для продажи)
Посмотреть концепцию DERENZY
Концепция DERENZY
Посмотреть дизайн логотипа Colorbleed
Логотип Colorbleed
Посмотреть значок приложения для приложения для редактирования фотографий
Значок приложения для редактирования фотографий
Просмотр динамического перехода
Динамический переход
Посмотреть Peakbend — Дизайн логотипа ⛰️+📈
Пикбенд — Дизайн логотипа ⛰️+📈
Google Chrome — Редизайн логотипа 2022
View Smooth preloader & home для веб-сайта дизайнерского агентства | Лазарев.