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

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

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

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

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

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

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

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

Для моего проекта на момент написания статьи сервис 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 пикселей.

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

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

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

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

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

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

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

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

www.runcms.org

Стандартные размеры сайтов: особенности, требования и рекомендации

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

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

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

До развития адаптивной верстки массовым явлением была разработка сайта с шириной в тысячу пикселей. Эта цифра выбиралась по одной простой причине — чтобы сайт помещался в любой экран. И в этом есть своя логика, но давайте предположим, что все же у человека как минимум 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-код, который отличается от десктопного. Это является недостатком с точки зрения оптимизации производительности сервера, а также поисковой оптимизации. К тому же сложнее становится считать статистику по разным версиям сайта. Адаптивный подход лишен таких недостатков.

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

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

fb.ru

Идеальный размер сайта | Записки Web-разработчика

По моему уже все знают, что стандартный размер сайта в рунете почему-то 1000px. “Чтобы за монитор не вылезал”. А как насчет размера сайта равного 960px или 980px? Плохо, мало, некрасиво…

Почему? А вы никогда не задумывались, почему большинство сайтов рунета, как “профессиональных”, так и не очень, выглядят настолько убого? Вот смотришь — и вроде бы все хорошо, цвета, картинки, текст. Но композиция, как говориться, разваливается. На него неприятно смотреть. Даже не на уровне осознания, а как-то неудобно, глаз, как говорится, спотыкается. Тут даже не в размере сайта. Размер сайта тут не причем, дело в другом, о том и эта статья.

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

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

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

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

Золотое сечение

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

Ключом для перехода от плохого дизайна к хорошему можно назвать числе 1,618033988749895… и далее. Обычно для удобства используют число 1,6, 1,618 или 1,62. Это и есть золотая пропорция, золотое сечение.

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

1. Cначала сосчитаейте ширину области контента. Про правилу золотого сечения она должна быть на 1,6 меньше, чем ширина сайта (960px). Поделим 960 на 1,62, получим 593px.
2. Отнимите от общей ширины получившуюся: 960px – 593px = 367px.

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

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

Несмотря на то, что дизайн этого блога неправилен с точки зрения сечения, пользователи не замечают этого, потому что они интуитивно делят страницу на два блока: 583px (630px – 31px – 31px) и 299px (330px – 31px). Причина в пассивной игре боковых полей (линии по 31 px), они обеспечивают пропорциональные промежутки и отступы от края до контента.

И хотя отношение между областями сайта равно 630 : 330 px ≈ 1.91 (не 1.62), а отношение между размерами текстовой области и меню равно 583 : 299px ≈ 1.92 (не 1.62), дизайн смотрится хорошо. Это достигается благодаря балансу — все элементы страницы имеют одинаковые пропорции 1,92. Отсюда и создается ощущение гармонии и эстетичности.

Также надо заметить, что такие отступы от краев, равны 31px не случайны еще по одной причине. Как я уже упоминал ранее, в записи про создание этого сайта существуют стандарты, по которым наиболее удобная для чтения длинна строки находится между 50–80символами текста в строке. Однако на данном сайте длина строки примерно равна 100 символам. Такой размер тоже вписывается в общую пропорциональную концепцию размеров сайта.

Посчитаем. Золотое сечение равно 1,62, на этом сайте пропорция равно 1,92. Соответственно 1,92/1,62=1,18. Округлим до 1,20. Умножаем: 80*1,2 = 95. Таким образом все укладывается в рамки законов природы. Для грубых набросков вы можете использовать отношение 5 : 3.

Правило трети

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

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

Применение правила трети возможно и в отношении к размерам сайта. Вернемся к нашим 960px, при этом его высота может варьироваться от 750px до 950px. Произведем следующие действия:

1. Разделите ширину на 3, получим 320px
2. Разделите среднюю высоту вашей страницы на 3 ( (750 + 950 px) / 2 ) / 3 ≈ 285px.
3. Следовательно каждый прямоугольник должен быть размером 320px × 285px.
4. Постройте сетку из девяти квадратов, 3 × 3

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

Пример можно увидеть, посмотрев на сайт demandware.com. Рассматривая этот сайт можно заметить, что актуальные данные расположены в точках пересечения. Также стоит отметить, что нижние блоки информации располагаются в соответствии с правилом трети и расположены строго под нижней линией, что соотносит пропорции размеров сайта как 2 : 1.

Заключение

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

web-profi.by

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

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

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

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

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

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

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

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

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

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

Но 1024 px — это разрешение самого монитора, хотя параметры страницы гораздо меньше в браузере, потому как, частью дисплея поглощает полоса прокрутки. Из этого следует, что страничка обязана быть не больше 1000 пикселей. Довольно часто клиенты или дизайнеры берут запасные 20 пикселей и создают сайт на 980 пикселей.

