Типы макетов сайтов
Цель этой статьи - предоставить информацию обо всех типах макетов верстки. Заметка ориентирована на неосведомленных заказчиков, которым легче предоставить ссылку на этот пост нежели по несколько раз переписывать одного и тоже.
Макет — русскоязычный аналог английского термина layout, который характеризирует разметку документа, его структуру. Все существует три типа макетов: макет с фиксированной шириной (rigid fixed), резиновый макет (adaptable fluid) и эластичный макет(expandable elastic). Каждый из этих видов обладает своими плюсами и минусами.
Макет с фиксированной ширины (rigid fixed)
Примером такого макета является дизайн этого блога. Его основная часть имеет фиксированную ширину, фоновый рисунок распространяется на всю ширину окна браузера.
Плюсы такого макета:
- Макет будет одинаково целостно смотреться вне зависимости от разрешения экрана, при меньшем или большем от самого популярного разрешения сайт всегда будет находиться в центре окна, и все элементы будут стабильно сочетаться между собой. Ввиду того, что сейчас набирают популярность широкоформатные мониторы с большой разрешающей способностью такие макеты становятся особо популярны.
- Основная часть сайта жестко зафиксирована по ширине, что избавляет от необходимости задавать минимальную или максимальную ширину окна браузера.
Недостатки
- На больших мониторах может быть много свободного места, а сайт субъективно казаться сильно узким.
- В блок с содержимым сайта можно вставлять картинки (таблицы) предельных размеров, у резиновых сайтов диапазон размеров картинок (таблиц) более широк.
Резиновый макет (adaptable fluid)
Резиновый макет — это макет, у которого нет фиксированной ширины, или ширина макета равна 100% от ширины окна браузера. Резиновые макеты также бывают двух типов. Первый это когда элементы позиционируются относительно сторон браузера, то есть при увеличении размеров окна структурные элементы разъезжаются в стороны. Второй, когда величины и позиции заданы в процентах, то есть при увеличении размеров окна, элементы расходятся пропорционально.
Плюсы такого макета
- Гибкий макет. Можно подстроить макет под разные разрешения монитора, таким образом сделать макет более универсальным.
- Резиновый макет сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания страницы будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки страницы).
Недостатки
- Главный недостаток резинового макета порождается из его плюса, при очень больших размерах экрана макет может смотреться не целостно и некрасиво
- Необходимо задавать максимальную ширину макета. Также необходимо задавать минимальную ширину, дабы избежать наложения друг на друга структурных элементов при маленьких размерах экрана.
Эластичный макет (expandable elastic)
При эластичном макете размеры главных структурных элементов задаются в em. Это позволяет пропорционально увеличивать размеры структурных элементов при масштабировании размера текста встроенной функцией браузера (зажать кнопку Ctrl и крутить колесико мышки).
Плюсы такого макета
- Если все сделать правильно получается довольно гибкий макет, который можно легко подстраивать под нужный размер текста
Недостатки
- Не любой дизайн можно хорошо реализовать в виде эластичного макета
Взято с
