CSS макеты: фиксированные, резиновые, эластичные. Плюсы и минусы

Примечание: ниже выложен перевод статьи «CSS Layouts: The Fixed. The Fluid. The Elastic.», в качестве российского аналога термина layout употребляется макет. В статье рассматриваются два вида «резинового» макета, потому какой-то из них для различия обозначен как «эластичный» (elastic, спасибо MTonly за ценный комментарий). Создатель резюмирует главные плюсы и минусы каждого из рассматриваемых макетов (методов верстки).

Какой макет верстки (с внедрением Каскадных Таблиц Стилей, CSS) можно считать лучшим? Любой из их имеет свои хаки (quirks) и свои уникальные плюсы и минусы. Будет ли какой-то из них более комфортен для юзера, чем все другие? Как просто им будет воспользоваться? Какие есть у каждого из их препядствия, и как их обходить? Верстается ли какой-то из них проще всех других? Есть ли посреди их какой-нибудь ущербный, совсем неприменимый? Вероятнее всего, многие совершенно точно ответят на эти вопросы, но я не буду так спешить. Любой из этих макетов мне нравится, и каждый применим в том либо ином случае, если делать это с мозгом и пристально инспектировать простоту использования и схожую доступность для всех категорий юзеров. Они все являются частью уровня представления (presentational layer) для вебсайта, потому большая часть вопросов по доступности вытекают из корректного использования семантики и общих правил верстки. Дальше я обрисую собственный взор на агрессивно фиксированный (rigid fixed), адаптивный резиновый (adaptable fluid) и расширяемый эластичный (expandable elastic) макеты.

Макеты с фиксированной шириной

Макет веб-сайта с фиксированной шириной отличается основной областью для содержания (wrapper), ширина которой выставлена в постоянное значение, не зависящее от разрешения экрана пользовательского агента. Более всераспространенной и разумной считается ширина в 760 пикселей — размер, при котором юзеры мониторов с разрешением 800?600 увидят основное содержание веб-сайта фактически во всю ширину экрана, не прибегая к дополнительной горизонтальной прокрутке.

Авторский блог является примером таковой верстки, хотя его можно просто привести к резиновому либо эластичному макету без конфигурации текущих картинок.

Плюсы такового макета

Контейнер для основного содержания веб-сайта агрессивно зафиксирован, для него не надо выставлять наивысшую либо наименьшую ширину (у которой нет, по сути, кросс-броузерной поддержки на текущий момент);
В неких случаях использовать макеты с фиксированной шириной проще для сотворения определенных эффектов либо дизайнерских решений (к примеру, для позиционирования выпадающего меню либо всплывающих подсказок к полям формы). Некие макеты дизайна уместно верстаются только с внедрением фиксированной ширины основного контейнера;
Макет, основанный на заявленной выше ширине основного поля — 760 пикселях — что является обычной шириной для такового рода макетов, является, в моем представлении, хорошим для наибольшей читаемости текста (отчасти соглашусь с создателем статьи, в таком случае еще около 200 пикселей можно отвести на боковое меню, и веб-сайт будет помещаться в 1024?768 по ширине, но, тогда, быстрее, будет иметься в виду ширина основного поля в 1000 пикселей).

Его минусы

Заявленная «оптимальная для наибольшей читаемости текста» ширина не может правильно делать свою роль, если текст на веб-сайте был существенно увеличен при постоянном отношении высоты строчки текста к его размеру (в этом случае выходит, что текст «разреживается», и его очень тяжело принимать). Но, стоит увидеть, что при наличии неплохого дизайна эта неувязка появляется только при очень сильном увеличении текста;
У юзеров с маленькими мониторами (640?480 пикселей, также стоит не забывать про мобильные устройства) возникнет горизонтальная полоса прокрутки на веб-сайте шириной в 760 пикселей. Хотя и это очень нечастая неувязка;
Веб-сайт, шириной в 760 пикселей может смотреться достаточно неприглядно (очень узко) на мониторах с огромным разрешением экрана;
Маленькая ширина основного контейнера может ограничивать разумное количество столбцов при верстке, но это может быть также и плюсом, так как принуждает создавать веб-сайт, беря во внимание такие жесткие рамки (т.е. особо много излишеств и дизайнерских приемов нельзя будет применить, так как таковы наложенные ограничения).

Советы по макету с фиксированной шириной

