All streams
Search
Write a publication
Pull to refresh
2
0
Send message
Например, я лично работаю на Full HD 24-дюймовом мониторе с разрешением 1360x768. Естественно, у меня всё будет примерно в полтора раза крупнее, чем у тех, кто работает с нативным разрешением.
Ну это смотря какой дизайн (это же ведь тоже дизайн, если я не ошибаюсь))) У меня, например, отправная точка — vw (ну или тот же Modernizr определяет браузеры, которые vw не знают, и скрипт ее рассчитывает). Какое бы вы разрешение не выставили на своем мониторе — сайт будет выглядеть одинаково.
Не подскажете, каким образом браузер (да что там браузер, даже ОС) может узнать истинную диагональ Вашего монитора в сантиметрах или в дюймах?
а зачем знать диагональ каждого монитора? есть репперные значения, которые определяются медиа-функциями min-width, max-width, orientation или aspect-ratio (для мобильных) и то же aspect-ratio для мониторов. Если нужно, чтобы это определял скрипт — Modernizr в помощь
Вот за что я вас совершенно искренне хвалю — так это за черту, которой вы разграничили текст «по делу» и последние абзацы, где самоутверждаетесь.
Спасибо, что повелись на обе провокации. Коммент со ссылкой на текст во всю ширину был закинут с целью поиска хабровчанина, который бы не просто хаял такие абзацы, а сделал бы это обоснованно. Рад, что он сработал на вас (жаль, что недостаточно кармы, я бы вам тоже «нравится» поставил за коммент со ссылками в т.ч. и на смэшинмэгезин)

Ну а дальше получилось бы еще более предсказуемо, если бы не эта ваша черта перед последними двумя абзацами (если я ее заметил и оценил, может, я все-таки не совсем безнадежен в UI, но это даже не вопрос, а так, мысли вслух).
Понятно, что хабр – это не институт благородных девиц, так что можете даже не извиняться за переход на личности.

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

О чем спрашиваю:
Переход с массовых 1024-по ширине мониторов с соотношением сторон 4:3 на широкий формат произошел для веб-индустрии достаточно гладко, разработчики подстроились под пользователей.
А вот дальше пошел массовый «затык»: есть 15”, где органично используется вся ширина, и сайты, как правило, верстаются 15-first. Но потом уже индустрия производителей пошла вразнос — широкий формат 16:9 с 19, 21, 24” и выше и ультра-ваид 21:9 с 2560x1080 и выше. Т.е. как бы два тренда — растут диагонали и (более медленно) — разрешения.
Индустрия игр, кстати, уже подстроилась даже под ультра-вайд. А вот с сайтами пока не очень даже под широкий формат больших дюймов. Было бы кстати, очень интересно посмотреть на скрины тех же победителей с 3840x2160 или хотя бы 2560x1440 мониторов.

Понятно, что 40% неиспользуемой ширины браузера – это как бы вынужденная мера, потому что в целом по отрасли непонятно, что с нею делать. Да, есть прекрасные образцы эффективного использования всего экрана на том же awwwards, но практически все они — больше имиджевые, нежели информационные (минимум текста, а уж про более сложные конструкции типа таблиц я вообще не говорю).

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

С какого-то дюйма делать еще одно отображение? С какого? (У меня, кстати, все media queries заточены под сантиметры, так что это не проблема).

Вот это отображение — на что в нем ориентироваться (вот это самый-самый вопрос), если поставить цель использовать весь экран на всей странице? По бокам меню/элементы навигации — не вариант, потому что они могут быть сильно меньше по высоте контентной части, и при скролле вниз, когда боковые меню исчезают из поля зрения, контент начинает занимать куцую часть пространства. Может, стоит оттолкнуться от «книжной» 2-страничной верстки? Но тогда непонятно чего делать со сложными элементами типа тех же таблиц. Что вы думаете?

Да, и кстати и вам персонально, и вообще всем комментаторам спасибо за критику про отступы и межстрочные интервалы. Как-то я неосмотрительно фокус внимания с них перевел на какие-то другие моменты.
Интересно, спасибо. Но вы мне испортили жизнь. Я до этого даже не знал, что

1) читать Википедию на тех же 24"-1920x1080-мониторах — это тотально-маразматически неудобно. Где я теперь эту информацию буду искать, которую раньше в Вики находил — даже не представляю.

