Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building websites for HiDPI devices
Search
Vinay M
March 23, 2013
Technology
5
5.2k
Building websites for HiDPI devices
Presented at front end meetup Singapore
Vinay M
March 23, 2013
Tweet
Share
More Decks by Vinay M
See All by Vinay M
DRY css with Sass
artminister
1
130
CSS Best Practices
artminister
6
270
Other Decks in Technology
See All in Technology
Vault を基盤として整備し、 みんなに使ってもらえるようになるまで
takahiko
1
120
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
430
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
200
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
120
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1.2k
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.6k
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
110
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
COVESA VSSによる車両データモデルの標準化とAWS IoT FleetWiseの活用
osawa
1
250
人工衛星のファームウェアをRustで書く理由
koba789
10
6.3k
S3アクセス制御の設計ポイント
tommy0124
2
180
Featured
See All Featured
Building an army of robots
kneath
306
46k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Documentation Writing (for coders)
carmenintech
74
5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Code Reviewing Like a Champion
maltzj
525
40k
Into the Great Unknown - MozCon
thekraken
40
2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Transcript
BUILDING WEBSITES FOR RETINA (HiDPI) DEVICES Vinay M www.artminister.com
The web’s primary design principle is universality... it should be
accessible from any kind of hardware that can connect to the Internet: stationary or mobile, small screen or large. — Tim Berners-Lee
Pixel Density (PPI) of Devices Windows: ~96 DPI Mac: ~72
- 120 DPI Retina MBP: 220 DPI
Pixel Density (PPI) of Devices Chromebook Pixel : 239 PPI
HTC Jbutterfly Pixel Ratio: 3 PPI: 440 Samsung SIV Pixel
Ratio: 2 PPI: 441 iPhone 5 Pixel Ratio: 2 PPI: 326 Mobile Devices
PPI (Pixels per inch) 320+ PPI 240 PPI 160 PPI
120 PPI Extra HiDPI Baseline for mobile devices
CSS Pixels 568 x 320 Device Pixels @2X iPhone5: 1136
x 640
Non-Retina HiDPI
High DPI • Greater pixel density • Physical Resolution is
higher (2x) • Content Resolution is constant • Content Scale is higher (2x)
Device Independent Pixels • = CSS Pixels • CSS Pixels
= Device Pixels/device-pixel-ratio
What’s the problem IMAGES Images are not sharp on HiDPI
devices
How do we target devices • CSS • Javascript •
Built-in browser features • Server side delivery of images
CSS: device-pixel-ratio USE IT NOW
CSS: device-pixel-ratio • Pros – Downloads the right image based
on pixel-ratio • Cons – No support for <img > – High DPI device will download large image on Low Bandwidth connection – Multiple Image versions
CSS: IMAGE-SET • Only Supports Background Images • Chrome and
Safari support ONLY CHROME & SAFARI, POLYFILL
Browser features • Srcset • Polyfill: https://github.com/borismus/srcset-polyfill/ No browser support
yet. But its in the specs. http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ POLYFILL
<picture> • Still in the W3C first working draft •
Polyfill: https://github.com/scottjehl/picturefill Source: http://responsiveimages.org POLYFILL
Other Image Tweeks • Background-size: • Compress 2x images –
Webp: https://developers.google.com/speed/webp/
Javacript • Window.devicePixelRatio
window.matchMedia • Media Queries in JS https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media- queries-in-javascript/ SAFARI, CHROME,
FIREFOX MOBILE
Server Side • CMS (Wordpress) • http://www.resrc.it : – Delivers
the right image based on the screen size – Bandwidth Detection
What if everyone has a HiDPI screen • Ultra High
Definition (UHD) – 4k TVs – 8K - 7680×4320 Resolution • vw & vh units – 1 vw = 1/100 of viewport width • 2X the images everywhere ?
Physical Units ? • Very hard to distinguish between devices
– iPad 2 and iPad Mini – Phone to 7’’ tablets – 7’’ tablet to 10’’ tablet • Elements across devices are not of the same physical size – Use <button style=“width: 2inch;”> ? • Safari/Chrome does not support @media screen and (min-resolution :320dpi)
To Consider for HiDPI • Eliminate Images + Use CSS3
• Web fonts for icons • SVG • Use image-set and srcset • Use Viewport units – vw, vh
Thank You • Slides: https://speakerdeck.com/artminister • Many thanks to –
Micheal Cheng (@coderkungfu) – Hackerspace SG • Calling for speakers
Other User groups and Resources • Talk.js http://www.meetup.com/Singapore-JS/events/99986652/ • Singapore
JS https://www.facebook.com/groups/488579174512027/ • HTML5 Rocks SG http://www.meetup.com/HTML5Rocks-SG/ • Webuild – http://webuild.sg