Стандартная ширина сайта: Оптимальная ширина сайта под популярные разрешения экранов (2020)

Содержание

Стандартный размер страницы сайта

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

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

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

До развития адаптивной верстки массовым явлением была разработка сайта с шириной в тысячу пикселей. Эта цифра выбиралась по одной простой причине – чтобы сайт помещался в любой экран. И в этом есть своя логика, но давайте предположим, что все же у человека как минимум HD-монитор на десктопе. В таком случае ваш макет будет казаться крошечной полоской в середине экрана, где все слеплено в одну кучу, а по бокам огромное незадействованное пространство. Теперь давайте предположим, что человек зашел на ваш веб-сайт с планшета с экраном 800 пикселей по ширине, причем в настройках стоит галочка «Показывать полную версию веб-сайта». В этом случае ваш сайт также будет отображаться некорректно, так как просто-напросто не влезет в экран.

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

Макеты на все случаи жизни

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

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

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

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

Из таблицы можно узнать, как определить размер сайта, который нужно использовать. Помимо этого, можно сделать вывод, что наиболее распространенным сегодня форматом является экран 1366 на 768 точек. Такие экраны устанавливают в бюджетные ноутбуки, поэтому их популярность закономерна. Следующим по популярности является Full HD-монитор, который является золотым стандартом для видеороликов, игр, а значит, и для создания макетов сайта. Дальше в таблице мы видим разрешение мобильных устройств 360 на 640 точек, а также различные варианты десктопных и мобильных экранов после него.

Проектируем макет

Итак, проанализировав статистику, можно сделать вывод, что оптимальная ширина сайта имеет 4 вариации:

  1. Версия для ноутбуков с шириной 1366 пикселей.
  2. Full HD-версия.
  3. Макет размером 800 пикселей по ширине для отображения на маленьких десктопных мониторах.
  4. Мобильная версия сайта – 360 пикселей по ширине.

Допустим, мы определились, какой необходимо использовать размер создаваемого исходника для сайта. Но такой проект все равно будет затратным. Так что рассмотрим ещё варианты, на этот раз без использования фиксированной ширины.

Делаем макет гибким

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

Что такое золотое сечение, и как его применить к верстке веб-страниц?

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

Ещё со времен античности была изобретена пропорция, которую наш глаз воспринимает как самую естественную и изящную, ведь она повсеместно встречается в природе. Открывателем формулы такого соотношения был талантливый древнегреческий архитектор по имени Фидий. Он рассчитал, что если большая часть пропорции относится к меньшей так, как целое относится к большему, то такая пропорция будет смотреться наилучшим образом. Но это в том случае, если вы хотите разделить объект несимметрично. Такую пропорцию стали позже называть золотым сечением, что все равно не переоценивает её значение для мировой истории культуры.

Вернемся к веб-дизайну

Всё очень просто – используя золотое сечение, вы можете проектировать страницы, которые будут максимально приятны человеческому глазу. Рассчитав по определению формулы золотого сечения, получаем иррациональное число 1,6180339887. но для удобства можно использовать округлённое значение 1,62. Это будет означать, что блоки нашей страницы должны быть 62% и 38% от целого, независимо от того, какой размер создаваемого исходника для сайта вы используете. Пример вы можете увидеть на такой схеме:

Используйте новые технологии

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

Как увеличить рабочее пространство сайта

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

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

Примером хорошего способа скрыть меню является следующий макет (фото ниже).

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

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

Лучший сайт – адаптивный

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

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

Чем отличается адаптивный дизайн от наличия разных версий у сайта

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

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

Более подробно узнать об адаптивном дизайне и его разработке вы сможете из учебников.

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

Разрешение экрана (монитора) – это размеры получаемого на экране изображения в пикселях. Например, разрешение экрана 1920 x 1080 означает, что ширина изображения на мониторе равна 1920, а высота 1080 пикселей.
Популярные разрешения мониторов (стационарные компьютеры и ноутбуки):
1920 х 1080 (full HD)
1600 х 900
1440 х 900
1366 х 768
1280 х 1024
1280 х 960
1024 х 600
Когда мы разрабатываем прототип для десктопа, то нам важно понимать, что мы не должны рисовать варианты для всех существующих компьютеров, нам нужно выбрать оптимальный размер макета сайта, который позволит отображать будущий сайт корректно на всех десктопах.
Универсальной шириной для прототипа на компьютер и ноутбук является 1920 пкс, также может использоваться ширина 1440 или 1280 пкс. Универсальной высоты нет, т.к. у каждого проекта она своя и зависит от количества разделов.

Когда мы создаем макет сайта шириной 1440 пкс, но открываем его на мониторе 1920 пкс, то по бокам появляются белые или серые полосы, которые заполняют пустое пространство. Если же мы создаем прототип шириной 1920 пкс, а открываем его на мониторе шириной 1440 пкс, то прототип (или макет) “обрезается” по бокам, и мы видим содержимое сайта только в пределах 1440 пкс. В таком случае дизайнеру нужно учесть следующий момент – важный контент (тексты, кнопки и небольшие фотографии) не должны выходить за пределы контейнера определенной ширины. За такую ширину чаще всего принимается значение 1170 или 940. Таким образом, дизайнер создает прототип (или макет) шириной 1920 пкс, но весь важный контент умещает на ширине 1170 или 960 пкс.

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

Вместо вступления

Любой макет создается с учетом определенных технических требований. Для макетов печатных материалов и макетов для сайтов они совершено разные. Многие начинающие дизайнеры не учитывают это и начинают творить, что душе угодно.
В этой статье я напишу как сделать все грамотно (и укажу частые ошибки), что повысит производительность у дизайнера и снимет головные боли frontend программиста.

Тезисы

Верстают в программах для верстки

