Стоит ли создавать текучие сайты? [закрыто]


218

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

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

Так стоит ли создавать гибкий сайт?


1
if (a == 1) {+ a} else {'nawp'}
Sphvn

Ответы:


52

Это зависит от вашей аудитории и вашего контента.

Ниже приведены сайты, которые я уважаю, и я думаю, что это пример для подражания.

Примеры жидкости:

Амазонка

Википедия


Статические примеры:

яблоко

eBay

MSN

Переполнение стека

MSDN


Некоторые смешивают это!

CNN

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


17
Как CNN смешивает это?
Аликс Аксель

43

Создание сайта плавным, но добавление атрибута min / max-width кажется мне лучшим из обоих миров. Вы поддерживаете текучесть, но ограничиваете ее определенной шириной (скажем, 800px и 1200px).

Это зависит от вас - вот некоторые вещи для рассмотрения:

  1. Текст трудно читать, когда строки очень длинные.
  2. Ваша аудитория может иметь большее или меньшее разрешение, чем обычно, и выбор «неправильной» статической ширины будет раздражать их.
  3. Поддержание жидкого сайта может быть, но не должно быть намного более сложным, чем его статический аналог.

Любые комментарии о совместимости браузера для этого?
HaveGuess


Спасибо, я проверяю реактивную сетку
Гетскелтона

37

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

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

Это не особенно трудно в настоящее время либо (в современных браузерах), особенно min-и max-heightв CSS, а также новые градиенты и т.д. в CSS3, поэтому масштабирование изображения не будет столь большой проблемой в в ближайшее время.

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


24
«В наше время это тоже не особо сложно», прошу отличаться. IE6 все еще очень реален. Написание плавного макета, который будет работать в этом маленьком f @@@ er, является сложной задачей. Попробуйте поискать "css Holy Grail". Хмм.
спонсор

4
Я думаю, что, как и всем веб-разработчикам, я люблю игнорировать IE6 большую часть времени. Не избавляется от этого, но делает меня счастливее :). (Я знаю, что обошел комментарий, но сейчас не могу придумать ни одного ответа.)
Лукас Джонс,

91
ОСТАНОВИТЬ ПОДДЕРЖКУ IE6
Джейсон

21
Да, в утопии мы все прекратили бы поддерживать IE6, но обычно деньги говорят об обратном.
спонсор

13
Согласно w3schools.com/browsers/browsers_stats.asp , 13% Интернета используют IE6, 15% используют IE7. Это хорошая причина для поддержки IE6. Простая идеологическая неприязнь не достаточна, чтобы сбросить IE6. Прости, Джейсон.
Пол Натан

16

Вы должны понимать, что большинство пользователей компьютеров даже не ЗНАЮ, КАК увеличить масштаб в браузере! Большинство пользователей настолько далеки от понимания компьютеров, которые у нас есть. Мы всегда должны помнить этот факт.


2
Хорошо, тогда что это значит? С какой стороны вы спорите?
Mark

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

Разве вы не должны изменять размер браузера, чтобы сказать, что веб-сайт изменчив? Как кто-нибудь может не знать, как изменить размер окна?
mk12

1
да, я имел в виду увеличение :) Я сам впервые увеличил масштаб моего браузера 1 минуту назад.
Алекс Бараноски

ну тогда вы тот, кто не знает, как использовать компьютеры
Bevacqua

9

Текстовые приложения: нет . Табличные приложения: да .

Плюсы жидких макетов

  1. Люди с большими мониторами могут использовать их экранную недвижимость.
  2. Проще для пользователей с большими мониторами, когда у вас много информации на вашей странице.

Минусы макетов жидкости:

  1. Текстовый столбец с изменяемой шириной трудно читать, если он слишком широкий. Есть веская причина для использования столбцов в газетах: это делает переход к следующей строке намного, намного проще.
  2. (В некоторой степени) сложно реализовать из-за ограничений в CSS.

Если вы показываете табличные данные (iTunes, db manager, ...), ширина потока хорошая. Если вы показываете текст (статьи, вики-страницы, ...), ширина жидкости плохая.


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

8

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

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

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


6

Самое главное, чтобы рассмотреть основные варианты использования вашего веб-сайта или приложения. Ожидаете ли вы, что люди будут использовать его исключительно на мобильных устройствах? Мобильные телефоны, нетбуки, настольные компьютеры?

Взгляните на «Адаптивный веб-дизайн» Итана Маркотта: http://www.alistapart.com/articles/responsive-web-design/

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


5

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


1
Это всегда будет соответствовать моему браузеру, вместо того, чтобы заставить меня изменить размер. Как это будет PITA? Есть случаи, когда сложные графические макеты трудно реализовать с помощью жидкой компоновки, но это, безусловно, не относится к спартанскому дизайну SO.
bobince

2
это будет PITA, потому что все ответы будут распространяться по всей странице. Я рад, что текст окутывает около 500 пикселей. вот почему книги, как правило, имеют соотношение ширины, потому что глаза людей устают после того, как определенная точка движется вбок ...
Jason

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

3
Я бы предпочел, чтобы ТАК был жидким, сам.
Носредна

4

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

Просто будьте в курсе плюсов и минусов каждого решения.


