Луч поноса широким сайтам

[yurikhan]

Когда я пришёл в веб, считалось дурным тоном делать сайты, не помещающиеся в 800×600.

Потом распространились разрешения 1024×768, 1152×864, 1280×1024 и, наконец, 1600×1200. В какой-то момент вебостроители решили, что 1024 пикселя в ширину есть у всех. А у кого нет, тот лох.

Потом пошла мода на 16:10 и 16:9 и разрешения типа 1920×1080. И вот про это разрешение поговорим подробнее.

Дело в том, что при 24 дюймах диагонали, формате 16:9 и разрешении 1920×1080 CSS-пикселей (тех, которые 1/96 дюйма, а не обязательно один минимальный элемент изображения) уже начинает быть удобно работать не с одним развёрнутым на весь экран окном, а с двумя неперекрывающимися половинками. И в такой конфигурации сайту в браузере остаётся 960px ширины, с поправкой на скроллбар — ≈940px.

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

(Персональные лучи поноса — Альфа-Клику, Гитхабу, Гуглу, Джире, Пейпэлу, библиотеке Сафари Букс Онлайн, всей сети Стек Эксчендж и Яндекс-Погоде.)

Comments

[mrbiggfoot.livejournal.com]

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

[yurikhan]

Только что проверил: при размещении на 23.8-дюймовом мониторе трёх xterm’ов с комфортно настроенным под меня размером шрифта переменная $COLUMNS в них равна 79. То есть делить на три — не вариант вообще.

С мобильными устройствами вообще непонятно. Да, там одно окно. Но у них и диагональ в 3–4 раза меньше. А расстояние до экрана меньше раза в 2–3. Интуитивно мне кажется, что угловой размер планшета на типичном расстоянии будет поменьше, чем половина моего монитора. Поэтому, казалось бы, на планшете проблема должна стоять ещё острее.

[mrbiggfoot.livejournal.com]

а у меня как раз три терминала на экран, экран поделен вертикально. $COLUMNS точно не знаю сколько, но точно больше 80, на глазок - что-то типа 84. Ещё знаю людей, у которых стандартно просто тыща окошек никак не выравненых, и они в них умудряются не путаться. Так что требование "давайте 1920 делить на 2 и от этого плясать", оно какое-то, как бы это сказать, странное. Для человека с мехмата.

[yurikhan]

Ну так-то я не против, чтобы сайты вели себя прилично при любой ширине от 240px и выше. Просто кажется, что объяснить людям важность 960px несколько проще, чем любой ширины.

[ibnteo.livejournal.com]

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

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

[yurikhan]

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

Ещё бывают @media-запросы. Это позволяет написать несколько наборов стилей под разные разрешения. У распространённого фреймворка Bootstrap, например, по умолчанию граница между маленьким и средним экраном проходит по 768px, а между средним и большим — по 992px. То есть я со своими 960px получаю стиль для 768px. Но только в случае, если сайт таки оптимизирован под мобилку.

---

Ну вот, мне тоже луч поноса. Посмотрю, что со стилями.

[ibnteo.livejournal.com]

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

[yurikhan]

Ну вот как-то так теперь со стилями. Внезапно, ЖЖисты запилили нормальный layout под названием Chameleon, дающий на выходе более-менее семантичный HTML5 с SVG-иконками.

[ibnteo.livejournal.com]

О, теперь другое дело!