Я часто слышу о том, что дизайн пытаются делать в photoshop’e.
Мне сложно понять откуда взялась эта тенденция. Во всех профильных вузах (ну на сколько я знаю) раскладывают все верно:

  • Для дизайна есть InDesign (ну или QuarkXPress).
  • Для рисования есть Illustrator (ну или CorelDRAW).
  • Для редактирования фотографий есть Photoshop. (ну Gimp и еще миллион программ). Ну и только в веб-дизайне он еще используется для сохранения картинок.

Одна из моих теорий на этот счет, это незнание заказчика. Думаю, что все рисуется в photoshop’e заказчик говорит «Мне нужен макет в psd, завтра в 6:34 и что бы от него пахло настоящим дизайном».
Не бойтесь объяснить заказчику, что макеты делаются не в photoshop’e и завтра ровно в 6:34 он получит макет в PDF.

Правильно создайте документ

При создании документа многие не читают диалог и сразу жмут «ОК». Но тут есть что настроить. Пример верной настройки:

Назначение: Web — Это переведет все размеры в пиксели. В вебе мы работает с ними и только с ними, никаких «подвинь на 1 сантиметр».
Размер страницы: 960 это стандартный размер. Если не уверены и в первый раз делаете веб-дизайн берите, не думайте. Но конечно он может быть любым. Главное правильно не забывать о том, что полоса прокрутки съест ширину, так что не берите ширину абсолютно равную какому нибудь разрешению экрана, берите немного меньше.
Ах и да, ширина должна быть кратной двум. Один раз я встретил сайт шириной 1227 пикселя.
Про сетку я расскажу в следующем разделе, ее всегда можно поменять в Layout->Margins and columns.

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

Используйте сетку

1 — margin, 2 — ширина колонки, 3 — gutter, 4 — стандартный отступ

Все размеры сетки должны быть целочисленными и желательно кратными двум.
Вот список параметров:

  • Ширина макета
  • Ширина внешних отступов (margin)
  • Число колонок
  • Отступы между колонками (Gutter)

Когда определились со всеми этими параметрами подставляем их в формулу
Ширина макета = margin*2 + x*Число колонок + gutter*(Число колонок-1)
Например для документа созданного выше в примере это будет
960 = 10*2 + х*6 + 14*5
х = 145
х (ширина колонки) получилась целочисленной, значит все в порядке, если нет, поменяйте отступы.

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

Так же на забудьте указать, как я называю его «стандартный отступ». Не нужен будет ломать голову какой отступ делать. Разумеется отступ может быть и двойным. А так же вертикальный отступ может отличаться от горизонтального.

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

Используйте функционал шаблонизирования

На сайтах различные элементы интерфейса и самое главное общий шаблон остается одинаковым на всех страницах.
Поэтому его надо хранить в master pages. Вопросов «а какая из этих страниц верный макет» больше не будет.

Тоже самое касается и цветов. Все цвета используем только через swatches. Это позволит не плодить кучу цветов и менять их везде одним кликом.

Учитывайте не статичность сайтов

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

Вы работаете с рыбой, реальные тексты будут другие

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

Подготовите материалы для верстки

Прежде всего спросите frontend программиста, какие элементы ему понадобиться в картинках.
Многие опытные дизайнеры уже знают, что это окошко программист нарисует border-radius’ом с box-shadow (я не говорю, что нужно знать названия свойств, просто со временем откладывается, что многие даже достаточно сложные фигуры и эффекты рисуются на css)
Но если вы новичок в этом дело спросите конкретно «что надо?».
Немного о сохранении картинок.
Все надо сохранять не просто через save в photoshope, а через save for web.
Небольшие элементы, элементы требующие прозрачность или содержащие шрифты сохраняем в png-24.
Графику, картинки и фоны jpeg. Следите за размером файла делайте максимально маленькими, пока визуально не сильно видно отличие.

Предоставьте список используемых цветов в HEX формате.

На забудьте дать все шрифты используемые в макете.

И наконец обсудите с программистом все устно, это полезно всем.

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

Размеры макета сайта при разработке адаптивного дизайна

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

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

Разрабатывая же макет будущего сайта в графическом редакторе (Photoshop) или сервисе (Figma), дизайнер не можем работать с диапазонами, ему приходится задавать жесткие размеры макета. Эти макеты веб-дизайнер создает с учетом минимального и максимального разрешения популярных экранов, которое определяет для проекта.

Для ПК версии возьмем разрешение 1920 px с контентной частью в 1280 px. Контентную часть можно сделать и больше, например 1440 px, или во всю ширину, если создается, например сервис или административная панель. На данный момент чаще используемый первый вариант. Для смартфонов самым минимальным разрешением считается 320 px. Таким образом, определили максимальное и минимальное разрешения. Далее нужно определиться с промежуточными разрешениями.

К таким разрешениям, относим планшет с горизонтальной и вертикальной ориентацией на 1024 и 768 px. А также макет для мобильных устройств на 480 px в горизонтальной ориентации. Если не создавать макет на 480, получается слишком большой диапазон разрешений попадающих между 768-320 px. Дизайн на таком промежутке за счет версии в 480 px будет гораздо лучше продуман и удобен.

Иногда вместо 320 и 480 разрабатывается один макет на 360 px. Но тогда верстальщику придется самому проверить дизайн после верстки на разрешение в 320, иначе получим сайт с некорректным отображением.

Итак, определились с разрешениями, под которые требуется создать макеты и таких макетов будет пять.

  • ПК – 1920 px файл, контент под 1280 px без учета отступов на скролл и отступов справа и слева;
  • Планшет 1024 px без учета отступов на скролл и отступов справа и слева;
  • Планшет 768 px без учета отступов справа и слева;
  • Смартфоны 480 px без учета отступов справа и слева;
  • Смартфоны 320 px без учета отступов справа и слева;

