Стратегии обработки разрешений на нескольких экранах и соотношения сторон в веб-разработке

Question

В свое время 800 x 600 было разрешением экрана, на которое можно рассчитывать - и, возможно, 640 x 480. Затем пришли 1024 x 768, и т. Д., И т. Д.Теперь у нас есть не только разные разрешения, но и разные пропорции.

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

(Кстати, я думал только об оборудовании для ноутбука / настольного компьютера, но, конечно, есть и смартфоны и планшеты).

Answer 1

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

Не рассчитывайте на несколько размеров экрана или пропорций.Конечно, есть несколько исключений: тяжелые веб-приложения, такие как клиенты веб-почты, могут определенно справляться с большим количеством экрана и, вероятно, достаточно гибки, чтобы в любом случае приспособиться к большому диапазону размеров экрана.Мобильные версии указанного веб-сайта с более гибким дизайном, позволяющим приспособиться к невероятному спектру размеров экранов мобильных устройств, также могут помочь сайтам с большим объемом мобильных устройств.Однако, если вы придерживаетесь так называемой «настольной сети», то, я думаю, мы можем сказать, что в 95% случаев есть вещи, которые важнее заботиться, чем размеры экрана, разрешение и соотношение сторон.

Прежде всего, давайте займемся простым.Я не очень понимаю, почему вы так сильно заботитесь о соотношении сторон - это не то, что мы заботимся , что больше за ерунду "ниже сгиба", не так ли?Сеть - это вертикальная среда - прокрутка всегда будет иметь место на сайтах.Все, что выше волшебной линии 600px, просто глупо.

Далее, разрешение / размер экрана: опять же, мне сложно защищаться.

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

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

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

Answer 2

Следите за высокими настройками DPI

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

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

Это никогда не было проблемой до недавнего времени с выпускомWindows 7 и люди, покупающие компьютеры с мониторами высокого разрешения.Во-первых, Windows 7 использует 96DPI по умолчанию (что отличается от остального компьютерного мира, который использует 72DPI в качестве стандарта. Более того, Windows 7 автоматически настроит параметры DPI, и я видел людей с DPI 150% от нормального.(96 DPI в Windows).

Вот отличная ссылка, более подробно обсуждающая эту проблему: http://webkit.org/blog/55/high-dpi-web-sites/

Отличный кросс-браузерный веб-сайт, разработанный с использованием веб-стандартов, - это цель, но незабудьте о тестировании DPI.

Answer 3

Ну, я стараюсь держать ответ не слишком долго, вот что я делаю.

(A) Всегда начинайте с наиболее вероятного отношения / разрешения

Если ваш обычный джо будет на современном ноутбуке или настольном компьютере, он, вероятно, имеет ПО, КАК минимум, 1024x768 (refs: w3schools elykinnovation ), что дает вам примерно полезное значениеШирина 960 пикселей (возможно, вы захотите проверить систему 960grid - с тех пор, как я впервые написал это, существует множество новых фреймворков).Если вы, пользователи, скорее всего, начнете с мобильного устройства или планшета, сначала расскажите о них.Если это 50% -50%, обычно лучше начинать с малого, а затем расти, например. Каменный молот или Фундамент

(B) Макет: жидкий или нет?

Если ваш веб-сайт может получить выгоду отДля большей ширины выберите текучую конструкцию, начиная с этого разрешения.Будьте осторожны, чтобы человеческий глаз не любил читать текст на длинных строках, поэтому не злоупотребляйте плавным дизайном;часто допустимо придерживаться 960px с большими полями.Возможно, вы захотите добавить (javascript) некоторые дополнительные побочные меню, если у вас действительно много места.Но сделайте так, чтобы ваш веб-сайт работал как можно больше без JS.

(C) Другие разрешения

Наконец пришло время проверить, что с наименее используемыми разрешениями все еще приемлемо.

(D) Другие устройства, соотношения и прочее

Вариантов для разных соотношений немного;это часто означает, что вы работаете на мобильном устройстве, ipad, AAA или аналогичном устройстве.

Мой совет: ... разрабатывать специально для этих устройств.

При написании HTML-кода имейте в виду, чтоВы будете нуждаться и не забывайте делать HTML семантическим, а не для дизайна.Используйте правильно HTML5 семантические теги, если можете.Избегайте тегов или аналогичных, и правильно используйте вместо них теги и классы, которые вы собираетесь стилизовать с помощью CSS.

Используйте фреймворк!

Но вы все равно можете сделать несколько разных дизайнов дляочень разные устройства.Вам не нужно делать все адаптивно / в одном дизайне /. 1043 *

Существует несколько способов обслуживания разных CSS в зависимости от клиента;Вы можете сделать это:

1. на стороне сервера, проверяя браузер в HTTP-заголовке, исходящем от клиента, либо на вашем веб-сервере, либо в динамической среде сценариев - будь то python / django, php или что-то ещеelse
2. javascript (вы можете легко получить размер окна)
3. html - в частности, с некоторыми конкретными устройствами, такими как iphone

Вы можете легко создать общий дизайндля небольших (например, мобильных) устройств, следуя некоторым простым правилам: 1. разметка жидкости, способная помещаться на очень малой ширине 2. компактные колонтитулы не слишком тратят слишком много места 3. мало, чистое содержимое на «страницу» 4. избегайте: чрезмерные эффекты, поскольку они не будут работать на сенсорных устройствах !!!

Если вы хотите пойти дальше, вы должны проверить настройки отдельных устройств;Например, окно просмотра iphone, см. Apple Ref Library .

Это только для начала.Опыт и особые потребности будут остальным!

Answer 4

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

В моей разработкеЯ до сих пор стараюсь избегать горизонтальной прокрутки, и это не так уж и сложно с плавающими элементами div / переменной ширины.Но помимо этого, мы действительно находимся на перекрестке «есть приложение для этого», где вам нужен специально разработанный дисплей для конкретных устройств.

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

На работе у меня немного больше «мощи», как бы - я могу разрабатывать внутренние веб-приложениякоторые «предназначены для работы в ... определенном браузере, определенных настройках дисплея и т. д. - используйте другие конфигурации на свой страх и риск».Это только после того, как менеджеры согласились с тем, что потратить дополнительную неделю на разработку (и даже больше на модернизацию / техническое обслуживание в будущем) просто для того, чтобы успокоить одного вегетарианца в другом конце кампуса, который отказывается использовать IE, действительно не стоит затрат.,В этом случае нам понадобится еще одно Timmy, а не более гибкое веб-приложение, которое может хорошо смотреться в его любимом браузере без IE.

Answer 5

Это распространенный, но сложный вопрос, который, к сожалению, не имеет единственного лучшего решения.Все зависит от того, какой контент у вас есть.Вы можете использовать макет флюида или по-разному оформить свой сайт для разных разрешений (см. http://www.maxdesign.com.au/articles/resolution/). Для примера флюида, проверьте это - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

Answer 6

Я думаю, что адаптивный веб-дизайн - это ответ на ваш вопрос.Посмотрите на эти примеры и методы ... Отзывчивый веб-дизайн