Что такое резиновая верстка. Резиновая или фиксированная верстка. Размер шрифта в мобильных браузерах
При создании сайта в нашей студии, большое внимание уделяется качественной верстке веб-страниц. Больше информации о верстке сайта в нашей студии я писал в другой статье. Сегодня же я хотел бы рассказать о видах верстки - резиновой и фиксированной. Каждый день мы пользуемся разработками зарубежных интернет-гигантов, таких, как Google, Microsoft и Facebook. Мы сидим за АйМаками и АйБиЭм-совместимыми ПК и используем компьютерные стандарты, созданные американскими учеными. Тем не менее, именно благодаря нам появилось сделанное почти «на коленке», с огромным недостатком финансов, практически на голом энтузиазме, весьма заметное в мировом масштабе сообщество www-ресурсов, именуемое чаще всего Рунетом (РУсский интерНЕТ). Хотя никакой четкой границы между «нашими» и «ненашими» реально не существует, так как Сеть интернациональна по определению, отечественным сайтам свойственен ряд характерных особенностей, выделяющих их на общемировом фоне.
Внешне русскоязычный сегмент глобальной Сети очень отличается от западного. В то время как Американский и любой другой сегмент интернета сугубо практичен, наши веб-дизайнеры соревнуются друг с другом в изящности, стильности и внешней привлекательности своих проектов. Такого количества красивых и функционально законченных сайтов нет, похоже, больше нигде.
Один из аспектов, который неизбежно упоминается в связи с отечественным веб-дизайном – это «резиновая» верстка (разметка). В Рунете стандартом считается верстка, при которой дизайн занимает 100% экрана, независимо от разрешения, в то время как западные сайты чаще всего сделаны по жесткой сетке и зафиксированы по ширине.
Сленговое выражение «резиновая» (тянущаяся, нефиксированная) верстка обозначает такой способ формирования странички сайта, при котором основные блоки выстраивают свое взаимное расположение, основываясь на размерах окна браузера. При этом изменение пропорций окна браузера ведет к изменению пропорций сайта. Как правило, размеры колонок или блоков устанавливаются в процентном отношении от ширины окна.
Противовес резиновой верстке – верстка фиксированная. В этом случае сайт имеет строго определенную ширину и жестко заданные пропорции его основных колонок. То есть, в большинстве случаев сайт «уже» окна браузера, располагается либо по центру окна, либо прижат к левому или (крайне редко) правому краю окна. Оставшееся пространство экрана заполняет фон.
Оба подхода имеют свои индивидуальные особенности, плюсы и минусы. В данной статье я попробую на примерах объяснить мотивы выбора разработчиками верстки того, либо иного типа.
Фиксированная верстка
Сайт с фиксированной версткой имеет неизменяющуюся ширину независимо от разрешения экрана пользователя. Наиболее часто используемая ширина составляет 960, либо 1000 пикселей – размер, который гарантирует пользователям с разрешением экрана 1024?768 px (наиболее распространенный случай) и выше возможность нормального просмотра сайта без раздражающей горизонтальной прокрутки.
Статистика использования экранных разрешений в 2011 году:
1280×1024 – 14,8%
1280×800 – 14,4%
1024×768 – 13,8%
1366×768 – 10,1%
1440×900 – 9,9%
1680×1050 – 9,2%
1920×1080 – 6,2%
1920×1200 – 4,5%
1600×900 – 2,5%
1152×864 – 1,5%
1360×768 – 1,3%
800×600 – 0,6%
Плюсы фиксированной верстки:
- Ширина фиксируется для всех браузеров, так что возникает меньше проблем с картинками, формами, видео и другим контентом, имеющим фиксированную ширину;
- Фиксированная верстка препятствует излишнему растяжению текстовых строк сайта по ширине;
- Фиксированные макеты верстаются быстрее и легче, что очень важно на срочных проектах;
- Верстку с фиксированной шириной часто проще стилизовать, в зависимости от применяемых эффектов.
Минусы фиксированной верстки:
- Вид страницы может значительно ухудшиться, если пользователи будут вручную увеличивать размер шрифта в браузере (как правило, этой функцией пользуются слабовидящие). Ввиду того, что ширина текстового блока зафиксирована и не изменяется пропорционально размеру шрифта, в дизайне страницы возникают искажения.
- При разрешениях, меньших, чем тот, на который рассчитан макет, в браузере появится горизонтальная прокрутка. Хотя разрешения меньше 1024×768 px на персональных компьютерах – уже большая редкость, для распространенных сегодня смартфонов и нетбуков это обычное дело.
- Фиксированный макет будет оставлять много пустого пространства у пользователей с большим разрешением экрана;
- Относительно небольшая ширина сайта с фиксированной версткой часто ограничивает в возможностях размещения публикуемых материалов.
Хорошим примером фиксированной верстки является недавно законченный нами сайт по аренде недвижимости
Резиновая верстка
Резиновая верстка создается без определенного размера оболочки, но с использованием процентных свойств. Другими словами, 100% ширина сайта займет все свободное пространство экрана монитора.
Плюсы резиновой верстки:
- Качественная верстка может адаптироваться практически к любому разрешению экрана, что делает её универсальной;
- Хорошо спроектированные резиновые макеты могут исключать появление горизонтальной прокрутки на меньших разрешениях;
- Сайт с резиновой версткой может максимально полно использовать пространство монитора.
Минусы резиновой верстки:
- Избыточность элементов сайта, вмещающихся на больших мониторах, может запутать пользователей и сделать сайт слишком перегруженным;
- Если не используются ограничения для ширины текстовых блоков сайта, то их становится проблематично читать;
- Разработчик должен иметь возможность провести тестирование правильного отображения сайта на всех возможных размерах экранов;
- Дизайнеру в некоторых случаях приходится рисовать несколько вариантов макета для разных разрешений;
- Так как резиновая верстка более сложная, она требует более тщательной адаптации под различные браузеры.
Наиболее популярные веб-браузеры, под которые, прежде всего, проводится тестирование:
Примером резиновой вестки является наш сайт Transit production
Также, к резиновым относятся гибридная и эластичная верстки. Гибридная – это наиболее распространенный вид верстки, который включает в себя как фиксированные, так и относительные размеры элементов – некий компромисс между фиксированной и резиновой html-версткой. Большинство веб-мастеров используют именно этот вид верстки при разработке сайта.
При использовании эластичной верстки размер основного контейнера и других (важных) элементов задается в специальных единицах – em. Em прямо пропорциональны размеру текста или шрифта. Следовательно, при увеличении размера текста на странице, размеры разделов, заданные в em, увеличатся пропорционально.
Все типы резиновой верстки более требовательны к времени и навыкам разработчиков, но практически всегда позволяют максимально эффективно использовать пространство монитора и предоставлять пользователю удобный и универсальный интерфейс. Тем не менее, перед началом проектирования сайта нужно определиться – оправданы ли усилия для «резины», и действительно ли подача информации в таком виде для данного случая будет наиболее эффективна?
Любой дизайн это решение задач: эстетика, которая должна сработать нужным образом; удобство, которое должно навести на определенный метод использования или расширить стандартные возможности и т.п. Верстка, это один из этапов реализации веб-проекта, который проектируется непосредственно дизайнером. Выбирая тип верстки, дизайнер решает конкретные задачи, давайте попробуем понять - какие именно.Чтобы понять задачи, решаемые резиновостью, стоит начать с истории её возникновения.
Первые сайты с подстраивающейся к размеру экрана версткой (резиновые) появились в период исчезновения мониторов с разрешением 640-480, активного использования разрешения 800-600 и первыми представителями 1024-768. Стоит признать, что площадь 640-480 и 800-600 мала для полноценного восприятия информации. А еще и навигация, и банер повесить надо (в те времена они были эффективнее). Растянув наш сайт в 1,6 раза по горизонтали, мы хоть как то приблизим формат сайта к хорошо воспринимаемому всеми формату листа А4. Сделаем тем самым огромное одолжение владельцам новеньких дорогих «больших» мониторов. Тем более, что мы растягиваем не только элементы по странице, но еще и текстовые блоки, которые уменьшаются по высоте, а это иногда убирает скрол! (а это пикселей 30!). Выгоды очевидны!
Получается, главная задача «резиновости» - дать необходимое пространство для контента, не ущемив достоинство владельцев стареньких мониторов.
Так как мы рассматриваем «резиновую» верстку в наше время, стоит обратить внимание на современный парк мониторов. а это (если забыть про нетбуки) от 1024 х 768 и до 2048 х 1152. Математически, мы получаем разницу в 2 раза, что не намного больше чем лет 10 тому назад.
Соотношение размеров между большими и маленькими мониторами почти сохранилось, сохранились ли ставящиеся перед дизайнерами задачи?
КАК ОНО РАБОТАЕТ.
Для начала, я бы хотел разобрать основные методы масштабирования и их особенности. Отдельно стоит заметить, что масштабируются сайты, как правило по-горизонтали.
1. Текстовые блоки хорошо поддаются растяжению по горизонтали. Они несут, порою, до 90% всей информации на сайте (а значит, их много! Есть что тянуть!). Но бесконечно растягивать их просто нельзя. Наше внимание имеет определенный запас «усидчивости». Если текстовая строка становится слишком длинной, нам просто тяжело ее читать - мы устаем. Недаром, в газетах используют ограничения по ширине текстового блока примерно в 50-55 знаков, а это, даже при увеличенном межбуквенном расстоянии, меньше половины ширины листа А4. Вообще, самой оптимальной длинной строки для быстрого и удобного чтения считается 45 знаков. Минимум тоже есть, это порядка 20-25 знаков. То есть, текстовый блок может быть увеличен от минимума до удобочитаемого максимума не более чем в 2 раза. Разбивать один текст на несколько колонок, как в газете, не рекомендуется. Потому что когда мы просматриваем текст, скролируя сверху вниз, возвращаться наверх в начало второй колонки будет крайне неудобно. Исходя из этого, если текст это основной блок страницы, то мы не можем ее растягивать даже до 900 px! А лучше меньше.
2. Расстояние между различными элементами сайта. При должном уровне навыков, эти области сайта поддаются масштабированию, казалось бы, без потерь. Но есть одно «Но». Дело в том, что «пустое пространство» это не просто «довесок» на страничке. Промежутки между блоками выполняют вполне конкретные задачи: разделяют, группируют схожие блоки, создают акцент на самом важном. Все эти задачи решаются разницей размеров пробелов. например, несколько блоков, разделенных небольшими промежутками, визуально воспринимаются как родственные, или имеющие одинаковую ценность. Блок, имеющих вокруг себя много свободного пространства однозначно ценный, возможно, главный на странице.
Если исходить только из разницы размеров блоков, то совершенно не имеет значение насколько мы их растянем, ведь они будут растягиваться пропорционально. Вроде бы, они все должны справляться со своими задачами… Но тут появляется очередное «Но». Дело в том, что промежутки еще имеют и свой «характер». Возможно, кому-то, далекому от сферы дизайна, это покажется несущественным, но я напомню вам о работе танцора, музыканта, певца. Непрофессионал-танцор может выполнять те же движения что и мастер, музыкант-новичок будет играть по тем же нотам, певец будет петь ту же песню. Мы будем узнавать произведение, но мы скорее всего почувствуем разницу. Если сделать промежутки между родственными блоками в 5 мм, они будут восприниматься как родственные, но если мы их растянем до 10-15 мм, то они начнут безвозвратно разделять «родственников». И ситуацию не спасет даже то, что пропорционально это самый маленький на странице промежуток.
Характер «пустых мест» может влиять и на общий характер страницы. Например, резиновые сайты частенько разрушают требуемое ощущение выверенности, стабильности и надежности. Я не стану сильно вдаваться в этот вопрос, просто потому, что это достаточно специфическая тема, которая хорошо освещается в литературе посвященной дизайну, композиции и изобразительному искусству.
3. Всевозможные графики и таблицы с текстовым наполнением. Если в таблицах много столбцов, а в графиках много точек, то лишнее пространство позволяет увидеть черезчур длинные для ячеек подписи. Расширенные графики удобнее показывают небольшие и частые изменения направления. В этих специфических случаях резиновость может оказаться необходимой.
4. Растровые картинки при растяжении дают искажения и муар при растягивании в одном направлении. Но можно изменять размер всего изображения, сохраняя пропорции. Либо можно менять размер «окна» картинки, сохраняя ее истинный размер. Увеличивать размер картинок нужно в случаях когда эти картинки нужно показывать в максимально большом размере, например в фотосервисах, в портфолио дизайнеров и фотографов… Однако, так или иначе, это сопряжено с дополнительными техническими усложнениями.
Видео. Могу ошибаться, но мне еще не приходилось встречать варианты простого масштабирования окна потокового ролика (в любом случае, это ресурсоемкая технология). Как правило, это окошко реального размера + возможность посмотреть ролик на весь экран. Но, наши сети пока далеки от идеала, и говорить о тотальном переходе в видео-формат не приходится.
Виджеты, навигация. Как правило, это элементы на которые направлено достаточно много внимания пользователя. Их внутренние компоненты, конечно же поддаются масштабированию. Но изменение выверенных дизайнером пропорций часто ведет к потере читаемости этих компонентов. Эти компоненты вообще стоит рассматривать в отдельности каждый случай, главное не забывать об опасности визуально «развалить» компонент. Ну и как всегда, требуются технологические ухищрения.
Кроме чисто художественных аспектов и законов восприятия информации, есть еще проблема «уставания» нашего глаза. Отчасти, это затрагивается выше в санитарных нормах для текстовых блоков. Не буду уходить в цифры. Простой пример: мало кто станет вешать на рабочем месте лист с важной информацией по текущему проекту за спину или сбоку от себя, частенько наброски, схемы и записки вообще клеят в районе монитора. Чем дальше мы бегаем взглядом, тем быстрее мы устаем. В масштабах экрана это кажется менее существенным. Но чтобы рассмотреть 2 разные картинки у левого и правого края 22 дюймового монитора, нам уже приходиться чуть повернуть голову, мониторы уже стали слишком большие для движения только лишь глазами. Через 4-5 часов сетевого серфинга у пользователя достаточно расфокусируется внимание, чтобы на вашем растянутом сайте ему стало трудно найти нужную информацию.
Просмотрев основные методы масштабирования и ограничения связанных с ними компонентов, можно прийти к выводу, что сами по себе компоненты часто просто не имеют запаса «резиновости». Конечно, некоторыми ограничениями можно пренебречь, но это чревато созданием неудобств для пользователей, потерей заложенного в дизайн образа или необоснованной технической сложности страницы.
ЧТО ИМЕЕМ.
Дизайнеры по прошествии 10 лет все еще решают проблему нехватки рабочего пространства, и решают ее использованием «резиновой верстки», растягивающей все имеющиеся материалы по экрану монитора. Но наши мониторы давно переступили черту нормального восприятия! С этим можно не соглашаться просматривая очередное продолжение саги «STAR WARS» или играя в одноименный шутер. Картинка фильма и игры похожи на то, что мы видим нашими глазами в жизни. В нем очень много лишней информации, даже максимально эффективный угол нашего зрения всего 5°. За счет уменьшенного угла мозг разгружается от лишней информации. Нас не интересуют все детали, а лишь картина в общем. А невоспринимаемое пространство создает лишь дополнительный «антураж» - зеленая масса леса, толпа… Прибавьте к этому факт, о том что лучше всего мы воспринимаем именно центр экрана, и нам крайне неудобно изучать что либо на краях… А страничка сайта это детали, тексты, анонсы и навигация. Да, можно заставить искать человека это все по большому экрану. И как правило, он находит. Человек может читать текст даже в нижнем правом углу экрана 9-м кеглем. Только это происходит ценой дополнительных усилий зрения и внимания, хоть и небольших на первый взгляд. Присоедините к этому лишние часы работы верстальщика и дизайнера на разработку этого типа верстки.
Стоит заметить, очень многие дизайнеры пришли к выводу, что тянуть бесконечно контент нельзя, точно так же как и сжимать. Понимание этого породило «полу-резиновость». Если человеку достаточно комфортно воспринимать информацию на 900 px ширины (немного больше ширины листа А4), то ради решения какой задачи ее растягивать до 1100 px? И это при том, что даже минимальное разрешение современных мониторов укладывается в ширину 1024 px, а значит, и сжимать не придется.
Да, нельзя не согласиться, что с увеличением размеров мониторов, мы столкнулись с проблемой лишнего места, которое теперь приходиться скрывать (это те самые белые поля по бокам экрана). Но для этого можно использовать фон, дополнительную графику, которые не несут смысловой нагрузки и не требуют дополнительного внимания. Совсем необязательно трогать информационные блоки.
Получив «заряд бодрости» конца 20 века, когда проблемы с площадью действительно были, дизайнеры продолжают решать несуществующие проблемы, а уже «образованные» заказчики требовать эти проблемы решать.
Частенько можно услышать про «законы веба», вроде как они не имеют ничего общего с типографическими правилами. Однако, главное в типографии - подача печатного текста. А до тех пор, пока видео и звук не заменили текст (который составляет гораздо больше 50% контента сайтов), а мы все еще видим биологическими глазами, было бы глупо отказываться от исследований и опыта, накопленного за несколько сотен лет типографии. Тем более, что текст на мониторах из-за низкого разрешения гораздо хуже печатного (72 dpi против 200 dpi и более), да и сами мониторы не способствуют отдыху глаз.
Для тех, кто сомневается в реальности проблем восприятия, предлагаю посмотреть 4 варианта размещения текстов тут: nano.a5.ru
ОПРАВДАНИЕ.
Однако, Не стоит полностью отрицать использование резиновой верстки. Она прекрасно подходит в случаях, когда большая площадь представления дает преимущество. Например, Динамически построенные таблицы с текстовым содержанием и большим количество столбцов, дополнительная длинна ячеек которых позволяет проявить длинный текст. Или при специфических требованиях портфолио дизайнеров, фотографов, художников, когда им необходимо представить сразу много своих работ, показать общий уровень, не акцентируя на какой либо в отдельности. Но это частные случаи, которые нужно рассматривать в отдельности.
Есть еще один случай использования масштабируемой верстки, который не требует каких либо аргументов для права на существования - резиновость, как художественный прием. Но в этом случае один знаменитый совет приобретает новую форму:
Делайте только резиновые сайты = Делайте только сайты красного (зеленого, синего, оранжевого, и т.д.) цвета!
P.S.
Думаю, многим приходилось натыкаться на фразы типа: «Хороший дизайнер должен уметь делать правильную резину!». На мой взгляд, куда важнее умение правильно выбрать: резина или нет?
Влад Мержевич
Резиновый макет с тремя колонками, пожалуй, самый гибкий и настраиваемый из существующих макетов. Сочетание процентов и пикселов для указания ширины колонок позволяет делать разные макеты, выбирая их под свои задачи. На рис. 5.17 представлены варианты трёхколоночных макетов, для удобства они пронумерованы.
Рис. 5.17. Трёхколоночные макеты
Здесь символ процентов (%) означает, что ширина колонки задана в процентах от ширины макета, px - ширина колонки указана в пикселах, а знак бесконечности (∞), что колонка занимает оставшееся пространство. Несмотря на обилие разных макетов, принципы их построения остаются одинаковыми и включают два основных способа: позиционирование и плавающие элементы. Также можно воспользоваться таблицами для создания колонок одинаковой высоты.
Использование позиционирования
Для управления положением слоёв относительно родительского элемента необходимо для родителя установить свойство position со значением relative , а дочерним элементам, которые формируют колонки, значение absolute . Структура кода для первых четырёх макетов будет одинаковой и представлена в примере 5.13.
Пример 5.13. Две колонки в пикселах или три в процентах
Здесь колонки пронумерованы по порядку, т.е. колонка 1 располагается слева, колонка 2 по центру, а колонка 3 справа.
У позиционирования есть определённый недостаток, который ограничивает применение этого метода - при добавлении подвала он будет скрыт под колонками. Это связано с тем, что у слоя layout нет высоты как таковой, поэтому он не «толкает» слой с подвалом вниз. Если подвал непременно требуется на странице, следует воспользоваться методом построения колонок, основанным на плавающих элементах. Ещё этот метод не работает в IE6 из-за наличия в нём ошибок.
Для макета № 1, в котором ширина первой колонки резиновая, а остальных фиксирована, стиль будет следующим (пример 5.14).
Пример 5.14. Макет № 1
Header { background: #D5BAE4; } .layout { position: relative; /* Относительное позиционирование */ } .layout DIV { position: absolute; /* Абсолютное позиционирование */ } .col1 { background: #C7E3E4; /* Цвет фона */ left: 0; /* Положение левого края */ right: 300px; /* Положение правого края */ } .col2 { background: #E0D2C7; width: 200px; /* Ширина колонки */ right: 100px; /* Сдвигаем влево на ширину колонки 3 */ } .col3 { background: #ECD5DE; width: 100px; right: 0; }
У колонок с заданной шириной стоит свойство width , а их положение слева или справа задаётся соответственно свойством left или right . Резиновая ширина оставшейся колонки строится после одновременного добавления left и right , значения которых совпадают с шириной фиксированных колонок.
Макеты № 2 (пример 5.15) и № 3 (пример 5.16) построены на том же принципе.
Пример 5.15. Макет № 2
Header { background: #D5BAE4; } .layout { position: relative; } .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; left: 100px; right: 200px;} .col3 { background: #ECD5DE; width: 200px; right: 0; }
Пример 5.16. Макет № 3
Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 100px; } .col3 { background: #ECD5DE; left: 300px; right: 0; }
Макет № 4, в котором ширина всех колонок задана в процентах имеет некоторые нюансы. Если требуется одинаковая ширина всех колонок, её можно задать дробно (33.33%), но браузер Opera не умеет работать с дробными значениями процентов, поэтому в нём между колонками появятся «дыры» (рис. 5.18).
Рис. 5.18. Ширина колонок, заданная в дробных процентах
В подобных ситуациях следует перейти на неравные доли, к примеру, 33%, 34%, 33%, как показано в примере 5.17.
Пример 5.17. Макет № 4
Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 33%; } .col2 { background: #E0D2C7; left: 33%; width: 34%; } .col3 { background: #ECD5DE; right: 0; width: 33%; }
В некоторых браузерах возможно появление небольшого промежутка между колонками. Решается использованием не целых, а дробных значений процентов, т.е. 33.3% вместо 33%.
Оставшиеся макеты, в которых две колонки из трёх резиновые, представляют особую группу, потому что их можно трактовать по-разному. Так, ширина одной колонки указывается в пикселах, другой в процентах от ширины макета, а ширина оставшейся вычисляется автоматически. На рис. 5.19 показаны разные подходы к вычислению ширины колонок на примере макета № 5.
Рис. 5.19. Ширина двух резиновых колонок
В первом варианте ширина первой колонки задана в процентах от ширины макета, ширина второй колонки вычисляется автоматически, а третья колонка имеет фиксированную ширину в пикселах. Во втором варианте колонки меняются между собой, и автоматически вычисляется ширина первой колонки. Третий вариант предполагает, что общая ширина резиновых колонок принимается за 100% и ширина первой и второй колонки вычисляется от неё.
Первый и второй вариант легко реализуется аналогично коду с двумя колонками в пикселах. Только вместо ширины в px указываем %. В примере 5.18 приведён стиль макета № 5 с первой колонкой заданной в процентах.
Пример 5.18. Макет № 5. Ширина второй колонки вычисляемая
Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; width: 50%; } .col2 { background: #E0D2C7; left: 50%; right: 200px; } .col3 { background: #ECD5DE; right: 0; width: 200px; }
Стиль макета № 5 с вычисляемой первой колонкой показан в примере 5.19.
Пример 5.19. Макет № 5. Ширина первой колонки вычисляемая
Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 200px; margin-right: 50%; } .col2 { background: #E0D2C7; width: 50%; right: 200px; } .col3 { background: #ECD5DE; width: 200px; right: 0; }
Первой колонке нельзя задать ограничение справа через свойство right , поскольку значение будет равно 50%+200px, в CSS2 таких вычисляемых значений нет. Поэтому применим фокус - ограничим первый слой справа шириной 200px через right и сдвинем его влево на ширину второй колонки 50% с помощью margin-right . Слой у нас абсолютно позиционированный, поэтому такие махинации никак на ширине не скажутся.
Третий вариант с двумя резиновыми колонками требует наличия дополнительного слоя, назовём его rubber , относительно которого будет задаваться ширина колонок (пример 5.20).
Пример 5.20. Макет № 5. Ширина двух колонок в процентах
Построение макета № 6 аналогично макету № 5, поэтому останавливаться на нём не будем. Что касается макета № 7, то для него существует вариант, который может вызвать трудность. Это касается того случая, когда требуется сделать ширину левой и правой колонки вычисляемыми и равными между собой. Для этого ширину первой и третьей колонки следует сделать равной 50% (рис. 5.20).
Рис. 5.20. Макет № 7 с равными по ширине колонками
Чтобы осталось место под вторую колонку, воспользуемся свойством margin-right для первой колонки и margin-left для третьей. Значением этих свойств будет половина ширины второй колонки. Так, если она равна 200px, то получится margin-right : 100px (пример 5.21).
Пример 5.21. Макет № 7. Ширина резиновых колонок одинакова
Header { background: #D5BAE4; } .layout { position: relative;} .layout DIV { position: absolute; } .col1 { background: #C7E3E4; left: 0; right: 50%; margin-right: 100px; } .col2 { background: #E0D2C7; width: 200px; left: 50%; margin-left: -100px; } .col3 { background: #ECD5DE; left: 50%; right: 0; margin-left: 100px; }
Напрямую свойством width пользоваться нельзя, поскольку добавление margin только увеличит ширину, а не уменьшит, как нам требуется. Поэтому ширина формируется одновременно заданными свойствами left и right . С позиционированием второй колонки возникают сложности в указании значения left или right , поскольку оно будет равно 50%-200px. Так что устанавливаем положение левого края на 50% (left : 50% ), а затем колонку целиком сдвигаем влево на половину её ширины через свойство margin-left (margin-left : -100px ).
Поскольку ширина некоторых колонок вычисляется автоматически, рекомендуется сделать ограничение по минимальной ширине макета, добавив свойство min-width для селектора BODY . Тогда ширина колонок не станет уменьшаться при достижении заданного предела.
BODY { min-width: 800px; /* Минимальная ширина макета */ }
Значение min-width зависит от макета и содержимого страницы и обычно подбирается опытным путём.
Использование плавающих элементов
Плавающие элементы это ещё один универсальный метод построения разнообразных трёхколоночных макетов. В отличие от позиционирования он позволяют не заботиться о проблеме подвала, поскольку подвал всегда будет располагаться на своём месте под самой высокой колонкой.
Построение колонок происходит с помощью свойства float в сочетании со свойствами margin и width . В зависимости от выбранного макета меняется и порядок колонок в коде, вначале всегда следуют слои, к которым добавляется float .
Макет № 1. Резиновая первая колонка
Ширина второй и третьей колонки указывается в пикселах, а их положение через свойство float со значением right . Для первой колонки также требуется задать свойство margin-right со значением равным суммарной ширине остальных колонок (пример 5.22).
Пример 5.22. Макет № 1
Макет № 2. Резиновая средняя колонка
Ширина первой и третьей колонки задана в пикселах, а их положение - через свойство float со значением left для первой колонки и right для третьей. Средняя колонка, чтобы она сохраняла свой вид, содержит универсальное свойство margin , задающее отступ слева и справа (пример 5.23).
Пример 5.23. Макет № 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Макет № 3. Резиновая третья колонка
Положение первой и второй колонки указывается через свойство float со значением left , для третьей колонки нужно установить отступ слева (margin-left ) на суммарную ширину остальных колонок (пример 5.24).
Пример 5.24. Макет № 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Макет № 4. Ширина всех колонок задана в процентах
Для построения этого макета подойдёт множество вариантов, основанных на предыдущих макетах, только вместо пикселов следует указать проценты. Ещё один способ показан в примере 5.25, где используется только свойство float и width .
Пример 5.25. Макет № 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Макет № 5. Ширина двух колонок резиновая
На рис. 5.19 было продемонстрировано, что макет № 5, у которого две резиновые колонки, можно трактовать по-разному.
- Ширина первой колонки указана в процентах от ширины макета, третьей колонки в пикселах, а средняя колонка занимает оставшееся место.
- Ширина второй колонки указана в процентах от ширины макета, третьей колонки в пикселах, а первая колонка занимает оставшееся место.
- Суммарная ширина двух резиновых колонок принимается за 100%, и ширина колонок указывается в процентах от этой величины.
Ширина средней колонки вычисляемая
Здесь ширина первой колонки указывается в процентах, а её положение через свойство float со значением left , для третьей колонки ширина задана в пикселах, а значение свойства float как right . Для средней колонки остаётся только установить отступы слева и справа на ширину колонок (пример 5.26).
Пример 5.26. Макет 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Ширина первой колонки вычисляемая
Это наиболее хитрый макет, поскольку для первой колонки её ширина напрямую не указывается. Но чтобы ограничить контент необходимо для свойства margin-right указать значение совмещающее проценты и пикселы. В CSS2, как уже говорилось, подобное задать нельзя, поэтому добавим внутрь слоя col1 ещё один слой с именем wrap и добавим отступ каждому из этих слоёв. Одному в процентах, другому в пикселах (пример 5.27).
Пример 5.27. Макет 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Ширина двух колонок в процентах
В этом макете общая ширина резиновых колонок принимается за 100%, поэтому нам потребуется дополнительный слой, относительно которого будет отсчитываться ширина внутренних колонок. Этот слой с именем rubber совместно со слоем col3 работает как двухколоночный макет, а внутренние слои col1 и col2 выстраиваются по горизонтали за счёт применения свойства float (пример 5.28).
Пример 5.28. Макет 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Макеты 6, 7 и их разновидности строятся по тому же принципу, что и макет № 5, за исключением макета № 7, в котором ширина левой и правой колонки резиновая и равна между собой.
Вначале готовим основу, указываем порядок слоёв в HTML-коде.
Col1 { width: 50%; float: left; } .col2 { width: 200px; float: left; } .col3 { width: 50%; float: right; }
Это ещё не всё, слои пока никаких колонок не формируют и выстраиваются совершенно не подходящим для нас способом. Требуется сместить вторую колонку влево на половину её ширины (margin-left : -100px ) и заставить третью колонку встать на своё место. Для этого надо увеличить её ширину так, чтобы она была равна или больше, чем 50%+100px (половина второй колонки). Лучше всего подойдёт свойство margin-left с отрицательным значением, после этого колонки будут созданы. Есть ещё некоторые нюансы. Крайние колонки состыкованы между собой, что хорошо заметно, когда их высота превышает высоту средней колонки (рис. 5.21).
Рис. 5.21. Состыкованные колонки
К тому же в левой колонке текст справа, а в правой колонке текст слева скрывается под фоном центральной колонки. Это будет не заметно, если высота этой колонки большая, но это не всегда возможно. Чтобы преодолеть указанные недостатки, необходимо вложить внутрь крайних колонок ещё по одному слою (в примере он называется wrap ) и уже для них задать цвет фона колонки, необходимые поля и отступы. Окончательный код приведён в примере 5.29.
Пример 5.29. Макет № 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Поля и границы в трёхколоночном макете
В приведённые примеры макетов намеренно не добавлялось свойство padding , поскольку код служит лишь основой макета, и вы сами должны в конкретных случаях решать, нужны поля в колонках или нет. Добавление полей и границ к блочному элементу увеличивает его ширину, что надо учитывать при вёрстке. Однако ширина вырастает, только если для слоя установлено значение width . Рассмотрим несколько примеров, где ширина будет меняться, а где нет.
Div { /* padding влияет на ширину */ width: 200px; padding: 10px; } div { /* padding не влияет на ширину */ position: absolute; left: 20px; right: 20px; padding: 10px; } div { /* padding влияет на ширину */ float: left; width: 50%; padding: 10px; } div { /* padding не влияет на ширину */ margin-right: 50%; padding: 10px; }
В тех колонках, где padding или border требуется, но их добавление приведёт к «ломке» макета, можно воспользоваться вложенным слоем и установить необходимые свойства для него.
В этом примере ширина слоя заданная как 200 пикселов меняться не будет, но поля и рамка будут добавлены.
Таблица в качестве колонок
Таблицу удобно использовать для простого и быстрого создания колонок одинаковой высоты. Такая быстрота достигается несколькими вещами. Во-первых, структура кода для любого макета остаётся одинаковой, колонки в коде, как в случае с float , свой порядок никогда не меняют. Во-вторых, ширина ячеек вычисляется автоматически исходя из их содержимого, поэтому достаточно указать ширину нужных колонок, а оставшиеся подстроятся под общую ширину таблицы. В примере 5.30 показан макет № 1 сделанный на таблице.
Пример 5.30. Макет № 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Колонка 1 | Колонка 2 | Колонка 3 |
Добавление свойства padding к селектору TD отменяет действие атрибута cellpadding тега
 |
Он встал под дерево и ждет, Раз-два, раз-два! Горит трава,
Взы-взы - стрижает меч, Льюис Кэрролл, перевод Дины Орловой, рисунки Джона Тенниела |
 |
Результат примера показан на рис. 5.22.
Рис. 5.22. Колонка по центру макета
Резиновой вёрсткой называется вёрстка, при которой сайт растягивается в зависимости от ширины окна браузера.
Я считаю, что резиновая вёрстка - это признак мастерства дизайнера и верстальщика. Разрабатывая и поддерживая качественно тянущийся сайт, дизайнеры, технологи и редакторы сайта сталкиваются с множеством проблем: необходимо сделать так, чтобы картинки и текст вели себя адекватно и оставались читабельными при любом разрешении; вместе с тем, в вёрстке не должно возникать дыр. Но если всё сделано правильно, результат будет отличный.
Главное преимущество резиновой вёрстки в том, что пользователь сам решает, в каком именно виде просматривать сайт. Технолог не знает, что удобно для каждого конкретного пользователя, следовательно не должен решать, какой ширины должен быть сайт.
Допустим, человек купил дорогой широкий монитор, зашёл на сайт, а тот как был 800 пикселей в ширину, так и остался. Не надо его учить, что растягивать браузер на все 1900 пикселей неправильно. Надо сделать резину и предоставить право выбора человеку.
Есть две причины, почему не хотят делать «резину»: эстетическая и технологическая .
Эстетическая заключается в том, что разработчики считают фиксированную вёрстку более стабильной и потому кажущейся пользователю «родной». Я уже писал , что «эмоциональное восприятие» сайта - это не то, на что должны ориентироваться разработчики. Таким восприятием руководствуются в основном неактивные пользователи, которые заходят в интернет, как правило, с одного и того же домашнего компьютера, следовательно, резиновости сайта вряд ли увидят. А активного пользователя интернета не испугает «прыгнувший» или растянувшийся блок.
Технологическая причина сводится к набору страхов.
Что делать с возникающими пустотами?
Существует много хорошо свёрстанных резиновых сайтов, на которых эта проблема решена. Интернет-издание «Время-н » растягивает картинки на больших разрешениях. На Гугл-картинках блоки с картинками, перескакивают со строки на строку при разной ширине браузера.
Как быть с широкими текстовыми блоками?
Можно использовать многоколоночную структуру. В этом случае блоки, растягиваясь, остаются читаемыми. Этот способ реализован на Ленте.ру . Но и на обычном трёхколоночном сайте можно добиться читаемости текста.Большинство резиновых сайтов, которые мы помним были сделаны в начале двухтысячных, когда возможностей было не так много, как сейчас. Сайты того времени были «прилеплены» к границам экрана и тянулись лишь за счет центрального столбца. При этом текст ужасно растягивался.
Верстки делятся по принципу отображения и по типу:
1) Деление по принципу отображения:
а) Фиксированная (статическая) верстка.
б) Резиновая (тянущаяся) верстка.
в) Адаптивная верстка - .
При заказе на выполнение респонсивной верстки сайта оговаривается, под экраны какой ширины нужно сделать адаптив. Например, разрешение смартфона 320х480 при этом экран смартфона работает в двух режимах - портретная ориентация и альбомная ориентация. Для одних сайтов можно сделать адаптив и для альбомной ориентации и для портретной ориентации. Для других сайтов практичнее сделать адаптив только для альбомной ориентации. Иногда нет практического смысла мельчить контент сайта для портретной ориентации, если сайт можно нормально посмотреть на смартфоне в режиме альбомной ориентации. Тем более большинство людей для просмотров сайтов используют не смартфон, а планшет, т.к. планшет имеет большие размеры и на нем удобнее смотреть сайты. Под что делать адаптив, практичнее определять исходя из дизайна и контента сайта.
Проблема масштабирования в мобильных браузерах
Иногда случается так - Вы сделали адаптивную верстку страниц сайта, но мобильные браузеры (Opera, Mozilla, Яндекс и др.) не обращают ни какого внимания на ваш адаптив, как будто и нет никакого адаптива. Мобильный браузер просто уменьшает масштаб всей веб-страницы, чтобы веб-страница целиком поместилась на экране устройства, в котором вы смотрите сайт.
Исправить возникшую ситуацию можно тем
, что в контейнере head, в исходном коде веб-страниц, нужно написать мета тег viewport. Например,
Разберем значение атрибута content
1) width=device-width этим мы показываем, что ширина области просмотра равняется ширине экрана устройства, на котором смотрят наш сайт.
2) initial-scale=1.0 этим мы показываем, что масштаб страницы при загрузке 100% При этом пользователь, просматривая сайт, может сам изменить масштаб.
Иногда на сайтах запрещают пользователю изменять масштаб просматриваемой страницы
, т.е. пользователь всегда видит веб-страницу такой, какая она есть, и не может ее сделать крупнее или меньше. Это делается тем, что в значении атрибута content указывают maximum-scale=1.0, minimum-scale=1.0, user-scalable=no Например.
Размер шрифта в мобильных браузерах
Не редко случается так, что шрифт в мобильных браузерах становится больше, чем задан при верстке. Это может приводить к искажению дизайна. Мобильные браузеры самовольно увеличивают размер текста, чтобы сделать его более удобным для чтения, как им кажется. Насколько сильно изменяется размер шрифта, зависит от типа шрифта, ширины элемента, браузера, устройства, разрешения экрана и др.
Есть некоторые решения через CSS, но они помогают не везде и не всегда. Например.
html * {
max-height: 1000000px;
text-size-adjust: none;
}
Чтобы уменьшить самоволие мобильных устройств относительно размера шрифта, каждый используемый шрифт можно подключить как файл. Для лучшей кроссбраузерности, шрифт подключается в нескольких форматах: ttf, woff, svg, eot (для IE8 и меньше). Это относится и к безопасным шрифтам. Файлы шрифтов подключаются правилом @font-face
При этом использование файлов шрифтов, может усилить разность шрифта при отображении на ПК в разных браузерах.
Самый тонкий ноутбук 15 дюймов
Свернуть одинаковые значения 1с 8
Переименовать колонку таблицы значений 1с 8