• Free consultations 24/7
  • Иконка телефона +1 (310) 933-4443
    Поддержка: Онлайн

    Ждем вашего звонка :)

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

    Поддержка: Офлайн

    Будем онлайн через: 2h 34 min

    Наше рабочее время:

    Mon — Fri, 8am — 2am (EST)

Использование фиксированных, резиновых и эластичных макетов

fluid-webdesignУ каждого веб дизайнера время от времени возникает вопрос, какой делать сайт: фиксированный, резиновый или эластичный. В этой статье мы попробуем рассмотреть плюсы и минусы каждого из этих макетов.

Фиксированный макет – его делают с фиксированной шириной и независимо от того какое расширение экрана будет у пользователей выглядит он будет всегда одинаково.
fixed
Резиновый макет – в этом случае элементы, которые делают внутри макета, имеют ширину, которая задается в процентах, в результате чего макет приспосабливается к каждому пользователю отдельно.
liquid
Эластичный макет – в этом случае размеры важных элементов задаются в em. Это позволяет при увеличении размера текстов и разделов заданные в em, увеличатся пропорционально.
elastic-web-design-11
Преимущества фиксированных макетов
•Макеты с фиксированной шириной легче делать
•С помощью фиксированной ширины почти не возникает проблем при отображении картинок, видео, форм во всех браузерах. Как правило, контент всегда широкий и читабельный.
•Фиксированные макеты легче и быстрее верстаются
Недостатки фиксированных макетов
•У пользователей с большим экраном будет много лишнего белого пространства
•При меньших расширениях появляется горизонтальная прокрутка

Преимущества резиновых макетов
•Резиновый макет подстраивается под пользователя
•Они могут исключать появление горизонтальной прокрутки при меньших расширениях
•На больших экранах значительно меньше белого пространства, что делает сайт более привлекательным
•Такой макет позволяет отображать максимум информации, используя разрешение экрана по максимуму без дополнительной прокрутки.
Недостатки резиновых макетов
•Веб дизайнер не полностью может контролировать то, что видит он и то, что будут видеть пользователи
•Веб дизайнеру нужно рисовать несколько макетов, чтобы посмотреть, как при каком расширении будет выгладить макет
•На очень больших расширениях контент может создавать лишнее пространство, что будет выглядеть не очень привлекательно.
•При слишком маленьком расширении экрана блоки контента могут перескакивать друг на друга

Преимущества эластичного макета
•Такой макет может все увеличить или уменьшить в зависимости от потребностей пользователей.
•Эластический макет объединяет в себе преимущества и фиксированного макета и резинового макета.
Недостатки эластичного макета
•Даже не смотря на все преимущества данного макета, могут возникать проблемы с юзабилити. Чтобы этого избежать, нужно потратить много времени на разработку и тестирование.
•Иногда нужно использовать дополнительные стили и «хаки» для IE6.
01
Выбирая, какой макет делать, нужно отталкиваться от специфики и назначения. Нужно обязательно взвесить все преимущества и недостатки, перед тем как начать делать. Вы должны учитывать особенности вашего контента, особенности дизайна. Также не забывайте, что на разные макеты идет разное количество времени на верстку и тестирование.

Posted on 27.03.2013

Category: Дизайн web-сайта

Article tags

Вы дизайнер?

Join Us

всего в сообществе

~150.1k дизайнеров


Related Articles

Обратная связь

Дизайн web-сайта

Проектируя почти каждый сайт невозможно обойтись без обратной связи. Было исследовано, что от качества...

Ах, эта свадьба пела…

Дизайн web-сайта

Сложно себе представить событие более радостное, чем свадьба! Здесь и для дизайнеров раздолье: платья,...