Как стать автором
Обновить

Комментарии 129

В Р — по моему 90% всех конкурсов в интернете изначально создаются для пиара заранее выбранных победителей. Необязательно проплаченных.

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

Скандалы, интриги, расследования

НЛО прилетело и опубликовало эту надпись здесь
Авторам хаба по английскому на заметку: раз'яснить читателям разницу между adapt и adopt. B)
НЛО прилетело и опубликовало эту надпись здесь

Возможно, я пропустил, но никак не могу найти ссылку на ваш проект. Дайте пожалуйста! Пардон, браузер порезал раздел «Ссылки» и видео в конце

В списке ссылок самым первым пунктом есть ссылка на страницу конкурсанта http://2017.goldensite.ru/work/the-website-of-the-brand-and-dealer-auto-moto/4453/ а там есть ссылка на сайт. Но чтобы вас не заморачивать квестами, вот ссылка на сайт конкурсанта https://skoda-ap.ru

Более точная ссылка skoda-ap.ru/?view=adaptive
Просто для desktop существует не одно, а два отображения: 1) адаптивный «резиновый» вид и 2) вид по стандартам бренда.
переключаются они кнопкой в боковом темном меню
В последнем видео меня смутили красные галочки (красный это плохо, галочка это хорошо, что о них думать?), а также возникло ощущение дешевизны. Хотя никаких сомнений нет в том что сайт хорошо выполнен и функционален. Если ощущение дешевизны массовое, с ним надо бороться, в остальном отлично. Интересно было прочитать и сравнить.
Знаете, если отбросить нюансы отображения сайтов-конкурсантов на разных устройствах и вопрос объективности жюри, то я, в принципе, с жюри согласен. С точки зрения дизайна ваш сайт проигрывает. Как минимум призерам. Это личное и субъективное мнение, не обижайтесь. Если бы я был заказчиком, то я вряд ли бы принял результат (конечно это, зависит еще и от бюджета проекта) и попросил бы многое исправить. Я понимаю, что, видимо, для узнаваемости по бренду были использованы фирменные решения Skoda (шрифты, элементы оформления). Но если на сайте самой Skoda это выглядит еще более-менее, то на вашем — хуже. Плюс я не вижу в дизайне ничего нового по сравнению с главным сайтом Skoda . Плюс есть мелкие неаккуратности, которые мне сразу бросились в глаза и испортили впечатление
Например, «стрелки» в меню обрезались, иконки очень страшные, элементы визуально «слиплись» между собой, баннер переключается как бешеный и т.д. Фон баннеров — ужасен.

image
Нет проблем, когда проигрываешь достойным.
Есть проблема, когда проигрываешь неработающему линку.
Тут я согласен. Хотя, возможно, во время просмотра жюри ссылка все-таки работала. Это, конечно, косяк, но остальные сайты-конкурсанты вполне открываются и сайт топикстартера им, по моему сугубо личному мнению, проигрывает. У неработающей ссылки он, несомненно, выигрывает.
Хотя, возможно, во время просмотра жюри ссылка все-таки работала.
не, не работала
Например, «стрелки» в меню обрезались, иконки очень страшные, элементы визуально «слиплись» между собой, баннер переключается как бешеный и т.д. Фон баннеров — ужасен.
вы сами же в комменте выше написали то, как я хотел бы ответить:
если отбросить нюансы отображения сайтов-конкурсантов на разных устройствах...
Этой статьи не было бы, если бы не этот «нюанс». я наивно предполагал, что дизайн в первую очередь должен быть функциональным, и уже во вторую — можно рассуждать про страшность иконок, фонов баннера и прочие красивости. А когда на оф. автомобильном сайте нет нормально сверстанных «Цен и комплектаций» (или их просто нет) — первоочередной инфы, необходимой реальным и/или потенциальным клиентам — можно, конечно, подискутировать про красивость каких-либо элементов, благородность цветов, богатость подачи, но смысл?
не, не работала

Ок, тут не спорю — любой сайт выигрывает у неработающего

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


Не совсем согласен. Дизайн сайтов — совокупность юзабилити, технической стороны и эстетики. Что тут «весит» больше, а что «меньше» зависит больше от задачи. Одно дело промо-сайты и совсем другое, например, крупный магазин. Дизайн должен соответствовать задаче.

Разумеется, цены и комплектации должны быть хорошо и правильно представлены. Иначе это не зачет по смыслу.
Я бы еще добавил, что нельзя изменить масштаб с помощью браузера.

PS Не понимаю текущих трендов увлечение всего на сайте, такое ощущение что делают все как для слепых.
«С точки зрения дизайна»… Поправьте меня, если принят иной взгляд на это, но в моем понимании отображение контента на мобильных устройствах — и выбор доступного при этом функционала и организация доступа к нему — это тоже дизайн. Особенно в наши дни и тем более если имеется версия сайта, по идее адаптированная для мобильных устройств.
Да, но это только часть общего. Часть оценки, а не вся оценка. Современные требования не отменяют чисто эстетической стороны понятия «дизайн» и художественных/типографических умений. Только дополняют. Вес технической составляющей по сравнению с эстетической в общей оценке каждый, наверное, должен определить сам

Кроме того, есть к чему придраться и у сайта топикстартера в плане дизайна для моб. устройств. Я считаю, что баннер должен листаться движением пальца по баннеру вправо или влево, а не маленькими точками под ним. Я, например, не с первого раза попадаю. И часто вместо точки кликаю по баннеру и перехожу на страницу, которую не хотел открывать. На моем телефоне можно добиться вот такого отображения страницы:

Скриншот 1

и такого:

Скриншот 2

Это тот же самый мобильный Яндекс.Браузер на телефоне.

Думаю, что если придирчиво изучать, то можно найти еще что-нибудь. Это абсолютно нормально, ничего плохого. Но, как мне кажется, тут нет какого-то решительного технического преимущества перед остальными.
Я считаю, что баннер должен листаться движением пальца по баннеру вправо или влево, а не маленькими точками под ним.
Абсолютно согласен, поэтому так и сделано.
Про скрины — интересно, я никак такого эффекта добиться не могу. Может, не до конца загрузилась страница?
Абсолютно согласен, поэтому так и сделано


У меня не работает. При попытке провести пальцем по баннеру следует переход по ссылке.

Нет, страница загружается до конца. Шаги такие: открываем меню, немного скроллим страницу по горизонтали, закрываем меню. В некоторых случаях и на некоторых страницах, видимо, не работает js, который «возвращает» (сбрасывает?) ширину страницы. Это, конечно, чистая придирка, но первый раз у меня это возникло ненамеренно. Потом я сумел повторить.

И, кстати, на десктопе у меня «схлопывается» по вертикали баннер главной страницы до полосы высотой в 32px. Повторить могу, но от чего точно зависит пока не понял.
А, это когда меню открыли, но ничего не нажали, проскроллили вниз, и потом закрыли? Вот такое поведение не рассматривал, думал, гамбургер раскрывают, чтобы что-нибудь нажать :)
Спасибо за ваши комменты, кстати. А можно еще совета попросить? И вы, и некоторые другие отметившиеся здесь хабровчане апеллируют к эстетике — «красный плохо», выглядит богато/дешево, красиво/страшно.
Я вот после этого конкурса начал сомневаться — может, у меня проблемы со вкусом? Объясните, мне, пожалуйста, что вот например здесь

такого красивого/богатого/эстетичного?
Вот я никак не могу этого понять.
Да нет тут ничего красивого/богатого/эстетичного. Решения жюри в конкурсах красоты дизайна и их оценки — это не самая объективная вещь. Делать на их основе выводы — сомнительная затея.

Давайте я попробую объяснить, как это вижу я.

Главная задача дизайнера сайта — сделать картинку, которую купит заказчик. Звучит, конечно, паршиво с точки зрения художника, правда? Если заказчик не совсем идиот и проект коммерческий, то перед началом полета фантазии дизайнера будет написано задание на дизайн. С мнением/пожеланиями маркетолога и подобных товарищей. И эти замечания-пожелания довольно жестко ограничат полет фантазии. Исключение бывает в промо-сайтах, тут может быть что угодно. Их часто вообще делают для разового показа боссам, не более того.

Если вы хороший дизайнер, то не будете парится о своем вкусе на ком. проектах. Вкус — очень хорошо, но задание и «попадание в заказчика» с первого раза важнее. Чисто экономически. Ну, пока вы не стали очень-очень-очень известным товарищем, которому платят за его великое имя и верят всем его решениям.

Задача дизайнера — быть в тренде, владеть соответствующими приемами и быстро штамповать годную ком. нямку. И заниматься дизайном «для души» ради собственного развития и чтобы не деградировать до полумашины без фантазии.

То, что вы участвовали в конкурсе — это правильно. Плевать, какое вы там место заняли. Пишите теперь гордо «Участник конкурса X». Просто как коммерческий ход. Или «Финалист конкурса...». На что хватит наглости. А про результат — пока забудьте. Не пытайтесь вычленить лучшие решения по победителям этих конкурсов или их логику. Задумайтесь например, над тем, что чисто теоретически есть идеальный сайт в этой тематике за 2017 год, просто его дизайнер не пошел на этот конкурс. И вы просто не видели лучшего.
Если вы хороший дизайнер, то не будете парится о своем вкусе на ком. проектах.
В представительствах автобрендов и уж тем более в дилерских центрах нет хороших дизайнеров в этом смысле, все, что производится — жестко стандартизировано.
И вы просто не видели лучшего.
Я поэтому и написал эту статью. Веб-разработчики видят свою верстку на своих 15" макбуках, жюри на таких же 15" макбуках это все смотрят, ну может еще мобильное представление в браузере включат, если не лень. А то, как (без этой всякой эстетики/богатости/красивости) сайты отображаются на экранах тех устройств и мониторов, с которых заходят обычные пользователи — никому (ни разработчикам, ни жюри) это настолько не интересно, что это даже и оценивать не стоит. И именно… эээ… недоумение от этого вывода мы сейчас, в принципе, и обсуждаем.
Вы ошибаетесь. Я, например, достаточно часто участвую в приемке чужой работы и мне все это интересно. Да, у меня есть макбук, но сначала я смотрю десктопную версию, делаю лист претензий. Потом открываю инструменты разработчика. Смотрю как это выглядит в разных стандартных вариантах размеров и положений экрана. Пишу лист претензий. Потом беру макбук, смотрю как все это выглядит в Сафари. Потом идут айпад, айфон и устройства на базе Android и самые распространенные на них браузеры. Пишется лист претензий. Потом дополняю списком претензий к верстке, валидности, работе js и т.п., если они есть. Нормальное жюри и нормальный приемщик делает минимум это. Если не делает — это профанация.

То, что веб-разработчики смотрят и пользуются для производства своих творений исключительно MacBook с 15" экраном — это вы передергиваете. Это какие-то хипстеры если только. Если им при этом наплевать на то, как это будет выглядеть для пользователя на его смартфоне, то это плохие хипстеры.

Почему на автосайтах так много откровенного шлака, почему они отличаются такой непродуманностью — это вопрос для отдельного исследования. Я интересуюсь автомобилями и, поэтому, часто посещаю сайты производителей. Отвратительность их конфигураторов, отсутствие логики, ошибки, нелепая структура — это стало привычным, но точной причины я до сих пор не знаю.
Если им при этом наплевать на то, как это будет выглядеть для пользователя на его смартфоне, то это плохие хипстеры.
Эти плохие хипстеры получают высокие оценки на конкурсах и комментарии «богато/красиво/дизайн хороший» :)
Тогда ответьте на такой вопрос, даже на три: если многие, которые не занимаются профанацией, реально смотрят на то, как их сайты отображаются на разных устройствах — почему получается так, что
1) очень многие сайты (я даже не про автомобильные сейчас) для 1920x1080 мониторов сверстаны по принципу «20% пустоты слева и 20% справа»?
2) гораздо большее количество разработчиков вообще не парятся про ориентации мобильных устройств?
3) почему такие сайты, которые криво отображаются на 1920x1080 и в непроработанных ориентациях (как правило, landscape для смартфонов и portrait для планшетов), несмотря на свою кривизну, эстетически-дизайно-привлекательны?
1) Стандартная сетка же! Плюс смотреть контент на всей ширине 1920-монитора в 27 дюймов — это неудобно. Водить глазами и вертеть головой слишком много приходится. Посмотрите на новостные сайты вроде ria.ru или lenta.ru. У них контент — текстовый на 90%. Удобно читать? А если текст будет растянут на всю ширину монитора? Не удобно.

2) Тут сложный вопрос. Если им платят за то, чтобы они парились — да. Если нет, то — нет. Решает это условный менеджмент. Они либо ориентируются на свой пофигизм, либо на всякие A/B-тесты. У меня, например, ни разу не было резких скачков конверсии от того, что кто-то запарился над ориентацией. Много работы и, обычно, мало толку. Но, конечно, зависит от конкретного случая. Отраслевой пофигизм и принятие сомнительных, но простых в реализации решений (по методу «у всех так») — это отдельная тема.

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

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

это именно так и работает, просто нет анимации движения слайда в сторону, на самом деле слайд переключается именно свайпом в том числе, не только нажатием на точки.

Пересмотрел. Да, работает. Но без отзывчивости это, как видите, совсем неочевидно: если бы вы мне не сказали, то я бы так и не понял. Я при этом вполне вписываюсь хотя бы в группу «среднестатистический пользователь». Если вы делаете упор, в частности, на тех. реализацию, то это очевидный минус. Да и вообще это минус.

Т.е. вот, что получается:

  • Попытка дать пользователю всю реально нужную ему на этом сайте информацию на видном месте — это плюс
  • Дизайн очевидно вторичен и с эстетической точки зрения не слишком проработан — это минус
  • При некотором упоре на техническую составляющую к ней есть вопросы: например, отсутствие отзывчивости у баннера при свайпе — это минус


Для работы на конкурс дизайна — это все-таки недостаточный уровень проработки, вне зависимости от силы остальных работ. Если бы ваш сайт выиграл, то я, честно говоря, счел бы этот конкурс полной профанацией. Это, конечно, мое лично мнение. Как дизайнер я — полный ноль, сам солнышко нормально не могу нарисовать на заборе: все думают, что это что-то неприличное.

Я тоже когда-то думал, что смысл должен быть на первом месте. Считаю так до сих пор, но с той оговоркой, что такой подход сам по себе продается хуже, чем полная ахинея, но симпатичная для фокус-группы. Ваш дизайн должен нравится, иначе, с коммерческой точки зрения, это бессмысленно.
Дизайн очевидно вторичен
Я вам сейчас открою страшную тайну: дизайн в эстетическом понимании практически любого оф. автомобильного российского сайта, начиная с цветовой гаммы и заканчивая картинками, на которых изображены автомобили — от пекшотов до галерей — не то что вторичен, его просто не существует для веб-разработчиков. Вместо него — очень жесткие брендовые гайдлайны. Вот у вас там выше был скрин со стрелками, где видно подменю с Супербом, и ваша красная стрелка на зеленую иконку списка. Вот этот элемент жестко стандартизирован — это должен быть повернутый на 90 градусов гачек у чешской буквы Š — первой в названии ŠKODA, и никак иначе. И пекшот машины должен быть тоже именно таким — только в профиль. Я даже пробовал как-то изменить изображение модели на какое-нибудь более привлекательное, чтобы не в профиль, а поинтереснее, так мне по голове настучали сильно-сильно и сказали «вернуть как было». И так у многих, если не у всех, автобрендов.
Про жесткие гайдлайны я догадываюсь. Но тогда возникает два вопроса:

1) Зачем идти на конкурс дизайна с сайтом, дизайн которого был сделан по чужому гайдлайну? Это же очевидно неверный путь

2) Про «гачек». На оф. сайте Skoda этот элемент (в меню, например) выглядит как такая галочка с остреньким носом. Вполне органично. У вас «нос» как будто отрезан. Я сначала подумал, что это косяк верстки. Или гачек нужно от другого шрифта брать, или что-то с ним делать
Сначала про гачек: фирменный шрифт изменили, а поскольку у представительства буллит был в пнг-спрайте, до него просто руки не дошли, видимо.

Теперь про гайдлайны: это единственный путь для всех номинантов бренда/дилера авто (если это не яхты))). И здесь дизайн 1) самое главное — в функционале и 2) эстетике уже в духе Темы Лебедева — выход из ограничений, отсутствии всех этих «подробнее», типографике. Т.е. акцент на базис — предоставлении нужной пользователю инфы и в удобной для него форме.
Хм. Я не уверен, что rcsbrand.ru, который, как я понимаю, занял в этой категории третье место, сделан по каким-то гайдлайнам. Так что путь, все-таки, видимо не единственный.

Другое дело, что, возможно в оценке как-то учитывалась сложность проекта: тут оф. сайты вне конкуренции по сравнению с дилерами и стартапами (это я про rcsbrand.ru — ничего про него не нашел, кроме сайта и группы ВК).

В любом случае, если бы я сидел в этом жюри, то тоже не поставил бы ваше творение в тройку: оно сделано по чужим гайдлайнам и выглядит хуже оф. сайта. Почему бы это ни произошло — это плохо для конкурсной работы в категории «дизайн».
они как яхты — не совсем в тему «Сайт бренда и дилера авто/мото». Также как и «Jungheinrich», и «Детейлинг-центр PTM». Или их не должно было быть в этой номинации, или номинация как-нибудь по-другому должна называться.
Ну или гидравлическая тележка или электрический поводковый штабеллер Jungheinrich и силиконовая рамка от RCS — это авто/мото )))
Но они же там есть. Для таких моментов, обычно, есть правила проведения конкурса. Мне случалось в такой канители участвовать. Мой совет: всегда их читайте. Условия приема заявок там всегда есть. Если, конечно, вы участвуете ради результата, а не ради самого факта участия.

И все равно, сайты из первой тройки мне нравятся больше вашего. Почему — в комменте из ветки выше.
Но, как мне кажется, тут нет какого-то решительного технического преимущества перед остальными.
Покажите мне даже не среди номинантов, а страницу какого-нибудь любого оф. автосайта с комплектациями и ценами, которая, по вашему мнению, лучше
Сайты автопроизводителей — это обычно редкий «международно-стандартный» шлак. Кроме того, у многих (особенно пафосных) нет таблицы цен и комплектаций, а есть конфигуратор той или иной степени паршивости. С моб. устройства конфигурировать в них автомобиль — обычно то еще удовольствие.

Но, можно посмотреть на tesla.com (Например, Model X). Все полне понятно.

Фиксированные комплектации — это обычно, у корейцев и японцев, которые традиционно не очень заморачиваются по поводу своих сайтов
Фиксированные комплектации — это на самом деле у всех. Плюс доп. опции или пакеты доп. опций.
«Нет таблиц цен и комплектаций» — в этом и печаль, именна эта инфа нужна покупателям. На моем сайте есть, и, на мой взгляд, сделана весьма органично. Причем настолько органично, опять же на мой взгляд, что это тянет на «решительное техническое преимущество перед остальными».
Ох, на самом деле, там все сложно. У некоторых доп. опций больше, чем позиций стандартной комплектации, они важнее и, кроме того, у них есть сложные зависимости: некоторые можно заказывать вместе с одними, другие — нет и т.д. Поэтому не все можно свести в таблицу «есть/нет». Конфигуратор тут обычно идет. И, если уж о смысле — я, например, ни разу ничего не конфигурировал на сайтах дилеров. Только на оф. сайтах. Дилеру просто звонишь и бодаешься за скидку. Я, конечно, не показатель но все-таки. Все, что мне нужно от сайта дилера — его адрес и телефон
Вам нужна отправная точка, от чего «бодаться за скидку». К примеру, человек готов потратить на новый а/м «около миллиона», а интересующая его модель стоит 850 т.р. «в базе», 1000 в средней комплектации и 1500 — в максимальной. Понятно, что базовую и среднюю можно добить опциями — от нескольких до «больше, чем позиций стандартной комплектации». Но! Нужна опять же отправная точка — какую комплектацию этими опциями добивать. В конфигураторе (действительно корявом, как правило) эта инфа зачастую находится где-нибудь в последних шагах, до которых (из-за корявости) доходят немногие.
И «комплектации и цены» еще более востребованы из-за этого.
М. Цены дилеров обычно довольно точно соответствуют оф. сайту. Там я и беру свою «отправную точку». Если дилер хочет мне толкнуть то же самое, но по большей цене, то я смотрю остальных дилеров. Если и у них то же самое — выясняю в чем дело и откуда такое несоответствие. Но такое было один раз на моей памяти.
Ок, мне с представительствами даже интереснее пободаться, чем с дилерами. Попробуйте взять эту самую «отправную точку» на любую модель на моем сайте на странице с «Ценами и комплектациями» этой модели и на аналогичную модель (даже любого другого бренда) на сайте его представительства. У кого удобнее? А на мобильном устройстве?
(маленькое примечание — с Теслой, к сожалению, Шкода пока не конкурирует)))
Давайте честно: на вашем сайте я не буду смотреть ничего кроме адреса и телефона. Моб. версия сайта Шкоды — она отсутствует, поэтому, конечно, на смартфоне смотреть будет удобнее ваш сайт. Но я не буду выбирать автомобиль со смартфона.
Давайте честно: на вашем сайте я не буду смотреть ничего кроме адреса и телефона.
Тут даже не я с вами не соглашусь, а реальные люди, которые оставляют заявки на заказ машин прямо со страницы «Комплектации и цены» или на бронирование машин из наличия в соотвествующем разделе. Без всяких поп-апов, кстати, то есть не мы их к оставлению заявок принуждаем, а сами они, добровольно, так сказать.
Ок, про попапы — меня они тоже бесят, но их необходимость необходимо решать на основе A/B-тестирования и никак иначе. Все остальное — по тому же принципу. Возможно, это имеет смысл, возможно — вы преувеличиваете влияние своего решения на конверсию. Это требует определенных исследований, рассуждения и гадания тут бессмысленны
Вот почему все так носятся с A/B? Это просто тупой инструмент, который показывает, что мы сделали лучше/хуже, чем было. И все. Но его воспринимают по принципу «результат есть — все супер типа». Но (причем наверняка) можно ведь было сделать еще лучше. Какой же это тогда «супер»? И вместо «мы придумали и протестили на А/В» почему бы не озаботиться «а как можно было придумать лучше»?
М. Вы определитесь о чем мы говорим — о сферических в вакууме решениях для обсуждения в узком кругу или о коммерческих решениях? Если о первом — то делайте как угодно, хоть меню вверх ногами переворачивайте, не вопрос. А если о коммерческих решениях, то какая у них главная метрика? Правильно: как это решение повлияло на конечную прибыль. Для выяснения этого момента и делаются те самые «тупые» A/B-тесты. И потому все с ними так носятся. И если вы придумываете красивое решение, которое повысит ком. показатели — честь вам и хвала. Но если у менеджмента будет выбор между «красиво» и «больше бабок» — догадайтесь, что они выберут
Я так и знал, что вы станете защищать А/Б, и даже почти угадал как — «А/Б -> 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) облегчая дальнейшую работу того самого менеджера?

Еще раз — я не против А/Б тестов. Но это инструмент, и вовсе не основа и не самое главное в исследованиях.
НЛО прилетело и опубликовало эту надпись здесь
Я лично не понял, зачем автор так акцентировал внимание на то, что все конкурсанты используют 60% экрана на декстопе, ширину в 1170 пикселей и всё такое, если его вариант в ширину всего 1000 на Full HD мониторе?
я там выше уже откомментил, что ссылка на сайт не совсем та.
Более точная ссылка skoda-ap.ru/?view=adaptive
Просто для desktop существует не одно, а два отображения: 1) адаптивный «резиновый» вид и 2) вид по стандартам бренда.
переключаются они кнопкой в боковом темном меню
Спасибо, понял.
Как по мне, это странный вариант. Читать в широком формате в любом случае крайне неудобно, а заставлять пользователя переключаться туда-сюда плохо.
Ну и еще скажу, что я бы понял критику других сайтов, если бы на этом было все идеально, но нет.

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

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

В статье указано, что сайт участвовал так же и в номинации "Лучший usability / UX", это как раз не о красивом контенте и шрифтах, а об удобстве использования.

кажется навигация это и есть юзабилити, а о ней я сказал. Даже если взять разобранный пример из статьи о комплектациях, так у автора вообще жуть, адовые тысячи табов, все сливается, тонна информации, ужасная структура и еще и цвета такие, что нет акцентов, не читаемо, абсолютно
Люблю такие комменты. Давайте возвращаться к начальному уровню. Рассказываю, что ищут на оф. автосайтах согласно статистике, опросу покупателей, опыту работы ну и просто здравому смыслу (точно уверен про дилерские, хотя и на сайтах представительств, полагаю, это весьма распространенный пользовательский сценарий).
Когда человек определился с маркой и, как правило, моделью машины, которая ему интересна с точки зрения покупки, он идет на оф. сайт. Чтобы определиться дальше — какая именно модификация (двигатель и КПП) его устраивает, и что за комплектации (версии) у выбранной модели с определенной им модификацией имеются. Причем этому пользователю, который (с помощью сайта или, наоборот, без помощи) сам же уже хочет превратиться сначала в потенциального, а потом реального покупателя, интересно не название этих комплектаций/версий, а чего они из себя представляют (какое оборудование в них входит и почему эти разные версии одной и той же модели в одной и той же модификации так по-разному стоят).
И вы абсолютно правильно написали, что на оф. автосайте должна быть понятная навигация и воспринимаемый дизайн именно того, чего хочет пользователь.
И уже потом — не менее важная часть — инфа о конкретных машинах в наличии.
Попробуйте найти информацию о комплектациях и ценах на сайте, который я разработал, скажите (реально очень интересно ваше мнение), насколько 1) эта инфа трудно/легко ищется и 2) насколько хорошо воспринимается.
И попробуйте сделать то же самое на любом другом оф. автосайте.
Могу поделиться ощущениями:

— выбор модели в выпадающем меню требует довольно точного управления курсором, что сильно раздражает, а кнопка «Модель» кажется ссылкой на еще один этап выбора модели, что реально сбивает с толку;

— цены на первый взгляд на месте, но фильтры «кредит», «кпп», акции сделаны ужасно: фильтр можно открыть по нажатию на крестик, непостижимая логика пункта «платеж в месяц: нет», ну и так далее;

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

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

А я вот готов убивать за попапы, мигающие телефончики и за кнопки с текстом «позвоните мне».
у меня недостаточно кармы, для того чтобы поставить «нравится», поэтому яростно плюсую в комментарии.
Я сделал это за вас, ибо солидарен!
У автора какая-то болезненная реакция на сайты, которые вполне разумно оставляют широкие поля вокруг контента при широком окне.

Страница своим примером показывает нам, что верстать надо так, чтобы при ширине окна браузера 1918 px контентная часть занимала 1140 px, а справа и слева надо оставлять по 20% неиспользуемого пространства.


Уважаемый автор, вы пробовали когда-нибудь почитать хотя бы пяток абзацев, шириной, скажем 1800px, на экране 23 дюйма?

Для комфортного пользования и восприятия контента при широком экране абсолютно точно не следует растягивать значимое содержимое больше чем на 1200 px.

Если у пользователя экран размером с ладонь это совершенно другой разговор. Возможно стоит учитывать тип устройства?
Очень хороший коммент, спасибо. На самом деле я болезненно воспринимаю не широкие поля сами по себе, а то, когда их не используют эффективно, хотя могли бы. Почему вот это