2) Страницу в ворде с полями по 1,5 см и предлагаемым по умолчанию 11 кеглем тоже читать жутко неудобно — очень-очень too long, почти 100 символов в ширину — это в 1,5-2 раза больше стандарта.
Т.е. вот это плохо:

А вот это хорошо:


Ну на моем-то сайте можно переключиться в «нерезиновый» режим с фиксом 1000 px по ширине.
А вот бедным читателям Википедии и тем, кто вынужден печатать, а потом читать вордовские документы — искренне сочувствую.
это ко мне, а не к leealex, я статью эту писал, он ее разместил, потому что на тот момент я не был захабрен.
Второй пример — и с разной шириной, и с разной высотой. На сайте представительства Шкоды, на странице www.skoda-avto.ru/models/rapid-fl-monte-carlo/overview, есть такой контент:



и надо, чтобы он был на дилерском сайте в таком же или почти таком же виде, skoda-ap.ru/auto/rapid-fl_monte-carlo?view=standard



может, сделать адаптив этого блока, причем так, чтобы в mobile нормально все выглядело во всех ориентациях?

видимая часть в portrait:



и в landscape:

Даже на для чего, а ради чего — удобства пользователей.
первый пример сначала более простой: возьмем список акций у победителей (которые, судя по оценкам жюри конкурса, и некоторым комментам хабровчан, молодцы, и делают все красиво и эстетично).

Рено, www.renault.ru/vehicles/offers.html

баннеры полностью не видно (включая доты, которые их переключают в карусели), но это нормально, тем более что текст над каруселью, как многим нравится, не во всю ширину.

Райфайзен, www.raiffeisen.ru/special_offers

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

Ну и как всем не нравится, skoda-ap.ru/offers?view=adaptive

Тут как раз разная высота, но так неэстетично.

(И это я даже в landscape-mobile не полез)
Я так и знал, что вы станете защищать А/Б, и даже почти угадал как — «А/Б -> KPI -> бабки» (в соседней ветки коммент со «Выяснить можно только тестами» и про конверсию). Как раз вот этот принцип — про вакуум, в реальности последнее звено (KPI -> бабки) мало кто анализирует.
И я не говорю, что А/Б и KPI — это плохо, я говорю, что плохо, когда инструменты начинают воспринимать не как инструменты, а как достаточные составляющие исследования/анализа.
Взять тот же поп-ап: ваша фраза
Ок, про попапы — меня они тоже бесят, но их необходимость необходимо решать на основе A/B-тестирования и никак иначе.
из-за двух ее частей — «на основе» и «никак иначе» — вывернула смысл наизнанку. Ну ок, повесили поп-ап, протестили, выяснили, что конверсия подросла. Профит? Вроде бы да. Но где тут «а на фига его вообще повесили»? (в реальности ответов на последний вопрос два: либо «у конкурентов висит, значит нам тоже надо», либо пришли ребята, которые на этих поп-апах деньги зарабатывают, и грамотно развели на их установку).

Но пусть нас даже не интересует причина, попробуем разобраться с «никак иначе» с учетом его существования. Допустим, на основе тестов мы выяснили, что поп-ап увеличивает кол-во звонков. Провели более глубокий анализ, и выяснили, например, что из этих 100 звонков с поп-апа мы имеем 5 продаж машин. И пусть это будет хорошо. Но может, вместо поп-апа разработать пользовательский сценарий, который ведет юзеров на отправку заявки из «авто в наличии»? А там, например, КПД не 5%, а 20%, т.е. те же 5 машин продаются не со 100 единиц обращений (заявок), а с 25? Или может, все-таки оставить поп-ап, нанять волшебного коучера, который научит принимающих звонки именно с поп-апа продавать не каждую двадцатую машину, а каждую 10-ю? Т.е. если всю цепочку, до "-> бабки" анализировать, уже вон несколько вариантов нарисовалось, где А/Б как бы вообще не главное.

