Стандартная ширина сайта — какой она должна быть? —
Быстрая навигация по этой странице:
Существует ли общепринятая стандартная ширина сайта? Какой она должна быть? Есть ли какие-то особенности для разных проектов? Я эти вопросы задавал сам себе множество раз, теперь попробую дать на них ответ, исходя из накопившегося опыта и массы прочитанной в Интернете информации.
О важности вопроса
Если Вы задавали или задаете себе такой же вопрос, то это значит, что вы находитесь на правильном пути, поскольку в действительности ширина страницы сайта имеет ключевое значение в его дизайне.
Дело в том, что если если выбранная вами ширина будет больше, чем разрешение экрана у посетителя, то сайт в полном объеме не поместится в браузере, появится горизонтальная полоса прокрутки. В результате этого пользователь не увидит часть информации или ему будет некомфортно работать с вашим проектом. Итог будет один — уменьшение поведенческих факторов.
Если вы, напротив, зададите слишком маленькую ширину, особенно если будет слишком маленькой контентная часть, то, опять-таки, ваш сайт вновь будет смотреться несуразно и некомфортно. Попробуйте проверить сайт в разных разрешениях и сами в этом убедитесь.
Итак, какой же должна быть ширина сайта в пикселях?
Рассчитываем оптимальный вариант
Для того, чтобы правильно ответить на этот вопрос, нужно обратиться к статистике.
Для моего проекта на момент написания статьи сервис Liveinternet выдавал такую статистику (показаны строки, имеющие долю в статистике более 5 процентов):
- 1366×768 — 23.7%
- 1280×1024 — 15.1%
- 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.
Читайте также: Как сделать тег пробела в HTML?
Почему часто используется 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 как максимальную ширину вашей страницы.
Какую ширину выбрать для сайта?
Привет друзья! Сегодня мы затронем очень важные темы при верстке сайта:
1. Какую ширину использовать для создания сайта?
2. Как «резина» может испоганить вам жизнь?
3. Какая ширина будет самой лучшей для контента?
Эти темы очень важны, так как затрагивают святая святых – юзабилити вашего сайта. Уже давно не секрет, что от юзабилити зависит многое, очень многое! Если юзабилити приблизительно равняется нулю – поздравляю дружище – ты в полной ..опе!
Почему так важно выбрать оптимальный размер страницы?
Юзабилити сайта влияет на много полезных факторов!
В первую очередь это твои посетители, если им на сайте будет не удобно – фиг ты кого заставишь зайти туда еще раз. Собственно, смысл тогда вообще надрываться? Если люди будут заходить, посидят пару секунд на сайте, пошлют все к «чертям подальше» и пойдут искать другой аналогичный ресурс.
Например, я делаю ИМЕННО так! Если мне что-то сильно мешает – я на таком сайте долго не засиживаюсь. И лучше найду другой ресурс с похожей информацией, но на котором мне будет удобно работать!
А еще, поисковые системы тоже начали учитывать юзабилити сайта, и если оно «ниже плинтуса», ну или чуточку выше . В общем, если не на должном уровне, то такой сайт будет автоматически понижаться в выдаче (
Конечно, юзабилити зависит не только от ширины сайта, есть еще ряд других, тоже очень важных факторов. Но ширина сайта играет очень большую роль, впрочем, как и «резина» и ширина контента.
Сейчас даже есть специальные люди — аудиторы. Которые проверяют твой сайт на предмет юзабилити.
Пофессионалы своего дела, например как здесь:
http://sitepolice.ru/e-store/audit-saita/
Могут спокойно брать деньги за свои услуги и зарабатывать на этом.
При том, что результат, который вы получите — намного привысит оплату за услугу 😉
И так, давай лучше обо всем по порядку.
1. Оптимальная ширина сайта.
Здесь все зависит далеко не от дизайна, или скажем тематики сайта, все намного проще. Все зависит от ширины экрана монитора посетителей твоего сайта. В чем же здесь может быть загвоздка? На самом деле все очень просто.
Если у человека, твой сайт не влезает по ширине в экран монитора, то автоматически ощущается дискомфорт. Ну а если не влезает содержимое контента – тогда вообще беда. Ведь твоему посетителю придется проматывать каждую строчку твоего текста.
А это любого дико напрягает, я точно знаю.
На момент написания этой статьи, общая статистика показывает, что у 20% пользователей нашего интернета экраны шириной 1152 пикселя и меньше (я в ливинтернете подсмотрел ). Причем основная масса из них приходится на расширение 1024х780 пикселей.
У меня даже в статье – «Как создать второй сайдбар в шаблоне Default?», в комментариях разгорелся спор с одним из моих посетителей. Где я красочно описал статистику своих сайтов и статистику сервиса LiveInternet в целом.
Т.е. всё, что шире 1024 пикселей, не будет влазить у таких посетителей в экран монитора и им придется делать горизонтальную прокрутку. В этом случае даже самый добрый посетитель не выдержит долго таких пыток, и уже через пару минут пошлет тебя, вместе с твоим гребаным сайтом к чертовой бабушке.
Обидно, не правда ли?
Поэтому, на данный момент, оптимальной рабочей шириной для сайта считается 1000 пикселей + 24 уходит на полоску вертикального скролла.
Если брать меня, то я в последнее время стараюсь делать сайты шириной где-то в 960 – 980 пикселей.
Думаю, с этим все понятно, теперь перейдем к еще одному «монстру», которого почему то очень часто любят юзать молодые (неопытные) вебмастеры.
2. Как может твоему проекту подос..ать резина?
Для тех, кто в танке:
Резина – это сайт с резиновой версткой, у которого может меняться ширина, в зависимости от ширины окна браузера.
Почему то многие новички липнут на резину, как мухи, на всем известную субстанцию. И если меня спросить, как я отношусь к сайтам с резиновой вёрсткой, то я отвечу очень кратко – никак.
Почему? Потому что такой сайт очень тяжело контролировать в плане юзабилити. Я выделил пару недостатков ниже, так что ты можешь прямо сейчас ознакомиться с ними и сделать свои выводы:
1. Разные размеры.
Это основной недостаток таких сайтов, из которого вытекают все последующие. Заключается он в том, что на мониторах с разным разрешением – эти сайты будут смотреться по разному. А от этого очень многое зависит.
И если на 17-дюймовом мониторе сайт смотрится на ура, и содержимое его контента тоже. То на мониторе в 22 дюйма, все может преобразиться до дикой неузнаваемости.
И очень часто не в лучшую сторону!
Например на большом мониторе картинка уже может не обрамляться текстом, или какая-нибудь часть сайта неожиданно переедет жить в другое, совсем не предназначенное ей место.
2. Слишком узко.
Многие забывают на таких сайтах выставлять минимальную ширину.
А это значит, что если я сделаю окно браузера не на весь экран, а допустим шириной только на третью часть, то высота сайта может достичь нескольких километров, и вместо нормального текста, твои посетители увидят перед собой километровую ленту совершенно нескладных стишков, и совершенно не стишков.
А если используется еще и картинка, которая не влезает по ширине, тогда она выползает за края сайта – смотрится ужасно.
Очень часто в таких случаях сайдбар сползает под контент, или наоборот. Хорошего мало…
3. Слишком широко.
А вот вам и обратная сторона медали. Когда сайт на всю ширину 22 дюймового монитора, строчки текста растягиваются до неимоверной длинны.
Читать такой текст очень неудобно!
Особенно, если абзац большой и в нем сразу несколько строк. Велика вероятность того, что Ты просто можешь сбиться и потерять строку. Да и отвлечь тебя могут в любой момент, а потом поди и сыщи, где ты, елки-моталки, остановился читать.
Так что заруби себе на носу еще раз:
Читать тексты в длинных строчках– совершенно неудобно.
В принципе, это основные мои доводы против резины, проблем с ней много, и сделать толковое наполнение получается крайне редко. Что ни есть гуд!
Ну и третий момент правильно-юзабельной (такого выражения нет, но вы меня поняли ) ширины:
3. Оптимальная ширина для контента
Контент, это, собственно говоря, то, ради чего приходят на твой сайт посетители. Ведь в нем содержится вся основная информация сайта.
И его ширина играет тоже очень важную роль!
Если твой контент будет слишком узким, то в него не получится вместить нормальные картинки, а если слишком широким, то будет неудобно читать, так как можно сбиться.
Так какова же оптимальная ширина для контента?
Я тоже когда то задавался этим вопросом, и как-то читая одну замечательную книгу, а я вообще люблю почитать именно книги, понял – вот она – оптимальная ширина для контента!
Ширина обычного листка книги.
Если внимательно присмотреться, то ширина листа в большинстве книг будет соответствовать в среднем ширине в 500 – 650 пикселей. И с тех пор именно такой ширины я и придерживаюсь.
Я точно знаю, что не за горами времена, когда переведутся мониторы с маленьким разрешением экрана. Возможно, через два или три года минимальным по стандарту будет идти разрешение в 1280 пикселей шириной, а в будущем и еще больше. Фиг его знает, я же тебе все таки не гадалка.
Но я точно знаю одно: ширина контента на моих сайтах не изменится! Она всегда будет идти в радиусе 500 – 650 пикселей. И даже если в будущем мои сайты станут чуточку шире, то только за счет сайдбаров и отступов.
И так, на этой прекрасной ноте я хочу с тобой, мой дорогой друг проститься. Теперь ты уже знаешь один из многих шагов по повышению юзабилити сайта. И советую ей не брезговать.
Ведь от юзабилити зависит ранжирование сайтов в поисковой выдаче. Да и не это главное.
Главное, что бы твоему посетителю было на твоем сайте комфортно и удобно.
И ему снова и снова хотелось приходить к тебе на сайт за порцией свежей и полезной информации!
С респектом, Серёга.
Не забудь оставить свое мнение по этому поводу.
ЗЫ: тех, кто не нажмет на одну из кнопок ниже – найду, и лично дам в глаз! Я вас тоже очень сильно люблю
Стандартная ширина сайта в пикселях
Существует ли общая ширина сайта, которую принято использовать? Тогда сколько она составляет? Присутствует ли специфика в разных проектах? Подобные вопросы неоднократно можно услышать, а сейчас хочется ответить на них, исходя из приобретенного опыта и большого числа прочитанной в сети информации.
Если у вас возникал или сегодня возникает подобный вопрос, то это говорит о том, что вы движетесь в верном направлении. Ведь в реальности ширина страницы на сайте обладает важным значением в его оформлении.
Если ширина, которую вы выбрали, будет больше, чем разрешение дисплея у посетителя, то страница сайта не сможет полностью поместиться, возникнет горизонтальная полоска прокрутки. В итоге, пользователь не сможет увидеть часть предлагаемой информации или же, ему станет весьма некомфортно взаимодействовать с вашим ресурсом. Результатом будет ухудшение поведенческих факторов.
Если же наоборот, и вы сделаете минимальную ширину, в особенности, если часть, где контент, станет очень маленькой, то сайт снова будет иметь несуразный и некомфортный вид. Вам следует осуществить проверку сайта в различных разрешениях и вы сами сможете убедиться в этом.
Рассчитываем оптимальный вариант
Необходимо рассчитать оптимальную версию. Для однозначного ответа на данный вопрос нужно исследовать имеющуюся в настоящее время статистику. В момент написания данной статьи присутствовала следующая статистика:
- 1366×768 — 23.7%
- 1280×1024 — 15.1%
- 1024×768 — 14.7%
- 1280×800 — 9.5%
- 1920×1080 — 8.4%
- 640×480 — 6.2%
Из предоставленных показателей очевидно, что большее число пользователей использует мониторы с разрешением, начиная от 1280 пикселей и заканчивая более высокими показателями. Но следует сфокусироваться на строке, которая выделена жирным шрифтом. Отображенные в ней данные есть у каждого шестого или седьмого пользователя — это довольно высокий процент, требующий внимания.
Поэтому ширина сайта должна быть не больше 1024 пикселей, в противном случае, каждый шестой посетитель не будет испытывать удобств при использовании вашего проекта.
Но 1024 px — это разрешение самого монитора, хотя параметры страницы гораздо меньше в браузере, потому как, частью дисплея поглощает полоса прокрутки. Из этого следует, что страничка обязана быть не больше 1000 пикселей. Довольно часто клиенты или дизайнеры берут запасные 20 пикселей и создают сайт на 980 пикселей.
Итак, самая оптимальная ширина – это 980-1000 px.
Почему часто используется 960?
По какой причине часто используется 960? Если вы присмотритесь к шаблонам для WordPress, то сразу же увидите, что множество из них заточено на 960 пикселей. Не стоит отказываться от лучшего варианта. Надо заметить, что 960 является математически «удобным числом», потому как делится на такие числа, как шесть, восемь, двенадцать и т.д.
Это весьма удобно для того, чтоб создавать дизайн «сетке» — то есть, в ходе создания макета он делится на шесть, восемь и двенадцать частей, а блоки макета располагаются по данным линиям. В итоге выходит симметрично и привлекательно.
Если вы разрабатываете дизайн с самого начала и желаете, к примеру, чтобы контентная часть достигала 600 пикселей, то вовсе не обязательно подстраиваться под 960 пикселей.
Осторожность с резиновым макетом
Резиновый макет в определенном смысле разрешает упомянутую выше проблему. Это когда ширина страницы способна растянуться под ширину экрана и потому учтены предварительно все версии дисплеев.
Но данный макет – это своего рода зло, потому как на дисплее с наличием разрешения больше, чем 2000 пикселей, имеющийся текст станет вытянутым. В итоге получатся длинные строки, весьма сложные для восприятия и чтения.
Представьте себе, что вы занимаетесь чтением книги со строкой около семьдесят сантиметров длины. Удобно вам будет читать ее? Скорее всего нет, ведь средний формат книги предполагает не больше 60-80 символов на строке. Именно поэтому, подобная технология создания сайта не приемлема.
Если вы создаете резиновый макет, то вам стоит позаботиться о посетителе — поставить ограничение, примерно 1200-1300 пикселей максимальной ширины страницы.
Ширина сайта удобная для всех
Многие веб мастера и верстальщики задаются вопросами: какая самая оптимальная ширина страниц сайта и что выбрать: резиновую верстку или фиксированную ширину.
И большинство все-таки выбирают наиболее распространенную фиксированную ширину 960px (более распространена в англо-язычном интернете), у нас же чаще всего встречается ширина в 980px.
Моя статистика Google Analytics показывает что только 18% посетителей моего блога имеют разрешение экрана меньшее или равное 1024px, а соответственно 82% — 1280px и более, из чего можно заключить, что возможно уже пора пересмотреть наши привычные стандарты ширины сайтов и делать их хотя бы на порядок шире: для мониторов с разрешением 1280px.
Мне то наверно действительно пора сделать шаблон пошире, ну или хотя бы добавить еще один лист стилей для широких мониторов.
В идеале для того чтобы сайт был удобен любому пользователю вне зависимости от величины разрешения его экрана, его ширина а соответственно высота и размер элементов на странице должен изменяться в зависимости от разрешения экрана и размера окна браузера.
Под эти требования подходят сайты с растягивающимися «резиновыми» макетами, но как мы уже выяснили в предыдущей статье, что резиновая верстка хуже фиксированной ширины шаблона вследствие сложности самой верстки и сложностях в использовании графического дизайна.
Поэтому фиксированная ширина страниц самая удобная — и с моей точки зрения все-таки самый лучший и оптимальный выбор для сайтов.
Самая оптимальная ширина сайта
Как выбрать оптимальную ширину для сайта
Чтобы выбрать оптимальную ширину для вашего сайта можно воспользоваться статистикой посещений пользователей и установить фиксированную ширину под самое распространенное разрешение.
Кроме этого, для пользователей мобильных телефонов и для пользователей с другими разрешениями можно подключить отдельные стили для изменения ширины сайта.
Изменяемая ширина сайта в зависимости от разрешения экрана лучше фиксированной
Чтобы ваш сайт был еще более дружественным пользователям можно так-же изменять ширину сайта в зависимости от ширины экрана (разрешения) пользователя .
Изменение ширины сайта возможно в случаях если:
- Сделать сайт резиновым: минимум графики, текст и все размеры указать в процентах.
- При помощи javascript определять разрешение экрана и подгружать соответствующие ему стили.
- Используя параметры @media с указанием max-width и min-width и определив отдельные стили для каждого разрешения.
Главное не забудьте при изменении ширины при помощи стилей должны изменяться и размеры графических элементов страницы, поэтому под каждое разрешение вам придется создавать отдельную копию дизайна.
Оптимальная ширина сайта и разрешение монитора
23 июня 2014, 04:08 | Радислав | Работа с клиентами |Многие задаются вопросом, какая всё же ширина сайта самая оптимальная подо все разрешения экрана. Из собственного опыта могу сказать, что этот вопрос легко решается выбором полурезиновой вёрстки.
Полурезиновая вёрстка отличается от фиксированной и резиновой тем, что есть минимальная и максимальная ширина сайта которую вы задаёте. Это даёт возможность ограничить растяжение сайта на больших мониторах, и он будет выглядеть достаточно хорошо, и предотвратит появление горизонтальной полосы прокрутки при маленькой ширине.. Это касается неадаптивного дизайна, которому эти вопросы не относятся, адаптивный дизайн учитывает все разрешения ,и это отдельная тема.
Итак, у нас отрисован макет (не адаптивный) . Показываем макет заказчику, например обычного разрешения 1024 px.
Чтобы избежать трудностей, в случае, если мы не знаем какое разрешение нужно клиенту( мало ли, забыли спросить и тд и тп, хотя это недопустимо, но человеческий фактор всегда есть, а значит и ситуации могут быть разные, но вообще, конечно, этот момент обязательно нужно выяснять при составлении тз), стоит отрисовывать макет с учётом его растяжения хотя бы до 1400 рх., что бы при вёрстке не возникло сложностей.
Минимальную ширину мы поставим 960 пх. ( у разработчиков бытует своё видение этих размеров, в данном случае это наше мнение, основанное на собственном опыте).
Когда заказчик просит в брифинге сделать фиксированную вёрстку 1024рх., Вы все равно отрисовывайте с учётом растяжения на ширину больше заданной, а верстальщик сделает полурезиновую вёрстку, просто зафиксировав ширину на этой ширине которую попросил клиент.
При этом постарайтесь пояснить клиенту (покажите примеры), как будет выглядеть фиксированный сайт на мониторе с разрешением 1900 рх. и выше.
Ведь очень часто увидев на широкоформатном мониторе сайт, заказчик приходит к вам: «Ааааа, спасите!!!! Моего сайта тут не видно!!»
Вот тут-то и спасёт сделанный сайт с учётом полурезиновой вёрстки.
Вам достаточно лишь указать минимальную и максимальную ширину и — о чудо, клиент смотрит на вас, если не как на спасителя, то очень благодарными глазами. Все довольны и счастливы, заказчик- что денег больше платить не надо, вы- что как обычно оказались правы, и какой же вы молодец, что предусмотрели такое развитие событий + облегчение, что все обошлось малой кровью, что не надо переделывать дизайн и переверстывать сайт, а потом убеждать клиента, что эта работа должна быть оплачена)
Перед началом работы над проектом желательно поставить в известность клиента, как сайт, который он хочет, будет смотреться на распространённых мониторах. Это поможет клиенту определится с желаемой шириной и вёрсткой сайта.
Бывают случаи, когда клиент настаивает вопреки всем аргументам например на фиксированной ширине сайта 960 рх., тогда в этом случае, чтобы как то уменьшить эффект пустоты в мониторе есть выход, например использовать графику (картинка, текстура) на фоне сайта в ширину 1400 – 1900 с плавным полупрозрачным переходом картинки на фон. Такой вариант будет как то компенсировать пустоту экрана графикой.
Как вариант: тоже, по моему личному мнению, достойный выход.
Также не забывайте выяснять в брифинге разрешения мониторов, для которых будут показываться отрисованные макеты (для резиновой и полурезиновой верстки).
Если клиент настаивает на отрисовке макета не для одного разрешения, а нескольких, например на 960/1280/1920 рх., это нужно учитывать в бюджете и сроках разработки макетов.
Советую рекомендовать клиенту полурезиновую вёрстку и на основе этого отрисовку макетов с её учётом.
Минимальная ширина сайта, как правило, 960/980 рх., максимальная 1680 рх
(на данный момент развития технологий)
Понравилась статья? Поделись с друзьями:Считаем ширину экранов у посетителей сайта / Хабр
Вступление
Недавно обсуждал с девушкой-дизайнером, под какие же размеры экрана стóит рисовать сайты. Аргументы наши были, мягко говоря, необоснованными:
— У меня сайт на домашнем компьютере слишком широкий, надо сделать под широкий экран.
— Надо делать под маленькие экраны. Куча народа лезет в Интернет с мобильных устройств. Больших мониторов нет почти ни у кого.
— Да куча народу с такими мониторами! У всех моих знакомых мониторы большие.
— Да у тебя знакомые — дизайнеры да фотографы. А у народа таких мониторов нет!Понятно, что нужны были более веские аргументы — пора обратиться к статистике.
Подсчёт
Существует некоторое количество сайтов, предоставляющих доступ к собранным данным о своих посетителях. Один из таких сайтов — бывший SpyLog, а ныне — Openstat, выдающий и отчёт о разрешающей способности экранов. Данные там, на первый взгляд, не очень полезны: знание того, что самое популярное разрешение — 1366×768 — встречается у 19 процентов посетителей, мне мало поможет. Но мы можем получить эти данные в виде отдельного файла, который можем обработать. Доступны 4 формата — PDF, XLS и два текстовых: CSV и Tab separated, названный здесь tsv, который мы и возьмём.
Бóльшая часть файла — строки вида
1366x768 4097016,19 18,43 % 263923118 1147661296wget 'https://www.openstat.ru/rest/v0.3/ct:openstat:trends/display/columns/20120820-20120920?column=0%0Dvisitors_sum_average&column=0%0Dvisitors_sum_average_verticalpercent&column=0%0Dsessions_sum&column=0%0Dpageviews_sum&primary_column=0&view_id=1810&format=tsv' -O - \
| perl -nlaF'\t' -MList::Util=max \
-e '$F[0]=~s/x.*//||next;$sum{$F[0]}+=$F[4];END{for$k(0..max(keys%sum)){print"$k\t$sum{$k}"}}'
Получим такой список пар ширины и суммарного количества посетителей:
0 1 445931 2 3 4 5 6 7 8 9 10 29183 11 ...
Понятно, что учитывать все возможные значения ширины смысла нет — надо оценивать диапазоны значений. Посчитаем сумму количества посетителей, имеющих определённую ширину экрана, с количеством посетителей, обладающих экранами меньшей ширины. Можно сделать это в каком-либо офисном пакете (в моём случае — LibreOffice), в нём же можно сразу построить график. Получившаяся таблица с графиком — ge.tt/9iHIH8O (110 килобайт).
Слегка приукрасим график — добавим метки популярных значений:
Некоторые выводы
- По состоянию на сентябрь 2012 года наиболее популярная (29 %) ширина — 1280 точек, кроме того, чуть более половины посетителей имеют мониторы с шириной, не превышающей 1280 точек. С другой стороны, количество людей с большими мониторами, шире 1280 точек, тоже весьма велико и приближается к половине.
- Другие широко распространённые значения — 1366 (19 %), 1024 (13 %), 1920 (10 %).
- Более 80 % посетителей сайтов обладают экранами шириной до 1600 точек. Экраны шире 1920 точек ещё весьма редки — их доля составляет примерно четверть процента.
- Ширина «почти 800 точек», которая была популярна у веб-дизайнеров лет 10–15 назад, сейчас встречается примерно в пяти процентах случаев, да и то, бóльшая их часть — это мобильные устройства.
- Исходя из того, что доля браузера Opera Mini некоторыми счётчиками (например liveinternet.ru) оценивается более чем в 12 процентов (openstat оценивает её гораздо скромнее — 3,75 %), можно предположить, что доля мобильных устройств и, как следствие, маленьких экранов, всё-таки выше, чем на этом графике. Похоже, устройства с Оперой Мини просто не попадают в статистику — в ней несколько лет назад не было JavaScript.
Какой ширины делать сайт? И на чем? — Хабр Q&A
На сайте будет несколько разных разделов, таких как личный кабинет и магазин. Личный кабинет продавца будет на весь экран (100%), и там будет статистика, отчетность и т.д.
Сам же магазин — это другой вопрос. Учитывая специфику товара, контент блок должен быть как можно шире. Вот прям на сколько это возможно. Но так же на сайте будет два сайдбара. Слева и справа от контент-блока. Мобильную верстку не берем в расчет, там будет другой принцип взаимодействия.
Смотря статистику по мониторам, понимаю, что сбрасывать со счетов мониторы менее 1280 не вариант. Их еще очень много. Но я бы хотел только центральную часть сделать более 800 пикселей. И при таком размере центра сайдбары просто не поместятся.
Как я понял, стандарт сейчас 1440 для «широких» сайтов (тостер, вот, например). Соответственно, буду отталкиваться от этого разрешения. Но остается вопрос о том, как это сделать для мониторов поуже. «ужать» сайдбары не получится. Там будут жесткие размеры элементов. Остается ужимать контент по центру? Для мониторов менее 1280 думаю ужимка не вариант, будет очень узко. Остается сделать какой то из сайдбаров «сворачивающийся» (на одном будет меню, думаю его можно будет потеснить немного, убрав остальное). Или может есть какие то варианты получше, что бы не «ущемлять» старые мониторы?
Так же интересует фреймворк под адаптив этого всего. Бутстрап, как я понял, все, что более 1200, уже считает «большим» и дальше не понимает. Соответственно, надо что то, что способно работать с экранами до fullhd хотя бы (задел на будущее). Можете что либо порекомендовать? Желательно с хорошей документацией и поддержкой и универсальное. Так как проект не на один год.
- Вопрос задан
- 273 просмотра
 | добавить для сравнения SitePoint: стать лучшим веб-разработчиком sitepoint.com SitePoint.com — SitePoint — это естественное место для развития вашего онлайн-бизнеса с огромным разнообразием руководств и статей по веб-дизайну в сочетании с живым и хорошо информированным сообществом | 1 |
 | добавить для сравнения User Experience ux.stackexchange.com | 21 |
 | добавить для сравнения Dallas Digital Agency :: JDM Digital jdm-digital.com JDM Digital — это рекламное агентство Dallas Digital, специализирующееся на B2B.В то время как большинство цифровых агентств предлагают показы или отдельные результаты, мы вызываем реакцию. | 0 |
 | добавить для сравнения Stack Overflow stackoverflow.com | 11 |
 | добавить для сравнения Форумы и ресурсы Cre8asite по поисковой оптимизации, удобству использования и веб-дизайну cre8asiteforums.com . Форум Cre8asite содержит советы экспертов по поисковой оптимизации, удобству использования, веб-дизайну, проверке качества и многому другому от лидеров в этих областях. | 0 |
 | добавить для сравнения Веб-дизайн — HTML XML — Веб-разработка — Веб-дизайн webdesign.about.com Веб-дизайн и HTML — все для создания отличного веб-сайта. Используйте веб-разработку и дизайн веб-сайтов для создания веб-сайтов, к которым клиенты возвращаются снова и снова. На этом сайте вы узнаете основы веб-дизайна, HTML, XML и веб-разработки. | 2 |
 | добавить для сравнения Современный дизайн веб-сайтов — расширенный CSS и стандартный веб-дизайн Доступный веб-дизайн измененных впечатлений.com Современный дизайн веб-сайтов — специализируется на веб-дизайне для малого бизнеса и услугах Joomla. Удобные для пользователя и кросс-браузерные веб-сайты, ориентированный на клиента контент, простая в использовании навигация, доступный контент и CSS XHTML. | -1 |
 | добавить для сравнения WikiAnswers — The Q&A wiki wiki.answers.com WikiAnswers: вопросы и ответы сообщества | -3 |
 | добавить к сравнению Интернет-маркетинг, поиск и социальные сети | Блог маркетинговых технологий marketingtechblog.com В блоге Marketing Technology обсуждаются последние новости, передовой опыт, продукты и услуги для интернет-маркетинга, маркетинга в поисковых системах, маркетинга в социальных сетях, мобильного маркетинга и т. д. | -8 |
 | добавить к сравнению Ron The Website Guy | Веб-дизайн в Гонолулу, Гавайи, ronswebsite.com Веб-дизайнер-фрилансер в Гонолулу, Гавайи. Редизайн, электронная коммерция, WordPress, Zencart. | 0 |
