Существует ли стандартный размер для ширины сайта в макете? Что это за размер? Зачем?

Я начинаю большинство своих макетов с ширины 1200 пикселей, хотя я проектирую для разрешения 1024 пикселей. Я установил направляющие внутри макета на 1000 пикселей. Высота может варьироваться. Причина, по которой я расширяю свой макетный файл, заключается в том, чтобы увидеть, как он выглядит, имея перед собой пространство для дыхания. Большинство людей используют более 1024 пикселей в эти дни.

Существует ли стандартная ширина для макетов веб-страниц?

Да нет наверное?

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

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

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

• текущая ширина экрана
• текущая высота экрана
• ширина устройства
• высота устройства
• ориентация устройства

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

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

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

Типичные точки останова для текущей ширины экрана и обычно:

_{единицы в px}

• 320
• 480
• 768
• 1024
• 1200
• 1600

Причина этих конкретных цифр довольно приземленная. Оригинальный iPhone имел экран с размерами 320 × 480; оригинальный iPad имел экран с размерами 768 × 1024; 1600 × 1200 характерны для больших разрешений экрана.

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

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

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

Ниже приводится более старая версия этого ответа, которую я храню для потомков, но в течение некоторого времени он не имел отношения к делу.

Я удивлен, что никто еще не упомянул это:

У Google есть хороший инструмент для разработки под названием

Размер браузера

Это должно в значительной степени ответить на ваш вопрос в одиночку.

У меня есть несколько заметок о текущих тенденциях:

В настоящее время подавляющее большинство пользователей имеют разрешение 1024х600 (планшет / нетбук) или более. Вы должны помнить, чтобы удалить 24pxполоски прокрутки, что оставляет хорошую ширину даже 1000 пикселей. Что касается высоты: веб-пользователи очень хороши в вертикальной прокрутке, поскольку они привыкли к колесам прокрутки на мышах. Начальная высота важна в основном для первых впечатлений.

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

Также многие пользователи с большими экранами не используют весь свой экран для своего веб-браузера. Особенно теперь, когда Windows 7 включает в себя простую функциональность drag-n-dock, чтобы перетаскивать окно на половину экрана.

В итоге:

• избегайте статической ширины более 1000 пикселей
• убедитесь, что ваше первое впечатление выглядит красиво в 1024x600
• не бойтесь бросать содержимое ниже сгиба.

Краткий ответ: 775x400 для 800x600, а для 1024x768 используйте 1000x500.

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

Если я не могу показать его на своем компьютере в зависимости от размера, я использую эти свои личные правила (не считайте мои измерения святыми, у каждого свои):

В качестве безопасного размера это хорошо оптимизировать для 800x600 (убирая скроллбард и верхнюю панель, я использую 775x400 как "выше линии"). Но в настоящее время с более дешевым экраном с более широким стандартом я начал проектировать для 1024x768 (1000x500)

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

ПРИМЕЧАНИЕ: я использую такую ​​низкую высоту даже на 1000 пикселей, потому что у людей, как правило, много дополнительных полос прокрутки в основном браузере (например, GoogleRank или закладки, и многие другие), поэтому мне всегда нравится проектировать в худших ситуациях.

Ps извините за мой плохой английский :)

У нас есть программа отслеживания, которая сообщает нам информацию о наших пользователях. Более половины находятся в 1024x768. Поэтому я использую это как «стандартный» размер монитора.

Однако это не ваша область для вашего сайта - у людей есть боковые панели, они не всегда открывают окно браузера на всю ширину и т. Д.

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

Я должен был бы искать статистику, чтобы поддержать меня (такой как это сообщение в блоге ТАК ), но 1024x768 взял или берет на себя в качестве стандартного общего знаменателя для разрешения экрана. Я разрабатываю веб-макеты для широкой аудитории шириной 1000 пикселей для учета полос прокрутки и границ окна с разрешением шириной 1024 пикселей. Для более конкретной аудитории Пекка прав в своем комментарии. Узнайте, что является нормой для целевой аудитории.

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

Если вы делаете сайт сайтом, то большинство компьютеров сегодня (большинство из которых составляет 90% или более) имеют минимальное разрешение 1024. Если вам нужно немного меньше компьютеров, но все же хороший процент, то 1200 также находятся в этом диапазоне.

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

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

Это полностью зависит от вашего сайта, как правило, я бы предпочел не использовать более 1000 для этих клиентов на старых машинах. Однако исследования показывают, что проектирование на 1200 сейчас приемлемо в мире дизайна, так что это определенно пища для размышлений.

Ваш план должен заключаться в том, чтобы достичь наименьшего общего знаменателя, и если это происходит с Джо Динозавром на компьютере Windows 95 с разрешением 800x600, то именно этого вам и следует уделить.

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

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

Ответ: нет, «стандарта» нет.

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

Я предлагаю вам использовать 1024px для стандартной ширины. Потому что максимальное количество компьютеров, построенных с монитором CRT и разрешение этого монитора составляет 1024 * 768 пикселей.