Располагайте основное содержание страничек веб-сайта слева, чтоб юзерам с мониторами 640?480 не приходилось прокручивать веб-сайт по горизонтали для обычного чтения;
Обеспечьте веб-сайт маленькими таблицами стилей для поддержки портативных маленьких (портативных) устройств. Будет замечательно, если вы создадите также таблицы стилей для поддержки проекторов и телевизоров.

Пример блока фиксированной ширины

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

Этот блок имеет фиксированную ширину 500 пикселей. У него нельзя поменять размер, при увеличении текста, он будет поновой разбиваться на строчки снутри этого блока.

Резиновые макеты

Резиновый макет выходит, если у основного контейнера не задавать ширину вообщем (по дефлоту будет 100%) либо задать ширину в процентах. Другими словами, не беря во внимание границы и отступы, веб-сайт, имеющий ширину 100% будет занимать всю видимую часть экрана, не создавая горизонтальной полосы прокрутки.

Примером такового макета можут служить GrayBit.com. Он миниатюризируется по ширине до 755 пикселей до того, как возникает горизонтальная полоса прокрутки, да и при всем этом она не требуется для просмотра основного содержимого страничек. Практически, веб-сайт замечательно смотрится прямо до ширины в 560 пикселей, далее элементы дизайна уже начинают перекрываться, пропадать либо сваливаться вниз. Большая часть резиновых макетов имеют такие ограничения и, как я лицезрел, неправильно ведут себя на мобильных устройствах, пока не отключены стили вообщем либо не использована особая таблица стилей для мобильных устройств.

Плюсы резинового макета

При грамотной верстке резиновый макет позволяет достигнуть большой универсальности в отображении, независимо от ширины окна пользовательского клиента. На практике это встречается достаточно изредка, но, на теоретическом уровне, если все делать верно, то такое может быть;
Резиновый макет совпадает с макетом, используемым броузером по дефлоту, то позволяет считать его «идеологически правильным». Но можно ли считать желание разработчика сделать «идеологически правильный» веб-сайт плюсом относительно удобства его использования? Я думаю, что можно;
Резиновый макет веб-сайта позволяет использовать доступное разрешение экрана по максимуму. Большая часть содержания странички будет «над линией сгиба» (т.е. видимой без дополнительной прокрутки странички). Но…

Разглядим минусы такового макета

Очень много доступного для чтения текста странички и его острое желание заполнить всю доступное место может служить в ущерб удобству юзеров. Очень много текста может «давить» на юзера и делать веб-сайт перегруженным либо беспорядочным. Существует выражение: «Пустое место продает» (“White space sells”, не знаю российского эквивалента этого выражения, имеется в виду, что пустое место необходимо для роста акцента на содержании), и оно справедливо даже применительно к вебсайтам;
Если для ограничения ширины макета использовать CSS свойство max-width (которое не поддерживается Internet Explorer (IE) 6 версии и ранее, короче говоря, вообщем (плохо) поддерживается) и быть просто гуру верстки можно в итоге рвения к «правильной идеологии» получить, в наилучшем случае, веб-сайт, которым будет тяжело воспользоваться. Представьте для себя, что необходимо прочесть строчку длиной более 1000 пикселей, и вы понимаете делему.

Некие советы по использованию этого макета

