Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Фиксированная, резиновая и адаптивная верстка сайта

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

Фиксированная, резиновая и адаптивная верстка сайта
Содержание статьи

Что такое верстка сайта (html верстка)

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

Для того, чтобы сверстать нарисованный макет, который, кстати говоря, чаще всего предоставляется в формате PSD и рисуется в Фотошопе, нужно знать специально для этого предназначенный язык разметки HTML — HyperText Markup Language, который состоит из специальных, так называемых, тегов, описывающих расположение элементов на странице. Хороший верстальщик, оценив взглядом макет, который еще представляет собой обычную статичную картинку, сразу мысленно разбивает эту картинку на составные части и уже заранее знает, какими тегами они будут описаны в документе и какой тип верстки больше всего подойдет применительно к конкретному случаю. С этого и начинается "оживление" макета. Прежде всего, нужно пораскинуть мозгами, а потом уже открывать "блокнот" и браться за дело.

Более того, помимо языка разметки HTML существует и дополнение — CSS, которое необходимо для описания стилей элементов и придания им законченного вида, в то время как HTML лишь грубо описывает расположение этих самых элементов на странице. Конечно можно и в HTML запихнуть некоторые стили и расширенные атрибуты тегов и добиться тем самым определенных результатов, но тогда верстка не будет отвечать стандартам W3C (которые не являются панацеей, а лишь рекомендациями, кстати говоря), код страницы будет нечитаемым, поисковые системы так же не будут от этого в восторге (им придется разбирать много мусора в коде), да и вообще это моветон и сейчас мало кто так делает. CSS — Cascading Style Sheets (каскадные таблицы стилей) нельзя считать отдельным языком программирования, но с натягом можно назвать условным языком, описывающем стили элементов на странице. Несомненно, в нем, как и везде, есть свои тонкости и секреты, которые нужно знать для того, чтобы быть хорошим верстальщиком сайтов.

Основные типы верстки сайтов

Все разделения верстки про признакам тегов, которые используются в теле документа мы считаем слишком условными и не думаем, что табличная верстка на самом деле существует, равным счетом так же как и блочная. Хотя многие ошибочно так полагают и трубят об этом вовсю, копируя статьи друг у друга, не вдумываясь и понимая о чем говорят. Дело в том, что в верстке могут использоваться как таблицы, так и слои (блоки), поэтому нет смысла проводить четкую грань между этими элементами. Что это за такой сайт, в котором для верстки использовались только одни таблицы? Неужели кто-то думает, что такое бывает и в сайте с таблицами не использовалось ни одного блочного элемента? Начнем с того, что тег

как раз-таки и является блочным элементом, который используется для выделения абзацев текста. А если на сайте нет текста и нет абзацев, то это не сайт, а черт знает что. То же самое можно сказать и про блочную верстку. А как насчет того, чтобы вставить таблицу с ценами или прочей информацией? Более того, довольно частой проблемой в верстке является невозможность выровнять элемент по вертикальной оси, если он находится внутри блочного элемента и имеет непостоянную высоту. В таких случаях используется ячейка таблицы, в которой, в отличие от слоя, работает CSS свойство vertical-align: middle;.

Вывод: табличной и блочной верстки не существует!

А что же касается типов верстки, которые действительно существуют, но все равно являются довольно условными, то можно выделить 3 основных типа:

Фиксированная верстка

Фиксированная версткаВ фиксированной верстке сайта его ширина не изменяется ни при каких обстоятельствах (разве что в случае ошибок с неделимыми строками текста и слишком широкими картинками), т. е. ширина макета заранее известна и жестко устанавливается в стилях. Такой тип верстки довольно удобен и хорош разве что только для самих верстальщиков, т. к. является самым простым и на нее тратится меньше всего времени и усилий. Поведение всех элементов на странице можно предсказать заранее — не надо высчитывать никакие проценты, можно совершенно не обращать внимания на разрешение экрана пользователя. В любом случае выдается один и тот же шаблон, ширина которого фиксирована. Отсюда и название — фиксированная верстка.

Резиновая верстка

Резиновая версткаРезиновая верстка отличается от фиксированной тем, что ширина сайта заранее не известна и варьируется, в зависимости от ширины экрана пользователя. Стоит отметить, что резиновая верстка не всегда означает заполнение экрана на все 100%, некоторые полагают это ошибочно. На самом деле, бывает так, что указана какая-то минимальная ширина сайта и максимальная и, в зависимости от разрешения экрана, сайт растягивается или сжимается, но до определенного размера, а затем останавливается. Такой эффект с легкостью достигается свойствами min-width и max-width, которые применяются к главному контейнеру, содержащему в себе все элементы сайта.

Резиновая верстка — вторая по сложности исполнения, т. к. ширина сайта заранее не известна и будет меняться, то и конкретно задать ширину всех элементов не получится. В таком случае приходят на помощь проценты. Довольно часто можно видеть плавающие элементы, количество которых на строке может меняться в большую или меньшую сторону, опять же, в зависимости от размера экрана пользователя. Например, на маленьком экране 3 товара в строке, а на очень большом — 6, а между ними идут промежуточные значения для средних экранов — 4 и 5. Плавающие элементы обычно реализуются при помощи свойства float или присвоения блочному элементу свойства display: inline-block;, что делает его наполовину блочным и наполовину встроенным, благодаря чему перенос на новую строку не осуществляется.

Адаптивная верстка

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

Главная наша мысль по поводу адаптивной верстки такова, что если пользователь открывает сайт через малюсенький экранчик старенького, едва живого телефона, то это его проблемы, а не верстальщика. Раз он смотрит на мир через эту маленькую дырочку, значит не стоит отказывать ему в этом удовольствии и не пытаться подстроиться под него, увеличивая стоимость разработки сайта в 2 раза. Таких частных случаев с каждым днем становится все меньше и меньше, поэтому ошибочно полагать, что адаптивная верстка активно развивается. Убежденных в этом мы смеем разочаровать — она изживает себя и пропадет так же внезапно, как когда-то появилась, благодаря чрезвычайно заботливым верстальщикам.





Предыдущая статья:
Фавиконка

Читайте также:
Табличная и блочная верстка сайта — реальность или миф?

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»