Разрешение web страниц
Создание веб-страниц для различных разрешений монитора
При создании дизайна веб-страницы Вы должны принимать во внимание несколько вещей. Главными из них являются размер монитора и разрешение экрана посетителей Вашего сайта. Веб-страницы должны быть.
При создании дизайна веб-страницы Вы должны принимать во внимание несколько вещей. Главными из них являются размер монитора и разрешение экрана посетителей Вашего сайта. Веб-страницы должны быть достаточно гибкими для того, чтобы корректно отображаться в различных браузерах (смотрите статью о межбраузерной совместимости) и конфигурациях экрана.
Помните ли Вы размер своего монитора? Скорее всего он имеет диагональ экрана от 15 до 21 дюйма.
Видимая область экрана не зависит от различных экранных разрешений, поддерживаемых монитором. «Разрешение» — это количество информации (пикселов), которое может отобразить монитор. Большинство мониторов могут работать с разрешением 640 х 480, 800 х 600 и 1024 х 768 пикселов. При большем разрешении отображается больше информации, чем при меньшем. Например, при разрешении 800 х 600 отображается 480,000 пикселов, а при разрешении 1024 х 768 — 786,432 пиксела.
Фиксированные таблицы против относительных
При создании таблиц Вы задаете их размеры в пикселах или процентах. Если задать размеры в пикселах, получится фиксированная таблица. Если, наоборот, размер таблицы определен в процентах, то таблица будет называться относительной. Разница между этими двумя типами таблиц становится очевидна при просмотре с различными разрешениями экрана.
Чтобы это проиллюстрировать, рассмотрим такой пример. Если Вы создаете таблицу из четырех ячеек, каждая шириной в 100 пикселов, эта таблица будет фиксированной, так как заданы точные размеры. Ширина таблицы всегда будет равна 400 пикселов (4 х 100). Напротив, если создать таблицу из четырех ячеек, ширина которых будет равна 25% от общей ширины экрана, ширина таблицы в пикселах будет зависеть от текущего разрешения экрана.
Каждый способ имеет свои преимущества и недостатки. С фиксированными таблицами проще работать, так как не придется беспокоиться об изменении размеров таблицы у разных посетителей страницы.
Все элементы таблицы должны быть полностью загружены перед тем, как браузер начнет их отображать. При использовании фиксированных таблиц, дизайнер может заставить браузер начать отображать данные в таблице, не дожидаясь их полной загрузки. Для этого применяется следующий стиль CSS:
Текст: пикселы против пунктов
Как было сказано выше, пиксел является основной единицей измерения разрешения экрана. Поэтому, все, что имеет отношение к размеру монитора, считается в пикселах. Стандартной единицей измерения размера шрифта является «пункт». Изначально она использовалась в печати и не предназначалась для использования в Сети.
На какое разрешение ориентироваться?
Трудно разработать сайт с правильным балансом формы и функциональности, который бы одинаково хорошо отображался на различных платформах. Это является одной из основных целей дизайнера. Вы должны быть уверены, что изменение разрешения не скажется на впечатлении посетителя Вашего сайта.
Сейчас Вы возможно спросите: «На какое разрешение надо ориентироваться»? Ответ зависит от Вашей аудитории. Поисковые системы вроде Yahoo! должны работать на как можно большем числе платформ, так как ими пользуется огромное количество пользователей сети. С другой стороны, при создании сайта для специфической группы пользователей, надо ориентироваться на ее технические возможности. Это конечно не означает, что Ваш сайт должно быть невозможно просмотреть при конфигурации отличной от той, под которую Вы его оптимизировали.
mostinfo.net
Разрешение экрана и макет страницы
Один из наиболее часто задаваемых вопросов по web-юзабилити — «Под какое разрешение следует разрабатывать дизайн?». Развёрнутый ответ относительно сложен, однако основная его суть проста.
- Оптимизируйте макет под разрешение 1024×768, которое в настоящее время используется наиболее широко. Разумеется, следует проводить оптимизацию под разрешение, наиболее распространённое среди целевой аудитории сайта, поэтому упомянутый размер в будущем изменится. Это может иметь место и сейчас, если, скажем, вы разрабатываете дизайн для интранет-сайта компании, которая обеспечивает всех своих сотрудников большими мониторами.
- Не разрабатывайте сайт в расчёте строго на одно разрешение, поскольку размеры экрана у всех пользователей разные. Это тем более актуально, если учесть, что пользователи не всегда разворачивают окно браузера на весь экран (особенно если у них большие экраны).
- Используйте резиновые макеты, которые автоматически подстраиваются под текущий размер окна браузера (иначе говоря, избегайте жёстких макетов, имеющих одну и ту же ширину вне зависимости от размера окна).
- 1366×768 — 23.7%
- 1280×1024 — 15.1%
- 1024×768 — 14.7%
- 1280×800 — 9.5%
- 1920×1080 — 8.4%
- 640×480 — 6.2%
- 1600×1200 — 5.9%
В настоящее время примерно на 60% всех мониторов используется разрешение 1024×768. Для сравнения, лишь около 17% используют 800×600, откуда очевидно, что наилучшее отображение сайта на таких дисплеях — не самая важная задача. Не менее очевидно, однако, что эти 17% нельзя просто игнорировать, создавая жёсткий макет, для отображения которого в полную ширину не хватит экранного пространства пользователя.
Оптимизация под 1024×768
Когда я говорию «оптимизация», я подразумеваю, что страница должна выглядеть и работать наилучшим образом в окне наиболее распространённого размера. При этом она выглядит хорошо и работает достаточно хорошо при иных размерах окна — именно поэтому я и рекомендую резиновую вёрстку. Однако лучше всего страница должна смотреться и работать на 1024×768.
Три основных критерия при оптимизации макета страницы для определённого разрешения таковы:
Изначальная видимость Видна ли вся наиболее существенная информация и могут ли пользователи видеть её без прокрутки? В этом заключается компромисс между тем, как много информации показано в целом, и тем, насколько подробной является информация в масштабе каждой информационной единицы. Читабельность Насколько легко прочитать текст в различных колонках при их текущей ширине? Эстетика Насколько хорошо смотрится ваша страница, когда элементы имеют правильные размеры и расположение для конкретного экранного разрешения? Отображаются ли все элементы правильно — т. е. следуют ли подписи к фотографиям непосредственно за фотографиями и т. д.
Все три критерия следует иметь в виду для каждого из целевых размеров экрана, на которые вы ориентируетесь, постоянно проверяя поведение макета при изменении размеров окна браузера в диапазоне от 800×600 до 1280×1024.
Желательно, чтобы ваша страница работала и на размерах, не принадлежащих к этому диапазону, хотя подобные крайности не столь важны. Менее полупроцента пользователей всё ещё используют разрешение 640×480. Хотя такие пользователи, безусловно, должны иметь доступ к вашему сайту, предоставление им более-менее приемлемого дизайна является допустимым компромиссом.
Из первого критерия следует, что прокрутка всегда является ключевым моментом. Пользователям обычно не нравится использовать прокрутку (в моей новой книге приводятся статистические данные о том, сколько пользователей используют прокрутку на страницах различных типов). Таким образом, вы должны принимать во внимание, сколько информации увидят пользователи, если они прокручивают страницу лишь на один или два экрана.
Как прокрутка, так и первоначальная видимость зависят от размера экрана: большие экраны позволяют отобразить больше контента над линией сгиба без прокрутки. Именно в этом разрезе вам следует проводить оптимизацию под 1024×768: представить наиболее интересный материал над линией сгиба при этом разрешении (убедившись при этом, что особенно важная информация видна и на 800×600).
А как насчёт маленьких экранов вроде тех, что встречаются на мобильных устройствах? Следует стараться, чтобы резиновый дизайн отображался на устройствах вплоть до телефона, однако не рассчитывайте на то, что этого достаточно для поддержки «мобильного» пользователя. Мобильная среда специфична; оптимизация под неё требует разработки отдельного сервиса, обеспечивающего меньшее количество возможностей, более лаконичного и более подходящего для мобильного использования в целом.
Большие экраны
Многие пользователи обладают большими дисплеями. В настоящее время порядка 18% пользователей используют как минимум 1280×1024. Количество пользователей с большими экранами растёт, хотя не столь быстро, как мне бы того хотелось.
Большие мониторы являются наиболее простым способом увеличить производительность офисных работников, и каждый, чей доход составляет по меньшей мере 50 тыс. долларов в год, должен иметь разрешение экрана 1600×1200. Плоскопанельные дисплеи с этим разрешением стоят сейчас менее 500 $. Так, если экран большего размера увеличит производительность хотя бы на 0,5%, вы восполните затраты на монитор менее чем за год. (Типичные корпоративные накладные расходы в два раза превышают затраты компании на сотрудников; всегда учитывайте вложенные в сотрудника средства, а не его заработную плату, при любом расчёте производительности).
Как Apple, так и Microsoft опубликовали отчёты, где пытались измерить увеличение производительности от использования мониторов большего размера. К сожалению, из-за различных методологических недостатков не было приведено конкретных цифр. Мой опыт показывает, что предполагаемый прирост производительности составляет 5-10%, когда пользователи выполняют работу, тесно связанную с компьютером, на большом мониторе. Это означает суммарный прирост производительности порядка 0,5-1% на сотрудника, в общем объёме работы которого труд, ориентированный на использование монитора, занимает 10% рабочего дня. Без сомнения, большие экраны оправдывают затраты на них.
Лично я использую дисплей 2048×1536, и я бы даже не сказал, что это действительно большой экран. Я ожидаю, что в течение ближайших 10 лет достаточное распространение получат мониторы с разрешением, скажем, 5000×3000 — по меньшей мере, среди профессионалов высшего уровня.
Начиная с 1600×1200, пользователи редко разворачивают окно браузера на весь экран, поскольку очень немногими сайтами удобно пользоваться при их растяжении на такую ширину. Большие экраны чудесно подходят для работы с таблицами, графического дизайна и многих других задач, но не для веб-страниц в рамках текущей парадигмы их создания и использования. Сегодня пользователи больших экранов обычно используют имеющееся дополнительное пространство для одновременного отображения нескольких окон и параллельного браузинга.
Для обслуживания web-пользователей с действительно большими экранами в будущем, нам, вероятно, потребуется иная парадигма, нежели отдельные страницы в их сегодняшней форме. Может быть, более целесообразной в будущем окажется метафора, более похожая на газету, или какой-то другой способ компоновки информации.
В любом случае, потребность в новой парадигме в будущем не изменит текущую рекомендацию: оптизизируйте под 1024×768, но не разрабатывайте дизайн в расчёте исключительно на этот размер. Ваши страницы должны работать на любом разрешении от 800×600 до 1280×1024 и выше.
tanalin.com
Создание веб-страниц для различных разрешений монитора
Что такое разрешение экрана?
Помните ли Вы размер своего монитора? Скорее всего он имеет диагональ экрана от 15 до 21 дюйма.
Видимая область экрана не зависит от различных экранных разрешений, поддерживаемых монитором. «Разрешение» — это количество информации (пикселов), которое может отобразить монитор. Большинство мониторов могут работать с разрешением 640 х 480, 800 х 600 и 1024 х 768 пикселов. При большем разрешении отображается больше информации, чем при меньшем. Например, при разрешении 800 х 600 отображается 480, 000 пикселов, а при разрешении 1024 х 768 — 786, 432 пиксела.
Основываясь на этой информации, сделаем следующий вывод:
Размер каждого пиксела уменьшается при увеличении разрешения. Это происходит потому, что на той же площади экрана отображается больше пикселов.
Рисунки и текст размером х на у пикселов также уменьшаются при увеличении разрешения.
Монитор А Монитор B
_ _ _ _ _ _ ___ ___ ___
|_|_|_|_|_|_| | | | |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| | | | |
|_|_|_|_|_|_| |___|___|___|
|_|_|_|_|_|_| | | | |
|_|_|_|_|_|_| |___|___|___|
Эти картинки представляют два монитора одного размера (с одинаковой видимой областью), работающие при разных разрешениях. Монитор А работает при большем разрешении, чем монитор В, и поэтому отображает большее число более маленьких пикселов.
Например, если установлено разрешение 800 х 600, каждая ячейка таблицы будет иметь ширину 200 пикселов. Ширина всей таблицы будет равна 800 пикселам. Если ту же самую таблицу смотреть при разрешении 1024 х 768, то она будет шире. Каждая ячейка будет иметь ширину 256 пикселов, а ширина таблицы будет равна 1024 пиксела.
Главным недостатком использования фиксированных таблиц является неиспользование драгоценного пространства при высоких разрешениях экрана.
Вернемся к относительным таблицам, они требуют от дизайнера большей работы. Вы должны быть уверены, что веб-страница одинаково хорошо отображается при различных разрешениях. Если все сделано правильно, страница хорошо масштабируется и использует всю площадь экрана. В случае же ошибок, форматирование страницы может сделать ее практически нечитаемой.
Когда Вы определяете размер текста в пунктах, компьютер должен преобразовать его в пикселы перед началом отображения на экране. К сожалению, преобразование между пикселами и пунктами не является универсальным. Это становится очевидным при создании страниц, предназначенных как для пользователей РС, так и для пользователей Макинтошей. Макинтоши используют меньший коэффициент преобразования пунктов в пикселы. Поэтому, текст, размер которого задан в пунктах, будет выглядеть меньше при просмотре на Макинтошах.
На какое разрешение ориентироваться?
Трудно разработать сайт с правильным балансом формы и функциональности, который бы одинаково хорошо отображался на различных платформах. Это является одной из основных целей дизайнера. Вы должны быть уверены, что изменение разрешения не скажется на впечатлении посетителя Вашего сайта.
vismech.ru
Стандартная ширина сайта — какой она должна быть?
Быстрая навигация по этой странице:
Существует ли общепринятая стандартная ширина сайта? Какой она должна быть? Есть ли какие-то особенности для разных проектов? Я эти вопросы задавал сам себе множество раз, теперь попробую дать на них ответ, исходя из накопившегося опыта и массы прочитанной в Интернете информации.
О важности вопроса
Если Вы задавали или задаете себе такой же вопрос, то это значит, что вы находитесь на правильном пути, поскольку в действительности ширина страницы сайта имеет ключевое значение в его дизайне.
Дело в том, что если если выбранная вами ширина будет больше, чем разрешение экрана у посетителя, то сайт в полном объеме не поместится в браузере, появится горизонтальная полоса прокрутки. В результате этого пользователь не увидит часть информации или ему будет некомфортно работать с вашим проектом. Итог будет один — уменьшение поведенческих факторов.
Если вы, напротив, зададите слишком маленькую ширину, особенно если будет слишком маленькой контентная часть, то, опять-таки, ваш сайт вновь будет смотреться несуразно и некомфортно. Попробуйте проверить сайт в разных разрешениях и сами в этом убедитесь.
Итак, какой же должна быть ширина сайта в пикселях?
Рассчитываем оптимальный вариант
Для того, чтобы правильно ответить на этот вопрос, нужно обратиться к статистике.
Для моего проекта на момент написания статьи сервис Liveinternet выдавал такую статистику (показаны строки, имеющие долю в статистике более 5 процентов):
Как видно из статистики, подавляющее большинство пользователей использует мониторы с разрешением шириной от 1280 пикселей и выше. Тем не менее, обратите внимание на строку, выделенную жирным шрифтом: 14,7 % имеет разрешение 1024 пикселей. Это в среднем каждый шестой/седьмой пользователь — достаточно большой процент, который имеет смысл учитывать.
Исходя из этого, что ширина вашего сайта не должна превышать 1024 пикселей, иначе каждому шестому посетителю будет неудобно пользоваться вашим проектом.
Однако 1024 пикселя — это разрешение монитора, а фактически площадь страницы в браузере меньше, так как часть экрана съедает полоса прокрутки (скролл) — это около 24 пикселей.
Следовательно, наша страничка должна открываться не более, чем на 1000 пикселей. Часто дизайнеры или заказчики берут еще 20 пикселей в запас и делают сайт на 980 px.
Таким образом, наиболее оптимальной шириной является 980-1000 px.
Почему часто используется 960?
Если Вы обратите внимание на шаблоны для WordPress (как, впрочем, и для многих других CMS), то вы заметите, что многие из них ориентированы на 960 пикселей.
Зачем же отклоняться от оптимального варианта в меньшую сторону? Здесь следует отметить, что 960 — это математически очень «удобное число», так как, в отличие от 980, оно делится на каждое из этих чисел: 6, 8, 12, 16, 24 (и, соответственно, на множество других).
Это удобно для создания дизайна по так называемой «сетке» (grid system) — когда при создании макета он мысленно делится на 6/8/12 и т.д. частей и все блоки макета выстраиваются по этим линиям — получается симметрично и красиво (подробнее про это написано на 960.gs и других ресурсах).
Если же вы делаете или заказываете дизайн с нуля и просто хотите, чтобы, например, контентная часть занимала 600 пикселей, а справа был сайдбар — тогда вам необязательно ориентироваться на grid system и 960 пикселей.
Осторожность с резиновым макетом
В каком-то смысле решением рассматриваемой проблемы является резиновый макет — ширина страницы растягивается под ширину экрана, потому заранее учтены все варианты дисплеев.
Однако, по моему субъективному мнению, неограниченно резиновый макет — это зло, так как на дисплее с разрешением более 2000 пикселей весь ваш текст вытянется в несколько длинных строк, которые будет сложно читать.
Представьте, что вы читайте книгу, в которой одна строка имеет длину, предположим, в семьдесят сантиметров или в один метр. Удобно ли вам будет ее читать? Полагаю, что нет, ведь не зря сам по себе книжный формат в среднем не предполагает более 60-80 символов на одной строке. Потому я такую технологию создания сайта не рекомендовал бы.
Потому, если вы делаете или заказываете резиновый макет, позаботьтесь о посетителе — поставьте ограничение около 1200-1300 px как максимальную ширину вашей страницы.