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
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
190
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.9k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
140
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
350
OpenTelemetry の Log を使いこなそう
biwashi
5
1k
なぜAI時代に 「イベント」を中心に考えるのか? / Why focus on "events" in the age of AI?
ytake
2
720
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
140
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
250
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
310
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
240
RapidPen: AIエージェントによる高度なペネトレーションテスト自動化の研究開発
laysakura
1
390
新規事業におけるAIリサーチの活用例
ranxxx
0
160
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Writing Fast Ruby
sferik
628
62k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How to Ace a Technical Interview
jacobian
278
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
It's Worth the Effort
3n
185
28k
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