Как мы будем верстать, когда экраны станут многопиксельными, а пиксели еле различимыми

[@soomrack]

Верстка изменится также как изменился дизайн компьютерных игр: как изменился Warcraft 1 -> WOW.

[@soomrack]

PS: мне нравились крупные пиксели, в каждом из них был свой смысл. А сейчас его разорвали на сотник мелких пикселей и он исчез, как вода исчезает в песке.

[@kyrie]

Это же просто хокку, на тему топика:

Мне нравились крупные пиксели
В каждом из них был свой смысл
А сейчас его разорвали
На сотни мелких осколков
И он исчезает, как вода на песке

[@avrfun]

У Вас такой талант пропадает :)!

[@NightWriter]

Это танка и неправильный, к тому же

[@esc]

Вероятно, будет виртуальное разрешение для картинок. Т.е. вместе с width и height будет ppi или типа того. Не для обычных картинок (из браузер и сам растянет) и не для иконок (они таки перейдут в вектор), а для пиксельных фонов и подобного.

[@Kaaboeld]

Вот-вот тоже не понял автора топика, когда он обозначил проблему, которой вроде как и нет — учитывая: «Media Queries».

[@de1vin]

Согласен. Не вижу проблемы.
Последние 5-6 заказов были с обязательной поддержкой ipad/iphone (адаптивной версткой).
Media queries решают задачу без каких-либо особых проблем.
В добавок для iOS на помощь приходит viewport.

[@fabela_arbaro]

Насчёт картинок — можно в вейвлет форматах хранить (тот же JPEG2000) — в зависимости от разрешения браузеры могли бы досчитывать с сервера только необходимую для данного разрешения часть.

[@DemiGray]

Хм… не подскажите как это должно выглядеть в коде? в теге img что указывать?:)

[@sdevalex]

<%= image_tag 'adapt.jpg' %>

[@DemiGray]

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

В общем, имхо, кроме media queries ничего пока нет)

[@Hellcunt]

Вам может быть интересен комментарий чуть ниже :)

habrahabr.ru/post/141875/#comment_4751438

[@Hellcunt]

Можно даже с обычными JPG или PNG. Идея в том, что на стороне сервера автоматически генерируются размеры именно под текущее устройство (или берутся из кеша) — адаптивные изображения.

[@oe24]

Эй, неужели никто не заметил орфографическую ошибку в названии топика? разлечимыми

[@root_sashok]

Ошибка? А кто будет лечить пиксели?

[@syrompe]

Вектор на самом деле тоже не панацея.

Вот здесь интересная статейка (на буржуйском). Там наглядная картинка с иконкой принтера в векторе и растре.

[@asci]

Картинка «ниочем», такой же принтер как и в пнг можно нарисовать в векторе, просто задать ширину линий в пикселях немасштабируемой

[@qbique]

Можно попдробнее? Вы знаете, как у svg картинки задать ширину линий в пикселях?

[@asci]

Хм, а вот про реализацию я не подумал, прошу прощения. Просто мне показалась такая возможность довольно таки очевидной…

[@qbique]

для векторной графики особо не очевидное решение. да и сам svg крайне незамысловат в своих возмоностях. я это понял, когда переводил векторную картинку из adobe illustrator в svg. пришлось отказаться от многих плюшек и пойти более тернистым путём

[@qbique]

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

[@EvgeniyLazarev]

<sarcasm>
Скоро Apple скажет, как нам жить с этим.
</sarcasm>

[@syrompe]

Меня тут конечно сейчас закидают…

Но я бы первым пунктом поставил отмену отсрочки от армии для аспирантов. Для и для студентов ВУЗов тоже бы не помешало…

[@syrompe]

Ой…
Дико извиняюсь — попутал вкладки

[@webkumo]

дайте ссылочку, похоливорим ;)

[@syrompe]

welcome

[@rgaliull]

ошибся темой

[@Shajtan]

Шикарно! Сначала, когда прочитал комментарий, решил, что нас почтил вниманием Владимир Вольфович.

[@VenomBlood]

Прошу прощения, но разве Жириновский и ЛДПР выступают не за отмену призыва в мирное время? Ведь в каменте выше идет речь об отмене отсрочки для студентов.

[@bolk]

Главный недостаток: отсутствие поддержки у IE ниже 9 версии.

Слушайте, ну VML же, если очень нужен вектор. Кроме того, IE поддерживает отображение разных там WMF и прочих векторных форматов Винды.

[@ChemAli]