Используйте резиновый макет строго по предназначению. Не позволяйте своим рвениям сделать все «идеологически правильно» возобладать над здравым смыслом. Должны быть какая-то довольно весомая причина, чтоб использовать эту разновидность макета. Если вы все таки решили использовать конкретно ее, удостоверьтесь, что резиновый макет вашего веб-сайта нормально смотрится на большинстве экранных разрешений. По другому оставьте это, игра не стоит свеч;
Если при использовании резинового макета у вас есть области с фиксированной шириной, означает, по сути, вы получили гибрид резинового и фиксированного макета, и его малая ширина будет определена шириной фиксированных блоков либо наибольшего из объектов (картинок, к примеру). Будьте аккуратны. Если вы желаете сделать веб-сайт конкретно с резиновым макетом, оно так и должно быть по сути, а не только лишь словестно;
Если вы все таки сделали гибрид резинового и фиксированного макета (как, к примеру, изображено в моем CSS руководстве, удостоверьтесь, что он нормально смотрится на разрешении 800?600.

И, фактически, пример

Это резиновый блок шириной в 74% от ширины наружного (фиксированного) контейнера. У него нельзя поменять размер, потому что размер его наружного контейнера агрессивно закреплен. При увеличении текста, он будет поновой разбиваться на строчки снутри этого блока.

Эластичный макет

При использовании эластичного макета размер основного контейнера и других (принципиальных) частей задается в em. Em прямо пропорциональны размеру текста либо шрифта. Как следует, при увеличении размера текста на страничке, размеры разделов, данные в em, увеличатся пропорционально.

Пример эластичного макета можно поглядеть в моем представлении CSS Zen Garden (ограниченный гибрид эластичного и резинового макета). Как я знаю, это единственное представление CSS Zen Garden, которое является эластичным и доступно так, как это вообщем может быть при нередактируемой (вначале данной) разметке странички. Я очень горжусь этим фактом (вправду, очень неплохой пример, но у меня в Opera 9.22 при ширине меньше 150 пикселей блоки «наезжают» друг на друга, этот эффект описан выше в минусах резинового макета).

Плюсы эластичного макета

Если все изготовлено верно, то это очень размеренная верстка, поэтому все изменяет размер пропорционально. В итоге при любом изменении размеров все как и раньше отлично;
Эластичный макет достаточно непростая вещь, это несусветно круто и всякий раз это вызов себе сначала. 1-ое мое знакомство с ним было на веб-сайте Tommy Olsson (который, по видимому, является неплохим примером того, как надо делать эластичные веб-сайты). Он поразил меня, принудил улыбнуться и глубоко задуматься о том, как я не достаточно знаю (impressed the hell out of me). Наилучшим примером может быть повышение текста на веб-сайтах с эластичным макетом: довольно зажать ctrl и покрутить колесо мыши… Я уже слышу, как вы гласите «Вау»

Минусы эластичного макета

Невзирая на его привлекательность и элегантность, я не знаю вправду неплохого его внедрения, это принуждает задуматься, для чего же он вообщем нужен?
Если не ограничить размеры наружного контейнера, то этот макет может быть реальным бедствием для юзера: он будет растягиваться обширнее, и обширнее, и обширнее — безо всяких видимых преимуществ.

Малость советов по эластичному макету

Если вы собираетесь верстать, используя эластичный макет, удостоверьтесь, то он работает на малеханьких мониторах. По другому, для чего он вообщем нужен?
Ограничьте размеры эластичного блока, определив размеры наружного контейнера (используя резиновую либо фиксированную ширину, т.е. создав гибридный макет). К примеру, #wrapper { width:60em; max-width:98%; }. Последователи «правильной идеологии» могут сделать возражение, что это уже не будет поистине эластичным макетом, что он при всем этом ограничен либо гибридизирован, но в ответ я спрошу: а какая разница? Да, «правильная идеология» замечательна и великолепна, но только не тогда, когда речь входит о пользовательском удобстве (золотые слова!);
Помните, что IE 6 и меньше не поддерживают свойство max-width, удостоверьтесь, что при задании очень огромного текст в IE не возникает горизонтальной полосы прокрутки на разрешении 1024?768. В любом случае, сможете поглядеть мое решение для CSS Zen Garden. Последующим шагом может стать верстка уже для разрешения 800?600 с этим же условием. Как пример, можно поглядеть мою эластичную верстку веб-сайта хостинга (ограниченный гибрид резинового и эластичного макета). Я планирую переверстать его в течение года, да и на данный момент пример полностью рабочий.

Пример эластичной верстки

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

В заключении

Как вы сможете созидать, у каждой из обрисованных разновидностей макетов есть свои плюсы и минусы (может быть, вы понимаете и другие?). И я не могу с уверенностью сказать, какой из их лучше. Это просто уровень представления веб-сайта, как я увидел в самом начале, потому с большой ответственностью и не наименьшей уверенностью я могу заявить, что хоть какой из этих макетов может быть применим для верстки доступных, комфортных для юзеров, веб-сайтов. Таким макаром, я предлагаю не вставать не тропу сторонников «идеологической правоты», делая что-то только поэтому, что она «правильно», во вред доступности либо удобству. Я не пробую их критиковать, ибо они принуждают нас размышлять над каждым шагом и являются источником вдохновения, но если вы следуете по их пути, делайте это с опаской. Пусть у вас будет цель и будет план. «Просто поэтому что» не является достаточной предпосылкой — так я говорю своим детям.

Источник: www.habrahabr.ru

Похожие материалы раздела: Комментарии закрыты, но вы можете Трекбэк с вашего сайта.

Комментарии закрыты.