Раньше на скролл отнималось 21 px как стандарт, но ширина скроллинга у браузеров изменилась и отличается. Но это не так важно, главное не забыть и учесть скролл при создание макета для ПК.  Подробнее о том, как учесть скроллинг в макете читайте здесь.

Холст 1920 px создавайте только для ПК версии, на остальных разрешениях в размер. Разрешение в 1920 px дает возможность размещать фоновые изображения в блоках дизайна на ширину экрана.

Что касается отступов по краям

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

Обычно использую следующие отступы:

  • Мобильные 10-15
  • Планшет 15-20 px. Для разрешения в 1024 px использую холст на 1000 px это за вычетом скроллинга, потом от него отнимаю отступы.
  • ПК контентная часть делаю в размер 1200 px, отступы зависят от сетки.

Подходы к созданию макета сайта Mobile First или Desktop First?

Кроме вопроса: «Какой размер макета сайта делать, создавая адаптивный дизайн?»

Задается еще и сопутствующий вопрос: «Какой из подходов создания правильнее Mobile First или Desktop First?»

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

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

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

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

Как быть с плотностью пикселей экранов устройств?

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

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

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

Отсюда следует, что макеты дизайна сайта стоит создавать под обычное разрешение с 1х плотностью пикселей. Иконки и графику рисовать в векторе и использовать svg. При верстке страниц сайта через media queries определять экраны с множителем и подгружать соответствующие растровые изображения, если таковые используются.

специфические особенности, требования и рекомендации

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

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

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

До развития адаптивной верстки массовым явлением была разработка сайта с шириной в тысячу пикселей. Эта цифра выбиралась по одной простой причине — чтобы сайт помещался в любой экран. И в этом есть своя логика, но давайте предположим, что все же у человека как минимум HD-монитор на десктопе. В таком случае ваш макет будет казаться крошечной полоской в середине экрана, где все слеплено в одну кучу, а по бокам огромное незадействованное пространство. Теперь давайте предположим, что человек зашел на ваш веб-сайт с планшета с экраном 800 пикселей по ширине, причем в настройках стоит галочка «Показывать полную версию веб-сайта». В этом случае ваш сайт также будет отображаться некорректно, так как просто-напросто не влезет в экран.

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

Макеты на все случаи жизни

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

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

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

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

Из таблицы можно узнать, как определить размер сайта, который нужно использовать. Помимо этого, можно сделать вывод, что наиболее распространенным сегодня форматом является экран 1366 на 768 точек. Такие экраны устанавливают в бюджетные ноутбуки, поэтому их популярность закономерна. Следующим по популярности является Full HD-монитор, который является золотым стандартом для видеороликов, игр, а значит, и для создания макетов сайта. Дальше в таблице мы видим разрешение мобильных устройств 360 на 640 точек, а также различные варианты десктопных и мобильных экранов после него.

Проектируем макет

Итак, проанализировав статистику, можно сделать вывод, что оптимальная ширина сайта имеет 4 вариации:

  1. Версия для ноутбуков с шириной 1366 пикселей.
  2. Full HD-версия.
  3. Макет размером 800 пикселей по ширине для отображения на маленьких десктопных мониторах.
  4. Мобильная версия сайта — 360 пикселей по ширине.

Допустим, мы определились, какой необходимо использовать размер создаваемого исходника для сайта. Но такой проект все равно будет затратным. Так что рассмотрим ещё варианты, на этот раз без использования фиксированной ширины.

Делаем макет гибким

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

Что такое золотое сечение, и как его применить к верстке веб-страниц?

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

Ещё со времен античности была изобретена пропорция, которую наш глаз воспринимает как самую естественную и изящную, ведь она повсеместно встречается в природе. Открывателем формулы такого соотношения был талантливый древнегреческий архитектор по имени Фидий. Он рассчитал, что если большая часть пропорции относится к меньшей так, как целое относится к большему, то такая пропорция будет смотреться наилучшим образом. Но это в том случае, если вы хотите разделить объект несимметрично. Такую пропорцию стали позже называть золотым сечением, что все равно не переоценивает её значение для мировой истории культуры.

Вернемся к веб-дизайну

Всё очень просто — используя золотое сечение, вы можете проектировать страницы, которые будут максимально приятны человеческому глазу. Рассчитав по определению формулы золотого сечения, получаем иррациональное число 1,6180339887…, но для удобства можно использовать округлённое значение 1,62. Это будет означать, что блоки нашей страницы должны быть 62% и 38% от целого, независимо от того, какой размер создаваемого исходника для сайта вы используете. Пример вы можете увидеть на такой схеме:

Используйте новые технологии

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

Как увеличить рабочее пространство сайта

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

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

Примером хорошего способа скрыть меню является следующий макет (фото ниже).

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

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

Лучший сайт — адаптивный

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

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

Чем отличается адаптивный дизайн от наличия разных версий у сайта

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

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

Более подробно узнать об адаптивном дизайне и его разработке вы сможете из учебников.

Ширина сайта | «GZpromo» продвижение сайтов

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

Существует ли общепринятая стандартная ширина сайта? Какой она должна быть? Есть ли какие-то особенности для разных проектов?

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

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

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

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

Рассчитываем оптимальный вариант ширина сайта в пикселях — обратиться к статистике.


Яндекс статистика сайта www.persev.ru за год (посещаемость 3000-4500 уник/день)

1920×1080 1680×1050 1600×1200 1440×900 1366×768 1280×1024 1280×800 1152×864 1024×768 640×480 800×600 240×320 Не опред.
8.7% 2.5% 6.1% 4.0% 38.8% 10.4% 6.7% 1.8% 10.5% 7.6% 1.4% 0.9% 0.5%

liveinternet статистика сайта www.persev.ru за месяц

Как видно из статистики, подавляющее большинство пользователей использует мониторы с разрешением шириной от 1280 пикселей и выше. Тем не менее, обратите внимание на строку, выделенную жирным шрифтом: 38,8% имеет разрешение 1366 пикселей. Это в среднем каждый третий пользователь — достаточно большой процент, который имеет смысл учитывать.

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