не пустить хотя бы в два ряда? Или в статье про галереи у лучшего-сайта-Раффайзена тоже показательно.
Если у пользователя экран размером с ладонь это совершенно другой разговор. Возможно стоит учитывать тип устройства?
Даже больше предположу: возможно, пусть пользователь САМ выбирает, как ему лучше — «резина» или, как вы предлагаете, фикс не больше чем на 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.
(Но это плохой дизайн)
вроде норм. воспринимается

Неа, слишком сильно растянуто — читать не хочется даже.

или откройте эту же страницу вот так skoda-ap.ru/our-skoda/octavia-postnikov?view=standard

Эта лучше выглядит, хотя я б ещё шрифт увеличил на полпикселя.

Выбирайте, как нравится. Самое главное — чтобы вам было удобно и чтобы у вас был выбор.

Ну как по мне, выбор должен осуществляться автоматически.
Неа, слишком сильно растянуто — читать не хочется даже.
Это я специально искал страницу, где есть много абзацов на всю ширину. Страниц с элементами «несколько в ряд» больше (а действительно востребованных/популярных таких страниц — еще больше).
Ну как по мне, выбор должен осуществляться автоматически.
Один раз сделаете выбор — и будет автоматически, пока куки не почистите.
Добавление пользователю выбора (который не очевиден. Я, например, пока вы не сказали, что он есть, его не заметил) такого рода — зло. Поставьте статичтику на нажатие этой кнопки при том, что по умолчанию будет «сжатый» вариант. Вангую минимум кликов, причем большинство из них будет двойными: «включил → не понравилось → выключил». Не нужен этот функционал на ком. сайте.

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

С элементами «несколько в ряд» вы рискуете намучиться. Представьте, что у вас есть контейнер на всю ширину экрана. Внутри будут элементы 50% но разной высоты, которая определяется случайно (содержимым контейнера например) и может лежать в широких пределах. Как это будет смотреться? Такой подход — только для элементов определенной ширины.

Если вы хотите разбить на колонки пункты меню, чтобы использовать «всю поверхность», то, во-первых, при большой ширине опять придется лишком сильно крутить головой. При малой — другие «вилы»: вам придется установить при какой ширине экрана две колонки превратятся в одну. Допустим, при 800px. Т.е. при 802px у вас будет две колонки с пунктами меню по 400px — допустим, это примерно ширина одного пункта. А на 800px будет одна колонка шириной 800. И… снова свободное пространство справа! Или ждите до 600px, но тогда у вас будут две колонки по 300px, которые будут смотреться не очень. И т.д. Подобные игры можно позволить себе при заранее известном содержимом. Если что-то может меняться-добавляться, то более оптимально будет так не делать.
* поправка. Читайте «для элементов определенной высоты» вместо «для элементов определенной ширины» в конце третьего абзаца

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

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

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

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

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

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

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

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

(И это я даже в landscape-mobile не полез)
И все равно вариант Райффайзена сделан лучше вашего. Вы использовали всю площадь, а у них все равно смотрится лучше дизайн на десктопе. Вы уделяете массу времени мелким техническим заморочкам (и это неплохо), но забиваете на главное в том, что должен уметь дизайнер — давать «вкусную» картинку. И когда вам говорят, что ваша картинка «невкусная» вы пытаетесь оправдать это ее «технической осмысленностью». Но картинка от этого «вкуснее» не становится.

Что касается вашего примера — у вас все будет хорошо, пока вы следите за контент-менеджерами, которые наполняют сайт. Но когда неуследите можете получить вот такое:

image

В принципе, ваше решение вполне имеет право на жизнь, но нужно его использовать там, где это уместно. Что вы, собственно, и сделали: использовали его там, где у блоков очень похожая высота.
Зато у Reno есть обязательно необходимые стрелки в карусели, которые говорят о том что это можно листать. В твоём этого нет, и это плохо. Доты же под баннерами вообще нафиг не нужны большинству.
Второй пример — и с разной шириной, и с разной высотой. На сайте представительства Шкоды, на странице www.skoda-avto.ru/models/rapid-fl-monte-carlo/overview, есть такой контент:



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



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

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



и в landscape:

Решение возможное, но применять можно только там, где заранее известен контент. Можно сделать даже лучше, так, чтобы мотоцикл, например, не обрезался так безбожно.

Но это строго индивидуальные решения. При смене каждой картинки придется везде проверять как она выглядит. Потому как сама верстка тут не даст гарантии, что все будет ок.

Сайт Шкоды — он не имеет моб. версии. Думаю, если бы она была, то они бы отказались от такого варианта. Или сделали как вы.

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

image

Посмотрите место с картинки на сайте. Вы там сделали ступеньку, которая портит впечатление даже сильнее, чем неудачная компоновка и неудачные отступы.

Насчет компоновки. Вы отказались от портретно-ориентированного изображения в этом коллаже (или как назвать совокупность разных изображений?), хотя в оригинале оно есть (мотоцикл). У вас есть только квадратные и альбомно-ориентированные изображения. Почему вы так сделали? Потому, что, скорее всего, не хотели страдать над тем, как складывать портретно-ориентированные изображения в моб. версии. На оф. сайте Шкоды такой проблемы то нет — т.к. нет моб. версии и адаптации. И что в результате — вы получили блок с очевидной симметрией по диагонали «нижний левый — верхний правый». Что тоже делает ваше решение менее симпатичным.
О, знакомая тема, тоже в своё время решал такую задачу… Там контент был динамический, но строго типизированный (сайт-афиша мест и событий), и на мобильной версии было переключение числа колонок с плитками в виджетах похожих и рядом расположенных мест (с 2 до 1) примерно на ширине в 540px.

В целом я за наиболее плавную подстройку (т.к. устройств разных по размерам экрана много, и вариантов зума — тоже), но чем она плавнее — тем более трудоёмкой становится разработка, тем больше CSS и JS приходится писать и отлаживать.
Изучайте:
www.smashingmagazine.com/2011/11/the-perfect-paragraph
baymard.com/blog/line-length-readability
ux.stackexchange.com/questions/3618/ideal-column-width-for-paragraphs-online
И еще несколько миллионов результатов в гугле и несколько тысяч статей и сотни исследований на одну и ту же тему, на тему оптимальной длины строки в вебе, особенно касаемо контентного текста.

Ширина текста по вашей первой ссылке это тотальный маразм, не уверен что я встречал такое вообще когда-либо в жизни. Разве что на самодельных сайтах 90-х годов с WordArt и гифками по всей странице было что-то подобное, помните такие сайты? Вот такой вот vibe идет от страницы по вашей первой ссылке.

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

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

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

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


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

Сравнили автомобильный сайт с википедией? Одни и те же UI/UX приемы думаете применимы? Думаете есть большое пересечение в плане работы с контентом между энциклопедией и сайтами в категории из вашего примера?

Даже если так, то сравните как выглядит текст в википедии и у вас:
image
— у википедии 14px/22.4px, соотношение 1,6
— у вас (по крайней мере на одной из ширин) 20.6577px/24.7893px, соотношение всего 1,2. И это при том что у вас шрифт жирнее чем Ариал с википедии.

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

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

Это не веб. Говорит о вашем внимании.

________

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

У вас очевидно нет ни вкуса, ни чувства прекрасного, и еще есть немного (или много) резины головного мозга, так что почитайте об оптимальной длине строки, оптимальном межстрочном интервале, о типографике, и видимо занимайтесь ремеслом по имеющимся гайдлайнам не споря с ними и не осуждая. UI/UX это явно не ваша стезя.
Ну кстати в защиту топикстартера скажу, что текст на втором скрине выглядит не менее, а даже более читаемым, чем в Вики (спасибо жирности шрифта, да, у меня близорукость, к слову, и на первом скрине вообще как-то читаемость текста не очень (эстетика норм).

Но! Отступы между абзацами (между секциями, и между подзаголовком и текстом — это жесть просто во втором случае. Ужасно смотрится :) Да и читаемость ухудшает несколько, да.
Вот за что я вас совершенно искренне хвалю — так это за черту, которой вы разграничили текст «по делу» и последние абзацы, где самоутверждаетесь.
Спасибо, что повелись на обе провокации. Коммент со ссылкой на текст во всю ширину был закинут с целью поиска хабровчанина, который бы не просто хаял такие абзацы, а сделал бы это обоснованно. Рад, что он сработал на вас (жаль, что недостаточно кармы, я бы вам тоже «нравится» поставил за коммент со ссылками в т.ч. и на смэшинмэгезин)

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

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

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

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

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

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

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

Да, и кстати и вам персонально, и вообще всем комментаторам спасибо за критику про отступы и межстрочные интервалы. Как-то я неосмотрительно фокус внимания с них перевел на какие-то другие моменты.
Может, стоит оттолкнуться от «книжной» 2-страничной верстки? Но тогда непонятно чего делать со сложными элементами типа тех же таблиц. Что вы думаете?

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

По бокам меню/элементы навигации — не вариант, потому что они могут быть сильно меньше по высоте контентной части, и при скролле вниз, когда боковые меню исчезают из поля зрения, контент начинает занимать куцую часть пространства

Можно фиксировать блоки при прокрутке, как это делает тот же ВК и много кто ещё :)

У меня, кстати, все media queries заточены под сантиметры, так что это не проблема

Не подскажете, каким образом браузер (да что там браузер, даже ОС) может узнать истинную диагональ Вашего монитора в сантиметрах или в дюймах? От видеодрайвера? Что там за протокол? Если я правильно помню, в браузере через JavaScript данные по физическому размеру экрана получить никак нельзя. Более того, даже если Вы их получите — это ничего не даст. Например, я лично работаю на Full HD 24-дюймовом мониторе с разрешением 1360x768. Естественно, у меня всё будет примерно в полтора раза крупнее, чем у тех, кто работает с нативным разрешением.
Не подскажете, каким образом браузер (да что там браузер, даже ОС) может узнать истинную диагональ Вашего монитора в сантиметрах или в дюймах?
а зачем знать диагональ каждого монитора? есть репперные значения, которые определяются медиа-функциями min-width, max-width, orientation или aspect-ratio (для мобильных) и то же aspect-ratio для мониторов. Если нужно, чтобы это определял скрипт — Modernizr в помощь
Так эти медиа-функции пикселями оперируют)
Диагональ зачем знать — ну Вы же написали, что у Вас к сантиметрам привязка, вот и спросил, как это всё будет выглядеть. Для браузера сантиметры — это просто некая величина, а вот как она в реальные сантиметры переведётся — это вопрос…
Так эти медиа-функции пикселями оперируют
И пикселями тоже, но не только ими. Т.е., например,
@media screen and (min-width: 30cm) and (min-aspect-ratio: 16/9) { ... }
работает. В дюймах и миллиметрах, полагаю, тоже, а вот насчет pt и pc не знаю
А вот я это и пытаюсь от Вас узнать, как они могут оперировать дюймами и сантиметрами, если нет информации по реальному размеру экрана? Если бы оно было — то всё ок. Можно даже учитывать текущее логическое разрешение вывода. Но с этим вроде пока всё плохо, даже мой видеодрайвер не знает, какой диагонали монитор у меня подключен.

Моя мысль в целом в том, что пока у нас нет доступа к реальным физическим размерам устройства вывода — работать с сантиметрами и дюймами не лучше, а даже хуже, чем с пикселями (поскольку пиксели более предсказуемы).
я не знаю, как браузеры это отрабатывают, но на каких-только устройствах я это не проверял — как-то это работает :) к примеру, у меня:
1) portrait and (max-width:10cm) — телефон, портрет
2) landscape and (max-height:10cm) — телефон, альбом
3) portrait and (min-width: 10.01cm) and (max-width: 30cm) — планшет, портрет
4) landscape and (min-height: 10.01cm) and (max-width:30cm) — планшет, альбом
5) max-width:30.01cm — десктоп
попробуйте на своем мониторе изменить ширину/высоту окна браузера по этим значениям — должны поменяться отображения
С мобильными проще: там заранее известен физический размер экрана устройства (диагональ и число пикселей), и даже DPI нельзя поменять без рута, не подправив конфиг.

Мне интереснее, что на декстопах будет. Проверю)
Например, я лично работаю на Full HD 24-дюймовом мониторе с разрешением 1360x768. Естественно, у меня всё будет примерно в полтора раза крупнее, чем у тех, кто работает с нативным разрешением.
Ну это смотря какой дизайн (это же ведь тоже дизайн, если я не ошибаюсь))) У меня, например, отправная точка — vw (ну или тот же Modernizr определяет браузеры, которые vw не знают, и скрипт ее рассчитывает). Какое бы вы разрешение не выставили на своем мониторе — сайт будет выглядеть одинаково.
vw и vh близки по смыслу к процентам, только от вьюпорта считаются. Тут да, можно добиться одинаковости отображения, согласен.

Кстати, интересно — каков грамотный подход при вычислении размера кегля шрифта для сайта? Обычно раньше задавали это всё в пикселях (с привязкой к точкам перехода для разных девайсов, конечно же, и с корректировкой на dpi). Но также у нас в наличии есть пункты, а также vw и vh (сейчас перечитал кстати определение, и не очень понял, какой смысл для элементов с vw и vh отключать масштабирование кегля при пользовательском зуме: в конечном итоге, это может сделать весь сайт немасштабируемым, если он целиком свёрстан с применением таких единиц). Вы обычно как с кеглем поступаете?
Да, сайт не зумится вообще, это минус (наверное). Хотя можно поиграться с размером окна браузера.
Про размер кегля — отправной точкой стал опять же 15"-монитор, на нем я высчитал vw так, чтобы размер этого шрифта соответсвовал стандартам бренда (не помню уже, то ли 13px, то ли 15, то ли еще сколько-то). И на всех остальных мониторах и кегль, и вообще все элементы — просто пропорционально увеличиваются/масштабируются. Т.е., к примеру, при равном соотношении сторон 24"-монитор больше 15" в 1,6 раз — вот все будет в эти 1,6 раз просто увеличено.
Ну как по мне, это не очень хорошая практика (как пользователь говорю). Не люблю сайты, страдающие гигантоманией в плане кегля, вроде того же «Эха Москвы».

