Making Dolphin Retina-Display-Ready

The latest iPad is creating huge waves in web-design community. It's hard to look past the fact that it is selling like hotcakes and websites all over the web look like a weird combination of blurry-smudgy images and razor-sharp texts. This is the start of an inevitable shift in technology - we're about to say "Good bye!" to pixels. 

The difference of perception when using high-DPI displays compared to standard screens is so striking that computer manufacturers will just have to either embrace the technology or expect sales bleeds, so it is only a matter of one-two model generation upgrades before high-DPI becomes a norm.

Challenge for content, software and hardware.

Pixel-dense displays bring a slew of challenges. First, naturally, content has to be available in higher-resolution. Second, software has to account for combination of high and low resolution content serving, loading time, scaling and zooming. And third, hosting and ISP infrastructure will have to deal with increased bandwidth. 

Software is our trade and we're going to deal with whatever needs to be done to make Dolphin-based websites look their best on "retina" displays. The challenge is not an easy one, however. There're no hard and proved ways to approach web-design for high-DPI. We are experimenting and learning from our own mistakes. 

Dolphin 8 HD

Just a few interesting 'comparison' screens to demonstrate the progress so far...

1. Large Images

This is a closeup of two similar Dolphin 8 Launcher icons as viewed on iPad 3 "retina" display. Note how the silhouette headshot at the very bottom does't even look like a man in headphones on the left icon. This is the most obvious challenge and solution - images need to be available in 4x the resolution from now on. The image is intentionally zoomed in, because you're likely looking at it on your "old-fart" screen now. The difference, however, is just as pronounced when you see it at 100% magnification on the new iPad.

2. Small Icons

It gets even more tricky with small icons. They are often displayed as a visual-aid near texts, and in many cases they are "zoomed in" by viewers. This may turn even high-resolution icons into smudgy mess. We are taking the route of using vector icons loaded as icon-web-fonts instead. The effect on iPad display is stunning. 

As a bonus, this approach allows additional flexibility in controlling icon styles, colours and sizes dynamically without losing quality.

3. Interface elements.

It used to be so easy to make fancy switchers and buttons using images. Forget that. Now is the time to embrace HTML5 and do some inventive "drawing". Resulting elements look sharp and sleek at any level of magnification, and hence on any kind of display.

See how we're using image-free buttons, on-off switches and sorting arrows. They look like images, but they are in fact vector fonts and CSS objects. You may also note how low-res icon (Premium) is losing ground compared to hi-res (Copper).

4. Trickery

It a fun time! We will now see numerous tricks that help to make things look right. We'll see inventive combinations of raster graphics, web fonts, SVGs, CSS hacks and javascript. Rest assured that Dolphin 8 is going to be at the forefront - sexy and elegant, as it should be.

Stay tuned!