Проблемы поражали умы веб-дизайнеров в течение многих лет: фиксированный, жидкости, упругих или гибридных дизайн-макет?Каждый вариант имеет свои преимущества и недостатки.Но окончательное решение во многом зависит от удобства, что он не один, чтобы быть сделано легко.Так, со всеми путаницы, есть правильное решение ? Рассматривая несколько факторов и правильной настройке окончательный проект, вы можете в конечном итоге с удачным дизайном макета, который пожинает все benefits.
Эта статья обсуждает плюсы и минусы каждого типа макета.Либо можно использовать, чтобы сделать успешную макета сайта, пока вы держите удобство в mind.
Также учитывать наши предыдущие статьи:
- гибкие макеты: вызов для Future, в котором обсуждаются проблемы гибкие макеты для future.
- Применение божественной пропорции к веб-Designs, которая объясняет процесс применения божественной пропорции к фиксированной раскладки, но и заключает с применением Правило Третей, чтобы жидкость layouts.
Почему все дискуссии?Дизайн веб-страницы сводится к практичности, и это может быть трудно сбалансировать, потому что пользователи сайта могут объяснить многие различные переменные, среди them.
При разработке веб-сайта макета для большой аудитории, дизайнер должен учитывать следующие потенциальные различия между посетителями:
- Разрешение экрана,
- Браузер выбор,
- Будь или не браузер развернуто,
- Дополнительные панели инструментов открыта в браузере (история, закладки и т.д.),
- Даже операционной системы и hardware.
Без пользу стандартного размера сайта для работы, веб-дизайнеры сталкиваются с многочисленными проблемами, когда it’ времени с добраться до work.
1.Разница между фиксированной и жидкости Layouts
Хотя большинство дизайнеров и разработчиков было бы рассмотреть вопрос об определении фиксированных и жидкости макеты веб-сайта, чтобы быть элементарно, we’ пойдем на это только, чтобы быть clear.
Фиксированные Сайт Layouts
Фиксированного формата сайт имеет оболочку, которая является фиксированной ширины, а компоненты внутри него имеют либо ширину в процентах или фиксированной ширины.Важно то, что контейнер (оболочку) элемент установлен не двигаться.Неважно, что разрешение экрана посетителя, он или она увидит такую же ширину, как другие visitors.
Изображение выше показывает общий план с фиксированной шириной макета сайта.Внутренние компоненты крепятся к 520, 200 и 200 пикселей,соответственно.960-пикселей шириной стала стандартом в современных веб-дизайн, потому что большинство пользователей сайта предполагается просматривать в 1024× 768 или higher.
Жидкость Сайт Layouts
В жидкости макета сайта, также называемые жидкие макет, большинство компонентов внутри имеют ширину в процентах, и, таким образом приспособиться к user’ с экрана resolution.
Изображение выше показывает жидкости (жидкость) веб-сайта макета.Хотя некоторые дизайнеры могут дать установить ширину определенных элементов в жидкости макеты, такие как поля, макет в общем использует ширину в процентах, так что вид настраивается для каждой user.
2.Исправлена страницу веб-Design
Многие дизайнеры предпочитают фиксированные макеты для них, потому что жидкость they’ Re проще сделать и предоставить больше гарантий, что то, что дизайнер видит пользователь sees. Тем не менее, плюсы и минусы выйти даже с жидкостью макета дизайна.
Pros
- Фиксированной ширины макеты гораздо проще в использовании и проще настраивать с точки зрения design.
- Ширина едины для любого браузера, так что там меньше хлопот с образами, формами, видео и другой контент, которые являются фиксированными width.
- Существует нет необходимости мин-макс ширина или ширина, которая isn’ T поддерживает все браузеры anyway.
- Даже если сайт разработан, чтобы быть совместимым с минимальным разрешением экрана, 800× 600, содержание все равно будет достаточно широким в большее разрешение, чтобы быть легко legible.
Cons
- Фиксированной ширины макета может создать чрезмерную пробел для пользователей с большими разрешениями экрана, тем самым нарушая “ божественные пропорции, ” “ Правило Третей, ” общий баланс и другие конструкции principles.
- Меньшего разрешения экрана может потребоваться горизонтальная полоса прокрутки, в зависимости от фиксированной layout’ S width.
- Бесшовных текстур, моделей и изображений продолжения необходимо для размещения тех, кто больше resolutions.
- Фиксированной ширины макеты как правило, имеют более низкий общий балл когда дело доходит до usability.
Примеры фиксированной Page Design
Вот пять примеров из дизайнеров, которые получают большую часть из фиксированной ширины макеты.Эти веб-сайты включают в себя многие элементы дизайна, идеальный сценарий, в котором используется фиксированная layout.Дизайнеры иметь больше контроля над размещением дополнительных элементов дизайна по всему содержанию областей и может работать с контентом и навигации шириной более precisely.
Обратите внимание, как во всех этих примерах, дизайнеры используют непрерывные образы, чтобы работать с большим экраном resolutions.
3.Двигаясь недостатки основных страницу веб-Design
Если you’ твердо решили на фиксированный дизайн страницы, вы должны знать эти несколько приемов, чтобы обойти недостатки этой схемы и создать успешный design.
Глядя на Statistics
Сегодня, большинство дизайнеров предположить, что большинство интернет-пользователей имеют разрешение экрана 1024× 768 или выше.По словам опроса, опубликованного W3Schools, это не тот случай (пожалуйста, обратите внимание, что следует принять W3Schools статистики с зерном соли, более подробную информацию об этом приведены ниже):
Как вы можете видеть, 640× 480 doesn’ T даже зарегистрироваться на графике.W3Schools’ анализ показал колоссальные 0% пользователей имеют эту разрешение экрана.Хотя, на самом деле, некоторые пользователи действительно есть это разрешение экрана, статистика показывает, что они составляют небольшой процент достаточно, что дизайнеры должны быть в состоянии игнорировать размера и по-прежнему предлагают широкий usability.
Даже для людей, которые действительно используют эту резолюцию размера, они, вероятно, использовать его в основном на небольших портативных компьютерах и wouldn’ т использовать его в качестве основного разрешение экрана normally.
Однако эти данные, вероятно, не как accurate как можно было бы надеяться.Потому что W3Schools’ посетители в основном принадлежат к определенной демографической (дизайнеров и разработчиков), информация немного предвзято.Другие источники исследования показывают разные результаты, но только немного отличается.В соответствии с резолюцией статистику отдельных компаний в 2009 году, 800× 600 разрешение экрана появился в где-то под 10% users.
Следующий интересный таблицы происходит от SohTanaka.com, которого блоггер сделал несколько исследований, сравнивая, как некоторые из крупнейших сайтов размещены разрешение экрана в феврале 2006 года по сравнению с февралем 2008.
Для всех четырех крупных веб-сайтов в исследовании, был полный поворот.Даже крупнейшие компании в Интернете в настоящее время предполагается, что их аудитории естьбольшой экран resolutions.
Для других исследований на разрешение экрана, посмотрите через источники ниже:
960px или 760px
Все это, как говорится, большинство дизайнеров выбирают фиксированную ширину или 960 или 760 pixels.Макета 960 пикселей выглядит хорошо для пользователей с 1024× 768 или выше, с небольшим количеством места для полей.Для дизайнеров, которые хотят разместиться около 10% пользователей с 800× 600 разрешение экрана, 760-пикселей широкий макет работает хорошо, и по-прежнему подходит для больших screens.
Всегда Центр Layout
При работе с фиксированной шириной дизайн, убедитесь, что по крайней мере центре оболочку дел для поддержания чувства равновесия (margin: 0 auto; обычно делает трюк).В противном случае, для пользователей с большими разрешениями экрана, весь макет будет спрятан в corner.
4.Жидкость страницу веб-Design
Разработчики не могут использовать жидкости дизайна страницы по разным причинам, но layout’ S выгоды часто забывают.Ниже приведены плюсы и минусы, чтобы думать о При рассмотрении жидкости веб-страницы design.
Pros
- Жидкость дизайн веб-страницы может быть более удобным, потому что она настраивает на user’ с набором up.
- Количество дополнительных пробелов похожа между всеми браузерами и разрешением экрана, который может быть визуально более appealing.
- Если разработана хорошо, жидкость макета можно устранить горизонтальные полосы прокрутки в меньшем экране resolutions.
Cons
- Дизайнер имеет меньше контроля над тем, что пользователь видит и может игнорировать проблемы, потому что расположение прекрасно смотрится на их конкретные экран resolution.
- Изображения, видео и других видов контента с набором ширины, возможно, придется быть установлен на несколько ширины для размещения различных экран resolutions.
- С невероятно большое разрешение экрана, отсутствие содержания может создать избыток белого пространства, которое может уменьшить эстетические appeal.
Примеры жидкостей Page Design
Ниже приведены две конструкции, которые используют процентах ширины для размещения различных разрешениях экрана.В первом примере в каждом наборе изменяет ширину содержание в соответствии с шириной экрана, а второй скриншот использует различной ширины для белых space.
5.Получение жидкости дизайн веб-страницы Для Work
Даже если жидкость макетов может представить несколько проблем, некоторые из этих проблем можно решить с помощью нескольких tricks.
Использование простых Design
Чем меньше жидкости веб-дизайна зависит от графика и трудно techniques, тем легче будет создать и поддерживать.Он также будет более совместим с альтернативным разрешением экрана.С чистого кода и дизайна, проблемы совместимости, которые легче предотвратить, найдено и дело with.
Smashing Magazine, например, использует жид …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров