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
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
280
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
120
asken AI勉強会(Android)
tadashi_sato
0
110
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
270
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
150
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
220
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
920
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.9k
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
320
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
270
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
For a Future-Friendly Web
brad_frost
179
9.8k
A designer walks into a library…
pauljervisheath
207
24k
Scaling GitHub
holman
459
140k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
RailsConf 2023
tenderlove
30
1.1k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Become a Pro
speakerdeck
PRO
28
5.4k
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