Источник: http://dsda.ru/
Проблема Web-дизайнеров и верстальщиков связанная с типом шаблона стоит уже несколько лет: фиксированный, резиновый, эластичный или гибридный шаблон? У каждого типа есть свои преимущества и
недостатки. Но конечное решение зависит от юзабилити. Неправильный выбор типа шаблона может убить все плюсы Вашего сервиса.
Так к чему же все эти обсуждения? Дело в том, что дизайн сводится к простоте использования и достаточно трудно сбалансировать его таким образом, чтобы всем пользователям было удобно в не зависимости от того, каким оборудованием они пользуются при посещении сайта.
На стадии проектирования шаблона сайта, который будет направленн на большую аудиторию, дизайнер должен учитывать всех посетителей, и принимать во внимание различия между ними:
- Разрешения экрана,
- Браузер,
- Максимизация окна браузера,
- Дополнительные панели браузера пользователя,
- А также ОС и платформу пользователя.
Без определенных стандартов при разработке, дизайнеры сталкиваются с проблемой в тот момент, когда все почти готово.
1. Различия между фиксированным и резиновыми/жидким типом шаблона
Большенство разработчиков и дизайнеров прекрасно знают эти различия и они для них элементарны. Но мы все-таки пробежимся по этим определениям.
Фиксированный шаблон
Фиксированный тип шаблона имеет фиксированную ширину, и все компоненты находящиеся внутри него имеют либо процентное соотношение ширины либо указанное в пикселах(px).
Важно помнить, что фиксированный шаблон остается неподвижным в своей ширине, вне зависимости от типа браузера и разрешения у пользователя.
На скриншоте мы видим пример фиксированной верстки по ширине.
Блоки с четко заданной шириной в 520, 200 и 200 пикселей. Ширина основного блока равна 960 пикселям, что является стандартом в современном дизайне, так как большенство пользователей используют разрешение 1024×768 и выше.
Резиновый шаблон
При использовании резинового шаблона, все блоки внутри включая основной использую процентное описание ширины, что позволяет растягивать ширину шаблона в соответствии с разрешением экрана пользователя.
На скриншоте видно, что ширина всех элементов указана в процентах. Этим пользуются некоторые дизайнеры, чтобы растягивать шаблон по ширине.
2. Фиксированный по ширине шаблон
Многие разработчики предпочитают фиксированные размеры резиновым, потому, как считают, что это проще. И то что видит дизайнер, видит и пользователь.
Есть много «за» и «против» резиновых шаблонов и шаблонов с фиксированной шириной
«За»
- Фиксированный шаблон легче сверстать и легче придерживаться идеи дизайна.
- При фиксированной ширине проще избежать сдвигов обьектов относительно друг-друга
- Нет необходимости использовать min-width или max-width которые к тому-же не все браузеры поддерживают.
- Даже если вебсайт будет спроектирован, чтобы быть совместимым с наименьшей разрешающей способностью экрана, 800×600, то содержание все еще будет достаточно хорошо отображаться в большей разрешающей способности, чтобы быть легко четаемым.
«Против»
- Верстка с фиксированной шириной может создать большое незаполненное пространство для пользователей с большими разрешениями экрана, таким образом нарушая «Золотое сечение», «Правило третей», и другие принципы дизайна.
- Маленькое разрешение экрана может повлиять на появление горизонтальной полосы прокрутки, что не особенно красиво.
- Безшовные текстуры, праттерны и длинные изображения требуют больших разрешающих способностей.
- У шаблоны с фиксированной шириной вообще проигрывают когда дело доходит до удобства и простоты использования.
Примеры шаблонов с фиксированной шириной
Ниже предложено пять примеров, от дизайнеров, которые предпочли шаблоны с фиксированной шириной.
Эти сайты включают много модулей и элементов дизайна. Это хороший подход при использовании фиксированной ширины. Дизайнер при этом имеет больше возможностей по управлению и размещению дополнительных блоков не боясь ошибиться.
Кстати, во всех этих примерах, дизайнер использует повторяющуюся, по ширине, фоновое изображение для красоты восприятия при больших разрешениях.
3. Обходя Доводы «против» фиксированной ширины Web-страницы
Если Вы используете в своих проектах фиксированную ширину шаблона, то должны знать, что есть способы создать качественный дизайн обойдя все «против».
Статистика
На сегодняшний день, большенство дизайнеров предпологают, что у подавляющего количества пользователей разрешение монитора 1024×768.
Согласно опубликованным результатам голосования на W3Schools, ситуация соовсем иная:
Как Вы можете видеть 640×480 вообще не фигурирует в статистике. Но остается фактом, что такое разрешение все-еще есть у некоторых пользователей, но их меньге одного процента, и это позволяет дизайнерам не учитывать таких посетителей.
Даже люди, которые действительно используют это разрешение, они вероятно используют его главным образом на портативных компьютерах и не использовали бы его на обычном компьютере.
Значит эти статистические данные неправильные как бы мы не надеялись на обратное. А все потому, что посетители W3Schools в большенстве своем относятся к разработчикам и дизайнерам, и статистика слишком узкая для построения правильных данных. По данным других источников на 2009 год, разрешение 800×600 используют чуть менее 10% пользователей.
Следующая таблица взята с SohTanaka.com. Этот блоггер провел небольшое исследование, которое показало как изменялись шаблоны наиболее посещаемых сайтов в период с февраля 2006 по февраль 2008 года.
Все четыре сайта изменили шаблоны для наиболее распространенного разрешения. Даже самые большие компании в сети, считают, что у их посетителей высокие разрешающие способности мониторов.
Для другого исследования, относительно разрешающей способности экрана, взгляните на источники ниже:
960px или 760px?
Все о чем тут сказано, это то, что большенство дизайнеров используют ширину в 960 или 760 пикселей. Ширина в 960 пикселей хорошо смотрится у пользователей с разрешением
1024×768 или выше, и есть пространство по бокам. Дезайнеры которые хотят позаботится о пользователях с разрешением 800×600, задают ширину шаблона в 790 пикселей. Она также хорошо смотрится и на больших разрешениях.
Всегда центрируйте шаблон
Работая с фиксированными по ширине шаблонами будте уверены, что центр основного блока находится как можно ближе к центру окна браузера. Это создает хороший баланс и часто достигается за счет применения (margin: 0 auto;. Иначе пользователи с большим разрешением экрана увидят прилепленный слева основной блок.
4. Резиновый дизайн страниц
Дизайнеры могут отказаться от использования резинового шаблона по нескольким причинам, и плюсы такого подхода часто не принимаются во внимание. Далее мы рассмотрим плюсы и минусы резинового шаблона.
«За»
- Резиновый шаблон более привлекателен для пользователя потому как подстраивается под его разрешение.
- Отступы о краев окна браузера и прочие отступы всегда выглядят одинаково во всех браузерах и при всех разрешениях.
- Если шаблон хорошо сверстан и спроектирован то это позволяет избавится от горизонтальной полосы прокртки на низких разрешениях.
«Против»
- Дизайнер может не заметить некоторые сложные моменты, которые появляются на экранах с меньшей разрешающей способностью нежели у него самого.
- Изображения, видео и другие объекты с фиксированной шириной должны быть доступны в различных вариациях, для удовлетворения пользовательских потребностей на любых разрешениях.
- У посетителей с очень большими разрешающими способностями экрана, нехватка контента, может создать лишнее незаполненное пространство, которое плохо влияет на эстетический вид дизайна.
Примеры резинового дизайна
Ниже мы можем видеть два примера в различных разрешениях экрана. В первом примере разрешение больше, соответственно мы видим больше незаполненного пространства. А во втором разрешение меньше.
5. Разработка резинового шаблона
При разработке резинового шаблона, могут возникнуть несколько проблем, некоторые из них могут быть решены при помощи так называемых tricks.
Создавайте простой дизайн
Чем меньше в шаблоне графики и сложной верстки, тем легче с ним будет работать. Это также поможет при большенстве разрешений.
С чистым кодом и дизайном, проблемы совместимости более легко решаемы.
Smashing Magazine, например, использует резиновый шаблон, где растягивается и сужается меню в заголовке страницы, и блок контента. А правильное использование CSS исключает ситуации, когда блок контента наезжает на боковую колонку.
Min-width и Max-width
Два параметра CSS (min-width/max-width), могут быть использованны для фиксирования ширины страницы при очень большом разрешении и маленьком.
В случае с маленьким разрешением, появляется горизонтальная полоса прокрутки, как-будто мы используем шаблон с фиксированной шириной. Ниже представленны два примера, демонстрирующие эти параметры
:
Жаль, но Internet-explorer не понимает min-width и max-width. Поэтому для IE приходится использовать свойство CSS «expression».
* html#division {
width: expression(document.body.clientWidth > 776 ? "776px" : "auto"); /* задает max-width дл IE */
max-width: 33em; /* это для всех остальных нормальных браузеров */
}
6. Эластичный дизайн
Эластичный дизайн это третья часть нашего обзора. Такой тип дизайна включает как фиксированные по ширине элементы, так и резиновые.
Это работает при установлении размеров в единицах em. Цитата ниже объясняет что такое em и почему это полезно.
«Пиксель – это немасштабируемая точка на экране компьютера, когда «em» это квадрат определяющий размер шрифта. Поскольку размеры шрифта изменяются, «em» является относительной единицей, которая отвечает персональным настройкам размера текста пользователя.”
- Patrick Griffiths, A List Apart
В то время как эластичный дизайн кажется оптимальным вариантом, он все-же имеет свои «за» и «против», так-же как и два предыдущих типа шаблонов.
«За»
- Если шаблон спроектирован правильно, этот тип шаблона может быть очень дружественным по отношению к пользователю. Цель состоит в том, чтобы масштабировать все элементы в соответствии с предпочтением пользователя.
- Эластичные шаблоны сочитаю в себе плюсы двух рассмотренных выше типов.
«Против»
- Даже учитывая вышесказанное, этот тип шаблона все еще может создать большие проблемы для разработчика. Требуется отличное понимание принципов верстки и тестирование на различных браузерах и разрешениях.
- Этот тип шаблона сложнее для создания нежели вышеописанные, и дополнительная юзабильность для вашего сайта может быть бессмысленна.
- В зависимости от используемых возможностей CSS и HTML некоторые шаблоны такого типа могут потребывать дополнительных CSS стилей и триков для IE6
Примеры эластичного дизайна
Эластичные и резиновые типы шаблонов внешне похожи настолько, что их можно спутать. Так эластичные шаблоны используют em вместо процентов и зависят прежде всего от размера шрифта. Так при увеличении размера шрифта пользователем, увеличиваются и все элементы дизайна.
7. Как выбрать правильный подход?
Выбор того или иного типа шаблона должен зависеть от конкретного сайта. Стоит взвесить все за и против.
Для портфолие, лучше выбрать фиксированный по ширине шаблон, таким образом Вы будите иметь больше возможностей контролировать цельность дизайна.
Кроме того, появится возможность управлять шириной предложенного контента. Многие дизайнеры выбирают фиксированный шаблон потому, что это проще и удобней.
Однако те, кто хотят добиться 100% совместимости потратят больше времени разрабатывая резиновый шаблон. В этом случае главное не пустое место по краям шаблона и тот процент пользователей, у которых разрешающая спасобность монитора мала. Для сайтов с большой аудиторией, даже маленький процент пользователей важен. Кроме того, у таких проектов должен быть чистый дизайн для лучшего его приспособления к резиновому шаблону.
Все еще не можете выбрать? Эластичный шаблон может стать выходом. Если правильно исползовать эластичный шаблон, то он может решить проблему выбора. Дизайнеры могут использовать принципы эластичного дизайна с применением em для шрифта и блоков, а также совмещать определение ширины в пикселях и процентах. (прим. Eugene Che: на мой взгляд это лучший вариант)
Что говорят дизайнеры
Комментарии Heidi Cool на Fixed vs. Liquid vs. Elastic Layout
Этот дизайнер делает отличные заметки о работе с теми, кто хочет работать с шаблонами и недостаточно знает о дизайне в целом:
«Возвращаясь к этой проблеме. Мы в case.edu используем фиксированную ширину потомучто:
- Резиновый шаблон сложен, и мы предлагаем шаблоны людям различной подготовленности, и они с легкостьб могут сломать резиновые шаблоны.
(Обычные файлы HTML, а не шаблоны Dreamweaver.)- Мы хотим быть уверенны, что люди не будут использовать длинные строки, что приведет к плохой читабельности и разрыву шаблона.
- Мы стараемся ограничивать пользователей, потому как люди имеют тенденцию использовать все свободное пространство.
Если у них большие мониторы то все будет в порядке, но если матенькие, – это приведет к плохим последствиям.Как Вы можете видеть, наши сайты имеют широкое распространение среди людей с различными уровнями знаний. Если бы я работал над одним сайтом в качестве проектировщика, то я бы делал так, как того требует контент сайта.”
Комментарий от madr к Where Have All the Flexible Designs Gone?
Несколько плюсов относительно фиксированных шаблонов:
“Баннеры и обьявления обычно делают с использованием Flash, изображений или видео, это плохо влияет на эластичные/резиновые шаблоны. Я работал в газетной индустрии в течении полутора лет и понял, что реклама – это «священная корова». И Резиновый или эластичный шаблон «поехал» бы при использовании такого вида рекламы.
Многие браузеры, такие как Safari 3 и выше (Safari 4 на подходе), Firefox 2 выше и IE6 выше (which are to be viewed as obsolete)
могут масштабировать размер страницы в соответствии с размерами шрифта, что делает верстку резинового или эластичного шаблона достаточно сложной, да и большество пользователей не обратят на это внимание.”
Комментарии от jphilapy к Where Have All the Flexible Designs Gone?
Два замечания в поддержку резинового шаблона:
“Резиновые шаблоны могут корректно отображаться на различных разрешениях. Нет смысла в дебатах по этому поводу. Кроме того, статистика, относительно разрешающей способности мониторов, – это миф; некоторые разворачивают браузер на весь экран, некоторые используют тулбары, сайдбары и прочие виджеты. это делает окно браузера не стандартным.
Мобильные телефоны такие как iPhone и игровые консоли могут так-же использоваться как браузеры. И в основном они имеют меньшее разрешение для нормального отображения сайтов с фиксированной шириной шаблоена.”
Комментарии от Calrion к About Fluid- and Fixed-Width Layouts
Очевидные случаи в которых стоит использовать эластичные шаблоны:
“Я думаю, что ‘эластичне’ шаблоны, – это лучший вариант. Для эластичных шаблонов необходимо указывать максимальную ширину, чтобы быть уверенным, в том, что строки не станут слишком длинными.
Я пользователь Windows, и я разворачиваю окно браузера на всю поверхность экрана.
Главным образом, максимизация окна браузера дает мне большее пространство для просмотра содержимого, потому как обычно у меня открыто еще несколько приложений, которые могут мешать. А еще я максимизирую, чтобы более удобно было использовать элементы интерфейса браузера (у меня FireFox) и удобнее расположить тулбар и табы.
Что по поводу юзабилити, резиновый дизайн лучше подходит для людей, которые хотят контролировать ширину контента, шириной открытого браузера. Для менее опытных пользователей, вероятно эластичный вариант подойдет лучше, , посколько шаблон контролирует максимальную ширину.”
Комментарии от Georg к About Fluid- and Fixed-Width Layouts
Обьяснение того, как дизайнер может совместить все три варианта, чтобы достичь лучшего:
“Основная часть резиновая, фиксированный сайдбар и (может быть) некоторые части эластичны, вот предпочитаемый мной метод.
Я всегда испоользую 600 пикселей как ограничитель текстовых блоков (max-width/или хак для IE).Использование min/max для всех, тогда контент остается в пределах 600 – 1200px и все центрирую. Не обходится и без хаков для IE/win.
Все тестируется по ширине от 600 до 2400 пикселей (имеется в виду экранное разрешение). Текст максимум 600px, и страница растягивается по ширине контента.
Посетители видят именно то, что хотят, что делает чтение проще. Думаю, что это является компромисом.
Если верстка сайта хорошая, то даже люди с плохим зрением смогут увеличить масштал текста и не будут испытывать проблем с отображением дизайна, потому как шаблон увеличится по ширине, за счет того, что он не фиксирован по ширине. И никаких проблем.”
Об авторе
Кайла Найт (Kayla Knight) студент колледжа, web developer, freelancer, и блоггер. В свободное время поддерживает Webitect.net, блог для веб-мастеров с уроками, статьями, заметками, примерами и другими полезностями.
(al)
P.S.От себя хочу высказать мнение о том, что действительно лучшим вариантом было-бы совмещение эластичности основной области и фиксированная ширина только там, где это действительно необходимо. И будем надеется, что все-таки браузеры научася соответствовать стандартам, потому-как хаки это зло.
Кстати еще один плюс в сторону резиновости шаблонов. Знаете почему американцы так любят фиксированную ширину? Потому-что не умеют нормально делать резиновые шаблоны. До некоторого времени (об этом говорил и Сергей Чикуенок на семинаре по верстке в октябре 2007) так оно и было, как у «них» дела обстоят сейчас можно посмотреть в домменной зоне com =).