Размеры макетов при создании адаптивного дизайна
Здравствуйте, подскажите пожалуйста, кто создавал адаптивный дизайн. Правильны ли следующие слова?
За частую рисуют под 4 основных формата, из 6 наиболее распространенных:
320х480 - моб. вертикальный (480х320 - горизонтальный). Добавляется безопасный отступ по 5-10 пикселей (310х470/470х310) - Он же подстраивается до разрешения 630/640рх.
800х480 - горизонтальный. Добавляется безопасный отступ по 5-10 пикселей (790х470) - Он же подстраивается до разрешения 960/980рх.
1024х580 - горизонтальный. Добавляется безопасный отступ по 10-24 пикселей (1000х570) - Он же подстраивается до разрешения 1280/1260рх.
1280+х640 - горизонтальный. Добавляется безопасный отступ по 10-20 пикселей (1260х620) - Он же подстраивается до разрешения 1366/1340рх.
1600+х800 - горизонтальный. Он же подстраивается до разрешения 1900+ рх.
2100+х900+ - горизонтальный. Он же подстраивается до разрешения 2600+ рх.
Рисуется как правило: 1 - 3 - 4 - 5.
Промежуточные 2 и 6 настраиваются ресайзом элементов через CSS.
Так же следует учитывать устройства на iOs с их HD чтением изображений и дисплеи ретина. Для них изготавливаются изображения 150-200 dpi, в место привычных 72+.
Комментарии пользователей
Какие макеты рисуют и как они тянутся/увеличиваются и т.п. — зависит от договоренностей дизайнера с верстальщиком и дизайнера с клиентом (о презентации дизайна). Про ретина дисплеи — верно. Или же можно заменять растровые изображения на SVG, но следите за размерами файлов — SVG не всегда подойдет.
Спасибо brusher .
Ребята, у меня к вам вопрос к этой теме - сейчас первый раз столкнулся с iOS устройствами, как и верстальщик, с которым я работаю. Возникла проблема - иконки выглядят пикселизированными в приложении, хотя на компьютере всё норм. И я не могу понять кому следует это исправлять - верстальщику или мне. Причем, прочитав "изображения 150-200 dpi" у меня закрались подозрения... вот только я понять не могу, при чем тут dpi? например и конка 60x60 px независимо от dpi останется 60x60 px или ios устройства по серьезке как-то воспринимают dpi и ориентируются прежде на него и размер в миллиметрах, апсемплируя картинку? А вообще был бы признателен с ссылки на материал по подготовке макетов для ios
Rakutin, Больше спасибо! Надеюсь, в моем случае, эта информация тоже подойдет. Я, видимо, непонятно выразился; я имел ввиду не веб-верстку, а верстку приложения, если так можно выразиться
я обычно для моба рисую и одно среднее разрешение. Как правило в большинстве случаев просто скрывается одна колонка и это можно пояснить уже текстово
какое-то дрочерство, если честно. не проще предусмотреть минимальный и максимальный? Ну если заказчик оплачивает все трудозатраты то вообще пофигу, можно и под 10 нарисовать. Работаю в студии, рисую 1000- 1200 просто. А если заказчик что-то захочет поменять что-то? вообще анус тогда, это 6 макетов по несколько страниц... Если не залинковал в CC2014, то можно сразу вешаться
Ребята, надеюсь кому-нибудь поможет, я нашел решение своей проблемы. Я и неопытный програмер работали в разных единицах и, почти две недели разработки и верстки ругались по этому поводу, как оказалось в XCODE используются единицы "p" это абстрактные единицы UI в IOS, в отличие от используемых мною px. В общем, после того как вскрылась эта проблема всё стало пиксель-перфект)