Однако 1366 пикселя — это разрешение монитора, а фактически площадь страницы в браузере меньше, так как часть экрана съедает полоса прокрутки (скролл) — это около 24 пикселей. Следовательно, наша страница должна открываться не более, чем на 1000 — 1200 пикселей (остальное в запас). Таким образом, наиболее оптимальной шириной является 1024-1280px.

А почему часто используется 960?

Если Вы обратите внимание на шаблоны для WordPress (как, впрочем, и для многих других CMS), то заметите, что многие из них ориентированы на 960 пикселей.

Зачем же отклоняться от оптимального варианта в меньшую сторону? Здесь следует отметить, что 960 — это математически очень «удобное число», так как оно делится на каждое из этих чисел: 6, 8, 12, 16, 24 (и, соответственно, на множество других).

Это удобно для создания дизайна по так называемой «сетке» (grid system) — когда при создании макета он мысленно делится на 6/8/12 и т.д. частей и все блоки макета выстраиваются по этим линиям — получается симметрично и красиво (подробнее про это написано на 960.gs и других ресурсах).

Если же вы делаете или заказываете дизайн с нуля и просто хотите, чтобы, например, контентная часть занимала 600 пикселей, а справа был сайдбар — тогда вам необязательно ориентироваться на grid system и 960 пикселей.

Изменяемая ширина сайта в зависимости от разрешения экрана

Чтобы ваш сайт был еще более дружественным пользователям можно так-же изменять ширину сайта в зависимости от ширины экрана (разрешения) у пользователя.

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

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

Какой должна быть ширина сайта для удобного просмотра

Приветствую, друзья! Решила обновить статью, потому что ее показывают по запросу «какой должна быть ширина сайта» и похожим, хотя прошло 4 года с момента написания. Итак, по существу. На сегодня практически все сайты адаптивны, поэтому они в браузерах будут показаны так, как позволяют размеры и настройки сайта. Например, у пользователя большой компьютер (1920*1080), а заданная ширина составляет 1280 пикселей, значит, страница будет открываться в центре. Сайт шириной 1920 px в браузере с любыми меньшими размерами примет размеры устройства.

Ширина моего блога — 1280 пикселей. И так он выглядит на мониторе 1366 и соответственно 1920:

При создании сайтов стараюсь придерживаться средних размеров — 1200/1280, потому что большинство пользователей ПК выходят в Интернет с ноутбуков, а не со стационарных компьютеров. Но бывают шаблоны со строгими 1920, да еще и высотой шапки в 600 пикселей. Первый экран закрывается картинкой. Вот так выглядит сайт на ноутбуке 1366*768, хотя высота слайдера значительно уменьшена:

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

Что создает неудобства в просмотре

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

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

Создание сайтов на WordPress

Что пишут разработчики XHeader о ширине сайта

Не помню, чтобы ставила галочку на получение новостей от разработчика англоязычной программы XHeader при ее установке, а было это в далеком 2014 году (о программе писала в этой статье), но письма стали регулярно приходить. Поскольку переводит мне их Гугл-переводчик, то содержание забавляет. В одном, например, господин Paul Smithson убеждает меня в том, что из 500 готовых дизайнов невозможно выбрать нормальную шапку для сайта. Вот в версии ПРО – там 5 тысяч шаблонов, есть где разгуляться. А что выберешь из пятисот? Только что-то скучное.

Но г-н Paul Smithson оказался на удивление тактичным (наш менталитет несколько иной), и в следующем письме никаких намеков на приобретение полной версии программы не было, зато просто и доступно объяснялось, как выбрать ширину шапки (в программе стандарт 950 px). Если честно, у меня открылись глаза, потому что считала, что ширина шапки привязывается к браузерам и только к браузерам. Сайт должен одинаково красиво и без перекосов выглядеть во всех браузерах на всех устройствах, и при выборе шаблона для сайта или блога мы обращаем внимание на его ширину не меньше, чем на дизайн. Сама сколько раз встречала в Интернете: люди спрашивают, какой должна быть ширина сайта. Ответы, как правило, содержат значения от и до.

Вот что говорит автор программы XHeader. Кстати, не забываем, что ширина сайта влияет на продвижение сайта. Раньше, и это было-таки связано с размерами мониторов, шапки могли быть от 800 до 1024 пикселей. Горизонтальная прокрутка страницы нежелательна, поэтому от большего размера все давно отказались. Число 1024 изменилось максимум на 1000. Но установка ширины зависит от типа сайта и расположения блоков на странице. Если на сайте нет колонок справа или слева, то достаточно 750 пикселей в ширину. Стоп! А зачем мне искажать неповторимый язык Гугл-переводчика? Читайте сами, что пишет г-н Paul Smithson.

Привет Надежда,

Что является лучшим ширина для веб-сайта? Это большой вопрос, и что я получаю часто задаваемые.

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

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

Так, для рекламных писем я обычно рекомендую ширину страницы из 750 пикселей, возможно, немного больше, но будьте осторожны. Если вы создаете больше содержательный сайт, который имеет меню навигации справа или слева, то вам необходимо немного больше площадь экрана на поиграть с, и это вдвойне так что если у вас есть навигацию на левая (например) и своего рода реклама таких как AdSense направо. Для этого вида сайта вы должны смотреть на 900 пикселей вверх, но вы редко хотите пойти более 1100 или 1200 пикселей в ширину для несколько причин.

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

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

Практически каждый лучших сайт находится между 750 и 1000 пикселей.

  • Twitter – 750 пикселей в ширину
  • Craigslist – 820 пикселей в ширину
  • eBay – 930 пикселей в ширину
  • Bing – 950 пикселей в ширину
  • ESPN – 950 пикселей в ширину
  • BBC – 994 пикселей в ширину
  • Yahoo – 994 пикселей в ширину

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

