iTEYE

Фиксированный, резиновый или эластичный шаблон: Что лучше для Вас?

21 июня 2009

Источник: smashingmagazine.com
Проблема Web-дизайнеров и верстальщиков связанная с типом шаблона стоит уже несколько лет: фиксированный, резиновый, эластичный или гибридный шаблон? У каждого типа есть свои преимущества и
недостатки. Но конечное решение зависит от юзабилити. Неправильный выбор типа шаблона может убить все плюсы Вашего сервиса.

Так к чему же все эти обсуждения? Дело в том, что сводится к простоте использования и достаточно трудно сбалансировать его таким образом, чтобы всем пользователям было удобно в не зависимости от того, каким оборудованием они пользуются при посещении сайта.

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

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

1. Различия между фиксированным и резиновыми/жидким типом шаблона

Большенство разработчиков и дизайнеров прекрасно знают эти различия и они для них элементарны. Но мы все-таки пробежимся по этим определениям.

Фиксированный шаблон

Фиксированный тип шаблона имеет фиксированную ширину, и все компоненты находящиеся внутри него имеют либо процентное соотношение ширины либо указанное в пикселах(px).
Важно помнить, что фиксированный шаблон остается неподвижным в своей ширине, вне зависимости от типа браузера и разрешения у пользователя.

Fixed Website Layout

На скриншоте мы видим пример фиксированной верстки по ширине.
Блоки с четко заданной шириной в 520, 200 и 200 пикселей. Ширина основного блока равна 960 пикселям, что является стандартом в современном дизайне, так как большенство пользователей используют разрешение 1024×768 и выше.

Резиновый шаблон

При использовании резинового шаблона, все блоки внутри включая основной использую процентное описание ширины, что позволяет растягивать ширину шаблона в соответствии с разрешением экрана пользователя.

Fluid Website Layout

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

2. Фиксированный по ширине шаблон

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

«За»

«Против»

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

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

Lebloe.Com

Corvus Art Design Studio

Nathan-Sanders.Com

Nine Lion Design

Colour Pixel

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

3. Обходя Доводы «против» фиксированной ширины Web-страницы

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

Статистика

На сегодняшний день, большенство дизайнеров предпологают, что у подавляющего количества пользователей разрешение монитора 1024×768.
Согласно опубликованным результатам голосования на W3Schools, ситуация соовсем иная:

Screen Resolution Pie Chart

Как Вы можете видеть 640?480 вообще не фигурирует в статистике. Но остается фактом, что такое разрешение все-еще есть у некоторых пользователей, но их меньге одного процента, и это позволяет дизайнерам не учитывать таких посетителей.

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

Значит эти статистические данные неправильные как бы мы не надеялись на обратное. А все потому, что посетители W3Schools в большенстве своем относятся к разработчикам и дизайнерам, и статистика слишком узкая для построения правильных данных. По данным других источников на 2009 год, разрешение 800?600 используют чуть менее 10% пользователей.

Следующая таблица взята с SohTanaka.com. Этот блоггер провел небольшое исследование, которое показало как изменялись наиболее посещаемых сайтов в период с февраля 2006 по февраль 2008 года.

Screen Resolution Accommodations of some top websites.

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

Для другого исследования, относительно разрешающей способности экрана, взгляните на источники ниже:

960px или 760px?

Все о чем тут сказано, это то, что большенство дизайнеров используют ширину в 960 или 760 пикселей. Ширина в 960 пикселей хорошо смотрится у пользователей с разрешением
1024?768 или выше, и есть пространство по бокам. Дезайнеры которые хотят позаботится о пользователях с разрешением 800×600, задают ширину шаблона в 790 пикселей. Она также хорошо смотрится и на больших разрешениях.

Всегда центрируйте шаблон

Работая с фиксированными по ширине шаблонами будте уверены, что центр основного блока находится как можно ближе к центру окна браузера. Это создает хороший баланс и часто достигается за счет применения (margin: 0 auto;. Иначе пользователи с большим разрешением экрана увидят прилепленный слева основной блок.

4. Резиновый страниц

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

«За»

«Против»

Примеры резинового дизайна

Ниже мы можем видеть два примера в различных разрешениях экрана. В первом примере разрешение больше, соответственно мы видим больше незаполненного пространства. А во втором разрешение меньше.

Simple Bits

Simple Bits

Blossom Graphic and Web Design Boutique

Blossom Graphic and Web Design Boutique

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

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

«За»

«Против»

Примеры эластичного дизайна

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

Clear Left

Clear Left

Mirella Furlan

Mirella Furlan

7. Как выбрать правильный подход?

Выбор того или иного типа шаблона должен зависеть от конкретного сайта. Стоит взвесить все за и против.

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

Однако те, кто хотят добиться 100% совместимости потратят больше времени разрабатывая резиновый шаблон. В этом случае главное не пустое место по краям шаблона и тот процент пользователей, у которых разрешающая спасобность монитора мала. Для сайтов с большой аудиторией, даже маленький процент пользователей важен. Кроме того, у таких проектов должен быть чистый для лучшего его приспособления к резиновому шаблону.

Все еще не можете выбрать? Эластичный шаблон может стать выходом. Если правильно исползовать эластичный шаблон, то он может решить проблему выбора. Дизайнеры могут использовать принципы эластичного дизайна с применением em для шрифта и блоков, а также совмещать определение ширины в пикселях и процентах. (прим. Eugene Che: на мой взгляд это лучший вариант)

Что говорят дизайнеры

Комментарии Heidi Cool на Fixed vs. Liquid vs. Elastic Layout

Этот дизайнер делает отличные заметки о работе с теми, кто хочет работать с шаблонами и недостаточно знает о дизайне в целом:

«Возвращаясь к этой проблеме. Мы в case.edu используем фиксированную ширину потомучто:

  1. Резиновый шаблон сложен, и мы предлагаем людям различной подготовленности, и они с легкостьб могут сломать резиновые .
    (Обычные файлы HTML, а не Dreamweaver.)
  2. Мы хотим быть уверенны, что люди не будут использовать длинные строки, что приведет к плохой читабельности и разрыву шаблона.
  3. Мы стараемся ограничивать пользователей, потому как люди имеют тенденцию использовать все свободное пространство.
    Если у них большие мониторы то все будет в порядке, но если матенькие, — это приведет к плохим последствиям.

Как Вы можете видеть, наши сайты имеют широкое распространение среди людей с различными уровнями знаний. Если бы я работал над одним сайтом в качестве проектировщика, то я бы делал так, как того требует контент сайта.”

Комментарий от 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 =).

technology, ,

Leave a Reply

Скидки до 5% на заказ хостинга!