Итак, самая оптимальная ширина – это 980-1000 px.

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

По какой причине часто используется 960? Если вы присмотритесь к шаблонам для WordPress, то сразу же увидите, что множество из них заточено на 960 пикселей. Не стоит отказываться от лучшего варианта. Надо заметить, что 960 является математически «удобным числом», потому как делится на такие числа, как шесть, восемь, двенадцать и т.д.

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

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

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

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

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

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

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

searchtimes.ru

Какую ширину выбрать для сайта?

Привет друзья! Сегодня мы затронем очень важные темы при верстке сайта:

1. Какую ширину использовать для создания сайта?

2. Как «резина» может испоганить вам жизнь?

3. Какая ширина будет самой лучшей для контента?

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

Почему так важно выбрать оптимальный размер страницы?

Юзабилити сайта влияет на много полезных факторов!

В первую очередь это твои посетители, если им на сайте будет не удобно – фиг ты кого заставишь зайти туда еще раз. Собственно, смысл тогда вообще надрываться? Если люди будут заходить, посидят пару секунд на сайте, пошлют все к «чертям подальше» и пойдут искать другой аналогичный ресурс.

Например, я делаю ИМЕННО так! Если мне что-то сильно мешает – я на таком сайте долго не засиживаюсь. И лучше найду другой ресурс с похожей информацией, но на котором мне будет удобно работать!

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

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

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

Пофессионалы своего дела, например как здесь:

http://sitepolice.ru/e-store/audit-saita/

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

При том, что результат, который вы получите — намного привысит оплату за услугу 😉

И так, давай лучше обо всем по порядку.

1. Оптимальная ширина сайта.

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

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

А это любого дико напрягает, я точно знаю.

На момент написания этой статьи, общая статистика показывает, что у 20% пользователей нашего интернета экраны шириной 1152 пикселя и меньше (я в ливинтернете подсмотрел ). Причем основная масса из них приходится на расширение 1024х780 пикселей.

У меня даже в статье – «Как создать второй сайдбар в шаблоне Default?», в комментариях разгорелся спор с одним из моих посетителей. Где я красочно описал статистику своих сайтов и статистику сервиса LiveInternet в целом.

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

Обидно, не правда ли?

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

Если брать меня, то я в последнее время стараюсь делать сайты шириной где-то в 960 – 980 пикселей.

Думаю, с этим все понятно, теперь перейдем к еще одному «монстру», которого почему то очень часто любят юзать молодые (неопытные) вебмастеры.

2. Как может твоему проекту подос..ать резина?

Для тех, кто в танке:

Резина – это сайт с резиновой версткой, у которого может меняться ширина, в зависимости от ширины окна браузера.

Почему то многие новички липнут на резину, как мухи, на всем известную субстанцию. И если меня спросить, как я отношусь к сайтам с резиновой вёрсткой, то я отвечу очень кратко – никак.

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

1. Разные размеры.

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

И если на 17-дюймовом мониторе сайт смотрится на ура, и содержимое его контента тоже. То на мониторе в 22 дюйма, все может преобразиться до дикой неузнаваемости.

И очень часто не в лучшую сторону!

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

2. Слишком узко.

Многие забывают на таких сайтах выставлять минимальную ширину.

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

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

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

3. Слишком широко.

А вот вам и обратная сторона медали. Когда сайт на всю ширину 22 дюймового монитора, строчки текста растягиваются до неимоверной длинны.

Читать такой текст очень неудобно!

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

Так что заруби себе на носу еще раз:

Читать тексты в длинных строчках– совершенно неудобно.

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

Ну и третий момент правильно-юзабельной (такого выражения нет, но вы меня поняли ) ширины:

3. Оптимальная ширина для контента

Контент, это, собственно говоря, то, ради чего приходят на твой сайт посетители. Ведь в нем содержится вся основная информация сайта.

И его ширина играет тоже очень важную роль!

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

Так какова же оптимальная ширина для контента?

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

Ширина обычного листка книги.

Если внимательно присмотреться, то ширина листа в большинстве книг будет соответствовать в среднем ширине в 500 – 650 пикселей. И с тех пор именно такой ширины я и придерживаюсь.

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

Но я точно знаю одно: ширина контента на моих сайтах не изменится! Она всегда будет идти в радиусе 500 – 650 пикселей. И даже если в будущем мои сайты станут чуточку шире, то только за счет сайдбаров и отступов.

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

Ведь от юзабилити зависит ранжирование сайтов в поисковой выдаче. Да и не это главное.

Главное, что бы твоему посетителю было на твоем сайте комфортно и удобно.

