administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon


Responsive JungleDragon - update VIII »

FERDY CHRISTANT - FEB 8, 2013 (01:44:56 PM)

Welcome to edition 8 of my documented journey into making JungleDragon responsive. This edition will be about JungleDragon V3's redesigned photo collection feature. Since it reuses a lot of elements designed earlier, I was expecting to write a boring entry void of any new learnings. Luckily though, redesigning even the simplest of features bring new problems to crack. Problems of which I'm sharing the solution with you as much as I can. 

This edition will emphasize on two topics: content-first design and responsive text truncating. 

Content-first design

A major reason for me to completely redesign the front-end of JungleDragon is the trend in the web world that is responsive web design. "Trend" would be the wrong word, it's more like a neccessity to produce usable websites in today's world. 

There is however a second major trend that I'm following closely: content-first design. If you're unfamiliar with it, let's have a quick look at two examples that explains it all:

See above. We're looking at the homepage of, a dutch newspaper. The phsyical edition isn't even that bad, but the online design makes one's eyes bleed. Other than your personal preference regarding what you think looks nice or not nice, the major issue here is in the content. Ask yourself these questions in the above design:

  • Mark what is actual content. Really, draw rectangles around it. Then, compare that content space to the overall layout size.
  • Of the content you marked, check out the usability and legibility

I think it is fair to say that this design is hostile to content, content almost seems like an afterthought, and the little content that is there is poorly legible. 

You may think I have picked an extreme case, but the problem is fairly common. It is the reason why apps like Readability are so popular: online content consumption (reading) has become so obnoxious that we need software to strip the bullshit from web pages, in order to make it usable again.

Now, compare the previous example to that of the new A List Apart design:

See above, this second example is content-centric. Not only does the content dominate the layout in terms of screen real estate, text (type) is made very readable by proper font-sizes and line heights. Summarizing, content-first design is about more content and less design, or better said, design that let's content shine.

Content-first design in JungleDragon

I'm am 100% guilty of the above problem myself, which is why I want to show the redesigned photo collection feature of JungleDragon V3 in relation to this topic.

First a litte refresher on the photo collection feature: Any JungleDragon member can add any JungleDragon photo to a list. A list is nothing more than a name and a description to group these manually picked photos. The result is a collection of photos organized around interesting themes by the community. 

Anyway, here is how the overview of photo collections (lists) looks currently:

Although not as dramatic as the newspaper example, this design does suffer from a few content problems:

  • The header is large yet has proportionally little useful content
  • The list entries have a thumb showing the photo with the most karma in that list, yet the thumb is so tiny that one can barely recognize what it is
  • There's a lot of useless whitespace and a disbalance and inconsistency between entries due to dynamic content length
  • The right column tries to help explain the lists concept but is proportionally too large

And here is the new design:

Bang! Enormous, retina-quality thumbs as a showcase for beautiful photo lists, supplemented by large type header titles in a clean grid-like design. Content has made a return on this page, me believes. Has it come at a performance price? No. Hard to believe, but this new page is twice as small as the old one.

And just to ensure you that in this content-first madness we're not forgetting about responsive design:

See above, photo collections on a smartphone use edge-to-edge imaging.

More about photo lists

What would happen if we would actually open one of this photo collections? Here's the new design:

Things are started to come together in this design. The page you see is a result of all the previous steps in this documented journey. Navigation, text, thumbs, all of it responds to your viewport and zoom settings.  And it's designed to perform well on any reasonable connection. Here's a few other improvements to this page:

  • Voting on a list is now an Ajax action, so no screen refresh
  • You can now share a list to social networks
  • Editing is implemented inline, just like on the photo page discussed in an earlier article

Responsive text truncating

In the midst of this redesign, I keep discovering new problems that I did not foresee. Luckily, solutions are here. The problem is in truncating text. In the above two pages you can see both photo list headers and image captions taking a single line, so that they seamlessly fit into the grid. However, the text in these headers are user-generated. If the user has entered a long list name or image caption, these headers and captions will wrap into two lines, throwing off the grid layout.

To avoid this problem I have been truncating long texts server-side. This approach has several problems:

  • It's not very SEO friendly
  • The truncate length is hard-coded into server-side code
  • In a responsive design, you will have to truncate for the smallest screen. This leads to dubious results on larger screens. They do have more room for extra characters, but will not see them.

I've now switched to a CSS-only solution that works beautifully:

See above, on a smartphone this photo collection header has 18 characters available before it is truncated.

See above, on a smartphone this photo collection header has 29 characters (including space) available before it is truncated. Note also that the font-size is larger.

None of these values are hard-coded. Instead I'm using the CSS property text-overflow: ellipsis; This value only works when also setting the word-break and overflow property to the correct value. Luckily, I'm using SASS/Compas as a CSS preprocessor. This means that the entire problem above is solved in a single line of code:

@include ellipsis(true);

Done! How robust is this CSS-only solution? CanIUse reports a support figure of 94%, with even IE6 supporting it.

Wrapping up

When I started this journey, I never anticipated writing this series of articles, but I'm enjoying it. I'm learning much more than I expected and am eager to share it with you, if not to remember it myself :)

The moral of this edition was to combine responsive design and content-first design strategies to create no-nonsense, flexible designs. In addition, we solved the responsive text truncating issue in a very easy way.

Until next time!

Share |

Comments: 2
Reviews: 1
Average rating: rating
Highest rating: 4
Lowest rating: 4


FEB 15, 2013 - 14:43:58

comment » Jungledragon is starting to look real good!

Nice to see that all room on a screen is used.

And nicely explained. I've got zero experience with web development but still able to understand the issues you are facing. «


FEB 18, 2013 - 07:51:11

comment » Thanks Joost! «

Was this document useful to you?
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.