Я за фиксированнный кегль на любой ширине, привязанный только к dpi устройства (при большей плотности пикселей увеличиваем кегль). А у Вас он будет зумиться вместе с шириной экрана/окна, что может и снимает кучу проблем с организацией макета при разной ширине окна, но выглядит это очень спорно для юзера, имхо :)

За примерами кстати далеко ходить не нужно: вк, фейсбук, википедия, хабр. Там шрифт вполне себе постоянный по кеглю.

Просто я всегда задавал кегль тупо в пикселях, а сейчас вот думаю — может, есть более прогрессивные способы. Например, em + динамическое вычисление на JS исходя из каких-то условий.
Я посчитал, что если меру знать — то норм. Т.е., например, font-size обычного текста для 24" 21px и для 15" 13px — это не гигантомания (тот же райффайзен на 24" обычный текст аж в 24px зарядил, и всем нравится)
Вот хоть убейте, не пойму, где тут логика. 24-дюймовый монитор больше, и текст читается на нём лучше. Это факт. Но при этом на 15 дюймах текст размером в 13px, серьёзно?..

Я уже не говорю, что если выставить разрешение ниже, как у меня (или просто поднять DPI, если у нас относительно новая ОС) — то всё станет ещё на 25-50 процентов крупнее, включая и шрифты на сайтах! Можно конечно в этом случае дефолтный масштаб в браузере уменьшить, но сейчас не об этом.

У меня сейчас Хабр отображается в 14px (Verdana в поле ввода, Arial в комментариях) и шрифт кажется реально крупным.
ой, я забыл, что у вас необычное разрешение для 24".
Тогда читайте так:
обычный текст 13px на 15 дюймах с разрешением 1366x768 и 21px на 24 дюймах при разрешении 1920x1080. При любых других разрешениях размер текста в пикселях будет другим, но физический размер останется таким же. Т.е. менять разрешения, DPI — пофиг, элементы (в т.ч. текст) крупнее/меньше не станут.
Я просто знаю, что такое 15px на стандартном DPI. Видел несколько лет назад у знакомого на ноутбуке (там DPI был чуть-чуть повыше, чем у настольных мониторов, но не сильно, даже не в полтора раза, не говоря уже о том, что не ретина). 15px — весьма некрупный текст (хотя не 12-13 конечно, вот там реально ад уже). Мне просто глаза бедных пользователей жалко. Выходит, при нормальном нативном разрешении владельцы 24 дюймов получат нормальный (даже крупнее среднего) текст, а владельцы нетбуков — такой мелкий ужас?
вот я даже за рулеткой сходил, чтобы ширину 15" экрана замерить :) Сделайте ширину браузера 34,5 см — и увидите, как сайт будет на 15" ноуте отображаться, там не мелко (ну только межстрочный дурацкий, это я согласен с критиками)
Можете ещё ссылку указать на страницу Райффайзена для теста? Мне интересно, как он именно у меня будет выводиться, и какой размер в пикселях под мой экран выставит. Заодно CSS их посмотрю
Спасибо. Да, 24px. Сильно огромным не выглядит (у меня ещё текст слегка покорёжен из-за старой версии ОС, сами буквы имеют дефекты). Но читается нормально. Субъективно по ощущениям — как на том же «Эхе», но смотрится органичнее при их вёрстке за счёт того, что самого текста меньше, и более узкие абзацы.
Хотя я бы если писал userCSS под этот сайт, поставил бы 45px для заголовков и 20px для текста (сейчас стоит 48 и 24, соответственно). Ну это учитывая моё нестандартное разрешение :)
Я бы посмотрел в сторону использования нескольких колонок, как в журналах и газетах.
Колоночная верстка — интересная идея, она на ultra wide даже кладется. Ну то есть условно, например до 21" — одна колонка, то что выше — две, и 21:9 — три. Но тут возникает другая проблема: в журналах/газетах видно страницу целиком, и в сверстанном блоке, где одна статья, сразу видно всю высоту колонок. А если на веб-странице баннер, например, верхний подразумевается, то он сразу отъедает большую часть видимого экрана. И как под ним контент располагать в колонках, и какой они должны быть высоты — непонятно. Баннер скроллится вверх вертикально, а потом скролл горизонтальный что ли тогда? А как быть с одноколоночным отображением для 15"?
Можно фиксировать блоки при прокрутке, как это делает тот же ВК и много кто ещё
Ну это такой костыль получается. Если человек пошел скроллить страницу вниз — значит ему интересен контент этой страницы, а не навигационные элементы, которые в этих фиксированных блоках. Т.е. их фиксация — «нам просто нужно место занять». Захочет человек куда-то перейти — Home нажал и пусть переходит
Провокации? Троллируете тут? Или это у вас классический случай «I was just pretending to be retarded»?

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

Заодно спасибо вам или какому-нибудь вашему фанату за минус в карму.
Всего доброго, мистер провокатор.
Провокация на конструктивную дискуссию — мне кажется, это не есть плохо. Цель — как раз узнать мнение специалистов, разбирающихся в своем деле. Ну если вам это слово не нравится, прошу прощения, пусть будет мотивация тогда.

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

Про минус в карму — опять же мне кажется, что вежливость и конструктив про… ой, мотивируют людей оценить сказанное/написанное положительно, а самоутверждение за счет других и переход на личности — мотивируют сделать обратное.

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


М. У вас, как я понимаю, такого монитора нет под рукой? Тогда попробуйте подсмотреть где-нибудь, где они используются (у кого-то из друзей может быть такие есть?), как пользователи открывают на них браузеры. Чаще всего — не на весь экран, а только на его часть. Используют как два рядом стоящих монитора: на одном открыт браузер, на втором — Word, допустим. Причина — под пользователей с такими мониторами никто особенно ничего не адаптируют, поэтому тут реализуется принцип «если гора не идет к Магомету...». Даже если вы сделаете дизайн для этой группы, то многие из нее даже не узнают, что вы его сделали. Пока дела обстоят так.

Не забывайте, что чем больше по физ. размерам монитор при том же разрешении, что тем обычно дальше от глаз пользователя он стоит. У меня, например, основная пара мониторов — 1920x1080 27". Они стоят где-то в 80 см от моих глаз. Если бы они были при том же разрешении размером 19", то мне, скорее всего, пришлось бы их поставить ближе.

Идея использовать при выводе на экран дюймы и сантиметры — довольно сомнительная.

Сейчас у меня основной монитор — ultrawide 29", 2560x1080. И он юзается в двух режимах: 1) во время работы 2 окна, причем либо 50x50, либо 75x25, в зависимости от задач, 2) не во время работы, как правило, 1 окно во всю ширину.
Причина — под пользователей с такими мониторами никто особенно ничего не адаптируют
Насчет никто нечего — это вы очень неправы. Игровая индустрия, Ubisoft, например — уже в 2014-м полностью адаптировал AC Unity под такие мониторы.
Идея использовать при выводе на экран дюймы и сантиметры — довольно сомнительная.
Очень интересно, почему
Мы же говорим о сайтах, а не об играх. Игры, понятно, адаптируют. Но, при этом, кстати, плюют на обратную совместимость: попробуйте в Fallout 4 поиграть на квадратном мониторе и открыть замок, например. Игры очевидно заточены на полноэкранные режимы.

