Как сделать ширину сайта 100

Обновлено: 03.07.2024

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

Для чего может понадобиться поменять размер шаблона.

Размер шаблона вы можете захотеть поменять как в самом начале, как только установили WordPress, так и после того как написали ряд статей и у вас начали появляться первые десятки посетителей. К примеру мне понадобилось расширить шаблон после того как я захотел попробовать заработать первые пару центов на рекламе со своего труда — блога. Для этих целей была выбрана система баннерной рекламы от Google- AdSense. Но чтобы заработать хоть несчастные два цента надо учитывать два параметра:

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

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

Как увеличить шаблон по горизонтали часть 1, понимаем цифры

Safari
FireFox
Google chrome

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

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

Растягивание рисунка до 100%

Первый метод состоит в том, что для тега значение атрибута width устанавливается равным 100% (пример 1). Изображение в таком случае растягивается на всю ширину контейнера, а его высота остается неизменной. Понятно, что в рисунке при этом неизбежно появятся искажения, поэтому подобный метод применяется достаточно редко и далеко не для всех картинок.

Пример 1. Ширина изображения

В данном примере ширина ( width ) рисунка задана как 100%, а высота ( height ) — 100 пикселов.

Использование бесшовного фонового изображения

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

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

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

Рис. 3. Картинка для наложения на фон

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

Пример 2. Фоновая картинка

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

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

Рис. 4. Изображение с градиентом для размещения на цветном фоне

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

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

Пример 3. Цвет фона

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

Рис. 5. Совмещение цвета фона и рисунка

Фоновый рисунок большой ширины

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

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

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же свойство background , в качестве его значения задается путь к фоновой картинке и ее параметры. Так, значение right top говорит, что правый край изображения будет фиксироваться, а при изменении ширины окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

При использовании фонового рисунка следует учитывать свойственные этому методу ограничения. А именно:

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

Резюме

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

2020-11-26 00:54:22 209

Проверка сайта на разных разрешениях через браузеры

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

Firefox

Chrome

Yandex

Другие браузеры

Онлайн-сервисы для проверки адаптива

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

BrowserStack

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

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

Каждое устройство доступно до 1 мин. во время бесплатной пробной версии.

Стоимость подписки для проверки сайтов только в настольных браузерах (для одного пользователя) – 29 долл., в настольных и мобильных – 39 долл.

Screenfly

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

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

CrossBrowserTesting

Главный конкурент BrowserStack, который предлагает более 1500 браузеров и устройств для тестирования адаптивного веб-сайта.

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

Live Testing – для ручных тестировщиков и разработчиков, которым нужны удаленные браузеры для взаимодействия, тестирования и отладки (29 долл., 1 юзер).
Automated Testing – для групп разработки и контроля качества Waterfall, которым необходимо запускать ручные и автоматические тесты (78 долл., 1 юзер).
Unlimited Testing – когда требуется неограниченное тестирование на параллельных устройствах и в браузерах (100 долл., 1 юзер).

Ghostlab

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

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

Пробный период длится 7 дней. Стоимость программы – 49 долл.

Responsinator

Это – симулятор iPad и iPhone. Удобство Responsinator заключается в его простоте. Нужно просто вписать URL-адрес страницы, и этот бесплатный инструмент покажет, как веб-сайт отображается в самых популярных размерах экрана.

Ресурс предлагает протестировать страницу в следующих вариантах ширины: 375, 734, 412, 684, 667, 414, 736, 768, 1024.

Инструменты от поисковых систем для проверки адаптива

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

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

Google Mobile Friendly

Google Mobile Friendly лучше всего подходит для проверки удобства использования мобильных девайсов и фрагментов кода.

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

Mobile Friendly – Яндекс.Вебмастер

Официальный инструмент от Яндекс. Понимает, есть ли у ресурса мобильная версия, показывает общую оценку и отображает конкретные проблемы в оптимизации.

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

Как узнать, какими браузерами пользуются посетители сайта?

Для этого следует зайти в систему сбора статистики Google Analytics/Яндекс.Метрики – в соответствующем разделе представлен перечень браузеров и количество посещений.

Важно! Сайт должен быть подключен к Google Analytics/Яндекс.Метрике.

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

Основы адаптивного дизайна

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

Что такое адаптивный дизайн?

Теория (основы)

Думаю, всем известно, что все шаблоны (их стиль) построен на CSS. И адаптивный дизайн — не исключение. Наиболее важное изменение — изменение единиц измерения. Представим, ширина блока 400 пикселей, а значит, что ее надо указывать в процентах (например, 40%).

max-width и width

С большими мониторами не так все просто, поскольку текст растянется на весь экран. А получается, если монитор широкоформатный, то текст будет нечитабельным.

min-width и width

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

Практика

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

Как вы заметили, ширина шаблона 1000 пикселей. В шаблоне используется width и max-width: о них написано выше.

Использование media screen

Стоит отметить, что в media screen задается нужное разрешение экрана устройства. Их очень много, можно указывать даже свои, но самые популярные: 320px, 480px, 600px, 768px, 1024px. В моем примере используется два разрешения: 768px и 1024px.

Таким образом выглядит тег media screen в CSS

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

1024 пикселя

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

Вот, что необходимо прописать в CSS

768px

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

Для сайтбара ширина та же, а выравнивание по правому боку (float: right;) мы убрали. Ко всему этому, мы добавили отступ (margin-top: 25px;), чтобы эти два блока разделялись.

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