Как получить оптимальный размер изображения для Интернета [обновление 2018] · Блог Raygun
Как дизайнеры и разработчики, мы хотим, чтобы изображения на нашем веб-сайте были самого высокого качества и каждый раз казались кристально чистыми для конечного пользователя, независимо от устройства. Находясь в пространстве Real User Monitoring, мы часто получаем вопросы об оптимальном размере изображения для вашего веб-сайта.
Конечная цель здесь — обеспечить неизменное качество изображения и время загрузки для нашего конечного пользователя независимо от устройства.
Итак, имеет смысл начать с ваших конечных пользователей, не так ли?
Raygun позволяет с легкостью обнаруживать и диагностировать ошибки и проблемы с производительностью в вашей кодовой базе
Добавление Raygun в ваше программное обеспечение займет несколько минут. Получайте уведомления о проблемах, с которыми сталкиваются конечные пользователи, и повторяйте проблемы в 1000 раз быстрее, чем при использовании журналов и неполной информации от пользователей. Узнайте больше и попробуйте Raygun бесплатно в течение 14 дней .Создание оптимального размера изображения для вашего сайта
В Raygun мы считаем, что оптимизация полосы пропускания вместо размера изображения делает ваш веб-сайт более согласованным для конечных пользователей и дает вам возможность более точно оценивать качество обслуживания клиентов.
На самом деле трудно добиться наилучшего размера изображения, если мы сосредоточимся только на размере. Как известно, одно и то же изображение может загружаться с разной скоростью в зависимости от многих переменных.
Хотя, как веб-профессионалы, мы хотим представить наши самые лучшие изображения, Надав Соферман, пишущий для Smashing Magazine, говорит, что «предоставление изображения самого высокого разрешения для всех пользователей» является ошибкой.
Он говорит:
«Владельцы веб-сайтов хотят, чтобы их сайт выглядел идеально на современных устройствах с высоким разрешением.Часто разработчики предоставляют всем одинаковую версию каждого изображения в высоком разрешении: все разрешения устройства, размеры окна браузера и соотношение пикселей устройства (DPR). ”
Надав Соферман
Итак, вместо того, чтобы просто отбрасывать произвольное значение и говорить, что оно слишком велико для изображения, я хочу углубиться в детали. Фактически, вы можете создать эти значения для себя, используя пропускную способность вашего клиента в качестве ориентира для определения оптимального размера изображения для вашего веб-сайта.
Таким образом, вы гарантированно предоставите своим конечным пользователям наилучшие возможности для каждого устройства.
Как определить идеальный размер изображения с использованием полосы пропускания
Первым шагом всегда является сжатие / gzip / и прогон изображений через обычный процесс оптимизации перед их использованием в Интернете. Немного пожертвовать качеством ради изображения ¼ размер определенно того стоит в долгосрочной перспективе!
Однако после оптимизации ваши изображения могут по-прежнему загружаться медленно для некоторых пользователей, что приводит к увеличению пропускной способности.Нет смысла иметь веб-страницу с мегабайтами изображений, когда ваша целевая аудитория подключена к 2G-соединению.
Оптимизация времени загрузки для всех посетителей, независимо от скорости соединения, является хорошей практикой. Аудитория каждого веб-сайта различна, поэтому один размер не подходит всем.
Сначала поймите свою аудиторию, а затем оптимизируйте.
Как рассчитать размер изображения в зависимости от пропускной способности
Большинство статей согласны с тем, что время загрузки в 3 секунды слишком велико, поэтому давайте стремимся к времени загрузки ~ 3 секунды.
Я просто собираюсь использовать скорости, предлагаемые опциями регулирования сети Google Chrome для разнообразия:
- 2 г: 0,25 Мб / с
- 4g: 4 Мбайт
- Dsl: 2 МБс
- Wi-Fi: 30 Мбит / с
Теперь у нас есть скорости. Затем нам нужно найти общий размер страницы, чтобы получить оптимальный размер изображения для вашего сайта.
В 2015 году средний размер страницы составлял 2,3 МБ, что на 16% больше, чем в 2014 году.Следуя этой тенденции, можно с уверенностью сказать, что средний размер страницы в 2016/17 году будет около 2,7–3 МБ.
Если продолжить со средними показателями, процент изображений на каждой странице также увеличился с большой скоростью, достигнув 64% от общего размера страницы, состоящей из изображений в 2015 году, на 2016/17 год.
Я собираюсь увеличить это число до 70%, поскольку число из года в год неуклонно растет.
Сравнение скорости загрузки со средним размером страницы позволяет нам нарисовать картину общих целей, к которым нужно стремиться, глядя на общий размер файлов, доступных для выделения для изображений, — до точки.
Основываясь на темпах роста размеров страниц и процентной доле каждой страницы, состоящей из изображений, мы можем рассчитать доступную нам пропускную способность.
Это будет применяться к разным пользователям при определенных соединениях (с ограничением времени загрузки в три секунды).
Это позволяет пользователям с высокоскоростным соединением загружать сайты очень быстро. Это увеличивает количество, которое они могут загрузить за три секунды.
Поэтому, чтобы противостоять этому, мы собираемся ограничить страницы максимальным размером 3 МБ.
(Примечание: затраченное время не учитывает задержки запросов (TTFB), которые различаются в зависимости от типа подключения.)
Время скачать 3мб по подключению
Пользователи с медленным подключением по-прежнему будут испытывать медленную работу, если вы им не поможете. Найдите время, чтобы понять вашу аудиторию здесь.
Основываясь на наших расчетах, мы можем определить, сколько каждый тип соединения может загрузить за 3 секунды:
- 2 г = 0.75 МБ / 3 с
- 4g = 12 МБ / 3 с
- DSL = 6 МБ / 3 с
- Wifi = 63 МБ / 3 с
Если у ваших пользователей медленное соединение, страницы не могут быть очень большими, если вы хотите, чтобы они загружались менее чем за три секунды.
Если у ваших пользователей медленное соединение, страницы не могут быть очень большими, если вы хотите, чтобы они загружались менее чем за три секунды. Учитывая, что размер нашей страницы составляет всего 3 МБ, у нас есть достаточно места для перехода на некоторые из этих скоростей соединения.
Однако наша цель — максимально сократить время загрузки, поэтому я придерживаюсь ограничения в 3 МБ.
Если ваша аудитория не зацикливается на медленном соединении, вы можете попробовать поднять эту планку.
Ограничения размера страницы на основе подключений
Единственное затронутое соединение — соединение 2G. Если бы ваши клиенты были в этом соединении, чтобы загрузить страницу менее чем за 3 секунды, вы бы хотели уменьшить общий размер страницы до 0.75 МБ в этом случае всего 0,525 МБ (525 КБ) изображений.
Знай своих пользователей!
Мы можем использовать приведенные выше расчеты в качестве руководства, чтобы учесть пропускную способность вашего конечного пользователя. Это дает вам гораздо более точный подход к повышению скорости загрузки страницы с помощью одной только оптимизации изображений. Оптимальный размер изображения для вашего сайта будет меняться в зависимости от ваших потребностей и со временем.
В конце концов, чем больше вы понимаете своих конечных пользователей и то, как они используют ваши приложения, тем лучше вы можете предоставить их! Нет необходимости в больших размерах изображений, чтобы замедлить работу вашего сайта.
Узнайте, где именно находятся ваши конечные пользователи, скорость их подключения и какие изображения замедляют работу ваших страниц с помощью платформы Raygun Software Intelligence — вы можете воспользоваться бесплатной пробной версией здесь
Попробуйте эти полезные инструменты, чтобы улучшить взаимодействие с пользователем
-Чувствительный генератор точек останова изображения
— Быстрое уменьшение размера файла изображения
-Raygun Мониторинг реального пользователя
Как ограничить ширину html-сайта?
Переполнение стека- Товары
- Клиенты
- Случаи использования
- Переполнение стека Общественные вопросы и ответы
- Команды Частные вопросы и ответы для вашей команды
- предприятие Частные вопросы и ответы для вашего предприятия
- работы Программирование и связанные с ним возможности технической карьеры
- Талант Нанять технических талантов
- реклама Обратитесь к разработчикам по всему миру
Размер ТВ в калькулятор расстояния и наука
Наука, лежащая в основе нашего калькулятора размеров телевизора и расстояния
Когда дело доходит до выбора телевизора, идеально подходящего для вашей комнаты, тем больше и больше лучше. Это не только самый большой фактор, влияющий на цену телевизора, но он также оказывает огромное влияние на воспринимаемое качество изображения.
Поле зрения
ТВ заполняющий 20 градусов поля зрения ТВ заполняющий 30 градусов поля зренияТак как сегодня найденные разрешения — это почти исключительно 4k / Ultra HD, требуется очень большой телевизор, который следует смотреть очень близко, чтобы увидеть недостатки, связанные с разрешением.Из-за этого можно оценить их телевизоры с гораздо более близкого расстояния для более полного погружения. Думайте об этом как о кинотеатре: чем больше телевизор заполняет ваше поле зрения, тем более захватывающим будет контент.
Это не значит, что вы должны сидеть в футе от телевизора. Не все предпочитают иметь максимально большой экран. Человеческая зрительная система имеет угол обзора около 135 градусов по горизонтали, и хотя для фильмов имеет смысл иметь такой большой телевизор, который вы можете получить, контент не создается для просмотра, заполняя все поле зрения.Это становится очень очевидным, если вы пытаетесь смотреть спорт с близкого расстояния, фиксируя при этом одну часть экрана, так как это становится довольно тошнотворным.
Руководство Общества инженеров кино и телевидения рекомендует сидеть на таком расстоянии, чтобы экран занимал около 30 ° поля вашего зрения как минимум для хорошего восприятия.
Чтобы использовать поле зрения в театральном стиле, нужно сесть поближе.Обычно это дает хорошее руководство, но пользователям, которые используют свои телевизоры в основном для просмотра фильмов, может быть полезно сесть немного ближе, чтобы получить больше похоже на театр.«Эталонное» положение SMPTE для кинотеатров и рекомендация THX — около 40 °. Минимальный угол обзора хорошо подходит для большинства случаев использования, и сидение на расстоянии, где экран заполняет 30 ° вашего горизонтального поля зрения, должно быть комфортным для большинства людей.
| Размер экрана | Рекомендуемое расстояние для смешанного использования (30 °) | Рекомендуемое расстояние кинотеатра (40 °) |
| 25 « | 3.4 фута (1,04 м) | 2,5 дюйма (0,77 м) |
| 30 « | 4,1 ‘(1,24 м) | 3 ‘(0,92 м) |
| 35 « | 4,8 ‘(1,45 м) | 3,5 дюйма (1,07 м) |
| 40 « | 5,5 ‘(1,66 м) | 4 фута (1,22 м) |
| 45 « | 6,1 ‘(1,86 м) | 4,5 дюйма (1,37 м) |
| 50 « | 6.8 футов (2,06 м) | 5 футов (1,53 м) |
| 55 « | 7,5 дюйма (2,28 м) | 5,5 ‘(1,68 м) |
| 60 « | 8,2 ‘(2,48 м) | 6 футов (1,83 м) |
| 65 « | 8,9 ‘(2,69 м) | 6,5 дюйма (1,98 м) |
| 70 « | 9,5 футов (2,9 м) | 7 футов (2,13 м) |
| 75 « | 10.2 ‘(3,1 м) | 7,5 дюйма (2,29 м) |
| 80 « | 10,9 дюйма (3,31 м) | 8 футов (2,44 м) |
| 85 « | 11,6 дюйма (3,52 м) | 8,5 дюйма (2,59 м) |
Угловое разрешение
Чем ближе вы находитесь, тем ниже будет воспринимаемая вами плотность пикселей.
Более высокое поле зрения впервые стало возможным с разрешениями Full HD, но 4k расширяет эту возможность еще больше.Если вы сидите рядом с телевизором с разрешением 1080p, вам часто кажется, что вы смотрите телевизор через ширму, даже если он воспроизводит высококачественный фильм с разрешением 1080p HD. Увеличивая расстояние от телевизора, вы также увеличиваете плотность деталей, обеспечивая лучшее изображение. Это угловое разрешение: количество пикселей на угол. Чем дальше, тем выше будет угловое разрешение.
Поскольку 4K-телевизоры имеют такую большую плотность пикселей, возникновение этой проблемы намного сложнее.Вы должны быть достаточно близко к довольно большому телевизору, чтобы он заметно раздражал.
Предел, до которого вы можете увеличить угловое разрешение, отступив, зависит от вашей остроты зрения. В какой-то момент вашим глазам становится недостаточно, чтобы различать все детали. Исследования показывают, что человек со зрением 20/20 (или 6/6 в Европе) может различить что-то на 1/60 градуса. Это означает 60 пикселей на градус или 32 градуса для телевизора 1080p. Телевизоры 4K UHD удваивают этот показатель до 64 градусов.Имейте в виду, что вы можете видеть один пиксель издалека (в зависимости от его контраста с остальной частью изображения).
Для 4k это расстояние часто слишком мало для большинства людей. Это связано с тем, что 1080p было разработано для логики поля зрения, описанной выше. Это точка отсечения, в которой встречаются как оптимальное поле зрения, так и 60 пикселей на градус. Для более низких разрешений это означало, что вы сидите немного дальше, чем хотелось бы, чтобы не замечать пиксели, разрешение 4k и выше дает вам гораздо больше свободы.Из-за этого острота зрения больше не лучший способ найти правильное расстояние, и вместо этого ее следует использовать как способ определить ближайшую точку, в которой вы можете сесть к телевизору, не затрагивая его ограничение разрешения.
График также показывает, что обновление 4k не стоит того, если вы сидите на расстоянии более 6 футов и имеете телевизор с диагональю 50 дюймов. Ваши глаза не заметят разницы. Ultra HD имеет смысл только в том случае, если вы действительно хотите большой экран и планируйте сидеть ближе к нему. Подробнее о 4k UHD.| Размер экрана | Оптимальное расстояние (1080p) | Оптимальное расстояние (4k) |
| 25 « | 3,2 дюйма (0,98 м) | 1,5 дюйма (0,46 м) |
| 30 « | 3,8 дюйма (1,16 м) | 1,7 ‘(0,52 м) |
| 35 « | 4,4 дюйма (1,35 м) | 2 ‘(0,61 м) |
| 40 « | 5.1 фут (1,56 м) | 2,3 дюйма (0,71 м) |
| 45 « | 5,7 ‘(1,74 м) | 0,8 м (2,6 дюйма) |
| 50 « | 6,3 дюйма (1,93 м) | 0,89 м (2,9 дюйма) |
| 55 « | 7 футов (2,14 м) | 3,2 дюйма (0,98 м) |
| 60 « | 7,6 ‘(2,32 м) | 3,8 дюйма (1,16 м) |
| 65 « | 8.2 фута (2,5 м) | 4,1 ‘(1,25 м) |
| 70 « | 8,9 ‘(2,72 м) | 4,4 дюйма (1,35 м) |
Как вы интерпретируете диаграмму?
Есть несколько способов прочитать диаграмму. Например, предположим, что у вас 50-дюймовый телевизор. Начните с 50-дюймового экрана внизу таблицы.До 3 футов вы находитесь ниже синей линии. Это означает, что вы можете видеть пиксели с разрешением Ultra HD. Если вы вернетесь немного назад (вверх по таблице), между 3 ‘и 7’, разрешение Ultra HD больше не имеет значения, потому что вы все равно не увидите лишних пикселей. Однако вы все еще слишком близки к разрешению 1080p (оно не будет казаться идеальным). Выше 7 футов воспринимаемое качество начнет ухудшаться для 1080p, потому что ваш глаз не будет видеть все детали. Вы бы заметили разницу, если бы было 720p.Для более чем 10 футов, неважно, 720p или 1080p HDTV, ваши глаза недостаточно хороши, чтобы увидеть разницу. Однако вы все равно увидите разницу для видео стандартного разрешения на расстоянии до 18 футов. Подводя итог, вы можете видеть пиксели, если вы находитесь ниже линии, но не когда вы находитесь выше.
Чтобы максимально использовать разрешение вашего телевизора, вы должны точно соответствовать размерам вашего телевизора и разрешению мультимедиа.
Артефакты сжатия
При этом учитывается идеальное разрешение, чего никогда не бывает в реальной жизни.Даже если вы смотрите канал HD, представленный в высоком разрешении, из-за алгоритма сжатия будут некоторые артефакты. Артефакты могут проявляться в нескольких формах, таких как шум, размытие или пиксельное изображение (см. Рисунок справа). Вы сможете видеть артефакты издалека, поэтому считайте, что приведенные выше цифры относятся к идеальным медиафайлам 1080p. Цифры показывают минимальное расстояние, на котором вы начинаете терять преимущество разрешения. Тем не менее, в настоящее время наиболее распространены телевизоры с разрешением 4K (см. Наши рекомендации по лучшим телевизорам с разрешением 4K), и мы рекомендуем использовать нашу диаграмму FOV, поскольку угловое разрешение практически не является проблемой для контента UHD.
Бюджет
Вы, наверное, сейчас думаете о чем-то вроде «Мой диван находится в 10 футах от телевизора, что, согласно диаграмме, означает, что мне нужен 75-дюймовый телевизор. Это безумие!». Да, если вы хотите в полной мере использовать возможности более высокого разрешения, это идеальный размер. Это подводит нас к главному ограничению для большинства людей: бюджету.
Цена телевизора экспоненциально зависит от его размера, как показано на графике. На графике показан ценовой диапазон светодиодных телевизоров 2016 года по их размеру.Как видите, переход к 70-дюймовому телевизору довольно большой. Например, посмотрите наши цены на лучшие телевизоры с диагональю 70–75 дюймов и лучшие телевизоры с диагональю 80–82–85 дюймов.
Заключение
Для смешанного использования рекомендуется угол обзора 30 градусов. В общем, мы также рекомендуем приобрести 4k-телевизор, поскольку выбор 1080p стал довольно ограниченным и в нем отсутствуют современные функции, такие как HDR. Чтобы легко определить, какой размер вам следует купить, вы можете разделить расстояние просмотра телевизора (в дюймах) на 1,6 (или использовать наш калькулятор размера телевизора выше), что примерно равно углу 30 градусов.Если лучший размер выходит за рамки вашего бюджета, просто купите самый большой телевизор, который вы можете себе позволить.
,