Подводя итог, идеальный размер для заголовков общие 750 пикселей для одного Сайты столбцов, такие как рекламные письма или 950 пикселей, если это содержание сайт с меню навигации на левой или правой.

Так что, если вы были чесать затылок интересно, что идеальным веб Ширина страницы Я надеюсь, что выше пролил некоторый свет на Заголовок: 🙂

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

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

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

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

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

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

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

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

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

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

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

единицы в px

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

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

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

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

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


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

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

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

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

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

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

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

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

В итоге:

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

Основные разрешения (размеры) экранов для адаптивной верстки

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

Размер экрана, разрешение и область просмотра: что это значит?

Зачем используется адаптивная вёрстка? Когда вы покупаете устройство, в спецификации вы можете наблюдать такие параметры как размер экрана и его разрешение. Размер экрана — это показатель длины его диагонали в дюймах. Не следует путать его с разрешением дисплея. Этот параметр показывает количество пикселей на экране. Часто он отображается, как количество пикселей по экранной ширине и высоте (например, 1024 × 768).

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

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

Нужна помощь в определении того, удобен ли ваш сайт для просмотра на разных мобильных устройствах? Воспользуйтесь нашим сервисом →.

Отзывчивый дизайн

Невозможно разработать стиль и дизайн сайта для каждого устройства. Поэтому для адаптивной вёрстки разработчики часто:

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

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

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


/* Стили для десктопа - начало */

@media screen and (max-width: 991px) {
/* стили для больших планшетов — начало */

}

@media screen and (max-width: 767px) {
/* стили для средних планшетов — начало */

}

@media screen and (max-width: 479px) {
/* стили для телефонов — начало */

}

Самые популярные разрешения экрана

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

Устройства Apple

Разрешение дисплея Viewport
iPhone
iPhone XR 828 x 1792 414 x 896
iPhone XS 1125 x 2436 375 x 812
iPhone XS Max 1242 x 2688 414 x 896
iPhone X 1125 x 2436 375 x 812
iPhone 8 Plus 1080 x 1920 414 x 736
iPhone 8 750 x 1334 375 x 667
iPhone 7 Plus 1080 x 1920 414 x 736
iPhone 7 750 x 1334 375 x 667
iPhone 6 Plus/6S Plus 1080 x 1920 414 x 736
iPhone 6/6S 750 x 1334 375 x 667
iPhone 5 640 x 1136 320 x 568
iPod
iPod Touch 640 x 1136 320 x 568
iPad
iPad Pro 2048 x 2732 1024 x 1366
iPad 3 и 4-го поколения 1536 x 2048 768 x 1024
iPad Air 1 и 2 1536 x 2048 768 x 1024
iPad Mini 2 и 3 1536 x 2048 768 x 1024
iPad Mini 768 x 1024 768 x 1024

Устройства Android

Разрешение дисплея Viewport
Телефон
Nexus 6P 1440 x 2560 412 x 732
Nexus 5X 1080 x 1920 412 x 732
Google Pixel 3 XL 1440 x 2960 412 x 847
Google Pixel 3 1080 x 2160 412 x 824
Google Pixel 2 XL 1440 x 2560 412 x 732
Google Pixel XL 1440 x 2560 412 x 732
Google Pixel 1080 x 1920 412 x 732
Samsung Galaxy Note 9 1440 x 2960 360 x 740
Samsung Galaxy Note 5 1440 x 2560 480 x 853
LG G5 1440 x 2560 480 x 853
One Plus 3 1080 x 1920 480 x 853
Samsung Galaxy S9+ 1440 x 2960 360 x 740
Samsung Galaxy S9 1440 x 2960 360 x 740
Samsung Galaxy S8+ 1440 x 2960 360 x 740
Samsung Galaxy S8 1440 x 2960 360 x 740
Samsung Galaxy S7 Edge 1440 x 2560 360 x 640
Samsung Galaxy S7 1440 x 2560 360 x 640
Планшеты
Nexus 9 1536 x 2048 768 x 1024
Nexus 7 (2013) 1200 x 1920 600 x 960
Samsung Galaxy Tab 10 800 x 1280 800 x 1280
Chromebook Pixel 2560 x 1700 1280 x 850

Узнать стоимость адаптации вашего сайта можете тут → или в форме ниже

Оставить заявку

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

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

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

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

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

Некоторые часто используемые диапазоны ширины:

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

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

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

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

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

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

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


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

По стандартам:

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

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

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

~960 пикселей обычно является стандартной шириной, но на самом деле это зависит от содержимого и стиля.

Размер и макет веб-страницы

Высота страницы, ширина и выравнивание

До того, как смартфоны и планшеты стали популярными, веб-дизайнеры создавали страницы фиксированной ширины, которые работали на самых распространенных размерах экрана — обычно 1024 пикселя в ширину и 768 пикселов в высоту.Все изменилось примерно в 2013 году, когда число пользователей iPhone для работы в Интернете резко возросло. Теперь нет однозначного ответа на вопрос «какого размера должен быть мой сайт?» — все сайты должны быть адаптивными.

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

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

Проблемы мобильного дизайна

