В тот же день 800 x 600 было разрешением экрана для - и, возможно, 640 x 480. Затем было 1024 x 768 и т.д. и т.д. и т.д.
Но тогда это становится хуже: теперь у нас есть не только разные разрешения, но и разные пропорции.
Какие стратегии люди используют для размещения сегодня расширяющегося диапазона размеров экрана и пропорций?
(BTW - я думал только о ноутбуке/настольном оборудовании, но, конечно же, там и смартфоны и планшеты).
Я знаю, что это было бы несколько спорно мнение, но я все равно сказать: Не
Не разрабатывайте для нескольких размеров экрана или пропорций. Конечно, есть несколько исключений: тяжелые веб-приложения, такие как клиенты электронной почты, могут определенно работать с большей экранной недвижимостью и, вероятно, достаточно гибкие, чтобы в любом случае обеспечить широкий диапазон размеров экрана. Мобильные версии упомянутого веб-сайта с более гибким дизайном для размещения невероятного спектра размеров мобильных экранов также могут помочь для сайтов с высокими мобильными томами. Однако, если вы придерживаетесь так называемой "настольной сети", то я думаю, мы можем сказать, что в 95% случаев есть более важные вещи, которые нужно заботиться, чем размеры экрана, разрешение и соотношение сторон.
Прежде всего, давайте рассмотрим простой. Я действительно не понимаю, почему вы так сильно заботитесь о соотношении сторон - не так ли, как мы больше заботимся о , что для "под складной" ерундой, не так ли? Веб - это вертикальная среда - прокрутка всегда будет иметь место на веб-сайтах. Наличие всего над магической линией 600px просто глупо.
Далее, разрешение экрана/размер: снова мне трудно защищаться.
Пользователи с большими экранами обычно не максимизируют свои окна браузера, потому что они считают, что большинство веб-сайтов не используют их. В то время как веб настраивается на пользователя, пользователь также настраивается на Интернет. Хотя вы можете утверждать, что это проблема с курицей и яйцом, факт остается фактом: веб-сайт обычно предназначен для самого низкого общего знаменателя. Я не защищаю эту позицию, а скорее указывая на это как нынешняя преобладающая тенденция в отрасли.
Есть определенные вещи, которые просто не будут работать с слишком высоким или слишком низким разрешением. Существует, например, небольшой диапазон ширины, который позволяет людям комфортно читать на экране. Любое дольше и количество движения для глаз на следующую строку будет раздражать. Слишком мало, и текст будет казаться стесненным. Тот факт, что сеть была спроектирована так, чтобы нейтрализовать разрешение, означает, что парадоксально не так много положений было сделано для тех, кто хочет строить планы жидкости. min-height и max-height могли бы помочь, конечно, но чем шире диапазон, тем больше проблем вы столкнетесь. Такие вещи, как осиротевшие элементы, перемещенные изображения, фоны, которые заканчиваются и т.д., Неизбежны для действительно гибких сайтов, построенных с сегодняшней технологией.
Поэтому я считаю, что самый простой способ решения нескольких резолюций - это игнорировать его вообще - с сегодняшней технологией в любом случае не так много вариантов - и дизайн для самого низкого общего знаменателя.
Следите за высокими настройками DPI
Я думаю, что одна из самых неразрешенных проблем, с которыми приходится сталкиваться сегодня в веб-разработке, - это тестирование на высоких системах DPI. Каждый научился тестировать и тестировать и тестировать в разных браузерах, но разработчики/разработчики не поддались тестированию на разных настройках DPI.
Высокий (или даже низкий, если на то пошло) Параметры DPI ломают дизайн при масштабировании шрифтов, но изображения не могут (что может случиться), могут вызвать искажение изображений нечеткими/размытыми, и абсолютно позиционированные объекты могут не отображаться в желаемом location (что было бы разрушительным для CSS-меню). Если ничего другого, проверьте свои изображения при высоком DPI и повторите их по мере необходимости.
Это никогда не было проблемой до недавнего времени с выпуском Windows 7 и людьми, покупающими компьютеры с мониторами с высоким разрешением. Во-первых, Windows 7 использует 96DPI по умолчанию (что отличается от остальной части вычислительного мира, использующего 72DPI в качестве стандарта. Кроме того, Windows 7 автоматически настраивает параметры DPI, и я видел людей с ДОИ, равными 150% от нормального (96 DPI в Windows).
Здесь отличная ссылка, обсуждающая эту проблему более подробно: http://webkit.org/blog/55/high-dpi-web-sites/
Отличный кросс-браузерный веб-сайт, разработанный с использованием веб-стандартов, является целью, но не забывайте о тестировании DPI.
Ну, стараюсь держать ответ не слишком долго, это то, что я делаю.
(A) Всегда начинайте с наиболее вероятного отношения/разрешения
Если ваш средний Джо будет на современном ноутбуке или настольном компьютере, он, скорее всего, имеет как минимум 1024x768 (refs: w3schools elykinnovation), что дает вам приблизительно 960px ширину (вы можете проверить систему 960grid - есть чертовски много нового фреймворка, так как я впервые написал это). Если вы, пользователи, скорее всего, начнете с мобильного устройства или планшета, сначала расскажите о них. Если это 50% -50%, обычно лучше начинать с малого, а затем расти, например. Каменный молот или основание
(Б) макет: жидкость или нет?
Если ваш сайт может выиграть от большей ширины, выберите плавный дизайн, начиная с этого разрешения. Будьте осторожны, чтобы человеческий глаз не любил читать текст на длинных строках, поэтому не злоупотребляйте плавным дизайном; часто допустимо придерживаться 960px с большими полями. Возможно, вы захотите добавить (javascript) некоторые дополнительные побочные меню, если у вас действительно много места. Но сделайте так, чтобы ваш сайт работал без JS как можно больше.
(С) Другие резолюции
Наконец, пришло время проверить, что с наименее используемыми разрешениями все еще приемлемо.
(D) Другие устройства, соотношения и прочее
Существует не так много вариантов для разных соотношений; это часто означает, что вы работаете на мобильном телефоне, iPad, AAA или подобном устройстве.
Мой совет... специально для этих устройств.
При написании HTML помните, что вам нужно, и не забывайте делать HTML семантическим, а не для дизайна. Используйте правильно HTML5 семантические теги, если можете. Избегайте тегов <bold> или аналогичных, и правильно используйте вместо них теги и классы, которые вы собираетесь стилизовать с помощью CSS.
Используйте рамки!
Но вы все равно можете сделать несколько разных дизайнов для самых разных устройств. Вам не нужно делать все адаптивно/в одном дизайне /.
Есть несколько способов обслуживать разные CSS в зависимости от клиента; ты можешь это сделать:
Вы можете легко создать общий дизайн для небольших (например, мобильных) устройств, следуя нескольким простым правилам: 1. структура жидкости, способная помещаться на очень малые ширины 2. компактные верхние и нижние колонтитулы не слишком тратят слишком много места 3. мало, чистое содержимое за "страницу" 4. избегайте: чрезмерных эффектов, поскольку они не будут работать на сенсорных устройствах !!!
Если вы хотите пойти дальше, вы должны проверить настройки отдельных устройств; Примером является окно просмотра iphone, см. библиотеку Apple Ref.
Это только для начала. Опыт и особые потребности будут вести остальных!
Ваш сайт не может работать идеально для каждого дисплея. Даже если у вас было достаточно часов в день (или я должен сказать год/десятилетие), чтобы проектировать для каждого возможного отображения, вам придется делать это каждый раз, когда выйдет новое устройство.
В моем развитии я все еще религиозно стараюсь избегать горизонтальной прокрутки, и это не слишком сложно с плавающими divs/div-width. Но помимо этого мы действительно находимся в "там приложении для этих" перекрестков, где вам нужен специально разработанный дисплей для определенных устройств.
Одна из моих стратегий - уменьшить зависимость от одного дисплея - клиенту, вероятно, не нужно видеть всю вашу веб-страницу, чтобы делать то, что они сделали. Вы можете анализировать функциональность на более мелкие/более простые веб-страницы, которые лучше масштабируются на устройствах различного размера.
На работе у меня есть немного больше "власти", так как я могу разработать внутренние веб-приложения, которые "предназначены для запуска... определенного браузера, некоторые настройки дисплея и т.д. - используйте другие конфигурации на свой страх и риск". Это, только после того, как менеджеры согласились с тем, что тратят дополнительную неделю на разработку (и даже больше на модернизацию/будущее обслуживание) просто для того, чтобы успокоить, что один вегетарианец на другом конце кампуса, который отказывается использовать IE, действительно не стоит затрат, В этом случае нам нужен еще один Тимми, а не более гибкое веб-приложение, которое может хорошо выглядеть в его любимом браузере, отличном от IE.
Это общий, но сложный вопрос, который, к сожалению, не имеет ни одного наилучшего решения. Все зависит от типа контента, который у вас есть. Вы можете использовать жидкую компоновку или дизайн своего сайта по-разному для разных разрешений (см. http://www.maxdesign.com.au/articles/resolution/). Для примера жидкостной конструкции проверьте это - http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign
Я думаю, что отзывчивый веб-дизайн - это ответ на ваш вопрос. Взгляните на эти примеры и методы... Отзывчивый веб-дизайн