По мере того, как сообщество дизайнеров переходит к разработке приложений и интерфейсов для мобильных устройств, возникает новая проблема: Variing Screen DPI's. Вот ситуация:
Touch:
* iPhone 3G/S ~ 160 dpi
* iPhone 4 ~ 300 dpi
* iPad ~ 126 dpi
* Android device @ 480p ~ 200 dpi
Точка / клик:
* Laptop @ 720p ~ 96 dpi
* Desktop @ 720p ~ 72 dpi
Безусловно, существует четкое различие между настольным компьютером и мобильным устройством, поэтому наличие двух отдельных внешних интерфейсов для одного и того же приложения логично, особенно если учесть, что одно основано на "касании", а другое - на основе "точка / щелчок". 1009 *
Задача состоит в разработке статических графических элементов, которые будут масштабироваться, скажем, между 160 dpi и 300+ dpi, и получать согласованный и чистый дизайн при всех уровнях масштабирования. Есть мысли о том, как подойти к этому? Вот несколько сценариев, но у каждого есть свои недостатки:
* Design a single set of assets (high resolution), then adjust zoom levels based on detected resolution / device
o Drawbacks: Performance caused by code layering, varying device support of Zoom
* Develop & optimize multiple variations of image and CSS assets, then hide / show each based on device
o Drawbacks: Extra work in design & QA.
У кого-нибудь есть мысли или опыт, как с этим бороться? Мы, безусловно, должны обратить внимание на методы, которые используют / поддерживают HTML5 и CSS3.