Комментарии 142
Дело в том, что длинный текст читается намного лучше, если глаза не двигаются сильно влево-вправо, а только сверху вниз. Это в силе только для текстов – длинные текстовые статьи, романы, текстовые обсуждения – там где текст переносить большую часть информации. Поэтому кстати, газеты верстают колоннами. Текст в html тоже можно так верстать, но это непросто, когда есть и другое содержание, а сам текст предварительно неизвестен – как на Хабре например. А там, где много картинок – конечно такое не надо. Интернет магазин например. Но дизайнеры, такие – пока «тренд» не изменится, будут делать как модно, а не «как надо».
Можно ли заставить браузер показывать веб страницу как в книге? Что-типа dual page view в просмотрщиках пдф файлов?
Можно сверстать длинный текст в несколько колонок , используя для этого CSS. Однако там сразу возникает другая беда - вертикальный размер колонок может оказаться больше вертикального размера области просмотра в браузере и тогда у юзера возникает необходимость прокручивать контент туда-сюда еще чаще, чем если бы юзер читал одноколоночный текст.
Так в лисе такая фича давным давно, на счёт дуал не знаю
Влево-вправо понятие относительное, и оно зависит как от размера экрана, так и расстояния до него. Кто-то сидит уткнувшись носом в 52 дюмовый монитор, у кого-то 24" стоят на расстоянии полутора метров, а у кого-то вообще все это на телевизоре на противоположной стене.
В идеале нам нужно выдерживать примерно одинаковый УГЛОВОЙ размер шрифта и строки. Но этой информации у нас нет и быть не может.
НО! В случае десктопа мы можем считать что пользователь легко задаст комфортный размер окна браузера. Т.е. слишком сильного влево-вправо на десктопе не будет, даже если сидишь упершись носом в большой монитор. Не нужно об этом беспокоиться. А нужно использовать окно браузера на все 100%.
Конечно, но мониторы обычно ориентированы горизонтально. Поэтому, если мы расположим его так, чтобы видели строку текста в правильном размере по ширине, то по вертикали будет слишком мало текста и придется чаще и интенсивнее скролить, что тоже неудобно. Решение – повернуть монитор на 90 градусов в портретном формате. Тогда текст можно показывать гораздо лучше, но вот, картинки и чертежи будут смотреться хуже.
Забудьте как ориентирован монитор! На больших мониторах пользователь не будет открывать браузер во весь экран. Он растянет окно браузера так чтоб было удобно. И будет на экране 16:9 окно браузера квадратное. Причем окно браузера будет именно комфортного размера по ширине. Пользователь его растянет до размера, который ему удобен для чтения.
Со скролингом - да проблема, но не такая уж и сильная. Гораздо чаще видишь, что верхние 10% высоты заняты самом браузером (меню, табы, риббон etc), еще 20% сверху заняты заняты "прибитым намертво" хедером сайта. Снизу еще 20% отъедены всякой всплывающей хренью. То панель с нотификациями выедет, то реклама, то еще не пойми что с "рекомендациями". И в результате контент использует только 50% доступной высоты. Плюс "выезжающие" системные таскбары. Вот тогда скроллинг БОЛЬ! А если дизайн сайта нормальный, то скроллинг вполне вменяемый.
На больших мониторах пользователь не будет открывать браузер во весь экран. Он растянет окно браузера так чтоб было удобно.
Только делать это достаточно неудобно(а как удобно - мало кто помнит и умеет). Гораздо проще иконку раскрытия на весь экран нажать. Причем это действие может быть рефлективным со времен страх мониторов. Вот и получаем жалобы либо на неиспользуемое пространство, либо на слишком длинные строки.
Сказать просто, а сделать не так легко. Если читаем длинный текст, то самый удобный размер окна, это 100% высоты и ширины примерно в 50%. И чтобы окно было расположено в центре экрана. Даже если и монитор огромный, пусть высота будет не 100%, но соотношение сторон все равно должно быть приблизительно портретным. Так вот – опишите какими операциями это делается?
Так вот – опишите какими операциями это делается?
Win + Shift + стрелка вверх (окно растягивается максимально по вертикали)
Потому правую и левую границу двигаем мышкой или через меню (вот этого вообще мало кто помнить, что можно)
Либо ставим PowerToys FancyZones, размечаем центральную зону и потом помещаем браузер там.
Берем мышью за правый-нижний угол окна и растягиваем как нам удобно.
Собственно я это все из личного опыта. Сейчас сижу на расстоянии вытянутой руки (70 см) от 52" экрана. Браузер висит примерно в середине экрана. Но если параллельно открыта Visual Studio, то сдвигаю браузер вправо, а Студию влево.
На Макбуке тоже подключал внешний монитор и мышь. И все примерно так-же, только переключаться между окнами менее удобно.
Беда в том, что окно браузера то я растягиваю, а вот ширина текста на то-же Хабре не изменяется.
Берем мышью за правый-нижний угол окна и растягиваем как нам удобно.
Как бы не так. Вот я сейчас новое окно браузеру сделал - и оно появилось с правым нижним углом за пределами экрана.
Сначала двигать к верхнему краю экрана надо. Причем, если мышкой упрешься - у тебя винда во весь экран окно развернет. В общем, оно порядком неудобно.
Win + Shift + →
Win + Shift + ←
?
Move the active window to the monitor on the right.
Move the active window to the monitor on the left.
Отсюда. Просто в системе, кстати, я даже не знаю, где этот список найти.
Там есть комбинация клавиш для сдвига окна на полокна направо или на полокна влево.
Там окно приложения тогда занимает ровно половину окна экрана.
Я обычно так окошко Telegram подвешиваю. На десктопе.
Берем мышью за правый-нижний угол окна и растягиваем как нам удобно
Мне в разных ситуациях удобны разные размеры окна браузера (использую несколько окон). И я уже задолбался этой мышкой все время их устанавливать. Были бы какие-то горячие клавиши, чтобы можно было несколько вариантов задать (а если еще и с местоположением на экране!). Эх...
Были бы какие-то горячие клавиши, чтобы можно было несколько вариантов задать (а если еще и с местоположением на экране!). Эх...
PowerToys FancyZones как раз про это.
Тут стоит задаться двумя вопросами:
Почему хочется все время менять размер окна браузера? Часто это из-за того что веб-страница не адаптируется под "любой размер" (как Хабр), а сверстана под жестко заданные пропорции. Т.е. нормальный дизайн страниц уменьшит желание дергать окно браузера в разы.
Почему так сложно сделать горячие клавиши для установления "предустановленных" размеров окна? Да современные ОС такого не предоставляют. Но почему так сложно написать внешнее приложение для этой функциональности? В Windows, честно говоря, это совсем не сложно. Банальный WinAPI, глобальный hook на события клавиатуры для создания своиз горячих клавиш, управление окном путем отправки оконных сообщений. Но видимо нет большой потребности, раз до сих пор никто ничего подобного не написал.
Почему хочется все время менять размер окна браузера?
Потому что у меня для разных режимов работы свой набор сайтов требуется, с разным расположением окон (а еще и режим отдыха есть)).
Но видимо нет большой потребности, раз до сих пор никто ничего подобного не написал
Предлагаете удовлетворять потребности только 90%-го большинства?
На мой взгляд всё гораздо проще. Интернет ушел в мобилки. Мало лишь кто из пользователей заходит через DeskTop. А раз так, то мода делать DeskTop как разновидность мобилки.
Дизайн и верстка стоит денег. А ради удобства небольшого процента читающих с DeskTop никто заморачиваться не станет. Капитализм, однако!
переносить
колоннами
А так, да.
Дело в том, что длинный текст читается намного лучше, если глаза не двигаются сильно влево-вправо
Гм. Можете подтвердить ссылкой на исследования?
Мой субъективный опыт говорит об обратном, мне "узкие" статьи читать тяжело. Кроме того, как я помню из каких-то статей по восприятию текста, глаза не двигаются плавно, но "скачут", объем скачка зависит от того, сколько слов сразу человек, образно говоря, забирает в обработку. Так учат скорочтению -- читать не по буквам и словам, а целыми группами слов.
Роберт Брингхерст в книге «Основы стиля в типографике» говорит, что оптимальное значение длины строки составляет от 45 до 75 знаков.
а вот интересно, эти оптимальные значения как определили? И когда? Может это оптимально для свитков? Или берестяных грамот?
Это очень просто проверить: просто скопируйте в блокнот несколько абзацев текста, сожмите его до 70 строк и почитайте. А потом растяните до хотя бы 300-400, и попробуйте не слететь взглядом на другую строку хотя бы в течение одного абзаца.
У меня этот показатель в районе 140-220 знаков. А дочь спокойно может читать и 250 знаков строки.
И это при удержании фокуса зрения в районе центра.
Это ещё от межстрочного интервала зависит. Чем шире текст, тем больше должен быть и интервал.
Я вам прямо скажу – я и 1000 осилю. Но ведь дело не в рекордах, а в эргономике. Человек банально будет читать быстрее и понимать лучше, если текст форматирован правильно. Я тоже топлю за использования экранного пространства, но это далеко не простая задача. И она пока не решена – то есть пока нет такого дизайна, чтобы и строка была достаточно узкой и чтобы экран использовался на 100% и чтобы дизайн был универсальным – применим к произвольных большим текстам с иллюстрациями.
За дочь не скажу, однако мне неудобно вертеть головой влево-вправо. А может ваша дочь вундеркинд. Всегда высчитывается среднее значение обычного человека, а не вундеркиндов очевидно.
А теперь сами проверьте. Сделайте эти 70 знаков 8 кеглем и, например, 22. Сравните свои впечатления
Оптимальные значения определили на основе комфорта чтения, а он зависит от размера макулы, искажений от бинокулярности и соотношения размера шрифта к удаленности от глаз. Учитывая что ничего из этих параметров не меняется со временем - это значение будет оптимально всегда.
Чтобы это ощутить - достаточно просто попробовать прочитать статью со смартфона держа его не перед собой а на 5-10 см левее или правее носа.
добовлю еще особенность внимания человеков удерживать сиюминутное количество информации. это значит, что цели бизнеса продать, проинформировать об акциях и прочих новинках не будут достигнуты, если на странице будет 10 баннеров. они просто не будут прочитаны.
эти данные многолетние, получены путем исследований, людей и их поведение на сайтах изучали, поэтому и выработаны эти дизайн-законы. и с длиной строки (точнее количества символов в строке) то же самое.
Там основано на том, какое количество информации мозг среднего человека может одновременно удерживать в уме. Чтобы не терять контекста.
Не уверен, что так. Скорее всего, ограничение в том, что двигая глаза влево-вправо, человек их не очень хорошо позиционирует и взгляд легко съезжает на нижнюю строку. По крайней мере у меня так получается читая очень широкие тексты. Механизм, комплексны – так как левая и правая часть экрана несколько дальше чем центр, то глаз должен менять фокусировку – причем два раза на каждую строку. Еще человек инстинктивно вращает и голову. По итогу – во время этих всех движениях отслеживание строки теряется и начинается отслеживание нижней строки. И так как человек читает на автомате, то он осознает, что что-то не так как только смысл до него доходит. Осознает, возвращается назад, ищет где сбой случился, перечитывает. И все это – по сути лишние усилия.
Если отдалим экран, то мы тем самым его уменьшаем, но тогда вынуждены увеличивать размер шрифта и экран по сути превращается в меньшим экраном, но с лучшим качеством изображении. Больше информации на нем уже не поместишь. К тому же, если монитор расположен так, что нам удобно читать, текст на 100% ширины, то высота этого монитора окажется очень неудобной для чтения текста и нам придется все время скролить. Вот попробуйте читать книгу через картонку с окошком 16:9. Книги с текстом неспроста делают вертикальными.
мозг может удерживать 45 символов??
Как неожиданно, что в качестве примеров приведены сайты, на которых хотя бы часть контента является текстовой. На том же ютубе, например, занята вся площадь экрана, почти все магазины занимают минимум 80 процентов ширины. И уже несколько раз комментаторы сказали, почему так - ну невозможно комфортно читать широкие блоки текста. А зачем несколько текстовых блоков распределять по ширине я не понимаю, потому что в отличии от газет экранное пространство бесплатное.
Ну вот к примеру сайт магазина ситилинк, стартовая страница. Те же отступы, но хотя бы все карточки поместились. При этом если нажать на каталог, то модальное окно будет из самого края экрана. То есть, в каких-то случаях это нормально, использовать всю ширину, но в целом оставляем ее пустой.
Ситилинк
Возьмем тот же Кинопоиск, который состоит из банеров и промо-роликов, особенно стартовая страница
Кинопоиск
Да, есть ютуб, есть Окко, да и немало сайтов, которые занимают максимум пространства. И. считаю, что это классно и удобно для пользователей ПК. Сейчас экраны большие, не 15-17" в соотношении 4:3, как 15 лет назад.
Да, с текстом сложнее, про это и указывал в статье, его сложно верстать, оставлять читаемым и не растягивать сильно по ширине. Но и как будто умещать в 30% от ширины тоже перебор? Почему не увеличить его размер, пропорционально подтягивать отступы. И пусть не делать его во всю ширину, но хотя бы в 50-60% уже будет гораздо лучше.
Прошу прощения, лучше чем? Лично мне нравится, как выглядит хабр, и я считаю его удобным. Зачем растягивать его шире ума не приложу.
Когда открываешь статью выпадаешь из контекста, где эта статья была. Чтобы перейти к следующей статье, нужно вернуться назад, найти предыдущую статью и от неё уже искат следующую интересную.
Прошу прощения, лучше чем?
Ок, это субъективно. Давайте с другой стороны зайдем, вы с какого монитора его используете, что вам нравится? И как далеко монитор расположен от ваших глаз?
Я придерживаюсь рекомендаций и держу расстояние где-то 0,5-0,7 метра от глаз. Вот для такого расстояния было бы мне удобнее, если текст занимал не 40%, а 55, например и был слегка крупнее.
Какая ситуация у Вас?
Опять же, Хабр новостной портал, с текстом проблемы в верстке есть, опустим его.
Вы же сами ссылаетесь на Ютуб, где используется вся ширина. Вам было бы удобнее, если у него были бы отступы? Или вы считаете кинопоиск отлично сверстан и его боковые отступы чем-то обусловлены?
Больше того — можно же сами блоки распределить на странице нормально (отступы и прочие), а уже внутри центрального блока длину строки текста делай малую, там на 100 знаков или сколько они там дружно решили, когда методологию для печатания книг разрабатывали….
Несколько текстовых блоков позволяют быстрее пробежать глазами по тексту , и вернуться в любое его место. В идеале , конечно хорошо бы делать два режима отображения. С текстовыми блоками и без них.
вот так выглядит лента Habr
(Завистливо:) Везёт Вам!
Я тут рассказывал про концепцию буклетного дизайна, который и на мобилке удобен и на десктопе эффективно использует пространство, имея при этом и там и там единый UX.
не знаю, что там, но ссылка ведёт на совершенно пустую страницу, на которой только календарь с обрезанным воскресеньем. но вроде бы понял, что такое буклетный дизайн. но почитать про него, увы, придётся где-то ещё. учитывая битьё в грудь выше, даже забавно
Можно скриншот этого вашего обрезанного календаря?
Давайте я прикреплю скриншот результата перехода по вашей ссылке.
Скриншот
А в консоли есть какие-либо ошибки? Какая версия браузера?
Safari. Версия 18.3.1 (19620.2.4.111.9, 19620)
В консоли только одна ошибка:
WebSocket connection to 'wss://sync.hyoo.ru/' failed: There was a bad response from the server.
Под катом заголовки запроса и ответа. К сожалению, xar-файл не прикрепить.
GET /
Upgrade: websocket
Pragma: no-cache
Sec-WebSocket-Key: y/a/jTNjQEfJBB2IPETEDQ==
Sec-Fetch-Site: same-site
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: permessage-deflate
Cache-Control: no-cache
Sec-WebSocket-Protocol: $hyoo_sync_protocol_1
Sec-Fetch-Mode: websocket
Origin: https://mol.hyoo.ru
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15
Connection: Upgrade
Sec-Fetch-Dest: websocket
502 Bad Gateway
Content-Length: 0
Date: Sat, 29 Mar 2025 18:40:39 GMT
Alt-Svc: h3=":443"; ma=2592000
Server: Caddy
Сейчас что-то изменилось. После загрузки появилась анимация скрытия левой колонки. До этого её не было.
Плюс очень странная навигация. Только горизонтальный скролл позволяет вернуться к левой колонке. О существовании самой крайней правой колонки узнал только после случайного горизонтального скролла.
Gif
Причины такого дизайна в биологии, и ничего с этим не поделать. Даже предложения магазинов когда они заполняют весь экран 21:9 мне рассматривать тяжело, что нибудь пропадает в слепую зону, про тексты вообще молчу. Газетный вариант на мониторах тоже смысла не имеет - там газету складывали или держали так, чтобы интересующая колонка былв перед глазами, монитор в руках не по крутишь. И книги не делают в альбомной ориентации по той же причине.
А в вашем случае (вроде в статье жалобы на мелкий текст) - возможно ещё неправильно выбрано отношение размера экрана к масштабированию системы (хотя fullhd 27 должно быть наоборот всё слишком большое, это на 4к 17 обычно все ужасно мелкое)
Причины такого дизайна в биологии, и ничего с этим не поделать.
Однозначно соглашусь вот с этой фразой. Остальное дискуссионно.
И для очень многих решений в современных сайтах справедлив древний анекдот:
Программист Василий уже 18 часов сидел за экраном монитора, проводя дебаг и листая исходный код в поисках ошибки. Он так никогда не догадается, что ошибка была в генокоде...
(Ах эта чертова альбомная ориентация) Вот и спрашивается тогда, а куда это ушел общий тренд мониторо-строения, что мы все повсеместно пересели в «кинотеатр»?
Обычный юзверь хочет телек смотреть, ему и в прок все эти 16:9 и выше. Потом дизайнерам всяким нужно, еще там кому (геймерам, но тоже не всем, но многим)…
За это все остальные страдают. Спасибо трендам и видеокарты кстати туда же двинули….
Так я думаю у него 4к экран и там размер букв привязан к пикселям, а пиксели мелкие и их много на 1 см экрана, поэтому получается мелко. Было бы неплохо, если бы сайты через фингерпринт получали инфу о мониторе и для 4к разрешения делали другое соотношение пикселей к букве, тогда получится на 2 мелких поста на стоаницу, а 1 пост покрупнее ны страницу. А если разработчики сайте не пропишут фиксированные отступы, то пост и по ширине был бы шире, а не только буквы крупнее.
Сейчас "статьи" очень сильно укоротились, выродившись в один-два абзаца текста и набор картинок, зачастую бессмысленных. Если такое верстать на десктоп, будет заголовок и две строчки текста под ним. Придется забивать поля выше и ниже. На десктопе хорошо смотрятся длинные содержательные статьи
Вот при мер типичной статьи Инета, наскоро переверстанной под десктоп по ширине экрана.
"Полезное" содержимое занимает небольшой процент площади экрана. Набивка сайдбара справа не особо поможет, верх и низ совсем пустые, неисправимо.
Инет выродился. Газетная верстка колонками годится для продуктовых карточек магазина с флексом по ширине, а где много букв - неразрешимое противоречие.
Длинный текст пользователь десктопа может просмотреть по диагонали, ухватить суть и это удобно. Адепт же наладонника лишится пальца в попытке домотать до конца и потеряет смысл на первой трети.
Вот следующая статья. Та же картина
Заполнять всю ширину экрана смысла нет - потому что кроме минимально удобной длины строки есть и максимальная.
На счёт сверхишироких мониторов - их обычно берут не для того, чтобы одно окно растянуть на весь экран, а чтобы несколько окон рядом держать. Хотя, конечно, и одно окно иногда приятно расширить - бухгалтеры очень радуются, когда свои таблички в 1С или экселе могут видеть. Но большинство программ всё же имеют предел удобства.
Что, впрочем, не отменяет того, что сайты многие информации на экран пихают меньше минимального. Особенно такие, которые слайды показывают виде "картинка и три слова", хотя всё содержимое страницы в полэкрана уложится.
Свободное пространство нужно чтобы выделить то ради чего открывается страница. Плюс есть некие эстетические принципы. В книгах не зря делают поля, а не начинают печать с верхнего левого угла страницы.
Насчет магазинов - попробуйте открыть яндекс/гугл картинки. Там как раз будет максимальное использование пространства. Но если тебе надо не бегло найти что то схожее с тем что ты искал по изображению, а еще и вычитывать названия, модели, все это сливается в одно огромное полотно, будь схожая верстка на сайтах интернет магазинов. Новейшие технологии принесли нам не только легкие дизайны но фильтры по которым ты можешь найти то что тебе нужно и вываливать весь список во всю ширину экрана на клиента выглядит странной затеей.
Бредятина. Печатный текст в больших форматах не просто так делают в 2 столбца, иначе пришлось бы слишком далеко вести глаза, что и создавало бы паузы, и повышало бы вероятность ошибиться со строкой. Так что любая лента должна быть довольно узкой. Вот более сложные интерфейсы с отдельными блоками уже можно делать на весь экран, как в Спотифай например. ЯМузыка частично скопировала его в новом стиле, но работает он хуже, так что я до сих пор на старом сижу
Человек читает текст узкой вертикальной полосой. А фильмы смотрит горизонтальной полосой. Такое вот противоречие
Возможно у этого безобразия есть объяснение
Да, есть:
- рисовальщики дизайнов пользуются не такими же мониторами, как обычные люди
- рисовальшики дизайнов должны выпендриваться перед начальством и друг-дружкой, иначе им снизят зарплату
рисовальщики дизайнов пользуются не такими же мониторами, как обычные люди
У вас, наверное, большой широкоформатный монитор, верно?
Вы удивитесь, но подавляющее большинство пользователей сидит на небольших ноутбуках, и какие-то душевные терзания из-за огромных ушей по краям контента, испытывает чуть реже, чем никогда)
Про длину строки тут уже каждый второй накидал. Я, как продуктовый дизайнер имеющий дела со статистикой, могу добавить что процент посетителей с 3,4,5К пока что ничтожно мал, по сравнению с wxga+ и wxga++ (1440 и 1600). Вот как стрелочка повернется - так и будем думать куда и как девать свободное пространство.
PS: мало того, много трафика из стран третьего мира с телефонов 320*480 из под Opera(j2me)
Дизайнер здесь.
Первое, владельцы широких десктопных мониторов - не главная ЦА таких сайтов. Сперва идут пользователи мобильных телефонов, затем скорее владельцы небольших мониторов на ноутбуках - таких большинство. Супер-пупер крутые большие десктопных мониторы - менее 10% (по разным оценкам, зависит от домена).
Именно поэтому, когда верстается десктопная версия сайта, в первую очередь смотрят на владельцев небольших мониторов ноутбуков, чтобы им было удобно. На gs.statcounter можно наглядно посмотреть мировое распределение разрешений экранов устройств, которые используются в вебе. Большие мониторы с высоким разрешением, прямо скажем, немного.
Это объясняет, почему большинство маркетплейсов выберут за основу десктопа скорее разрешение 1024 или 1440. Тогда, на большем экране контент будет смотреться нормально, пусть и с полосками, а на маленьком - точно все будет на месте. Дальше идут брейкпоинты для планшета и для телефонов.
Что касается сайтов с текстовым контентом (статьи, новости, блоги и т.д.) есть общие рекомендации по ширине текстовой строки 50-75 символов. Все что длиннее - становится тяжело читать. Глазам придется проделывать слишком длинный путь от конца одной строки до начала следующей. Если вы когда-нибудь читали статью и оказывалось, что вы не можете понять, это предыдущая строка или уже следующая - это как раз из-за нарушения этого правила.
Если вас тяжело читать - воспользуйтесь функциями для слабовидящих, они позволяют увеличивать шрифт контента. Обычно хорошие сайты поддерживают такую возможность нативно. Увеличение контента в окне браузера - скорее крайняя мера.
А в целом, отступы по краям, это специфика домена. Если интерфейс высоконагружен - он будет стремиться заполнить все пространство, потому что нужно показать как можно больше функций. Если интерфейс простой - то достаточно занять лишь центральную область и сделать ширину такой, чтобы пользователю было легко читать контент.
Так что никакой тут моды нет. Банальное следование юзабилити практикам. Что удобнее для большинства - то и делают.
Первое, владельцы широких десктопных мониторов — не главная ЦА таких сайтов.
Ну то есть наиболее платёжеспособные потенциальные клиенты — не главная ЦА таких сайтов. Ну ОК. ¯\_(ツ)_/¯
Вот именно, что они потенциальные.
Да и как уже неоднократно упоминалось, их мало. Один, готовый заплатит миллион, не перекроет пятидесяти, готовых отдать по 100К.
Вера в то, что наиболее платёжеспособный потенциальный клиент читает сайт с айфона, среди маркетологов неистребима.
Это не вопрос веры, а вопрос метрик. На каждый чих вешается разметка, поэтому разработчики веб-сервисов прекрасно знают, кто их ЦА, кто из этой ЦА оставляет больше денег на ресурсе, и соответственно, на что имеет смысл тратить ресурсы компании.
Можно сколько угодно рассказывать про платёжеспособность владельцев Ultrawide 5k мониторов с частотой 160 гц, но основная аудитория какого-нибудь Озона будет заходить к ним и оставлять свои рубли с каком-нибудь смартфона Сяоми средней руки.
Потенциальными клиентами Хабра являемся не мы, а те кому Хабр нас продаёт. :)
Первое, владельцы широких десктопных мониторов - не главная ЦА таких сайтов. Сперва идут пользователи мобильных телефонов, затем скорее владельцы небольших мониторов на ноутбуках - таких большинство. Супер-пупер крутые большие десктопных мониторы - менее 10% (по разным оценкам, зависит от домена).
Хм...
А я всегда считал, что сайт по умолчанию должен быть адаптирован под любые сценарии просмотра. И что любые возможные косяки — просто лень разработчиков и/или неосведомлённость заказчиков в попытках сэкономить на разработке. Последний момент, по идее, должен опровергать перед заказчиком сам разработчик, но кто-то молча соглашается ("меньше работы, проще не спорить и взять заказ").
Здорово, когда есть неограниченные бюджет и время) Тогда можно для каждого сервиса сделать адаптив под все возможные разрешения и соотношения сторон. Например, потратить множество часов на разработку адаптива под смартфоны и кнопочные телефоны с экраном 128х128 для интранет портала госкорпорации, на который можно зайти только с десктопа)
Но в реальном мире за все нужно платить, поэтому люди сосредотачиваются на том, что действительно приносит им деньги и занимаются приоретизацией задач.
Вот, и это третья фундаментальная проблема по сабжу:
1) форматы мониторов пошли куда-то не туда. То есть индустрия в 95% продает моники с альбомной ориентацией ( фильмы смотреть, в игры играть, дизайн строить), а про остальную часть пользователей забыла/забила
2) то шо вы говорите и это проблема повсеместная. Все хотят залезть в уезжающий вагон, или построить свои бизнес не имея ни средств ни потенциала)
3) пока писал забыл, простите.
форматы мониторов пошли куда-то не туда.
Смотря как смотреть. Два листа A4 в натуральную величину рядом друг с другом отлично помещаются. Как раз то что надо для редактирования документов.
Потому что это удобнее для большинства людей: играть в игры, смотреть фильмы, располагать рядом несколько окон. Да и в графических редакторах, например, слева и справа можно разместить панели с инструментами и по центру все равно будет достаточно пространства для рабочей области.
Это не проблема. Проблема, когда делают функционал ради функционала и дизайн, ради дизайна: технически здорово, но никому не нужно и только сосёт деньги у компании
1) Все это очень спорно, и не отменяет того, что индустрия может продавать мониторы разного формата.
Я живу один, смотрю телек один, да даже если вдвоем с девушкой, зачем нам монитор формата 16:9?
Я шо, тллпой смотрю тот фильм? Нет А в гостиной можно и телек 16;9 поставить — не спорю…
То есть суть в дифференциации рынка форматов мониторов:
Нужен бухгалтеру или дизайнеру или геймеру (симррейсеру) такой— вперед в соотвествующий отдел и покупай. А мне и 12:9 будет окей, да хоть 4:3.
И конечно понимаю, что это надо больше линий создавать конвейерных, но нет, они всех под одну гребенку сунули. Мол смотрите все как в кино и не выпедривайтесь.
Тут все. И маркетинг, и сложность создания дополнительных линий, еще что…
2) не уверен что понял, но согласен))))
Здорово, когда есть неограниченные бюджет и время) Тогда можно для каждого сервиса сделать адаптив под все возможные разрешения и соотношения сторон.
Ну, как бы десктопы — далеко не попадают в категорию "узкого профилирования", мягко говоря. Десктопами почти каждый день пользуются миллиарды (буквально) людей...
P.S. Я сам — весьма платёжеспособная ЦА. Но 99% моего времени в интернете проходит за десктопом (тем самым, нормальным, с большим экраном и человеческой клавиатурой). И вот как только вижу на каком-нибудь сайте косяки с юзабилити – чаще всего мне проще закрыть и забыть. UX слажал, минус один клиент.
А таких немало.
Нежелание выходить за рамки. Нашли шаблонные разрешения мониторов, телефонов и под них все лепят
воспользуйтесь функциями для слабовидящих, они позволяют увеличивать шрифт контента
Ахах, юзабилити на высоте.
Видимо автор не застал момента когда переходили с мониторов с соотношением 4:3 на мониторы 16:9/16:10
А когда это происходило, вот описываемое автором было. Причем там было два варианта
Весь контент выровнен по левому краю в итоге 60% экрана просто пустое пространство и вместо центра монитора надо было смотреть в левую половину монитора.
Весь контекст растягивается на весь экран и читать это становится решительно не возможно, так-как приходится двигать уже не глазами но еще и головой, в итоге падает скорость чтения.
И в те времена единственный способ нормально адекватно использовать интернет, было масштабирование окна и размещение его по середине рабочего стола. В итоге по краям экрана браузера оставались те же самые поля что сейчас есть на любом сайте.
, было масштабирование окна и размещение его по середине рабочего стола.
Микрософт, кстати, давно пора сделать для этого хоткей. У них, конечно, есть Win + Shift + Срелка вверх (растянуть окно вертикально) и Power Toys, где можно слоты для окон разложить, но как-то оно костыльно выглядит.
Так это удобно было, можно было хотя бы ширину окна браузера под себя подогнать, а внутри окна от края до края текст.
В современном вебе меня больше пугает размер страниц при их кажущейся простоте.
Ставлю 125% зум по дефолту в браузере и в ус не дую.
Под Windows, разрешение стандартное 1080p. Из всей имеющейся ширины страницы отступы занимают приблизительно 807 px, что составляет приблизительно 42%.
Не вгоняйте меня в ступор своими цифрами.
Проблемы не наблюдаю на ноуте 15".
Проблемы не наблюдал на мониторе 22".
Свои сайты делаю максимум в районе 1000px ширины (со времен когда были мониторы 1024px).
Я не дизайнер и они меня не покусали.
Вы для чего покупали 27" монитор? Почему не купили 40" телевизор?
Это не от мобил пошло пустое пространство по бокам.
Ах да, можно! И очень легко. Вот, к примеру, две статьи: одна в стандартном стиле, другая со слегка измененным. Какую вам проще читать?
Первую. Вторая стала шире, текст больше, но какой смысл, если существует Reader mode специально для этого и масштаб в системе и в браузере, которая решает проблему размера и расстояния до монитора?
Обратил внимание, что статья заплюсована, то есть проблема есть.
А в комментах обратная движуха, словно проблемы и нет.
В свое время мы делали новый сайт. Лендинг. Где то год назад. Решили делать все правильно. Что бы на всех устройствах выглядил хорошо. Начинали с ширины 1920 и шли до Мобайла. Вышло не плохо. Но потратили время ну очень много. И вышел 1920 делать это перебор. Проводили исследования.
Если не лендинг, то еще проблемнее.
Многие взяли наработки для 1024 и добавили воздух по краям.
Если заморочиться действительно грамотной и полной адаптацией — всё прекрасно верстается под любые размеры. Другой вопрос, что времени и сил это отнимает на порядок больше.
Но вот только такой вариант (долго и трудно) и есть "правильно". Всё остальное — компромиссы. И беда для пользователей (по крайней мере, для изрядной их части).
Ну-ну
Не покидает ощущение, что ты случайно открыл мобильную версию сайта, и почему-то не можешь найти кнопку переключиться на настольную.
Это вот новомодное "mobile-first" действительно бесит просто неимоверно.
Адаптация, тонкая настройка, всякие там @media? Не, не слышали. Тупо сдали мобилку, заказчик посмотрел с телефона, все умыли руки.
И хорошо ещё, если дело только в размерах блоков/шрифтов. Порой умудряются косячить даже со скроллом (с этой бедой на десктопе скроллится колёсиком раза в два-три-четыре медленнее, по ощущениям)!!!
Мне просто интересно посмотреть, как сами разрабы тестируют это вот всё своё "творчество". Неужто только с мобилок — а мысль протестить с рабочего десктопа никому даже в голову не приходит?
P.S. Если контент того стоит — тут спасает только верный Stylus. Но вот как-то всё больше напрягает, что для нормального пользования на десктопе приходится самому "дорабатывать напильником" вручную...
P.P.S. Крик души, накипело, да. ))
Докину к тем, кто говорит про правильность полей по бокам и сравнительно узкой колонки с текстом.
Тут дело в том, что пример - он от старых привычек, когда мониторы были маленькие. Сейчас открываем в том же Edge левую панель с табами (монитор более широкий чем высокий, поэтому незачем на табы вертикальное пространство тратить), справа открываем боковую панель с закладками, панель задач винды - тоже отправляем на боковую часть монитора.
И готово - проблема широких белых полей у контента решилась.
Так давно использую uBlock, что даже и забыл, что Habr когда-то был свёрстван в 3 колонки :)
Накину еще немного в сторону дизайна со стороны телеграмма. У него в веб версии - не уверен насчет десктопных клиентов - и в мобильном приложении ширина сообщения зависит от контента.
То есть есть, некоторая базовая ширина, которую занимают сообщения. И дальше в зависимости от контента эта ширина может быть уменьшена. И это прям режет глаз, особенно когда на одном экране сообщения могут быть в 3-5 разных размерах, в зависимости от медиааттача или сообщения, на которое отвечает собеседник.
По собственным наблюдениям — ширина блока сообщения в ТГ зависит от двух параметров:
1) Если к сообщению приложены картинка/видео, то ТГ пытается растянуть текстовый блок на их ширину (непредсказуемым образом, какую-то единую и чёткую логику я пока так и не просёк — есть лишь подозрение, что это как-то привязано к соотношению сторон).
2) Если текст отформатирован как "код" (Ctrl+Shift+M) — тут ТГ тупо растягивает на всю ширину области сообщений.
Карточки на сайте DNS кмк умышленно не влезают полностью, чтобы у пользователя было понимание, что там справа ещё есть карточки и их можно листать.
Можно использовать user stylesheets и на своей стороне переопределять CSS как вам удобно. Лично мне текст во всю ширину монитора читать всё-таки затруднительно, и судя по комментариям, для большинства - тоже.
Читать текст который растянут по всей ширине монитора неудобно. Человек привык читать книги, а они вертикальные, как и мобилы. Потому нет смысла растягивать основной блок по ширине. Даже если взять какой-нибудь сайт дизайнера всея Руси студии Лебедева. Заходим на страницу любого проекта: картинка на всю ширину (как как раз автору нравится), но текст имеет отступы по бокам, иначе читать не удобно.
Интернет не мельчает, вопрос в охвате просматриваемого контента: если посещаешь пару тройку сайтов, а так называемый "нижний интернет" обходишь стороной, то да ты столкнется с адаптивом (для них важен охват), который имеет множество ограничений и своих особенностей.
Если хоть чуточку попробовать поискать в интернете, и почитать про печатную вёрстку основы композиции, и др. книги по дизайну, то на все вопросы будет ответ дан.
>Какую вам проще читать?
Скажу за себя: мне проще читать 1-й вариант, потому что длина строки короче, и мозгу как-то проще такими чанками текст поглощать, чем когда строка занимает 80-90% длины экрана, пусть и чуть более крупным размером шрифта.
А вам не кажется, что проблема не в разрешении экрана, а в ориентации.
У меня с некоторых пор к компьютеру подключено 3 монитора, один из которых я развернул в вертикальную ориентацию. Вот эти все "проблемные" сайты прекрасно выглядят, когда их просматриваешь на "вертикальном" мониторе, а не "горизонтальном".
Т.е. в претензию сайтостроителям нужно выкатить не "адаптацию под другое разрешение", а "адаптацию под другую ориентацию экрана".
4К/8К мониторы покупают не для того чтоб на них открывать браузер на весть экран. Большинство (подавляющее) не держат полноэкранное окно браузера:
https://top.mail.ru/viewports?id=250&period=0&aggregation=sum&
И устанавливают ширину viewport как им удобно.
По-моему, у парня просто проблемы с разрешением экрана, и веб здесь ни причём. Текст на страницах в вебе не видно ровно также как и текст самой ОС (плашка вверху экрана). Так что это классическое, если у меня не работает, в этом виноват весь мир, но не я)
Полагаю, значительная часть ваших проблем со зрением в том, что сайты такие чёрные. А вот когда Хабр и Пикабу белые, то даже на 15" ноутбуке они превосходно читаются. Специально замерил рулеткой расстояние до глаз — те же 50 см...
отчего-то бОльшая часть комментаторов не выцепила мысль "добавьте в адаптивную верстку поддержку широких мониторов". Владельцы широких мониторов сами решат, какую ширину окна браузера установить.
Вопрос. А подскажите расширение под chrome, которое максимально бережно умеет расхлопывать сайты в стиле "одна газетная колонка и анонсы сбоку"?
Владельцы широких мониторов сами решат, какую ширину окна браузера установить.
Часть решит, а часть напишет такую же статью с тезисом "трудно было что ли ширину ограничить, почему я каждый раз должен размеры окно уменьшать?"
Лучше хотеть не этого, а чтобы режим Immersive Reading нормально страницей поддерживался.
Часть решит, а часть напишет такую же статью с тезисом "трудно было что ли ширину ограничить, почему я каждый раз должен размеры окно уменьшать?"
Для любителей прокрустова ложа можно ведь добавить кнопку "сузить", верно?
Да, впрочем, пусть по дефолту узко, для любителей читать широко можно добавить кнопку "расхлопнуть". Лишать выбора и стимулировать режим чтения "глаза в кучку", право, зло.
Солидно-то солидно, только заходя на некоторые сайты приходится закрывать 3-4 всплывающих баннера: "Используйте мобильное приложение", "Будем знакомы?", "Покупайте как юрлицо", "Участвуйте в акции", "Ответьте нашему дураку-поддельному ассистенту"...
Раньше среди приличных разработчиков такое считалось дурным тоном.
Интернет мельчает. К чему привели тенденции Web дизайна