какая должна быть ширина сайта

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

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

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

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

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

Поэтому, разрабатывая макет, мы хотим, чтобы пространство использовалось с умом и при этом:

Но для начала разберёмся, на какую всё-таки ширину html-страницы ориентироваться.

Какие бывают форматы размеров сайта для вёрстки

У каждого устройства есть несколько характеристик, описывающих его размер:

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

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

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

Фиксированная верстка

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

Резиновая верстка без ограничений

Упрощенно это выглядит так:

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.

Плюсы такой верстки:

Минусы:

Личный юзеркейс: у меня плохое зрение, если не надеть очки, приходится сидеть, уткнувшись лицом в монитор. Поверьте – даже на 21 дюйме с разрешением по ширине 1600 пикселей жутко неудобно воспринимать сайт с малого расстояния. Приходится вертеть головой слева направо, чтобы прочесть строчку текста.

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

Резиновая верстка с заданной минимальной и максимальной шириной

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

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Плюсы:

Минусы:

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Адаптивная верстка

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

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

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

Плюсы:

Минусы:

Все эти методики могут сочетаться в зависимости от ситуации.

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

Как выбрать оптимальный размер макета

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

Но как же разобраться в этом многообразии разрешений и способов верстки? Главное – сайт должен быть максимально удобен и презентабелен для наиболее распространенного разрешения.

Общая статистика популярных разрешений экранов мобильных и компьютеров

Эти данные можно найти в сервисах:

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайтакакая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Например, если мы возьмем за основу информацию с сайта w3counter, самое популярное разрешение по ширине – это 1366px. Соответственно, эту ширину можно брать как максимум, больше которого увеличивать контент не стоит.

При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 17-24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.

Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.

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

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

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

Рекомендуемые размеры сайта

Но лучше разрабатывать несколько шаблонов используя «опорные точки»:

УстройствоШирина макета, пикселейОтступы по краямКонтентная часть, пикселей
Большого размера (десктоп или телевизор)от 1366Зависят от сетки1200
Среднего размера (ноутбук)от 102420 пикселей992
Маленького размера (планшеты)от 76815 пикселей768
Смартфоныот 36010 пикселей360

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

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

Как узнать статистику своего сайта по разрешениям экрана?

Если у вас Яндекс.Метрика

Если у вас Google Analytics

Как проверить оптимизацию сайта под разные разрешения?

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

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Подведем итог

Перед созданием нового сайта или редизайном необходимо:

Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.

Нужна помощь с проектированием сайта и разработкой ТЗ? Обращайтесь к нам!

Источник

Идеальный размер сайта

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

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

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

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

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

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

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

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

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

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

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайтаОбъясняю пример. Вы хотите создать сайт с фиксированной шириной 960px. Мало? Об этих ширинах потом. Если мы делаем блог, то сайдбар у нас располагается справа, а контент слева. Размеры области контента, относительно сайдбара считаются так:

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

Конечно веб дизайне не должен весь полностью быть строго выверен по линейке в пропорциях. Например сайт 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. Произведем следующие действия:

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

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

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайтаЗаключение

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

Источник

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

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Обновлено: 9 апреля 2020

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

При создании сайта одним из первых возникает вопрос: какой делать ширину сайта? Ответ на этот вопрос неоднозначен и будет зависеть от ряда факторов. Сайты бывают двух видов: 100% по ширине экрана и фиксированной ширины. Ниже приведен пример сайта с фиксированной шириной.

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Факторы, влияющие на ширину сайта

1. Количество колонок сайта.

2. Разрешение монитора пользователя.

Для получения такой статистики лучше всего использовать открытый счетчик посещений популярного ресурса. Мы ореинтируемся на свой ресурс www.podolsk.ru. Статистика сайта открыта, Вы можете посмотреть наиболее частые разрешения мониторов у пользователей, и в зависимости от этого подобрать оптимальную ширину для своего сайта. Посмотреть популярные разрешения мониторов на сайте mail.ru.

3. Почему 1280х1024 = 1256px? Страницы сайта могут помещатся по вертикали экрана полностью или не полностью. Запас в 24 px берется на полосу прокрутки сайта.

Разрешение экранаШирина, px
640х480616
800х600776
1024х7681000
1152х8641128
1280х10241256
1400х10501376
1440х9001416
1600х12001576
1680х10501656
1920х12001896
2048х15362024

Теперь о самом важном!

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

Источник

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

какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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 пикселей. И даже если в будущем мои сайты станут чуточку шире, то только за счет сайдбаров и отступов.

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

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

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

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

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

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

ЗЫ: тех, кто не нажмет на одну из кнопок ниже – найду, и лично дам в глаз! какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайтаЯ вас тоже очень сильно люблю какая должна быть ширина сайта. Смотреть фото какая должна быть ширина сайта. Смотреть картинку какая должна быть ширина сайта. Картинка про какая должна быть ширина сайта. Фото какая должна быть ширина сайта

Источник

Leave a Reply

Your email address will not be published. Required fields are marked *