3

До определенного момента - да.

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

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

Лично мне также нравится держать браузер на моем мониторе, но только на половине ширины монитора (24 дюйма). Сайты, которые хорошо масштабируются, очень хороши.

Я думаю, что это в основном удобство для пользователя. Не все сайты получат выгоду от того, что они текучие, но я думаю, что сайты, которые имеют много текстового контента, больше всего выиграют от этого, по крайней мере, если они текучие до максимальной ширины (скажем, 800px или что-то еще)


Согласовано. Я стараюсь создавать все свои сайты в диапазоне от 800 до 1200 пикселей. При просмотре на странице 1600 пикселей на странице часто не хватает контента для распространения, и он только начинает выглядеть пустым.
womp

2

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

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

Идея о том, что «длинные строки трудно читать», часто преувеличивается дизайнерами, пытающимися оправдать дизайн с фиксированной шириной (*), но в действительности это выглядит не так сильно, как на бумаге. Конечно, важно установить правильную начальную / высоту строки, и максимальная ширина может использоваться для предотвращения худших превышений длинных линий. (Установите его в единицах шрифта, относящихся к em.) Вы не получаете максимальную ширину в IE6, но это не та катастрофа, какой была когда-то. (Вы можете исправить это с помощью немного JavaScript, если вы действительно заботитесь о тех парнях. Я не.)

(* которые действительно менее эффективны для высокографических макетов. Но для более простого макета, такого как StackOverflow, на самом деле нет никаких причин, чтобы не стать ликвидными. Tsk @ SO, эх!)


2

Предисловие: не профессиональный веб-художник.

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

Обычно я создаю сайт с фиксированной шириной каким-то образом; обычно ограничен в [600,1200].

Я также считаю, что очень широкие колонки контента доставляют много хлопот. Кажется, я помню, что есть некоторые исследования, которые предлагают оптимальное количество слов в строке столбца.


2

Вы можете сделать это так.

# Сделайте основной макет жидкости и примените к нему ' max-width: 1140px ' и отцентрируйте его.

При этом не будет «длинных строк» ​​текста на больших экранах и правильного размещения веб-страниц на меньших экранах (исключая 800x *** и ниже).

Я реализовал этот метод в моих новых проектах, и он работает как шарм.

atb .. :)


1

Я думаю, что решение текучее / фиксированное должно основываться также на содержании сайта:

  1. Для сайтов с большим количеством простой информации (например, новостных порталов) лучше использовать плавную верстку.

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


1

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

Ваши сомнения по поводу воздействия Ctrl + Scrollbar не имеют большого значения. Эта функция предназначена в первую очередь для обеспечения доступности, чтобы сделать текст более читабельным за счет увеличения размера.

Однако, если вы упомянете все ваши размеры в пикселях (px), этого не произойдет. Правильная настройка происходит только тогда, когда вы используете «em» для указания размера. Таким образом, у вас есть способ включить / выключить его


0

Я большой поклонник с фиксированным значением <800px ... легче читать узкие столбцы, и это будет работать где угодно. То есть, если вы пытаетесь создать веб-сайт, который представляет гипертекст ... Веб-сайты, которые представляют внешние интерфейсы приложений, я думаю, это еще одна банка червей полностью ...


0

Жидкий дизайн - действительно жидкий - это сложно. Очень сложно. Это не просто вопрос ширины страницы - масштабируются ли ваши шрифты и все ли масштабируется вместе с ними? В идеале:

  • Размеры должны быть определены, emа неpx
  • ... и это касается размеров элементов, а не только шрифтов!
  • При изменении размера шрифта или уровня масштабирования элементы страницы должны быть одинакового размера относительно друг друга.

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

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

Жизнь должна стать проще, border-radiusи другие CSS3-свойства вступают в игру больше, но, к сожалению, наша основная аудитория - государственные служащие, которые все ВСЕ ЕЩЕ ИСПОЛЬЗУЮТ IE F @! * ING 6!


Чтобы ответить на вопрос "стоит ли это того?" Да , если вы все сделаете правильно.

Вот сценарий: выберите сайт с фиксированной шириной: ваш начальник показывает его клиенту на своем новом ноутбуке 1920x1600, а затем жалуется вам на то, «как все это выглядит маленьким на экране этого парня!»


0

Я думаю, что хорошо иметь возможность хорошо масштабировать на экране пользователя, а не заставлять пользователей панорамировать и масштабировать. В то время, когда пользователи выходят в Интернет с самых разных устройств, от смартфонов до ультрамобильных ПК, каждое из которых имеет свое собственное, возможно, нестандартное разрешение, я думаю, что важно поддерживать пользовательский опыт на высоком уровне, когда Ваш сайт просматривается на таких экранах. Что касается длины текста, он может быть ограничен определенным соотношением, поэтому он будет хорошо вписываться в макет. Я думаю, что есть также фреймворки, которые могут помочь в написании сайта гибким способом и помочь с поддержкой кода.


0

Я пойду против большинства и скажу НЕТ. Причина: текучие сайты, такие как Википедия, являются кошмаром для чтения на больших экранах из-за их длинной строки (хотя из-за цитат из-за этого трудно читать в лучшие времена)

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

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


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

0

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.