И ему снова и снова хотелось приходить к тебе на сайт за порцией свежей и полезной информации!

С респектом, Серёга.

Не забудь оставить свое мнение по этому поводу.

ЗЫ: тех, кто не нажмет на одну из кнопок ниже – найду, и лично дам в глаз! Я вас тоже очень сильно люблю

master-css.com

standards — Рекомендуемое разрешение сайта (ширина и высота)?

Хорошо, я вижу здесь много дезинформации. Во-первых, создание веб-страницы с использованием определенного разрешения, например 800×600, делает эту страницу рендерингом правильно, используя только это разрешение! Когда эта страница отображается на другом компьютере или мониторе домашнего ПК, страница будет отображаться с использованием текущего разрешения экрана, а не разрешения, которое вы использовали при разработке страницы. Не создавайте веб-страницы для определенного разрешения! Слишком много разных пропорций и разрешений экрана, чтобы ожидать сценария «один размер подходит всем», что с веб-дизайном не существует. Здесь решение: используйте CSS3 Media Queries для создания адаптируемого кода разрешения. Вот пример:

@media screen and (max-width: 800px) {
styles
}
@media screen and (max-width: 1024px) {
styles
}
@media screen and (max-width: 1280px) {
styles
}

Посмотрите, что мы только что сделали, это указать три набора стилей, которые отображаются с разными разрешениями. В случае нашего примера, если разрешение экрана больше 800 пикселей, вместо этого будет выполнен CSS для 1024. Аналогично, если на экране отображается содержимое 1224px, 1280 будет выполняться с 1224 больше 1024. Сайт, над которым я сейчас работаю, работает со всеми разрешениями 800×600 — 1920×1080. Еще одна вещь, о которой следует помнить, заключается в том, что не все мониторы с одинаковым разрешением имеют одинаковые экраны размера. Вы могли бы поставить 15,4 ноутбуков рядом друг с другом, в то время как оба выглядят одинаково, оба могут иметь совершенно разные разрешения, поскольку не все пиксели имеют одинаковый размер на разных ЖК-экранах. Итак, используйте медиа-запросы и начинайте создавать свой сайт с экрана ноутбука с высоким разрешением, особенно 1280+. Кроме того, создайте каждый мультимедийный запрос, используя другое разрешение на вашем ноутбуке. Вы можете использовать свои настройки разрешения в Windows для настройки 800×600 и создания медиа-запроса при этом res, а затем переключиться на 1024×768 и создать другой медиа-запрос при этом res. Я мог бы продолжать и продолжать, но, думаю, вы, ребята, должны понять.

UPDATE: здесь ссылка на использование мультимедийных запросов, которые помогут объяснить больше,  Инновационный веб-дизайн для мобильных устройств с мультимедийными запросами

Этот учебник покажет вам, как разрабатывать для всех устройств. Там также есть учебные пособия для Media Queries. Я разработал весь сайт для рендеринга на всех устройствах, на всех экранах и на всех разрешениях без поддоменов и только на CSS! Я все еще работаю над поддержкой планшетов и смартфонов. Сайт идеально подходит для любого ноутбука или вашего 50-дюймового ЖК-телевизора, и многие страницы прекрасно работают на всех мобильных устройствах. Если вы поместите весь свой код на страницу, ваши страницы будут быстро загружаться! Кроме того, не забудьте обратить внимание на обсуждение этой статьи о CSS background-size: cover; или «содержать», они сделают вашу фоновую графику текучей и способны идеально отображать все разрешения.

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

qaru.site

Ширина сайта удобная для всех

1. SEO Блог
2. Веб-дизайн

Многие веб мастера и верстальщики задаются вопросами: какая самая оптимальная ширина страниц сайта и что выбрать: резиновую верстку или фиксированную ширину.
И большинство все-таки выбирают наиболее распространенную фиксированную ширину 960px (более распространена в англо-язычном интернете), у нас же чаще всего встречается ширина в 980px.

Моя статистика Google Analytics показывает что только 18% посетителей моего блога имеют разрешение экрана меньшее или равное 1024px, а соответственно 82% — 1280px и более, из чего можно заключить, что возможно уже пора пересмотреть наши привычные стандарты ширины сайтов и делать их хотя бы на порядок шире: для мониторов с разрешением 1280px.

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

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

Самая оптимальная ширина сайта

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

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

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

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

1. Сделать сайт резиновым: минимум графики, текст и все размеры указать в процентах.
2. При помощи javascript определять разрешение экрана и подгружать соответствующие ему стили.
3. Используя параметры @media с указанием max-width и min-width и определив отдельные стили для каждого разрешения.

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

Комментарии к статье

← Предыдущая статьяСледующая статья →

seodiz.ru