Большинство планшетов могут без проблем отображать не отвечающие веб-страницы, но у мобильных устройств есть несколько проблем:

  • Форма экрана — большинство пользователей смартфонов держат телефоны вертикально, в портретном режиме .Это означает, что экран больше в высоту, чем в ширину, в отличие от настольного компьютера или ноутбука.
  • Размер экрана — у смартфонов очень маленькие экраны по сравнению с настольными компьютерами, поэтому дизайнерам необходимо упростить страницы. Разные модели имеют разные размеры экрана, но, как правило, максимальная ширина для портретного дизайна для мобильных устройств составляет 340 пикселей.
  • Взаимодействие с пользователем — в мобильных телефонах нет мыши, поэтому эффекты, которые появляются «при наведении» или «при размытии», не работают.
  • Навигация — большинство веб-сайтов, как правило, имеют верхнюю панель навигации во всю ширину, которая вообще не работает на смартфоне в портретном режиме.
  • Более низкая пропускная способность — это зависит от того, находитесь ли вы в центре города или в сельской местности, но мобильные пользователи с сотовой связью (подключение к Интернету с использованием «данных») могут иметь более низкую скорость интернета. Возможно, вы захотите заменить полноэкранное фоновое видео на мобильной версии вашего сайта.

Реагирует на помощь

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

  • Гибкие макеты — эти веб-страницы плавно масштабируются от размера настольного компьютера до размера мобильного браузера. Это технически более сложно, поскольку требует, чтобы страница выглядела хорошо при любом мыслимом размере
  • .
  • Множественные макеты — это более простая версия, в которой создаются разные макеты для наиболее распространенных размеров экрана, например. большие настольные компьютеры, небольшие ноутбуки и iPad, а также мобильные устройства в портретном режиме. Может быть промежуточный размер для iPad в портретном режиме.

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

Нет сгиба

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

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

Когда экраны были одинакового размера, люди описывали нижний край экрана как «сгиб» и стремились показать самое важное содержимое над ним, чтобы посетителям не приходилось прокручивать вниз.Складки больше нет, или, точнее, складок много, поэтому важно, чтобы ключевые сообщения и призывы к действию четко отображались в верхней части страницы. Не беспокойтесь о прокрутке! Прокрутка удобна на мобильном телефоне или планшете, потому что это легко сделать на сенсорном экране. Длинную страницу на рабочем столе может быть утомительно прокручивать с помощью мыши, но небольшая прокрутка — это нормально.

Изменение моды и удобство использования

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

Делают ли эти современные тенденции дизайна веб-сайты менее удобными в использовании? Интересное новое исследование предполагает, что они могут быть.

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

Наш адаптивный дизайн

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

Большие настольные компьютеры

 

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

Ноутбуки и iPad

Макет iPad имеет ширину 970 пикселей, что хорошо вписывается в экран iPad в альбомной ориентации с небольшими пробелами слева и справа.Этот дизайн также подходит для небольших ноутбуков и старых компьютеров с размером экрана 1024 на 768 пикселей. Он также отображается на смартфонах в альбомной ориентации.

Этот макет имеет те же функции, что и макет рабочего стола, но все уменьшено, чтобы соответствовать меньшему экрану.

Мобильные устройства

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

Резюме

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

Для получения дополнительной информации о том, как максимально эффективно использовать свой веб-сайт, свяжитесь с нами.

Определение ширины веб-страницы

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

Зачем рассматривать резолюцию

В 1995 году стандартные мониторы с разрешением 640 на 480 пикселей были самыми большими и лучшими из доступных мониторов. Это означало, что веб-дизайнеры сосредоточились на том, чтобы страницы, которые хорошо выглядели в веб-браузерах, максимально отображались на мониторе с диагональю от 12 до 14 дюймов при таком разрешении.

В наши дни разрешение 640 на 480 составляет менее 1 процента трафика большинства веб-сайтов.Люди используют компьютеры с гораздо более высоким разрешением, включая 1366 х 768, 1600 х 900 и 5120 х 2880. Во многих случаях дизайн для экрана с разрешением 1366 на 768 работает.

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

Ширина браузера

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

После того, как вы учтете клиентов, которые максимизируют или не максимизируют, подумайте о границах браузера. Каждый веб-браузер использует полосу прокрутки и границы по бокам, которые сокращают доступное пространство с 800 до примерно 740 пикселей или менее при разрешении 800 на 600 и около 980 пикселей в развернутых окнах при разрешении 1024 на 768. Это называется браузер chrome , и он может отнять полезное пространство для дизайна вашей страницы.

Страницы фиксированной или жидкой ширины

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

Фиксированная ширина

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

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

Ширина жидкости

Страницы с гибкой шириной (иногда называемые страницами с гибкой шириной ) различаются по ширине в зависимости от ширины окна браузера.Эта стратегия предлагает дизайн, который больше ориентирован на клиентов. Проблема страниц с жидкой шириной заключается в том, что их трудно читать. Если длина сканирования строки текста превышает 10–12 слов или короче 4–5 слов, ее может быть трудно читать. Это означает, что у читателей с большими или маленькими окнами браузера возникают проблемы.

Чтобы создать страницы с гибкой шириной, используйте проценты или em для ширины разделов страницы. Ознакомьтесь со свойством CSS max-width .Это свойство позволяет вам установить ширину в процентах, но затем ограничить ее, чтобы она не становилась настолько большой, что люди не могли ее прочитать.

Медиа-запросы CSS

Лучшим решением в наши дни является использование медиа-запросов CSS и адаптивного дизайна для создания страницы, которая подстраивается под ширину просматривающего ее браузера. Адаптивный веб-дизайн использует один и тот же контент для создания веб-страницы, которая работает независимо от того, просматриваете ли вы ее с шириной 5120 пикселей или 320 пикселей. Страницы разного размера выглядят по-разному, но содержат одно и то же содержимое.С медиа-запросом в CSS3 каждое принимающее устройство отвечает на запрос своим размером, и таблица стилей подстраивается под этот конкретный размер.

Как установить ширину и высоту для полного размера страницы

CSS сложен, но прощает ошибки. И это прощение позволяет нам бессистемно добавлять стили в наш CSS.

Наша страница все еще загружается. Никакого «краха» нет.

Когда дело доходит до ширины и высоты страницы, знаете ли вы, что нужно установить для элемента HTML? Как насчет элемента тела?

Вы просто пришиваете стили к обоим элементам и надеетесь на лучшее?

Если да, то вы не одиноки.

Ответы на эти вопросы не интуитивны.

Я на 100% виновен в применении стилей к обоим элементам в прошлом, не учитывая точно, какое свойство должно быть применено к какому элементу. 🤦‍♂️

Нередко свойства CSS применяются как к элементам HTML, так и к элементам тела, например:

  html, body {
     минимальная высота: 100%;
}
  

Имеет ли это значение?

Да, да.

Приведенное выше определение стиля создает проблему:

Установка min-height на 100% для обоих элементов не позволяет элементу body заполнить страницу, как можно было бы ожидать.Если вы проверите вычисленные значения стиля в инструментах разработки, элемент body имеет нулевую высоту.

При этом HTML-элемент имеет высоту, равную видимой части страницы в браузере.

Посмотрите на следующий снимок экрана из Chrome Dev Tools:

Элемент body имеет поле по умолчанию 8 пикселей, обозначенное полосой сверху. Значение высоты равно 0.

Почему это происходит?

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

Элемент HTML ссылается на область просмотра, значение высоты которой равно высоте видимой области просмотра. Однако мы устанавливаем только минимальную высоту элемента HTML… НЕ значение свойства высоты.

Таким образом, элемент body не имеет родительского значения высоты, на которое следует ссылаться при принятии решения о том, чему равно 100%.

И проблема может быть скрыта

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

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

Это не так. Он все еще на нуле.

Изображение выше взято со страницы со следующим CSS:

  html, body {
    минимальная высота: 100%;
}
body {цвет фона: dodgerblue; }
  

Обратное наследование?

Как ни странно, элемент HTML принимает фоновый цвет элемента body, если вы не устанавливаете отдельный фоновый цвет для элемента html.

Итак, какова идеальная высота полнофункциональной адаптивной страницы?

В течение многих лет ответ был следующим:

  html {
    высота: 100%;
}
тело {
    минимальная высота: 100%;
}
  

Это позволяет элементу HTML ссылаться на родительскую область просмотра и иметь значение высоты, равное 100% значения области просмотра.

Когда элемент HTML получает значение высоты, значение минимальной высоты, присвоенное элементу body, дает ему начальную высоту, соответствующую элементу HTML.

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

Единственным недостатком является то, что HTML-элемент не выходит за пределы видимой области просмотра. Однако допускается, чтобы элемент body перерастал элемент HTML.

Современное решение упрощено
  body { min-height: 100vh; }
  

В этом примере используются единицы измерения vh (высота окна просмотра), чтобы позволить телу установить минимальное значение высоты на основе полной высоты окна просмотра.

Как и в случае с ранее обсуждавшимся background-color, если мы не установим значение высоты для HTML-элемента, оно примет то же значение высоты, что и для элемента body.

Таким образом, это решение позволяет избежать переполнения HTML-элемента, присутствующего в предыдущем решении, и оба элемента растут вместе с вашим содержимым!

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

Высота страницы может вызвать горизонтальную полосу прокрутки

Подождите, что?

Разве здесь не должно быть указано «Ширина страницы»?

Нет.

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

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

Так что же исправить?

Вы можете лучше спать, зная, что он начинается с настройки ширины страницы.

Эта проблема возникает, когда для любого элемента — не только HTML или элемента body — задано значение 100vw (ширина окна просмотра).

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

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

Как настроить страницу на полную ширину

Может быть, просто не надо.

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

Помните, что по умолчанию элемент body имеет отступ 8 пикселей со всех сторон.

Сброс CSS удаляет это. В противном случае установка ширины на 100 % перед удалением полей приведет к переполнению элемента body. Вот сброс CSS, который я использую:

  * {
    маржа: 0;
    заполнение: 0;
    box-sizing: граница-коробка;
}
  

Как установить ширину по своему усмотрению

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

Это может быть просто привычкой.

Если вы установите ширину 100% для элемента body, вы получите полную ширину страницы. По сути, это эквивалентно тому, чтобы не устанавливать значение ширины и разрешать значение по умолчанию.

Если вы хотите использовать элемент body в качестве контейнера меньшего размера и позволить HTML-элементу заполнять страницу, вы можете установить для тела значение max-width.

