Стандартное разрешение сайта

Стандартная ширина сайта — какой она должна быть?

Быстрая навигация по этой странице:

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

О важности вопроса

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

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

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

Итак, какой же должна быть ширина сайта в пикселях?

Рассчитываем оптимальный вариант

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

Для моего проекта на момент написания статьи сервис Liveinternet выдавал такую статистику (показаны строки, имеющие долю в статистике более 5 процентов):

  • 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%

Как видно из статистики, подавляющее большинство пользователей использует мониторы с разрешением шириной от 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 как максимальную ширину вашей страницы.

www.runcms.org

Какое разрешение задавать макету дизайна мобильного приложения?

Макет должен иметь тот же самый логический размер, что и экран мобилы. Например у айфона 6 это 375х667, у айпада 1024х768 пикселей и т.д. Вот и всё собственно.

Другое дело, что при этом вы должны некоторые отдельные элементы (иконки, логотипы, иллюстрации) нарисовать в 2х разрешении. Но это обычно делают в отдельном файле.

Чтобы понять какое разрешение вам нужно, лучше посоветоваться с разработчиком и заказчиком. У заказчика узнать какое количество девайсов охватывает приложение (смартфоны с горизонтальной или с горизонтальной и вертикальной ориентацией, планшеты так же в одну или две ориентации). После получения этой информации нужно плотно пообщаться с разработчиком, который вам и выдаст требования к макетам, а так же к шрифтам и иконкам.

На примере: мы разрабатывали приложение для туристического гида по Черногории. Только вертикальная ориентация, и два разрешения (мы брали средние по охвату аудитории):
1600×2400 px (400 dpi)
900×1800 px (400 dpi)
и уже с этими исходниками разработчик работал самостоятельно

toster.ru

Под какие разрешения рисовать адаптивный дизайн?

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

1. Мобильные телефоны — 320px. Ориентируемся на viewport айфона, т.к. он самый маленький. У современных андроидов вьюпорт больше, поэтому их игнорируем (растянется на верстке).

2. Планшеты — 768px. Опять-таки ориентируемся на айпад в портретной ориентации , т.к. у андроид планшетов вьюпорты обычно имеют размер от 800×1200 или совпадают с айпадом. Планшеты с вьюпортом 600×1024px устарели. К тому же ничего страшного, если в вертикальной ориентации сайт на таком планшете будет выглядеть как на мобильнике, а в горизонтальной ориентации — как на десктопе.

3. Десктоп и планшеты в ландшафтной ориентации — 1000px. Почему 1000, а не 1024: первое, в настольных браузерах полоса прокрутки съедает (обычно) 18px ширины; второе, от 1000px верстальщику удобнее расчитывать размеры в процентах, а до 1024 все равно растянется при верстке.

В принципе, этого достаточно, чтобы верстальщик справился.

Если дизайн не имеет максимальной ширины и тянется от края до края окна браузера, то на усмотрение дизайнера можно нарисовать еще один или несколько эскизов для более широких экранов.

В каком порядке рисовать? Смотря как поставлено тех.задание. Чаще всего в задании описан полный функционал для настольной версии. Тогда проще нарисовать дизайн под 1000px и перекомпоновать под 768 и 320, выбросив или упростив по пути менее значимые элементы сайта. Т.е. двигаться от сложного к простому.

Верстать при этом удобнее от меньшего экрана к большему (от простого к сложному). При mobile first верстальщику приходится дописывать новые стили для бóльших экранов поверх базовой версии в 320px вместо того, чтобы обнулять написанные для настольных браузеров стили. В результате для мобильника css весит меньше и парсится быстрее.

toster.ru

Разрешения экрана, размеры окна браузера. Справочник (изменения от 27.11.2013)

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

Для этого мы составили очень простую и удобную таблицу:

Зеленым цветом выделены строки, показывающие оптимальное разрешение, под которые следует проектировать веб-сайт, так как по данным некоторой статистики у большей части пользователей мониторы поддерживают указанные параметры. Менее 10% имеют разрешение меньше указанного. Желательно, чтобы максимальная ширина сайта не превышала 1259 px, иначе некоторые пользователи вашего сайта могут увидить горизонтальный скроллинг, который является очень неудобным для использования. А если вы на своем сайте не хотите видеть и вертикального скроллинга, или просто хотите узнать высоту той части сайта, которую гарантированно увидят сразу при открытии страницы, то она будет в диапазоне 599-631 px.

