Как сделать резиновую верстку

Добавил пользователь Евгений Кузнецов
Обновлено: 18.09.2024

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

Каждый из этих макетов мне нравится, и каждый применим в том или ином случае, если делать это с умом и внимательно проверять простоту использования и одинаковую доступность для всех категорий пользователей. Все они являются частью уровня представления (presentational layer) для вебсайта, поэтому большинство вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Далее я опишу свой взгляд на жестко фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.

Макеты с фиксированной шириной

Макет сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в неизменное значение, не зависящее от разрешения экрана пользовательского агента. Наиболее распространенной и разумной считается ширина в 760 пикселей — размер, при котором пользователи мониторов с разрешением 800;600 увидят основное содержание сайта практически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

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

Плюсы такого макета

Контейнер для основного содержания сайта жестко зафиксирован, для него не нужно выставлять максимальную или минимальную ширину (у которой нет, на самом деле, кросс-броузерной поддержки на текущий момент);
В некоторых случаях использовать макеты с фиксированной шириной проще для создания определенных эффектов или дизайнерских решений (например, для позиционирования выпадающего меню или всплывающих подсказок к полям формы). Некоторые макеты дизайна разумно верстаются только с использованием фиксированной ширины основного контейнера;
Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является типичной шириной для такого рода макетов, является, в моем представлении, оптимальным для максимальной читаемости текста (частично соглашусь с автором статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и сайт будет помещаться в 1024;768 по ширине, однако, тогда, скорее, будет иметься в виду ширина основного поля в 1000 пикселей).

Советы по макету с фиксированной шириной:

Располагайте основное содержание страниц сайта слева, чтобы пользователям с мониторами 640;480 не приходилось прокручивать сайт по горизонтали для нормального чтения;
Обеспечьте сайт небольшими таблицами стилей для поддержки портативных небольших (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

Пример блока фиксированной ширины

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

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

Рассмотрим минусы такого макета

Некоторые советы по использованию этого макета

И, собственно, пример:

Эластичный макет

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

Плюсы эластичного макета

Минусы эластичного макета

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

Немного советов по эластичному макету

Пример эластичной верстки:

В заключении

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

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

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

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

Табличная;
Блочная;
Комбинированная.

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

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

Фиксированная (статическая);
Резиновая (тянущаяся);
Гибридная;
Респонсивная (адаптивная).

В этой статье подробнее остановимся на резиновой верстке сайта, ее достоинствах и недостатках.

При резиновой верстке сайт масштабируется в зависимости от ширины окна браузера. Такой способ верстки появился в связи с ростом размеров мониторов и их разрешения. Первые массовые мониторы имели разрешение 640*480, потом активно начали внедряться мониторы с разрешением 800*600 и 1024*768. Возникла необходимость делать сайты, ширина которых менялась с изменением ширины окна браузера, так как сайты с фиксированной шириной не всегда адекватно отображались на различных мониторах. С одной стороны, разработчик сайта стремится использовать всю площадь больших экранов для размещения информации, с другой стороны, ему нужно учесть возможности тех пользователей, которые имеют старые мониторы с небольшим разрешением. В настоящее время размеры мониторов выросли еще больше, и никого не удивишь разрешением 2048*1152.

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

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

Web-страница состоит из элементов различных типов, которые масштабируются по-разному. Например, текстовые блоки можно легко растягивать по горизонтали. Именно в них содержится обычно большая часть информации, а, значит, при резиновой верстке экран будет максимально информативен. Но растягивать бесконечно страницу нельзя, ее будет трудно читать. Считается, что оптимальная ширина текста должна составлять около 45 символов. Глаз должен охватывать всю строку целиком, тогда при чтении утомляемость будет минимальной. Если же текст на странице резинового сайта растянуть на всю ширину монитора размером, например, 27”, то при чтении придется даже поворачивать голову. В этом случае текст можно располагать колонками, но такое решение возможно, если контент состоит из отдельных не связанных друг с другом коротких блоков. Если же расположить колонками большой непрерывный текст, его придется прокручивать сначала вниз, а потом – вверх, на начало следующей колонки, что неудобно для пользователя.

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

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

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

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

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

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

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

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

Проголосуйте за статью, нажмите кнопку социальной сети.

Есть дизайн сайта, надо сделать резиновую верстку. Но эта верстка должна отвечать многим требованиям:

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

Подскажите, кто сталкивался с такими трудностями - как решить?

3 ответа 3

Ограничение ширины (максимальная ширина и минимальная ширина) задаётся с помощью max-widht, min-widht . Ну а с картинками я вижу такое решение.

Так как ширина картирнок постоянна, то расположить их не так сложно. Пусть каждая картинка будет по 200px . То есть общая ширина картинок будет равна 600px . Общая ширина 860px . Оставляем под контент, допустим, 600px , а остальное пусть будет полями (то есть на каждое поле остаётся по 130px ). Ну и всё - левую картинку размещаем float: left к левому краю блока контента, вторую - float: right к правому краю. Центральной картинке задаём левое поле равное margin-left: 200px; .

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

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

фиксированный;
резиновый (гибкий);
адаптивный.

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

Фиксированный макет сайта - это макет, который имеет строго определённую ширину (в пикселях). Такой вид дизайна широко использовался для разработки сайтов в прошлом, когда интернет только начал внедряться в нашу жизнь. В это время "господствовали" компьютеры с мониторами, имеющими диагональ 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 Годом Вас Поздравляю,
Желаю Счастья и Здоровья Вам и вашим близким! :)

Александр, здравствуйте! Скажите, на MODX сложно использовать RESS (Responsive Design + Server Side)? На сколько я понимаю этот метод вместе с адаптивностью самый лучший?

Здравствуйте, всё зависит от задачи. Но RESS не популярна. Её следует использовать для единичных проектов, там где это действительно нужно.

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

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

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

В большинстве сайтов RESS не используют, т.к. он не очень эффективен, а для быстрых страниц, если они нужны, используют турбо-страницы Яндекса и AMP Google.

Читайте также: