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

Feb 02, 2016 20:24


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

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

Потом пошла мода на 16:10 и 16:9 и разрешения типа 1920×1080. И вот про ( Read more... )

css, usability, web

Leave a comment

Comments 9

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

Reply

yurikhan February 3 2016, 04:21:41 UTC

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

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

Reply

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

Reply

yurikhan February 3 2016, 11:04:20 UTC
Ну так-то я не против, чтобы сайты вели себя прилично при любой ширине от 240px и выше. Просто кажется, что объяснить людям важность 960px несколько проще, чем любой ширины.

Reply


ibnteo February 3 2016, 02:12:03 UTC
Сейчас много мобильных устройств с небольшими экранами, поэтому сайты начали делать адаптивными. У таких сайтов горизонтального скроллинга не будет ни при каких условиях. Мобильные браузеры умеют показывать контент по ширине экрана вне зависимости от вёрстки, поэтому проблем обычно не бывает, кроме случаев, когда какой-то слой пихают поверх всего и он всегда на экране, загораживая контент.

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

Reply

yurikhan February 3 2016, 04:39:14 UTC

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

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

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

Reply

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

Reply

yurikhan February 3 2016, 16:39:33 UTC
Ну вот как-то так теперь со стилями. Внезапно, ЖЖисты запилили нормальный layout под названием Chameleon, дающий на выходе более-менее семантичный HTML5 с SVG-иконками.

Reply


Leave a comment

Up