Какая стандартная ширина для сайта в пикселях или где статистика?

Стандартов нет, хотя большинство разработчиков предполагают стандарт 1024x768.

Существует система сетки CSS с именем 960grid, которая принимает ширину тела 960 пикселей, а затем разбивает столбцы на 96 столбцов с 10 пикселями или 80 с 12 пикселями.

Проблема в том, что экраны ПК становятся все больше и больше, медленно, в некоторых регионах, но есть.

С другой стороны, у тех-топов у вас меньше экранов на мобильных устройствах и нетбуках.

Иметь дело с этой реальностью может быть больно. На помощь приходит CSS Media Queries. Кроме того, вы можете использовать ссылку тега (с rel handheld) для предоставления альтернативной версии для мобильных устройств.

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

• http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
• http://www.alistapart.com/articles/responsive-web-design/
• http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-alternate
• http://dev.w3.org/csswg/css3-mediaqueries/

Какая стандартная ширина для сайта в пикселях?

Любое число больше 0 и меньше бесконечности.

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

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

Некоторые распространенные диапазоны ширины:

• очень маленький : 0-480
• маленький : 480-768
• средний : 768-1024
• большой : 1024-1200
• очень большой : 1200+

Эти диапазоны настолько распространены, что я бы сказал, что они практически стандартные. Не все диапазоны должны использоваться, например, сайт может иметь ширину жидкости для всего, что меньше 768, а затем фиксированную ширину и центрироваться для 768+.

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

где статистика?

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

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

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

Старая, устаревшая версия Pre-RWD ради потомства

Я удивлен, что никто не думал упомянуть размер браузера от Google .

Что касается стандартов:

80% зрителей могут обрабатывать ширину до 1000 пикселей, но те, которые могут обрабатывать ширину более 1000 пикселей, часто этого не делают. С широкоэкранными мониторами многие люди выровняют свои окна по половине экрана. Теперь, когда Win7 поддерживает drag-n-dock, вероятно, он станет еще более популярным.

Что касается высоты: ваше первое впечатление от пользователя находится вверху страницы примерно до ~ 600 пикселей. Однако большинство пользователей знают и ожидают, что контент упадет «ниже сгиба», и хотят и могут прокручивать его.

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

~ 960px имеет тенденцию быть стандартизированной шириной, но на самом деле это зависит от содержимого и стиля.

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

Как уже говорили другие, для такого типа вещей нет стандарта. Хотя, вот несколько советов, которые либо сделают, либо затормозят ваш сайт:

Я всегда использовал либо проценты, либо сборку наихудшего сценария: наименьшее разрешение экрана, которое вы обычно встречаете, составляет 800x600, и даже это редко. Все, что ниже, вероятно, на мобильном устройстве. Ширина в 775 пикселей - это хорошее средство для использования, или просто 80%, если вы точно знаете, что ваш веб-сайт все равно будет привлекателен, когда он будет уменьшен до большего экрана. Наиболее распространенная проблема заключается в том, что текстовое содержимое (при уменьшении ширины до 1600 пикселей) кажется пустым и коротким. Если ваш веб-сайт будет иметь ширину 775 пикселей, это будет исправлено, однако он может не очень хорошо выглядеть с огромным открытым пространством с обеих сторон.

НИКОГДА не заставляйте пользователей прокручивать влево или вправо. Отрезание содержимого сторон - самый быстрый способ потерять потенциальных клиентов или читателей.

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

И просто совет по содержанию; либо имеют высокую графику / низкую информацию или высокую информацию / низкую графику. Попытка объединить их обоих всегда выглядит ужасно.

Стандарт был бы «как можно шире / шире». Это зависит от экрана пользователя:

http://www.w3schools.com/browsers/browsers_display.asp

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

С января 2013 года.

1. 1366x768 25,4%

2. 1920x1080 11,0%

3. 1280x1024 9,7%

4. 1440x900 7,3%

5. 1280x800 8,2%

6. 1680x1050 5,7%

7. 1600x900 5,0%

8. 1920x1200 2,9%

9. 1360x768 2,1%

10. 2560x1440 1,1%

11. Другое 11,6%

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

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

Статистика варьируется от сайта к сайту в зависимости от типа трафика, который он получает, поэтому дизайн соответственно. Я сам предпочитаю текучие проекты с шириной в процентах, 1000 пикселей min-widthи разумной max-width.

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

Для справки я обычно принимаю минимум 1024x768 сейчас.

В любом случае вот некоторые из них: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php

Я думаю, это зависит от содержания сайта.

Например, если вам не нужна боковая панель и т. Д., И если вам нравится минимальный дизайн, вы можете установить ширину веб-страниц в 500 пикселей.

Так что я не верю (и не люблю) стандарт в отношении размеров веб-макета.

Максимально безопасным является 960 пикселей, так как он работает на экране 1024x768 и оставляет место для полосы прокрутки, а также работает на iPhone в ландшафтном режиме (потому что он удваивает свой экран 480x320 до эффективного 960x640 и не имеет полоса прокрутки).

Учитывая, что большинство современных широкоэкранных мониторов имеют разрешение «1440x900» или шире, я думаю, что ширина 1280 пикселей становится все более «стандартной», особенно когда речь идет об отображении изображений.

ПРИМЕЧАНИЕ. Ширина 1280 пикселей была шириной многих старых 17-дюймовых и 19-дюймовых экранов с соотношением сторон 4: 3.

960 пикселей - лучшая ширина для сайтов