Вот пример:

  html { background-color: #000; }
тело {
    мин-высота: 100вх;
    максимальная ширина: 400 пикселей;
    фоновый цвет: папайя;
    поле: 0 авто;
}  

Заключение

Если для элемента HTML не указано значение высоты, установка высоты и/или минимальной высоты элемента body на 100% приводит к отсутствию высоты (до добавления содержимого).

Однако, если для элемента HTML не указано значение ширины, установка ширины элемента body на 100% приводит к полной ширине страницы.

Это может показаться нелогичным и запутанным.

Для адаптивной полной высоты страницы установите минимальную высоту элемента body на 100vh.

Если вы устанавливаете ширину страницы, выберите 100% вместо 100vw, чтобы избежать неожиданного появления горизонтальных полос прокрутки.

Я оставлю вам руководство с моего канала YouTube, демонстрирующее настройки высоты и ширины CSS для полноэкранной HTML-страницы, которая увеличивается вместе с содержащимся в ней содержимым:

У вас есть другой способ настройки? ширина и высота CSS, которые вы предпочитаете?

Расскажите мне о вашем методе!

Найти размеры элемента веб-страницы: TechWeb: Бостонский университет

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

Если вы используете стандартную тему Flexi…

  1. Ширина области вашего контента составляет 550 пикселей во всех стандартных темах Flexi, использующих вариант макета «средний».

Если вы используете пользовательскую тему…

Хром

  1. Используя браузер  Chrome , щелкните правой кнопкой мыши или щелкните правой кнопкой мыши в любом месте внутри области содержимого и выберите  Проверить элемент .

    В Chrome щелкните правой кнопкой мыши (или щелкните, удерживая клавишу Control) в области содержимого и выберите «Проверить элемент», чтобы открыть инспектор элементов.

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

    Найдите область содержимого в инспекторе элементов. Он будет выделен синим цветом.

  3. Вы увидите всплывающую подсказку рядом с выделением. Первое число — это ширина.

    Ширина элемента будет первой цифрой в желтой подсказке.

Сафари

  1. Сначала вам нужно включить панель инструментов разработчика в браузере. Сделать это:
    1. Откройте Safari Настройки (Mac щелкните Safari и перейдите к Настройки. ПК щелкните Файл и перейдите к Настройки )
    2. Перейдите на вкладку Дополнительно (шестеренка справа)
    3. Выберите Показать меню «Разработка» в строке меню в нижней части этой панели.
    4. Закройте окно настроек
  2. Щелкните правой кнопкой мыши или щелкните правой кнопкой мыши в любом месте области содержимого и выберите  Проверить элемент .
  3. В новом окне, которое появляется в нижней части браузера, перемещайте указатель мыши по коду, пока не увидите выделенную область содержимого (обычно синего цвета).
  4. Вы увидите всплывающую подсказку рядом с выделением. Первая цифра — ширина.

Firefox

  1. Щелкните правой кнопкой мыши или щелкните, удерживая клавишу Control, в любом месте внутри области содержимого и выберите  Проверить элемент .
  2. В новом окне, которое появится в нижней части браузера, нажмите кнопку, которая выглядит как курсор мыши, входящий в квадрат.
  3. При включенном инструменте Select Element наведите указатель мыши на свой сайт. Вы заметите, что вокруг элементов на странице появляются пунктирные линии. Найдите область содержимого и щелкните, чтобы сфокусироваться на ней.
  4. Вернувшись в нижнее окно, нажмите Box Model справа.
  5. Будут показаны ширина и высота. Первая цифра — ширина.

Internet Explorer 8 и 9

  1. Нажмите F12 , чтобы открыть Инструменты разработчика .
  2. Щелкните инструмент с белой стрелкой в ​​левом верхнем углу окна инструментов разработчика, которое появляется в нижней части экрана.
  3. Выбрав этот инструмент, наведите указатель мыши на разные части вашего сайта. Найдите столбец области содержимого и щелкните. Вы должны увидеть тонкую сплошную синюю рамку.
  4. Вернувшись на панель Инструменты разработчика , щелкните Макет справа.
  5. В центре синих прямоугольников указаны размеры вашей области содержимого. Первая цифра — ширина.

Настройте ширину макета — Total WordPress Theme

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

  • Ширина контейнера : Ширина вашего сайта (все содержимое).
  • Ширина содержимого : область с содержимым, когда ваша левая или правая боковая панель включена.
  • Ширина боковой панели : Ширина боковой панели.

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

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

Ширина контейнера

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

Контент с шириной боковой панели

Параметр ширины боковой панели ширины содержимого используется для определения ширины области основного содержимого при отображении с боковой панелью рядом с ней.Значение по умолчанию — 69%, и использование процента позволяет сайту иметь гибкий макет.

Ширина боковой панели

Ширина боковой панели, конечно же, используется для изменения ширины вашей боковой панели. Значение по умолчанию — 26%, что является процентом, чтобы иметь гибкий дизайн сайта, но вы можете использовать фиксированную ширину в пикселях для боковой панели, если хотите сохранить одинаковую ширину боковой панели на разных размерах экрана. Если вы хотите использовать фиксированный пиксель, обязательно используйте calc() для ширины области содержимого (пример см. в следующем разделе).

Использование фиксированной ширины боковой панели

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

Обратите внимание, как мы использовали calc(100% – 340px) для содержимого с шириной боковой панели? Это потому, что мы хотим вычесть ширину боковой панели, которая составляет 300 пикселей, а затем добавить зазор в 40 пикселей между содержимым и боковой панелью.

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

Максимальная ширина

Начиная с версии 3.0.0 Total тема была изменена на гибкую компоновку, поэтому в основном контейнере максимум 90%. Это делает так, что даже если вы установите ширину макета 3000 пикселей, он никогда не превысит 90% ширины вашего окна, поэтому при изменении размера браузера содержимое вашего сайта всегда будет видно.Это можно изменить в Внешний вид > Настроить > Макет > Общие.

Настройка ширины страницы сайта | Ответы PageCloud

Последнее изменение: 14 декабря 2020 г., 15:46 по восточному поясному времени

Страницы PageCloud по умолчанию имеют ширину 1080 пикселей, что обеспечивает удобство просмотра на самых разных устройствах.

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

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


Изменение ширины страницы

  1. Во время редактирования страницы нажмите на боковую панель в левой части экрана.
  2. Нажмите «Настройки» в нижней части этого меню.
  3. В разделе «Настройки страницы» нажмите «Дополнительно».
  4. Вы увидите три варианта размеров страницы или можете ввести значение в поле «Пользовательская ширина».

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

Настройка ширины раздела 

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

  1. Выберите раздел.
  2. Нажмите «Столбец» в верхнем левом углу столбца раздела, чтобы открыть меню редактирования.
  3. Выберите вкладку «Макет» в меню редактирования.
  4. В разделе «Ширина» у вас есть несколько вариантов:
  5. Выберите ширину, соответствующую вашему дизайну.
  6. Нажмите «Сохранить», чтобы сохранить изменения на странице.

Доступ к Mobile Layout Builder — Оптимизация для ширины мобильного устройства

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

  1. Активируйте Mobile Layout Builder.
  2. Щелкните верхнюю центральную часть страницы, где написано «Раскладка мобильного телефона».
  3. Теперь вы находитесь в программе Mobile Layout Builder.
  4. Нажмите «Сохранить», чтобы сохранить изменения, внесенные в мобильный режим.

Leave a Reply