Я считаю, что проблема исчезнет сама собой с исчезновением старых экранов. То есть переход на экраны высокой четкости будет единоразовым и как только мы упремся в некий фактический предел различимости точек, все более-менее устоится и мы продолжим жить как и прежде, и использовать те же самые приемы, только уже в «HD».

Но проблема переходного периода налицо, тут не поспоришь.

[@shmaltorhbooks]

пиксель картинки и пиксель устройства вовсе не обязаны совпадать

Вот оно. Не так уж велика проблема, оказывается. Действительно же, размер картинок указать в единицах измерения длины — см/мм (к примеру), а масштабы — в тех же еm/%, что и так практикуется. Я уже не говорю о Media Query, которые упоминались выше.
Единственное, что на мой взгляд могло бы быть затруднительным, это правильная интерпретация количества пикселей в миллиметре конкретного девайса.

[@QwiBeck]

Главный недостаток: отсутствие поддержки у IE ниже 9 версии. Но, этот недостаток уходит, мы же говорим о будущем.

Ну да, офисный планктонпользователи IE 6 сейчас начнут стадомрезко переходить на IE 9 и выше

[@ImKremen]

Вы случаем не из Китая пишите?

[@1nd1go]

НУ вообще говоря, я например вчера зашел посмотреть в магазин как работает New ipad. Получил интересную картину:


Т.е. прикидывается он все же разрешением 1024х768. Так что если производители девайсов научаться делать разрешение экранов стандартным, а количество точек на экране увеличивать, то проблем не будет.

[@egormerkushev]

Потому что он поинтами оперирует, а в его поинте — 2 пикселя. Но вам это знать ни к чему :)
Как эту проблему решает Apple можно посмотреть на их же сайте www.apple.com/ipad/ — там все картинки нового айпада в двух вариантах, для каждого значения плотности.

[@1nd1go]

Ну скорее в поинте 4 пикселя… А что там надо на сайте увидеть? Вы имеете ввиду, что разные картинки отдаются если разными девайсами заходишь?

[@egormerkushev]

1) Поинт — мера длины всё-таки.
2) Да, разные картинки.

[@webkumo]

Поинт таки или мера площади или zero-dimensional.
Точка не может иметь длину. Она или имеет длину и ширину, либо ни того, ни другого.

[@egormerkushev]

Но ширину экрана вы-таки в пикселях или поинтах измеряете.

[@webkumo]

Следите за руками:
— когда мы обсуждаем точку как меру какой-то размерности — мы говорим, сколько этих самых точек влезает в заданный объект (1280 — ширина экрана, 5Мпикселей размер снимка, пиксели везде пиксели — квадратных пикселей нет!)
— когда мы обсуждаем размер точки — она уже определённо обладает площадью (ибо она нам и важна). Хочется, чтобы не забывали, что точка далеко не всегда квадратная ;)

[@Evengard]

то есть 1px в CSS это на самом деле 2px реальных на iPad?

[@egormerkushev]

На iPad 3 да. И на iPhone 4/4S.

[@Evengard]

Ну и зачем они это сделали?

[@egormerkushev]

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

Ну и чтоб текст на экране был четче.

[@1nd1go]

Идеально и практически исчерпывающе тему раскрыл PPK вот в этой презентации

Спасибо! Прямо в точку. Ее бы вынести в топик…

[@Throwable]

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

P.S. Насчет растровых картинок: где-то на хабре видел сравнение алгоритмов перевода растра в вектор (на примере Марио вроде). Довольно интересные результаты получаются.

[@grigoryvp]

Недостаток: лишние картинки, лишние css файлы, удлиненная по времени верстка. Ну, и вносить изменения тоже в четыре раза дольше.

Можно хранить в репозитории картинки в максимальном разрешении, а при деплоее на сервер скриптом автоматически делать версии в разных разрешениях. Так делают для игр на iPad/iPhone/android, все работает.

[@qbique]

не панацея, ведь остаётся проблема низкого качества при ресайзе. непопадание в пиксель, замыленые края и тп.

[@yuretsz]

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

[@aruseni]

Мне ещё вот это вспомнилось.

www.artlebedev.ru/kovodstvo/sections/71/

Помню, раньше, когда были ещё ЭЛТ-мониторы, выбирал на них не самое высокое разрешение (которое, к тому же, отображалось с мерцающими 60 Гц, а другие были хотя бы с 85), а какое-нибудь ближе к среднему. Чёткость отрисовки точек была одинаковая, только размер точки разный. И причина этому была совершенно простая — мне нравилось, чтобы иконки не уменьшались до крохотных, а были различимыми. И мелкий текст (особенно на картинках). И прочее.

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

