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