За время своего существования сайты в интернете пережили не одну революцию, превратившись из простых страничек (и даже таблиц) в многофункциональных монстров в виде веб приложений. Сначала пользователей надо было удерживать на страницах, так в моду вошли пестрые цвета, анимации и flash player. Развился JS, веб перешел на HTML5, что подарило сообществу огромный функционал в плане технических возможностей и параметров кастомизации сайтов. Интернет быстро перестал быть местом для гиков, в интернет пришли серьезные дяди с серьезными бизнесами, которым нужно было солидно выглядеть на фоне конкурентов и продавать свои услуги. Начались огромные исследования, составление тенденций и рекомендаций, куча материалов от дизайнеров как надо делать сайты, это все переосмысливалось и обновлялось. Появились готовые библиотеки по работе со стилями, сильно упростившие процесс разработки.
Со временем, интернет в большей степени стал приятен глазу, ушли в историю сайты, переполненные баннерами и аляпистым сочетанием цветов, появилась стандартная сетка с колонками и отступами, все дизайнеры приняли за правило использование пустого пространства, так называемого «воздуха», а большинство сайтов стало похоже друг на друга по структуре и расположению блоков. А потом оказалось, что кругом очень много мобильного трафика, да настолько много, что количество таких пользователей стало превышать количество десктопных. И дизайн стали переделывать под них, как основную аудиторию, отказавшись от поддержки отдельных мобильных версий. У нас же теперь адаптивный дизайн, вот и будем адаптировать под разные размеры экрана.
Если что, это не хронология развития веб дизайна, это лишь принятие факта, что интернет не стоял на месте, развивался, и у каждого глобального тренда были свои причины, ничего не происходило и не происходит просто так. Я осознаю, что единственный движущий фактор текущего «стандарта» дизайна – превалирующее количество мобильных пользователей, вокруг которого всё и вертится. И, как пользователь классического десктопа, я даже догадываюсь на чём это всё вертится.
Открывая очередной сайт с компьютера, я вижу одну и ту же картину. На странице так много «воздуха» в виде отступов, что дышать просто невозможно, это просто перебор. Чтобы за примером далеко не ходить, вот ��ак выглядит лента Habr
Habr на десктопе
Под Windows, разрешение стандартное 1080p. Из всей имеющейся ширины страницы отступы занимают приблизительно 807 px, что составляет приблизительно 42%. Отнимите блок с дополнительной информацией про "Лучшие публикации", и окажется что самое главное содержимое сайта впихивают в 40-45% от все доступной ширины.
Половина пространства не занята абсолютно ничем. И это на любом разрешении, выше мобилок / планшетов. Основной блок кажется сплюснутым по центру, сжатым. Контенту просто визуально тесно на странице, ощущается как будто уменьшили масштаб. Но поверьте, это обычный 100% масштаб, обычное разрешение (1920х1080 для ПК и 2048х1330 для ноутбука).
Я не призываю срочно заполнять свободное пространство каким-то побочными блоками и секциями, размещать контекстную рекламу (кто-то еще застал сервис бегун? :)), или вешать баннеры в стиле "ПОВТОРЯЙ ВСЕГО 3 РАЗА В ДЕНЬ И У ТЕБЯ...". Я всего лишь задаюсь вопросом – почему это пространство нельзя эффективно использовать, увеличить текстовые блоки, размер шрифтов, межстрочные отступы и уменьшить боковые отступы?
Ах да, можно! И очень легко. Вот, к примеру, две статьи: одна в стандартном стиле, другая со слегка измененным. Какую вам проще читать?
Habr на десктопе
Одна и та же статья, один и тот же оригинальный масштаб 100%, одно и тоже разрешение экрана. У меня 27” монитор, который расположен где-то в полуметре от лица, даже чуть дальше. И в таком положении текст невозможно читать от слова совсем. И каждый раз приходится либо увеличивать масштаб сайта (заодно надеяться, что та самая адаптивная верстка не поедет слишком далеко), либо пододвигать монитор ближе к краю стола, либо отрицательно улучшать шейный отдел. Как все это выглядит у людей с широкоформатными экранами вообще не представляю.
Я ни разу не дизайнер, я не высчитывал соотношение сторон и такой вариант выглядит не идеально, хотя бы я предпочел именно его по умолчанию. Но каким образом мы пришли к тому, что отнимать по 30-50% пространства стало нормой, стандартом верстки и самой лучше практикой?
Возможно у этого безобразия есть объяснение, возможно найдется немало людей, которым нравится сплюснутый контент посреди страницы, возможно многие скажут, что открывают браузер в небольшом окне и у них текст отлично расположен. Опять же, я всего лишь вопрошаю у дизайнеров, вот это реально вершина текущих тенденций, изменений ждать не стоит? Почему при уменьшении размеров экрана элементы на странице можно перетаскивать и прятать, но при увеличении (читай стандартном разрешении экрана монитора), элементы нельзя растянуть, увеличить размер шрифта, уменьшить боковые отступы, добавить какие-то элементы и т.д.?
И я ни в коем случае не говорю конкретно за Хабр, подчеркну, так выглядит подавляющее большинство современных сайтов, это прям реальный стандарт. Просто для примера ряд популярных ресурсов.
Пикабу
Основной контент умещается в 695px, что 33 % от всей ширины, а боковые отступы составляют 944px или 46%
ВК
У ВК боковые отступы где-то по 395px (790 суммарно или 38,5%), а основной контент занимает 546px или 26,6%. Да, почти четверть экрана используется для основного контента и еще 40% просто пустуют.
Батя ВК
Ребята пытались и хотя бы заняли пространство списком разделов и контактами, но на размер ленты также поскупились и разместили весь контент в 676 px, или 1/3 от всей ширины.
Внебрачный сын ВК
Веб версия телеги (которая "а" именно) пытается использовать всю ширину, но сами сообщения все равно ��мотрятся мелко и занимают лишь 457 px, что составляет 22 % от всей ширины.
Где-то можно настроить шрифт, увеличить его, но это все равно ощущается, как какая-то временная заплатка, а не решение проблемы. Элементы кажутся непропорционально маленькими в сравнении со всей шириной и выделенным пустым пространством. И да, я понимаю, что гармоничное расположение контента является головной болью, слишком широко делать не хочется, крупный текст может отталкивать людей, а текстовые блоки кроме как столбиком люди не могут воспринимать, но неужели вот ничего нельзя с этим придумать?
Мы дошли в веб-дизайне до состояния, что в угоду непонятно чему страдают интернет магазины. Мне всегда казалось, что бизнес хочет как можно больше информации размещать на экране, сообщать об акциях и предложениях. Будь вообще только его воля, из рекламных банеров состоял бы весь сайт, но дизайнеры убедили, что так делать нельзя, это отпугивает пользователя и нужен порядок в элементах и баланс.
Вроде с этим не поспоришь, но вам не кажется, что со всеми этими правилами палку перегнули? Вот к примеру сайт магазина DNS.
DNS
У магазина "украли" 32% пространства за счет боковых отступов, а самое главное этим объяснили, что вот больше 5 баннеров сверху вставить нельзя, и специальных предложений влезет только 4,2. Хотя здравая логика подсказывает, что стоит уменьшить эти отступы и все эти карточки спокойно размесятся на странице. Но что-то мешает, и я не могу понять что? Неужели от этого ухудшится пользовательский опыт, или восприятие испортится?
Опять же, дело не в конкретных сайтов, таких большинство. Это какой-то стандарт, к которому пришла индустрия и ему следуют многие студии и разработчики. Да даже Apple грешит тем же самым, шапка и подвал снова покусаны волками за бочки.
Сайт Apple
Но относительно Apple можно возразить, это возможно связно с их "челкой", или док панелью, которая исторически занимала лишь часть экрана по центру, оставляя отступы. В общем, можно фантазировать, но главное, что сам контент занимает всю ширину – статьи, постеры, анимации, сравнение моделей. Это все сделано во все ширину экрана и смотрится отлично.
Я до последнего ждал, что с появлением 2k и 4k мониторов в обиходе ситуация изменится, но нет. Это не стало драйвером переосмысления размеров страницы, это не задало новый тренд на обновление стандартов. Все также, все мелко и не удобно. Не покидает ощущение, что ты случайно открыл мобильную версию сайта, и почему-то не можешь найти кнопку переключиться на настольную. Хотели сделать сайты для людей с ограниченными возможностями, покалечили здоровых. Так и живем в надежде, что ситуация изменится, что дизайнеры таки постареют и ощутят насколько комфортно пользоваться сайтами, когда контент занимает лишь 30-40 % от всей ширины экрана, а ты это читаешь за нормальным монитором, а не уткнувшись носом в экран смартфона. Похоже первыми постарели дизайнеры Яндекса, внезапно выкатив обновленный сервис музыки, без отступов в пол экрана. Оказывается, что так можно делать, поэтому ждем остальных.
Спасибо, что дочитали мою статью! У меня есть небольшой телеграм канал, буду рад подписке и неформальному общению.