По поводу сантиметров и дюймов — W3С не советует, да и просто погуглите как браузеры работают с сантиметрами и дюймами и как их пересчитывают в пиксели. Думаю, вопросы отпадут
Сантиметры и дюймы — это только, и исключительно для медиа-функций, а весь css — vw, rem, em и проценты.
Использование их в media не влияет на их природу.

Can I Use — очень советую заглядывать. Можно сколько угодно спорить, много или мало эти 15% и считать ли их людьми нужного сорта, но они есть.
Не забывайте, что чем больше по физ. размерам монитор при том же разрешении, что тем обычно дальше от глаз пользователя он стоит.
вот как раз именно поэтому дюймы и сантиметры рулят. Т.е. при одинаковом соотношении сторон сайт на 15" и на 27" выглядит пропорционально одинаково. И это — нормально. Также нормально, как смотреть видео/кино на весь экран, и также нормально, как играть в игры тоже на весь экран. Причем не важно какое кино и какие игры — экшн или где что-нибудь хочется/нужно поразгдялывать детально.

Я не знаю ни одного человека, который кино или игры на 15" делает full screen, а на 27" использует для этого 60% ширины.
Ух. Нет. Вы берете кино и игры и переносите их проблемы и решения на сайты. Это не очень верно, не находите? Область другая. Теперь возьмем пользователя. И его монитор. У него есть операционная система, любимый Word и еще браузер. Пользователь не будет заморачиваться с настройками DPI или делать еще черте-что. Он применит физическую настройку — отодвинет монитор так, чтобы ему все было удобно. И стандартные, без всяких сантиметров, сайты будут ему удобны.

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

На самом деле, сейчас у вас (я сужу только по представленной вами на конкурс работе) есть гораздо более важная задача, как для проф. дизайнера — научиться выдавать вкусную картинку. Посмотрите на комментарии. Большинству из тех, кто высказал на этот счет свое мнение, не нравится ваш конкурсный дизайн. Я не искал другие ваши работы, возможно там все гораздо «вкуснее». Но пока, в чисто профессиональном смысле, эта проблема должна занимать вас больше, чем пиксели, сантиметры и дюймы в CSS.

Еще один случай, когда жалею, что не хватает кармы для лайка. Спасибо за ваши комментарии.
НЛО прилетело и опубликовало эту надпись здесь
На странице skoda-ap.ru/our-skoda/octavia-postnikov?view=adaptive нажимаю на картинку — и вижу лупу со значком -. Точно такую же, как у картинок, которые открываются браузером напрямую. Пытаюсь нажать назад — не нажимается. И с ужасом понимаю, что это такой неинтуитивный просмотр картинок, который запросто путается со встроенным в браузер. А всё потому, что нет никаких отличительных элементов — какого-нибудь крестика сверху справа (обязателен!), подписи картинки снизу, каких-то 5-10px отступа по краям и рамки с тенью вокруг. Анимацию увеличения/уменьшения бы добавить, было бы совсем хорошо.
Именно вот это мелкие штуки оставляют впечатление. А не текст, растянутый на 1920px, который невозможно читать на большом мониторе, несмотря на твоё маниакальное желание так везде сделать.
Лучший сайт на Битриксе? Вы в своём уме?

Прошу прощения, не справился с потоком нахлынувших чувств.
За 1т$ сделаю подобный сайт за две недели.
leealex,

Являюсь одним из разработчиков maximum-hyundai.ru, хотел бы дать комментарии к основным претензиям:
1) попапы callKeeper'а действительно ужасны, сейчас ведем переговоры с заказчиком о том, что они портят UX и вообще их необходимо убрать
2) по поводу кликабельности баннеров Вы правы, исправим
3) с необходимостью переименовать «цены и комплектации» в «конфигуратор» тоже согласны, сделаем
4) на мобильной версии конфигуратора нет умышненно, тк целью здесь является обратная связь, поэтому не хотели усложнять и перегружать функционал
5) про ширину контейнера уже всё сказано выше

Нашей целью было сделать качественный продукт, который легко поддерживать и развивать, средний показатель TTFB колеблется от 50 до 150 мс (у Вас 700 — 1200+) — это тоже UX, пользователи не любят ждать :)

ps: если хотите подискутировать, лучше пойти в лс, дабы не засорять комменты (если конечно сообщество не против)
это ко мне, а не к leealex, я статью эту писал, он ее разместил, потому что на тот момент я не был захабрен.
Мне лично Ваш дизайн тоже не очень нравится, Вы уж извините. Открыл сейчас на десктопе — и как-то не очень. И шрифты, и то, что текст на всю ширину, и то, как текст с картинками свёрстан в Вашем примере по ссылке, что Вы приводили выше.
Автор поста хэйтит сайты других, потому что проиграл, хотя, по-сути, сайт автора не намного лучше описанных. Для того, чтобы создать сайт, который понравится пользователям и будет удобен в использовании надо самому стать пользователем. Ваш сайт унылый и выглядит как сайт из прошлого. Шрифты плохо читаются, анимация при пролистывании слайдера бьет по глазам при смене слайда, на больших мониторах разрешение изображения страдает очень сильно, страница загружается очень долго, цвета подобраны отвратительно, в лендскейп виде, который вы так любите использовать, ваш сайт выглядит не лучшим образом и количество доступной информации стремится к нулю. Но хейтите других вы здорово.
Сайт топикстартера имху хуже чем у победителей, но я хотел бы знать ответа на два простых вопроса:
1. Как неработающий сайт может быть выше работающего?
2. Действительно ли поп-апы рекомендованы дизайнерами и они не снимают баллы за подобное?

Не знаю, хочет ли орг. комитет ответить на эти вопросы или скажем, представители студии Лебедева (они вроде как претендуют на пальму первенства среди студий России по профессионализму). Мне кажется, что открытость и диалог в профессиональном сообществе весьма важная вещь, в противовес междусобойчику и клановости.
«ты смотри на главное, поэтому что это — главное» (с)
Абсолютно без разницы весь этот дизайн и прочие бантики. Главное для бизнеса, чтобы продажи по максимуму были. В данном случае не корзина главное, от которой все в полном восторге. Главное для посетителя — это удобство поиска и заказа на сайте нужной запчасти или подбор комплектации автомобиля, плюс прайс и условия доставки. В таком случае корзина любая сойдет, лишь бы в ней было показано что надо.
Водителям мужчинам ваши банты не интересны, а водители женщины ищут банты в гламурных журналах, а не на сайтах запчастей.
Если владелец бизнеса делает сайт не для продаж, а для конкурса дизайна, то я бы из такой конторы как можно быстрее бы уволился.
Посмотрите сайты алиэкспресс и амазон — дизайн без вывертов, а обороты миллиардные — вот к чему должен стремиться бизнес.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации

Истории