Размер окна браузера

Под какое разрешение делать сайт?
Как рассчитать ширину сайта для того, чтоб не появлялся горизонтальный скроллинг?

Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма).
Размер окна браузера — это ширина и высота области просмотра в пикселях. Это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Размер окна браузера пользователь может менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.

Пользователь может просматривать сайты на различных устройствах. Ниже приведена статистика устройств просмотра сайтов Яндекс.Метрика на январь 2021 год.

Типы устройств просмотра сайтов

Размеры окон экрана монитора и браузера указаны в пикселях (px).

Распространенные мониторы

Различные размеры окон браузера

1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора (дисплея) или мобильного дисплея.
1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

Размер экрана

Доступный размер экрана

Внешнее окно браузера

Окно прсмотра

2.1. Размер внешнего окна — это ширина и высота текущего (активного) окна браузера, включая адресную строку, поисковую строку, панель вкладок, открытые боковые панели и прочие панели браузера.
2.2. Размер внутреннего окна — это ширина и высота области просмотра .

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

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

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

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

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

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

Изменяем масштаб страницы в Яндекс.Браузере

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

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

С помощью комбинации клавиш

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

Открываем любую страницу.
Зажимаем клавишу Ctrl (или клавишу Cmd в macOS).
И нажимаем на клавишу + (плюс) , чтобы постепенно увеличивать размер страницы.
Чтобы уменьшить масштаб, делает то же самое, только вместо клавиши + (плюс) нажимаем на клавишу — (минус) .

Первое нажатие на + увеличит страницу на 10%. Следующее на 15%. Затем на 25% и так вплоть до 500%. Первое нажатие на — уменьшает страницу на 10%. Затем еще на 10%. Потом на 5%. Потом на 3% и так далее.

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

С помощью колесика мыши

Вместо клавиш + и — можно использовать колесико мыши. Это работает так:

Плагин для отображения размеров окна браузера

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

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

Опубликовал репозиторий на GitHub

Если не знакомы с GitHub, можно почитать отдельную статью - Установка GitHub Desktop и его базовое использование

Зачем писать этот плагин?

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

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

Во-вторых, в некоторых браузерах, особенно в мобильных, нет возможности устанавливать расширения

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

Этот плагин будет помогать при разработке и тестировании адаптивной верстки

При адаптивной верстке необходимо постоянно следить за размерами окна браузера в зависимости от контрольных точек @media запросов

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

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

@media запросы основаны на полной ширине окна браузера, включая полосы прокрутки.

@media запрос @media (max-width: 1199.98px) взят из Bootstrap. В примере выше, если ширина меньше 1200px, то .container меняет цвет фона на синий

@media запрос срабатывает на полную ширину окна, и пока нет полос прокрутки ширина окна и ширина контента совпадают

Но такое на практике встречается редко. Обычно контентная часть намного больше. Для примера просто назначим высоту .content больше, чем высота окна браузера

Теперь появилась полоса прокрутки. @media запрос сработает как и раньше при полной ширине окна браузера, включая ширину полосы прокрутки, но теперь полоса прокрутки отнимает место у контентной части. При полной ширине окна 1200px, контенту остается около 1183px.

Предположим, в шапке макета много элементов, которые мы хотим при адаптивной верстке плотно уместить в 1200px. Ставим @media (max-width: 1199.98px) , настраиваем ширину браузера на 1200px, но элементы не умещаются из-за того, что полоса прокрутки отняла часть ширины, что на первый взгляд не совсем очевидно

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

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

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

Что говорит статистика

Теперь о разрешениях. Самими популярными разрешениями остались 1366*738 и 1920*1080, Это не мобильные разрешения. А вот самым популярным мобильным разрешением стало 360*640. По факту это тройка лидеров.

Полная таблица с информацией по рынку такова:

Разрешение	Пользователей	Динамика
1366×768	21.15 %	-1.46%
360×640	18.28 %	+2.31%
1920×1080	12.29 %	-0.85%
1280×1024	6.94 %	-0.40%
1600×900	4.57 %	-0.23%
375×667	4.36 %	+0.48%
1024×768	4.08 %	-0.26%
320×568	3.83 %	+0.10%
1440×900	3.16 %	-0.19%
1280×800	3.08 %	-0.02%
1680×1050	2.03 %	-0.25%
768×1024	2.00 %	+0.07%
1536×864	1.93 %	+0.22%
320×534	1.84 %	+0.05%
320×570	1.62 %	+0.09%
1280×720	1.42 %	+0.04%
1360×768	1.05 %	-0.22%

Вывод

Рынок мобильных устройств не стоит на месте. Сегодня надо искать варианты для вложения средств в этот рынок.

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

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

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

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

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

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

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

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

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

1366×768 — 23.7%
1280×1024 — 15.1%
1024×768 — 14.7%
1280×800 — 9.5%
1920×1080 — 8.4%
640×480 — 6.2%
1600×1200 — 5.9%

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

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

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

Следовательно, наша страничка должна открываться не более, чем на 1000 пикселей. Часто дизайнеры или заказчики берут еще 20 пикселей в запас и делают сайт на 980 px.

Таким образом, наиболее оптимальной шириной является 980-1000 px.

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

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

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

Осторожность с резиновым макетом

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

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

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

Потому, если вы делаете или заказываете резиновый макет, позаботьтесь о посетителе — поставьте ограничение около 1200-1300 px как максимальную ширину вашей страницы.

Читайте также: