ЧУДО "САИКТ"

Обучение верстке сайтов – резиновая, фиксированная и адаптивная

Как происходит работа над созданием структуры и оформлением интернет-страниц? Дизайнер тщательно рисует сайт в Photoshop и высылает файл в формате .psd специалисту, который с помощью языков HTML и CSS переводит эти «художества» в вид, понятный браузеру. Заметим, что нередко эти действия выполняет один и тот же человек.

 

Это называется верстка сайтов. Обучение этому ремеслу только на первый взгляд кажется простым – на практике же возникает много нюансов, без понимания которых начинающий web-разработчик так и останется дилетантом. Сегодня мы поговорим о типах макетов, изучение которых является одним из основных пунктов программы на нашем курсе верстки.

 

Макет сайта
Макет сайта

 

 

Итак, макеты делятся на три типа:

  • Фиксированный (жесткий)
  • Резиновый
  • Адаптивный

 

Строго говоря, в современном сайтостроении существует еще понятие «отзывчивый дизайн», однако оно не имеет однозначных трактовок, поэтому мы оставим его за скобками. К тому же наши статьи ориентированы скорее на новичков, на тех, кто только делает первые шаги в эту увлекательную профессию, и при обучении верстке нужно начинать с азов, а не браться сразу за создание «отзывчивых» сайтов.

 

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

 

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

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

 

Теперь откройте тот же сайт на нетбуке с небольшим экраном – основной блок имеет такую же ширину, как и при просмотре с большого монитора, и по краям контейнера уже не так много свободного пространства.

 

Сайт, верстка которого выглядит одинаково на любых мониторах, имеет фиксированный (жесткий) дизайн. При этом основной единицей измерения является пиксель (px) – основной блок может иметь ширину, например, в 800, 900 или 1000 пикселей. Такой размер будет корректно отображаться на большинстве мониторов (конечно, мы не берем во внимание смартфоны и другие мобильные гаджеты – там сайт с жесткой версткой «поплывет»).

 

Мы считаем, что обучение верстке с нуля должно начинаться именно со знакомства с фиксированными макетами, так как они являются «пионерами» в сайтостроении.

 

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

 

Макет сайта ВКонтакте
Сайт ВКонтакте имеет фиксированный макет

 

Преимущества и недостатки жесткой верстки

 

plus Сайт будет смотреться одинаково во всех браузерах и на всех мониторах (если их разрешение больше заданной ширины макета).

 

plus Фиксированный дизайн несложно реализовать на практике – наши курсы верстки являются тому подтверждением: все слушатели справляются с этой задачей в короткие сроки.

 

minus Отсутствие универсальности – представьте, как будет смотреться сайт шириной в 800px на мониторе с разрешением в 300px. Да, не очень эстетично…

 

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

 

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

Назовите главное свойство резины. Правильно – она растягивается! Резиновая верстка ведет себя точно так же: она подстраивается под размер того экрана, на котором пользователь просматривает сайт.

 

В отличие от фиксированного макета, резиновый верстается не в пикселях, а в процентах. Это вполне логично – при открытии страницы сайт растягивается, например, на 80% (или на другую величину, заданную web-мастером) от ширины экрана.

 

Стоп! Но ведь резина не только растягивается, но и сжимается. Все верно – для этого в CSS предусмотрена команда min-width (минимальная ширина), которая не позволяет сжать web-страницу ниже допустимого значения. Кстати, команда max-width в CSS тоже есть. Догадайтесь, для чего она используется ;-).

 

Макет сайта СТОЛОТО
Сайт лотереи СТОЛОТО имеет резиновый макет

Преимущества и недостатки резиновой верстки

 

plusРезиновая верстка универсальна, и это ее главное достоинство. Иными словами, пользователь всегда увидит один и тот же сайт, на каком бы мониторе он его ни просматривал (опять же не берем во внимание мобильные гаджеты).

 

minus Макет, основные блоки которого заданы в процентах, сложнее верстать.

 

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

 

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

 

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

Давайте проведем небольшой эксперимент: откройте наш сайт saikt-online.ru на своем смартфоне. Он полностью поменял свой внешний вид – в нем нет горизонтальной навигации, блоки с контентом выстраиваются не в линию, а друг под другом, текст уменьшился в размерах.

 

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

 

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

 

Главным рабочим инструментом здесь являются медиа-запросы (media queries) в CSS. Они отслеживают разрешение экрана, на котором пользователь открыл сайт, и показывают ему нужную «версию» web-страницы.

 

Преимущества и недостатки адаптивной верстки

 

plus Сайт абсолютно универсален – он будет отлично отражаться на всех мониторах и экранах.

 

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

 

Подводим итоги

 

Какие же сайты должен уметь верстать web-дизайнер – жесткие, резиновые или адаптивные? Не хочется быть Капитаном Очевидность, но ответ будет прост: настоящий web-дизайнер должен уметь верстать любые макеты. При этом обучение верстке должно проходить последовательно, и в первую очередь нужно познакомиться с макетами фиксированной ширины.

 

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

 

Хотите практики? Приходите на наши курсы верстки. Научим.

Яндекс.Метрика