А как быть с владельцами сотовых телефонов, смартфонов и планшетов? Под какое разрешение разрабатывать сайт для них?

Современные мобильные устройства, кроме очень бюджетных моделей, имеют минимальное разрешение 480×320 px, а чаще 800×480 или более, умеют масштабировать сайты, а также самостоятельно разделять их на блоки, выделять важные текстовые фрагменты. Большинство сайтов корректно отображается на мобильных устройствах и без создания специальной мобильной версии сайта. Если вы все же хотите разработать мобильную версию, то желательно, чтобы она была сверстана в одну колонку (обычные сайты чаще верстают в 2-3 колонки) и не содержала сложных скриптовых и навигационных решений (например, выпадающих меню, мелких управляющих элементов и т.п.).

Определяем разрешение экрана через JavaScript

Определяем размер клиентской части окна браузера через JavaScript

codething.ru

Разрешение экрана и макет страницы

Один из наиболее часто задаваемых вопросов по web-юзабилити — «Под какое разрешение следует разрабатывать дизайн?». Развёрнутый ответ относительно сложен, однако основная его суть проста.

  • Оптимизируйте макет под разрешение 1024×768, которое в настоящее время используется наиболее широко. Разумеется, следует проводить оптимизацию под разрешение, наиболее распространённое среди целевой аудитории сайта, поэтому упомянутый размер в будущем изменится. Это может иметь место и сейчас, если, скажем, вы разрабатываете дизайн для интранет-сайта компании, которая обеспечивает всех своих сотрудников большими мониторами.
  • Не разрабатывайте сайт в расчёте строго на одно разрешение, поскольку размеры экрана у всех пользователей разные. Это тем более актуально, если учесть, что пользователи не всегда разворачивают окно браузера на весь экран (особенно если у них большие экраны).
  • Используйте резиновые макеты, которые автоматически подстраиваются под текущий размер окна браузера (иначе говоря, избегайте жёстких макетов, имеющих одну и ту же ширину вне зависимости от размера окна).

В настоящее время примерно на 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

Смотрите еще:

  • Вакансии в кемерово юрист Вакансии h Юристы, коллекторы, приставы в Кемерово и соседних городах Кемерово Юрист — от 15 000 р. Обязанности: ведение исполнительного производства,контроль за своевременным применением принудительных мер судебным приставом- […]
  • Как получить ходатайство Как написать ходатайство для получения квоты на РВП? Необходимо написать ходатайство от главы факультета в УФМС с целью выделения квоты на РВП иностранной студентке. Как оформить и есть ли шаблон для данного вида ходатайства? 18 […]
  • Консультация юриста в ханты-мансийске Консультация юриста в ханты-мансийске Ханты-Мансийск: услуги практикующих юристов (телефоны и адреса) Подробности Категория: Услуги частнопрактикующих юристов юрист услуги контакты КУЛЕБАКИН […]
  • Отзывы о независимой экспертизе после дтп Независимая экспертиза после ДТП Перейти на новый Общий форум Автор: Byrik [Москва] (---.telmos.ru) Дата: давно Господа, подскажите пожалуйста, стоит ли делать независимую экспертизу после ДТП (я - пострадавший), или положиться на […]
  • Расчет пенсии в мо рф Калькулятор военной пенсии с 1 января 2018 года по новой выслуге лет Расчет пенсии военнослужащих отличается от расчета пенсии обычных работников. Но благодаря калькулятору, приведенному ниже, вы сможете без проблем рассчитать свои […]
  • Общая теория собственности черкасов Черкасов Г.И. Общая теория собственности Скачивание файла Введите число с картинки: Поделись с друзьями! Комментарии Смотрите также Капелюшников Р.И. Экономическая теория прав собственности Капелюшников Р.И. Экономическая теория […]
  • Заявление от анны седых Обращения граждан Вы имеете право обратиться в судебный участок с запросом (предложение, заявление, жалоба), который будет зарегистрирован и рассмотрен в соответствии с порядком, установленным законодательством Российской […]
  • Написать жалобу на мед учреждение Как пожаловаться в Росздравнадзор, если вы недовольны работой медучреждения Читайте также Министерство здравоохранения опубликовало проект приказа, регламентирующего порядок рассмотрения Росздравнадзором жалоб россиян на […]