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

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

Вопрос этот у меня возник не случайно. Есть интересный проект, заказчиками которого являются фанаты Айпадов и Айфонов. Им очень важно, чтобы сайт одинаково хорошо отображался и там и там. То есть ширина экрана плавает от 800 до 2000 пикселей в ширину.

Что нам делать с картинками в оформлении?

Да, сейчас все браузеры научились хорошо масштабировать сайты. Нажал Ctrl, покрутил скроллом, и твой сайт в том размере, как тебе удобно. Но если растровую картинку 30 на 80 пикселей увеличить в трое, красоты это не прибавит.

Мы в нашей рутинной работе верстальщиков уже привыкли к тому, что полностью зависим от пикселей. Мы все считаем в пикселях. Не важно, как мы встраиваем картину: в фоне или тегом Img.

Я вижу 2 принципиальных решения:

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

2. Переход на векторную графику в оформлении сайта.

Используем несколько наборов файлов CSS и картинок

В общем-то это решение. Определяем некоторые градации, скажем:
2 048—1 601 пиксель
1 600—1 281 пиксель
1 280—1 025 пикселей
1 024—800 пикселей.

Возможно еще меньшее разрешение для телефонов.

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

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

Векторная графика

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

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

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

Вопросов больше чем ответов

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

Буду крайне благодарен любым комментариям.

Топики на хабре на эту тему

Прощайте, пиксели ^[1]
Зум шрифта и верстка ^[2]
Правильная «резина» ^[3]
Как сделать один сайт для всех устройств (Responsive Web Design) ^[4]

Желание написать этот пост-опрос общественного мнения возникло после:
Нечёткость значков истомляет нас ^[5]

И главный вопрос: а как же пиксель арт?

Я большой фанат пиксельной графики и требую вернуть нормальное разрешение 320 на 240 на все без исключения мониторы.

Автор: vadimus