Пропорции web-страниц
На заре своей карьеры, мастер Горди не избежал увлечения в создании резиновой разметки web-страниц. Постоянно посещая различные форумы, зачитывался мини войнами местного значения - что лучше фиксированная разметка страницы или резиновая, отзвуки которых нет да нет, но продолжают всплывать на ресурсах посвященных html и css.
Иногда попадались довольно приличные примеры, за изучением которых проводил немало времени и очень часто говорил себе - блин так не умею и никогда не научусь.
В процессе накопления знаний и опыта, когда пациент укладывался на хирургический стол патологоанатома - редактор и препарировался самым жесточайшим образом, пришел к неожиданным для себя выводам.
Собратья по цеху вольно или не вольно обманывают и себя и своих потенциальных заказчиков говоря и ставя себе в заслугу то, что они верстают только резиновые макеты и это круть неимоверная.
А давайте посмотрим так или это на самом деле.
Что подразумевается под резиновой версткой и что имеют в виду ее апологеты?
В подавляющем большинстве случаев в их понимании это ширина макета ограниченая по min/max-width и только для области контента, а колонки навигации практически всегда, за редким исключением, остаются фиксированной ширины.
Возьмем стандартный трех колоночный макет, излишние подробности, связанные с header и footer, сто процентной высотой web-страницы, отпустим за не надобностью, избегая усложнения рассматриваемого примера.
Пусть это будет только центральная часть такого вида:
На представленном скриншоте все колонки имеют индивидуальную фоновую заливку и каждая из них заключена в цветную окантовку. Иллюзия равной высоты колонок не помешает. Это сделано автором специально, макет будет по html и css чуть сложнее, но в дальнейшем это пригодится.
Разметка с фиксированной шириной всех колонок не представляет собой, ни каких трудностей.
То же самое можно сказать и о плавающей ширине области контента. Но...
Если посмотреть пример по последней ссылке на разных диагоналях и разрешениях экрана монитора, то ни о каких пропорциях не может быть и речи. И это одна из проблем, о которой сторонники резиновой верстки по вполне понятным причинам, скромно умалчивают.
А с учетом того, что в области контента практически всегда находятся элементы web-страниц с фиксированной шириной - формы для комментирования, отправки сообщений автору ресурса, графика и т.д. и т.п. которым в большинстве случаев невозможно сделать плавающую ширину, проблема приобретает, я бы сказал, глобальный характер, чему прекрасной иллюстрацией служит следующий пример.
Что он из себя представляет?
Скажем анонс некого поста состоящего и пары-тройки параграфов с текстом и картинкой в качестве небольшой иллюстрации к тексту. Графика имеет фиксированные размеры.
Не смотря на то, что пример носит утрированный характер при разрешениях экрана монитора 1024*768 и 1200*800 выглядит вполне достойно, а вот на максимальных разрешениях и широкоформатных мониторах, зрелище будет не из приятных.
Понятно, что никто и никогда на разметку подобного рода в здравом уме и твердой памяти не решится и ограничение на max-width будет однозначно в стилях указано, но тогда к чему говорить о резиновой разметке.
К чему все этот разговор? Мастер Горди любит задавать себе странные на первый взгляд вопросы, а поиск золотой середины в визуальном представлении web-страницы, где максимально соблюдены пропорции всех ее элементов, один из них.
Продолжение в секции меню "Пропорции web-страниц" в правой колонке навигации.