Pull to refresh

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

Reading time 2 min
Views 4K
Данный пост не про конкретные решения по верстке сайтов в будущем, а сбор мнения хабрасообщества, как нам жить дальше.

Вопрос этот у меня возник не случайно. Есть интересный проект, заказчиками которого являются фанаты Айпадов и Айфонов. Им очень важно, чтобы сайт одинаково хорошо отображался и там и там. То есть ширина экрана плавает от 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 версии. Но, этот недостаток уходит, мы же говорим о будущем.

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

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


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


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

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


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


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

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


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


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

Articles