Но и это еще не все, теперь про «на основе»
Может, вместо «на основе тестов и никак иначе» правильнее будет «имея 1) некое (тактическое/стратегическое) видение-понимание ситуации/цели/достижения цели, 2) полученное в результате сформулированных своих желаний/потребностей и/или желаний -потребностей клиентов, 3) мы повесили этот поп-ап, и 4) это действие себя оправдало»?
Опять же реальный пример из коммерческой реальной жизни: изначально мы хотим чего-то достичь (например, плюс X% продаж машин за Y недель), какие варианты? Хм, может поп-ап, он нам принесет Z звонков с КПД таким-то (алфавит кончился))). А может, проведем опрос / узнаем авторитетное мнение / прислушаемся к здравому смыслу и определим, что несмотря на такой-то КПД, поп-ап еще и несколько мешает, вызывая раздражение? и вместо этого свои сначала мозговые, а потом и всякие другие ресурсы потратим на альтернативный путь? и, например, выяснив потребности пользователей, интегрируем тот же кредитный калькулятор и акции в «автомобили в наличии» и А/Б тесты будем уже проводить, идя по этой дороге? (при таком раскладе тестить поп-апы вообще нет необходимости, не находите?) Это про тактическое видение.

Теперь про стратегическое (и все, опять же, под призмой коммерческого профита и реальности, а не вакуума). Смотрите, мы вот этими поп-апами переносим часть работы с клиентом (по превращению его в покупателя) с его собственных плеч и с сайта на плечи меджеров продаж. И здесь есть два момента (причем надо еще разбираться, плохие они или хорошие): 1) все усилия по получению бабок мы перекидываем таким образом на последнее звено цепочки — лишь бы человек позвонил, а пусть уже менеджер работает по трансформации потенциального клиента в реального (при таком раскладе, кстати, ценность первого этапа слегка (или не слегка) нивелируется, и тут уже насколько растет KPI не так важно в сравнении с тем, насколько компетентен менеджер), и 2) мы сайт из источника информации (за которой, кстати, и пришел сюда пользователь) превращаем в некое подобие телефонного справочника. Может, опять же, есть какие-нибудь альтернативные пути, которые начинают готовить клиента к покупке прямо на сайте, 1) используя существующую потребность в некоей информации, которая есть уже есть у клиента, зашедшего на сайт, и 2) облегчая дальнейшую работу того самого менеджера?

Еще раз — я не против А/Б тестов. Но это инструмент, и вовсе не основа и не самое главное в исследованиях.
Две проблемы: 1) зачем мне это и 2) с ресурсами.
1) я туда пошел не амбиций ради, а понимания для, что двигаюсь в правильном направлении. одна из составляющих этого понимания — я надеялся, что хоть как-то будет отмечен такой принцип адаптива, когда дизайн учитывает те же ориентации мобильных устройств. Но и конкурс, и комменты к этой статье показывают, что я сильно не прав не только про portrait/landscape, но и вообще про дизайн с эффективным использованием всего пространства площади браузера (т.е. та же «резина» в адаптиве — это не главное, да и вообще главное не это).
2) Кто я и кто эти ребята? Они за именами Лебедева и Носика уже несколько лет как за каменной стеной.
Тому же Хабру сделать такой конкурс — гораздо более и по силам, и по смыслу.

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

В landscape на телефоне посмотрите. Я вовсе не утверждаю, что все сделал идеально, совсем нет. Просто учел, что и мониторы бывают разные, и люди по-разному гаджеты могут держать. И — пусть и не идеально — но информация там неплохо отображается и воспринимается. В отличие от других номинантов, которые "вылизали" верстку под 15"-монитор, но сделали еще более неидеально для 1920×1080 и откровенно забили на ориентации в mobile. И все они — молодцы :)

