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

 

Responsive JungleDragon - update X »

FERDY CHRISTANT - MAR 4, 2013 (09:25:54 PM)

Welcome to the 10th edition of my documented journey into redesigning JungleDragon to be responsive. This being the 10th edition already shows the size of the task, but luckily progress is steady. In this edition I'll cover the user profile section of JungleDragon. From a technology perspective, there is only one tip to share.

A small improvement to mobile navigation

First, let us come back to responsive navigation. Out of all the topics that relate to responsive design, I believe it is the hardest thing to get right, particularly for mobile screens. In previous editions I shared my solution, which makes use of a common pattern: if there is no room for navigation, fold up the items into a "menu" or "more" link that reveals all options in a list or grid. 

Still, in specific areas of JungleDragon the navigation depth is up to 3 levels deep, each level showing the "more" link where appropriate. It's quite easy to get lost in navigation this way. My point is that I do not see my proposed solution as a particular good or usable one. However, having researched other patterns I have yet to find a better solution, other than scrapping a lot of options alltogether for mobile. 

Anyway, I just wanted to make a note of this: responsive navigation is one of the most important problems to solve, and it's also one of the hardest ones. For now I did make a small but valuable improvement:

Before, on mobile only the "Menu" link would be visible. This is now supplemented with the active link as well as the sign in link (or user profile link depending on sign in state).This helps in feeling less lost when moving through navigation on very small screens.

As said, this is not the final word on responsive navigation, but this will do for now.

User profile header and vertical truncation

This 10th edition covers a major chunk of work: user profiles, enticing 30 individual screens that all had to be made responsive. The screens cover both a user's content (photos, lists, comments, etc) as well as user profile actions (settings, edit profile, etc). 

All of these screens have something in common: a user profile header block. I'll use this to cover an interesting responsive topic: vertical truncation. In earlier editions, we already talked about horizontal truncation:

 

See above. We have user-generated titles of an unknown content length, yet we want to truncate based on available screen width, not based on a fixed number of characters. The simple solution for this is to make use of the CSS ellipsis property. Case closed.

Vertical truncation is more difficult, so let us have a look at that problem:

See above for a user profile header. It shows a user-generated "About" text of unknown length. Showing the full text on a small screen in portrait mode takes up too much vertical space. This is where vertical truncation comes in.

Now, the easiest solution to this is to place a fixed limit on characters, showing a "more" link to expand the full text. That character limit would have to be based on the smallest of screens. The problem is that on larger screens, this leads to an overly truncated result: only a few characters are visible whilst there is a lot of room for more. What we need is variable text truncation. Here's the result of variable truncation:

See above, on mobile, text is truncated aggressively.

See above, on desktop, text is truncated liberally. In this case, no visible truncation took place because the amount of actual characters did not exceed the truncation limit.

How is this solved? Basically, I'm making use of Truncatable, a lightweight jQuery truncation plugin. It's actually a good thing to do truncation during runtime, as it avoids any SEO problems. The plugin allows for fixed character truncation, so I had to built some intelligence to call it responsively:

 $('.js-truncatable').each(function(index){
 var truncChars = $(this).data("trunc-" + mqMode.name);
 $(this).truncatable({ limit: truncChars, more: '..more', less: true, hideText: '[hide]' });
 });

This code runs on any html element that has the class "js-truncatabale". Note that it is a good practice to prefix your JS hooks like this, to avoid any clashes with style classes. Next, for each html element that has this special class, the code will read out the data properties of the element to determine the amount of characters to truncate based on the viewport size. Once it is calculated how many characters should be truncated, the actual call to the plugin is made, which does the truncation.

All of this becomes a lot more clear when you see the markup of the user profile header:

<div class="user-about js-truncatable group1" data-trunc-xxs="80" data-trunc-xs="260" data-trunc-s="320" data-trunc-m="340" data-trunc-l="600"><?= $userdata['about'] ?></div>

