Главная

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

2012-04-11 в 10:46, admin, рубрики: css, ipad, браузеры, Веб-разработка, векторная графика, верстка, метки: iPad, векторная графика, верстка

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

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

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

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