Making Dolphin Retina-Ready

Andrew Boon posted 21st of August 2012 in Dolphin.pro News. 26 comments.

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". 

 
Recommended by
 
 
Comments
·Oldest
·Top
Please login to post a comment.
Dolphin 7.1 OSHO is looking great!

Some one is going to say, " I can't wait for it to come out. Are we there yet dad? Are we there yet? How much longer? "

So I'll just get that out of the way now.
Andrew Boon
=Are We There Yet?=

The little old lady seated herself right behind the bus driver. Every ten minutes or so she'd pipe up, "Have we reached Oriskany Falls yet, sonny?"
"No, lady, not yet. I'll let you know," he replied, time after time.

The hours passed, the old woman kept asking for Oriskany Falls, and finally the little town came into view. Sighing with relief, the driver slammed on the breaks, pulled over and called out, "This is where you get out, lady."

"Is see more this Oriskany Falls?"

"YES!" he bellowed. "Get out!"

"Oh, I'm going all the way to Albany, sonny," she explained sweetly. "It's just that my daughter told me that when we got this far, I should take my blood pressure pill."

============


(not very funny, but in context of the situation...)
newton27
Are you kidding, I burst out laughing. That's a good one!
Andrew Boon
Also, I like this one...

===
Man runs into a Doctor surgery "Quick Doctor!!! I've only sixty seconds to live!!"
Doctor Replies looking at his stethoscope polishing it, hang on a minute?"
===

(kinda related)
My dad used to say, "Ask one more time and you ride in the trunk!"
newton27
that's me, in the trunk.. lol
paansystems
thats really good news gents!
keep on track!
newton27
One question, why does is the events module icon a lab flask.
Andrew Boon
Ehm... 'cause it's also a bottle, see :-P

(tbs - it's temporary, since the proper icon malfunctions in the latest fontawesome update)
newton27
lmao, I get it, events = bottles of libations
newton27
and of course the "sites" icon is not going to remain a paper clip I hope..
Paper clip, are you sure?

From my corner of the trunk it looks just like a couple of chain links.... clever huh?
newton27
now that you say that, I see chain links.. lol
Dear Andrew,

In the present Dolphin version the user doesnt see when they get a friend request like with emails. This should be implemented. Also I think a option in the admin menu that enables users to limit the file size of media for upload is essential.
fitted404
This seems cool , Quick question , Seeing as i dont fully understand the " RETINA " yet , what happens if you don`t use a default dolphin template ? is the RETINA thing still in effect ? like is it template based ?
cnbarry
This is a great link to help understand the purpose and benefits of a Retina display ready user interface:

http://www.apple.com/iphone/features/retina-display.html

In short: Retina display helps images stay clear and sharp instead of pixelating (or blurring) when a user zooms in on the display screen.

There are a few good examples on that Apple link as well. Hope this helps.
fitted404
oh yeah , thats super hot , thanks !
Andrew Boon
Retina support comes from using size-agnostic techniques - such as vector images and CSS-based design elements, instead of standard pictures. So, template developers may choose to use this technique or not, so 3rd party templates may or may not be supporting "retina" resolutions.

Another way to hack this is to provide high-resolution imagery and load it for retina-displays, but again, this is just a hack, that won't help with page zooming.

Basic idea of retina is that it's a high-density see more displays (normally over 200ppi) where pixes can't be seen by human eye, and hence "native" resolution is no longer a limiting factor.

It's a major shift in web graphics design world and since it's only started to happen, a lot webmasters are still confused.
houstonlively
Andrew, maybe you can scatter around some SVG graphics to jazz up those boring design boxes.
Andrew Boon
I am afraid to even think about it. Also, we figured that SVG is really badly supported, unfortunately.
this is a big deal, and a major step forward. Congrats on taking this step for the sake of usability, adaptability, and simplicity.

One question: does this mean themes can (and should) eliminate graphical elements and ultimately make it easier to create new themes simply by modifying CSS files?

Thanks
Andrew Boon
Depending on design choice one can either come up with a very different template, using images and unique styles, or just modify our default template to create a (somewhat) unique look. Also it would definitely be a good practice if designers choose to support vector-based graphics and CSS for design elements when creating templates for 7.1.
geek_girl
So how do we get rid of these ugly as seven day old dog poo icons in 7.1?
 
 
Below is the legacy version of the Boonex site, maintained for Dolphin.Pro 7.x support.
The new Dolphin solution is powered by UNA Community Management System.
PET:0.14606118202209