Check out the data properties. There is one for each major viewport breakpoint, and each carries a specific number as for the truncation characters to use. The code shown earlier reads the property for the currently active viewport breakpoint, and then applies the truncation.

Whilst this seems like a lot of work for such a small problem, this entirely fits into the battle plan of responsive design. Solve problems once and solve them in a reusable way. This truncation problem is going to occur in multiple places in JungleDragon. With this solution in hand, any subsequent cases are solved simply by applying the right markup properties.

I did question the notion to put such properties in markup. I'm quite a web purist as it comes to the proper seperation of markup, presentation and logic. Yet in this case the practical advantages of the solution outweigh the principal aspect of it.

The new user profile

I'm not going to be sharing all 30 screenshots of the user profile section (or 120 if I'd show them in all major breakpoints), yet hereby an impression. First, visible in the previous screenshot already, the most important part of the user profile is quickly seeing the photos contributed by the user. This is solved similar to all other image lists in the new responsive design: awesome photos light in filesize yet very rich in quality, scaling from mobile to desktop without quality loss. It's by far the biggest strength of this entire redesign.

Other than seeing the user's uploaded photos, one can also quickly see which photos the user voted on or favorited. And, there's a new photo overview on the user profile: promoted images, showing user photos that were promoted to the homepage. This feature has been requested multiple times and is now coming.

Next is the activity screen, showing a karma log of activities done by the particular user. Hardly worthy of a screenshot, you'll see it in action soon. Let's move on to an entirely new screen: the reputation screen. Before, a user's profile header would contain all their medals, which take up a lot of space. This has now been moved to a dedicated reputation page:

Seeing a user's photo collections (lists) looks quite nice as well:

And then there are screens to see the user's tags, comments, users being followed and followers. I won't post them here, they are visualized exactly the same as normal tags, comments, etc. Summarizing, anything a user contributes to JungleDragon can be seen from their profile, using the same visualizations used throughout the design.

User actions

The second part to user profiles are user actions, things only the user can perform on their own profile. Examples are editing details, their password, preferences, notification settings, etc. Here's the signin screen on mobile:

The "manage notifications" screen:

Notice the blue navigation on top, giving access to all user profile actions. I think you get the idea of how those other screens may look like.  Finally, here's the new "classes" screen, which shows the JungleDragon food chain (reputation system):

The illustrations are a lot larger now and of Retina quality, whilst being equal in file size compared to the current JungleDragon. Also, the screen has been cleaned up and is smarter in that it calculates how much karma you need to earn to reach a particular class.

Wrapping up

The user profile section has been a massive undertaking into redesigning 30 screens, out of a 119 in total. Luckily though, the reuse factor is increasing. Having solved so many responsive challenges in previous screens already, I rarely come across many new issues to tackle. This means I am moving from spending a lot of time inventing solutions for new issues into a mode of simply executing changes. This is bad news for this series of blog articles, as they will become increasingly boring, but good news for JungleDragon, which simply needs this redesign delivered as soon as possible.

As for status, I'm at 60-70% with a few big pieces still awaiting. These are the forum, species pages, slideshows, and a few general pages and things to do. I still estimate it at a few months of work (given of course that I do this on top of a fulltime life). Despite the long journey, I'm excited as ever. Both to deliver an awesome new JungleDragon this year, as to mastering these new techniques. JungleDragon requires almost every responsive trick in the book, and that exposure is useful to my education, and hopefully useful to you readers as well.

Share |

Comments: 1

COMMENT: LUDO SAK homepage

MAR 4, 2013 - 22:17:54

comment » Hey Ferdy, wow, I am really really looking forward to using the new design on my iPad. I will have many a joyful hour on the couch! Gosh, I hate the chair I sit in at the moment, looks nice, sits less. Love lounging on the couch though:)

Keep up the good work!

Ludo «

RATE THIS CONTENT (OPTIONAL)
Was this document useful to you?
 
rating Awesome
rating Good
rating Average
rating Poor
rating Useless
CREATE A NEW COMMENT
required field
required field HTML is not allowed. Hyperlinks will automatically be converted.