Вот почему все так носятся с A/B? Это просто тупой инструмент, который показывает, что мы сделали лучше/хуже, чем было. И все. Но его воспринимают по принципу «результат есть — все супер типа». Но (причем наверняка) можно ведь было сделать еще лучше. Какой же это тогда «супер»? И вместо «мы придумали и протестили на А/В» почему бы не озаботиться «а как можно было придумать лучше»?
Вот это на самом деле очень интересная тема. Я знаю по крайней мере три таких типичных ситуации:
1) перед сном, лежа на животе, голова на подушке — телефон как раз в landscape, причем тут как раз инет посерфить, причем только так, потому что потом еще чего-нибудь почитать в ридере, а там страницы в таком положении гораздо удобнее листать (и по своему опыту, и по опыту некоторых знакомых)
2) когда какое-нибудь кинцо или видео с ютьюба не важно уже где (и сам, и знакомые, и в том же метро часто вижу). и если кто-нибудь в телеграм ссылку скинет, почему бы и не глянуть (правда, приходится переворачивать, но не потому что так хочется, а потому что тупо невозможно в альбомной смотреть)
3) когда в какую-нибудь серьезную/портированную игруху кто-нибудь играет — гоночки там, стратегии и т.д.
Мало того, есть у меня ощущение, что серьезные ребята вроде того же фейсбука или ютьюба, например, вовсю уже задумываются о том, что есть два крайних типа восприятия инфы из инета — «на бегу/мельком» и «серьезно/вдумчиво». И это очень даже может кореллироваться с тем, как юзер держит свое устройство.
Я, кстати, именно потому, что у инстаграмма нет лендскейпа, френдов там не смотрю и практически не лайкаю — днем на это времени жалко, а перед сном мне в portrait смотреть жутко неудобно, см. п. 1. Хорошо хоть его Фейсбук купил, и френды постят из инсты в него.
Неа, слишком сильно растянуто — читать не хочется даже.
Это я специально искал страницу, где есть много абзацов на всю ширину. Страниц с элементами «несколько в ряд» больше (а действительно востребованных/популярных таких страниц — еще больше).
Ну как по мне, выбор должен осуществляться автоматически.
Один раз сделаете выбор — и будет автоматически, пока куки не почистите.
Давайте честно: на вашем сайте я не буду смотреть ничего кроме адреса и телефона.
Тут даже не я с вами не соглашусь, а реальные люди, которые оставляют заявки на заказ машин прямо со страницы «Комплектации и цены» или на бронирование машин из наличия в соотвествующем разделе. Без всяких поп-апов, кстати, то есть не мы их к оставлению заявок принуждаем, а сами они, добровольно, так сказать.
3) в landscape на телефоне порадуйтесь отступам и воздуху.
1) вот тут подробно ответил habrahabr.ru/post/350410/?reply_to=10695694#comment_10695738 — выбирайте, как вам удобно
Очень хороший коммент, спасибо. На самом деле я болезненно воспринимаю не широкие поля сами по себе, а то, когда их не используют эффективно, хотя могли бы. Почему вот это

не пустить хотя бы в два ряда? Или в статье про галереи у лучшего-сайта-Раффайзена тоже показательно.
Если у пользователя экран размером с ладонь это совершенно другой разговор. Возможно стоит учитывать тип устройства?
Даже больше предположу: возможно, пусть пользователь САМ выбирает, как ему лучше — «резина» или, как вы предлагаете, фикс не больше чем на 1200 px?
Где у меня абзацы на всю ширину… ну вот здесь, например skoda-ap.ru/our-skoda/octavia-postnikov?view=adaptive (кстати, вот сейчас смотрю на 27"-мониторе 21/9 — вроде норм. воспринимается).
Но если не нравится и отступы слева/справа вам привычны — ткните верхнюю кнопку в правом боковом меню — будет вам весь сайт с отступами (или откройте эту же страницу вот так skoda-ap.ru/our-skoda/octavia-postnikov?view=standard). Выбирайте, как нравится. Самое главное — чтобы вам было удобно и чтобы у вас был выбор. И как удобнее смотреть — с боковыми пустотами или без на desktop, и в какой ориетации — landscape или portrait — на mobile.
(Но это плохой дизайн)
Ок, мне с представительствами даже интереснее пободаться, чем с дилерами. Попробуйте взять эту самую «отправную точку» на любую модель на моем сайте на странице с «Ценами и комплектациями» этой модели и на аналогичную модель (даже любого другого бренда) на сайте его представительства. У кого удобнее? А на мобильном устройстве?
(маленькое примечание — с Теслой, к сожалению, Шкода пока не конкурирует)))
они как яхты — не совсем в тему «Сайт бренда и дилера авто/мото». Также как и «Jungheinrich», и «Детейлинг-центр PTM». Или их не должно было быть в этой номинации, или номинация как-нибудь по-другому должна называться.
Ну или гидравлическая тележка или электрический поводковый штабеллер Jungheinrich и силиконовая рамка от RCS — это авто/мото )))
у меня недостаточно кармы, для того чтобы поставить «нравится», поэтому яростно плюсую в комментарии.

Information

Rating
Does not participate
Registered
Activity