Или взять, например, игру Battle for Wesnoth. Увеличение разрешения приводит к тому, что персонажи становятся еле различимыми — нормально играть на 1920x1080, например, по-моему невозможно. Причём у неё есть zoom, и это было бы неплохое решение, если бы не алгоритм, по которому он работает. От такого режима в такой игре ожидаешь, что пиксельная графика (карта, персонажи) будут отображаться крупными чёткими точками (а текст может быть и не пиксельным — наоборот приятно когда он более чёткий). А на деле этот режим работает со сглаживанием, и получается ужасная размытая картинка (о подобном размытии, правда, в случае с печатью, там тоже писали).

[@aruseni]

Кстати, примечательно, что первая ссылка — лето 2001. Это напоминает историю с ipv6.

[@vmuha]

А что делать с теплыми ламповыми фактурами в бекграунде? Их тоже переводить в вектор? А если оставлять в растре, то на разных экранах масштаб вактуры будет разным."

А зачем в вектор? В CSS3, кажется, уже придумали инструментарий для создания любого бекграунда. Смысл в топике был бы, если бы технологии оставались такими же как и лет 10 назад, но, к счастью, они не стоят на месте. Все движется и все меняется, верстка в том числе и даже в лучшую сторону, как по мне. В конце концов у нас уже есть canvas, в котором можно отрендерить даже 3д, осталось только ставить костыли для очень старых браузеров и ждать их ухода в мир иной.

[@consalt]

Все просто. Сейчас все масштабируется без проблем, кроме картинок. Как только все перейдут на высокие разрешения мониторов, например 2560x1600 для 15 дюймов, то и картинки все будут загружать с фотоаппарата в исходном размере, а не делая кроп 800×600. И все будет хорошо. Единственный минус — возрастет нагрузка на каналы связи. Простейший сайт начнет весить не 500 кбайт, а 5 метров. Провайдеры поднимут скорость инета новыми технологиями и все будет хорошо.

[@Epsiloncool]

Пиксельарт? Да никаких проблем! Рисуем разноцветными квадратиками. А редактор потом нам их склеит в двумерные меши и позволит ещё текстурку наложить. Красота :)

[@aruseni]

Да и в 3D, кстати, тоже отлично смотрится! :)

www.pouet.net/prod.php?which=31657

[@AntonDiaz]

Топикстартер, эти проблемы уже решили.

Использование разных файлов под конкретное разрешение, JS определяет размер экрана, предлагает определенный файл CSS, который в свою очередь подгружает нужные картинки.

1) Media Queries
2) «Пиксель» сейчас уже не пиксель вовсе: css-live.ru/articles/novye-i-starye-edinicy-izmereniya-kratkij-obzor/

[@vicnaum]

Мне тоже кажется, что в будущем все картинки будут высокого разрешения (dpi/ppi), сайты будут того же размера, что и сейчас, но более четкие на высокопиксельных экранах. Исчезнет проблема попадания в пиксели, т.к. это будет уже неактуально (выше про ЭЛТ писали — ведь там не было никакой пиксельной резкости вообще). И все будут счастливы и довольны. Пиксели исчезнут как класс, или как точки на бумажной печати (при печати в 600дпи ведь никто не подгоняет векторные макеты чтобы они попиксельно попадали в 600дпи?)

Ну вот. А те, у кого экран не 300дпи — будет довольствоваться размытым ресайзом, также как и те, кто сейчас сидит на ЭЛТ мониторе с 1024х768.

В общем, нужно лишь немного подождать, чтобы все мониторы и девайсы приобрели dpi/ppi выше порога человеческого зрения — и тогда все наши нынешние проблемы с пикселями отпадут сами собой.

[@naumann]

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

[@Envek]

На самом деле с помощью JS можно определить все требуемые размеры: экран, вьюпорт и т.д. Выше уже давали ссылку на презентацию, где это перечислено (в конце): quirksmode.org/presentations/Spring2012/viewports_sf.pdf

[@Keyten]

Мы говорим о будущем. Так что всё гораздо проще. Памяти со временем будет всё больше. Фотоаппараты всё круче. А интернет и браузеры всё быстрее. А посему вполне можно будет выкладывать на сайт фотки размерами… Ну где-то там ~5000x5000. Это про растр. А про вектор — он и в африке вектор.

P.S. Вы поверили бы 10 лет назад, что некий Яндекс.Диск даёт бесплатно 10 Гб? это не реклама