Making Dolphin Retina-Ready

One may think that "retina" buzz is all fab, and maybe it is, but we found that updating Dolphin to work well with high-density displays turned out to be a really important thing to do, because it brought so many positive side-effects...

While working on Dolphin 7.1 Admin we updated the interface to use font-based icons and image-free design elements. This gave us very pleasing results when testing on the new iPad and retina-MacBookPro, but in time we started to notice that even standard-screen experience has improved. Moreover, this change created some really interesting possibilities for improvement (and headache saving) on the technical side.

From the usability standpoint we got a nicely rendered interface when the website is zoomed. I for one zoom websites all the time (and I am not even that old :-P  ) and when I zoom and see a link with an image-based icon, well... I see a very ugly icon. Same goes for any design elements, like rounded-corners, buttons, and forms - we need them to be image-free to look good when zoomed. 

From technical standpoint we now can change lots of design properties without having to change images. Icon colours and sizes can be changed quickly, contextually or dynamically; buttons can be resized and re-designed with a few basic alterations in CSS; page layouts can be modified with much less trouble, etc.

So, after some deliberation we decided to update the user-end as well. Some modules aren't fully updated yet, but for the most part we have a "retina-ready" Dolphin!

For now, we're not touching the actual media content (photos and videos), since there's still a lot of disagreement and uncertainty on how exactly this should be handled to balance between quality, loading time, space and bandwidth usage equations. We'll take care of this once the industry finds an optimal solution.

So, let's see what we've got so far.... 

Icons

We're using text-based (Font-Awesome) icons instead of the oldie-goldie 16x16 icon-pics. Here's the example of how they compare when zoomed or viewed from retina display (2x the size):

As you may see, font-icons are nice and smooth, while pic-icons are blurry. Admittedly, there's a small negative side effect - low-res screens will show somewhat choppy font-based icons at 100% zoom, but they're not too bad, and we believe that those screens will quickly die-out anyway.

Buttons

Buttons themselves are CSS-based and with the new font-icons they become very flexible. Check out how we came up with large and small buttons, some with coloured icons and all using the same font-icon set without any quality degradation. If you feel like adding some colors, you may just edit the icon CSS attributes and color away. 

Logo

We mentioned already that we've added an optional "text-logo", which should come handy for those who don't have a site logo yet, or don't need one. 

Since this "logo" is just a CSS-styled text it would be easy to create your own unique look and feel by playing with the styles and matching them to your site theme. Quality will be preserved in all sizes and on any screens.

Pagination

Font-based icons come handy again and play well with text links in pagination controls.

More Examples

Timeline...

Forums...

Member Menu...

Pop-up...

And so it goes... We're about 80% done with updating all UI elements and will soon fix the known issues (lie IE8 support). Already we can see and feel how much sleeker the resulting elements look on all devices we test them with.

We're deliberately sticking to grey-ish colour-scheme to make sure icons don't overwhelm content when fighting for users attention, but hey, if you feel like making them all fancy - add colours, shadows, behaviours, or (taking from LA Confidential) "whatever you desire".