It's time for another episode of my journey into redesigning JungleDragon to be a mobile-first, responsive website. This post will be heavy on screenshots and cover quite a lot of areas that are now redesigned. Where appropriate, I'll throw in some technical hints on how it's made.

New footer

JungleDragon's new footer is extremely simple. At small viewports, it only shows the essential links:

At larger viewports, or when turning your device to landscape, more information becomes available:

JungleDragon fans may notice that the dragon illustration is gone, which acts as a mascotte for the site. I may revisit that decision after the initial V3 release, but for now this will do.

How its made:These are just 3 divs, where in the default CSS I only show the footer links. In larger breakpoints I enhance the view by toggling the visibility of the other 2 elements. As for layout, I'm using CSS tables. The HTML is free of tables, yet in CSS I style these elements to behave like tables using display:table, table-row and table-cell. This makes alignment and vertical centering far easier than using floats.

Redesigned search

Search is equally simple in design. The global navigation has a link for it:

Here is the search screen, along with some results:

You may see some results being rendered in a strange way. This is only true for my development environment. This search is powered by Google which only has an index of the JungleDragon production instance, hence it cannot make a connection to my development database for rich object rendering.

As you can see, it simply is a full width column with a paginated list of search results across photos, photo lists, tags, forum topics and users. In production, JungleDragon will richly visualize search results where it can.

How its made: In terms of layout, this is simply a scalable full width page. As for the back-end, I'm sending the search query from this UI to the Google Search API. The returned results are in XML. I parse this XML and reverse engineer the URLs in the results to map them back to JungleDragon database objects. With that match made, I then have full control over output rendering. See my earlier article on the implementation details.

New uploader

JungleDragon has had a rich upload experience from the beginning, consisting of a Flash-based multi uploader and classic single file uploader fallback. The same is true in JungleDragon V3:

I cleaned up this page and simplified it somewhat. I'm not terribly hapy yet with the styling, so I will likely revisit this design.

How its made: I made no functional changes to the uploader, for a detailed how-to on this uploader, please check my earlier article.

New maps

Maps are integrated into JungleDragon in various ways. There is a global wildlife map, maps are part of photo and species pages, there are country maps, personal maps (showing only your geotagged photos), and there is the possibility to manually geotag a photo.

Below is the global wildlife map on mobile:

The header at this size is very simple, it doesn't even have the JungleDragon logo. The header allows you to search for a location, zoom out the map (since it zooms to your current location by default), or close the map.

Other than that, this simply is a fullscreen embedded Google map with photos shown as markers. Clicking a marker shows the actual photo. Here is the same screen on a larger viewport:

Note how the JungleDragon logo is now visible, and how the header buttons now have labels. I did what I could to make these maps usable on all devices, but to be fair, they kind of suck on mobile, quite hard to navigate.

You can imagine that manually geotagging a photo is a challenge as well across devices. Here's how it looks:

Compared to the current JungleDragon version, I had to radically simplify this interaction. I got rid of map controls, the image preview and even the slider that allows you to navigate between images (to rapidly geotag multiple images in a row). All that remains is a sticky footer with an instruction and a Save button to confirm. You simply drag the marker to the location and click Save. The result is that this works and is usable across devices, despite sacrificing some functionality and sophistication. Such is the way of a mobile-first design.

How it's made: In terms of layout this is a fullscreen embedded Google map, which is easy to accomplish. All interactions on the map (such as search), are calls to the Google Maps API (version 3). As for responsiveness, I'm hiding some map controls using javascript based upon the viewport size, which I detect using Modernizr.

Note: In terms of functionality and layout I am happy with this result. Note though that I do have a challenge ahead in making the global wildlife map scalable in terms of performance. With a few thousand markers to load on the global map, it is getting very slow. This will be a task for after V3.

New video player

JungleDragon allows users to add videos from Youtube and Vimeo to species pages. This is to enrich specie information. We'll have text about a specie, but also photos and videos. When clicking one of such videos, a full screen video player launches. I have completely redesigned that player, and I'm quite proud of the result.

On a smartphone in portrait mode:

On a smartphone in portrait mode, the video has little room, but I can't help that. Still, the video renders nicely. Notice the simple header that allows one to switch to viewing the species' photos. Furthermore, there is a video description below the video. Turning the device into landscape makes for better video viewing:

If you're bothered by the JungleDragon header in this mode, no worries, both the Vimeo and Youtube player will detect that you're on mobile and offer to play the video truly fullscreen. 

What you did not see yet, because we haven't scrolled down yet, is that the video player has additional context. Just like with photos, you can learn about what you're viewing. In this case we're watching a video of a cheetah. JungleDragon will know this and present the species info below the video. This becomes visible after scrolling, or instantly on a small tablet:

Pretty awesome, isn't it? Yet there is more, if you'd scroll down further, you'd find thumbs of other videos of this species. Or, on a large tablet, you can see them right next to the species information:

This video player is nice and functional on small devices, but really kicks ass on tablets and viewports above. And unlike other JungleDragon pages, there is no upper limit to how this page scales. 

How it's made: Too much to tell really. A few key techniques:

• Fitvids.js to scale the main video
• The min-float technique explained in an earlier article, but smart text wrapping
• Custom javascript and CSS background-size: cover to force video thumbs into squares 
• Simple column changes based on breakpoints to decide how many thumbs should be shown per row

Friend photos

In the current version of JungleDragon, there is a seperate page to check the updates and photos of the people you follow. This functionality has now been integrated directly into the main photo list viewer:

So next to new photos, popular photos, random photos, and unidentified photos, you can now also easily see your friends' photos. An in each case, you will see very large high quality thumbs that scale to any device.

Wrapping up

This has been a fairly large update, a big step towards completing the redesign. The next step ahead of me is JungleDragon's slideshow viewer. Unfortunately, this one is highly complex and it may take me a few weeks. The good news is that after that component, V3 is functionally complete. Once functionally complete, there's only a few technical tasks to take care of (refactoring, some slight restyling, IE8 support, etc). 

It's a long journey, but we're creeping towards the end. 

And we're at episode 13 already of my documented journey into redesigning JungleDragon to be a mobile-first responsive website. In this episode I will share the redesigned forum. This post will be fairly boring in that it does not bring dramatic new insights, instead I simply reused a lot of parts developed earlier. I will therefore just share the results, and pay a bit more attention to what lies ahead.

The new forum

JungleDragon has a forum that is organized much like the classic internet forum setup: there is a forum per topic category, and in these forums topics are posted, to which other users can reply. Below is the redesigned result of the forum overview on a smartphone:

The touch target (clickable area) spans the entire row to support fat fingers. When a bit more room becomes available, for example in landscape mode, additional columns of information appear:

And finally, on larger tablets or desktops, all information is shown:

When opening one of these forums, the same thing happens: instead of showing a list of forums, it shows a list of topics, organized similarly to the list of forums. And here is an open topic in tablet portait mode:

All forum features are still there, you can create, edit, delete and report topics, you can subcribe to a forum or use its RSS feed. And, as shown on the screenshot, you can include rich objects in the body, for example a video. 

Boring is good

From a development perspective, this post is boring, as no new technology is discussed. And that's a good thing, it means the reuse factor is very high. To name a few, these are things I reused when developing this responsive forum:

• Main responsive layout (side by side vs stacked columns)
• The topics themselves are exactly the same markup and style as normal image comments
• Responsive video
• Responsive breadcrumbs
• Responsive "hero" header, not visible in screenshots

I know I keep repeating this in every post, but building robust and reusable components truly is a must-have in responsive design, with enormous benefits later on. 

Status and next steps

I'm moving into really good territory now as for the progress of the total redesign phase. Here's a few key things still to do:

• I have a few single page redesigns still to do, about a handful of them. These include the upload screen, search screen, and a few more.  None of these will be a huge challenge, they are simply a matter of putting in the effort and doing the work.
• I have now covered almost all major categories of functionality, including the hard ones. Except for one: fullscreen interactions. These include all slideshows on image lists, fullscreen map interactions and fullscreen video. As these components are currently quite complex in JungleDragon, making them responsive will be a challenge as well, at least a fair amount of work. You can consider this the last major technical mountain to climb.
• And finally, there is the category of "general" work. This concerns fine-tuning, technical restructuring, some performance tuning, old IE fallbacks, etc.

Summarizing, we're not quite there yet, but the finish line is in sight, in the distance. 

<meta name="viewport" content="initial-scale=1,maximum-scale=1">

The initial scale parameter prevents the mobile browser from scaling the website upon load, whilst the maximum scale parameter prevents end users from zooming the page using the touch gestures they use so regularly: pinch to zoom and double tap to zoom. 

In an earlier post, I have made a case against disabling end-user zoom. I think it is a gesture users expect, and it should not be up to a designer to brutally disable it alltogether. Zooming in on text and photos is a powerful feature of touch devices, and quite often needed.

I still stand by those words. However, I cannot deny that the case for disabling zoom anyway is getting stronger as I go along. Here are three benefits of robbing users of this zoom option:

• Since zooming works on the page level, not the object level, in many (most) cases, it will mess up the layout of your site. Your website on mobile has little room to begin with, zooming it in to 200, 300% percent is going to break it in most cases. Experienced users will know how to fix this: pinch back and zoom out as far as possible, and the layout will "snap" back into place.
• The layout issue is even stronger when it comes to forms. Unless you are using a font-size of 16 pixels, most mobile browsers will zoom in the page when focusing on an input field. Not only will this likely break your layout (again), as the focus is now on the text field and the on screen keyboard is blocking half your screen, snapping back becomes harder and more frustrating than a normal zoom.
• This week I discovered an amazing library called Fastclick. What I did not know is that most mobile browsers have a wait time of 300ms when you touch a link before actually following up on it. The reason it does that is that it is waiting to see if perhaps the user is going to do a double tap, or a pinch to zoom. Both gestures are technically a sequence of "clicks" that should be treated as one action, and since human beings cannot perform such actions in 0 ms, there is the wait time. The Fastclick library removes the wait time. This has two effects:
  • Actual clicks are incredibly snappy, a difference in night and day. Its unbelievable what 300ms can do. By using this library, normal clicks feel as fast as native app clicks.
  • The dramatic speed improvement, as expected, comes with a price. Since clicks are sent without any delay, double taps to zoom will no longer work. Pinch to zoom will sometimes work, only when both your pinch fingers actually register at the same time, it effectively becomes unreliable.

And this is the dilemma. There are great pros and cons to both sides of the story. More than I realized when I first made my case for always allowing end-user zooming. 

I'm currently leaning towards disabling zooming, for the reasons given above, of which reason #2 and #3 I consider the strongest points. I am further lured into disabling zoom because of other sites, like Flickr, who also disable it for similar reasons. My plan would be to disable zooming when I ship the new JungleDragon, and then to await feedback. 

What are your thoughts around this?

Welcome to the 12th edition of my documented journey into the responsive redesign of JungleDragon. In the previous edition, we covered the redesign of a complicated set of species pages. In this edition, I'll be focusing on the species browser. The species browser allows for a very visual way of browsing the tree of life. Technically, it only concerns two pages, but they are fairly complicated and heavy.

I'll be keeping this post brief. I'll just show you the redesigned results and will finish with two tech tips. 

Responsive species browsing

Here is the new species browser on a smartphone:

Let's dissect this page. It starts with a breadcrumb that shows where we are in the current hierarchy. Below are the "children" of the current selection, visualized as small thumbs. Next there is secondary navigation to switch between species or photos results, amongst other options. And finally, only partially visible below that navigation are the results of your selection. 

It's a lot to fit in on a smartphone screen. Here's how I solved each component:

• I've redesigned the breadcrumbs. The species hierarchy can be up to 6 levels deep, which is a too long bread crumb to fit on a single line. Multiple lines cause a problem too, they take up too much height. Therefore I implemented a simple fix: only the last 3 levels in the hierarchy are shown.
• The "childs" navigator was a problem too. Some species nodes have 3 sub nodes, others may have dozens. I fixed this problem by creating a scollable area.
• The results of the specie selection, being the actual species records, are visualized as very large thumbs with a caption telling their specie name. I solved this thumb problem once, and I think I solved it very well, and now I am reusing it wherever I see fit.

Here's how this same screen looks on a small tablet viewport:

The species nodes now cover 2 columns, on larger tablet viewports there will be 3. Don't mind the scrollbar on the scolleable area, on actual touch devices it is invisible unless you scroll, and when you do, it looks a lot more elegant.

This screenshot also shows how the breadcrumb now shows 4 levels, instead of 3. Furthermore, you can now clearly see the species result: large captioned thumbs of a high PPI quality.

Finally, here is the desktop viewport:

The species nodes now show far larger thumbs, and they will be positioned into as many columns as your viewport allows. 

How it's made

I promised you some tech tips, so here they are. I mentioned the problem of not wanting to show 6 levels of breadcrumbs on small viewport, yet to limit them. Here's a very elegant way of doing this:

.navgrid {
    white-space:nowrap;
    li { display:none; }
    li:nth-last-child(-n+3) { @include inline-block;  }
}

What this does is to hide all list element in the breadcrumb (which in markup is simply a list of li elements), except for the last 3. On slightly larger viewports, I can up the number to 4, and so on. The elegance lies in controlling this in the front-end. It's also SEO friendly, since all 6 levels will be indexed by search engines.

And here's the second tech tip. The scolleable area I showed you only kicks in when it reaches a certain height. So no scrolling unless there is a lot of content to justify scrolling:

.specie-nodes {
max-height:20em;
overflow-y:scroll;
overflow-x:hidden;
-webkit-overflow-scrolling: touch;
}

That in itself is nice, but it's just plain old CSS. The cool discovery is in the property -webkit-overflow-scrolling: touch;If you are used to using touch devices, you are used to the experience of momentum scrolling. Momentum scrolling means that when you let you go of your finger, the page does not instantly stop scrolling, instead it continues for a bit and then slows down, depending on the speed of your swipe. 

Momentum scrolling will work fine on most touch devices regarding the scrolling of your entire page. However, I noticed that this is not true for scrolleable areas within a page. Scrolling immediately stops when you stop your swipe. To make a long story short, the above property applies momentum scrolling to your scrolleable area, which is a vast improvement.

Species browsing continued

I'm quite happy with the redesigned result. Layout-wise it is quite cool and I learned a few new things in the process. The truth is to be told though: species browsing is quite slow currently on the JungleDragon production site. This redesign does not yet solve it, as the problem lies in the setup of the data structure. Unfortunately, species browsing isn't very inviting when it is slow, so I have to fix this one day. I'll do so after V3 is ready. I don't want to mix a UI redesign with a database redesign right now.

Next steps

I've already started work on the next section: forums. More on that when I complete it. 

PS: Is anyone still reading this ;)

If you're following me on JungleDragon or any of the social networks, you're probably tired of me sharing photos of Madagascar by now. It took me several months to share them, a few each time. I put a lot of effort in describing the unique species and locations, but ultimately, I stretched it over too much time probably.

Today my story of Madagascar ends. Here's an overview:

• All Madagascar photos (over 700!) 
• Photo list: Madagascar's unique species
• Photo list: Madagascar at night
• Photo list: Madagascar flowers
• Photo list: Madagascar landscapes
• Location: Andasibe
• Location: Isola
• Location: Ranomafana
• Location: Tsingy
• Location: Kirindi

The photo journey ends here, but my relation with Madagascar will never end. It has made a lasting impression on me, not a day goes by that I don't think of it, in ways both good and bad. I'll definitely revisit one day, if only I can convince my other half.

For now, I hope you liked the extensive photo journey and story. Even more so, I hope you will one day visit Madagascar yourself. To kill two birds with one stone: to experience unique wildlife yourself, and secondly to breath life into eco tourism. Show them that there is more money to be made from tourism than there is from slash-and-burn farming the remaining 3% of unique forest.

Yesterday I posted the 11th edition of the responsive redesign journey I'm taking with JungleDragon. If you've been following along, you see the recurring theme of smartphone views, tablet views, and desktop views. It may appear as though I am putting all this effort into making JungleDragon suitable for smaller devices.

In this post I want to explain how the new JungleDragon will not only scale down, it will also scale up. The old JungleDragon, currently in production, has a maximum layout width of only 960 pixels. 

The new JungleDragon (V3) will initially launch with a scaling range of 320 to 1280 pixels. 320 pixels extra in the upper width is an enormous difference!

Why not more than 1280 pixels though? Quite simply, because up to 1280 pixels is my initial focus. I don't want to wait with this release for too long. However, for the sake of fun I did a little experiment, placing the upper limit to 1920 pixels, meaning a full HD layout. In addition, I upped the font size by 1. A one minute job. 

Will the new JungleDragon survive this experiment? Making it 50% wider without any code changes? See for yourself in this animated GIF:

To fully appreciate this animated GIF, realize that this is a scaled down image of a 2560 x 1440 screen shot. The frames are in this order:

• Current JungleDragon (very narrow 960 pixels layout)
• JungleDragon V3 (1280 pixels wide)
• Our experiment (1920 pixels wide)

The experiment is pretty impressive, although the animated GIF may not bring that across very well. Between JungleDragon V1 and our experiment, the layout has gotten 2.5 times wider. That's enormous. And the design does not fall apart, instead it thrives.

So why is this an experiment, and will it not ship with JungleDragon V3 initially? Because the extra space still does require some extra fixes, for example for wide text columns. Trust me though, a full HD layout will be coming after V3.

Bridging 320 to 1920 pixels without breaking a design means we're pretty responsive. Surely we can break the design by zooming the page? That breaks almost every website on the planet. You can do so in most browsers by hitting Ctrl & +.  

No, this too does not break JungleDragon V3:

Again hard to appreciate on this blog, but we are looking at JungleDragon V3 at the whopping resolution of 2560 x 1440 pixels, with the page zoomed to 200% in the browser. Imagine this on a 27" monitor (the one I am using as I write this) or a big-a$$ TV. 

A funny thing just happend. We are at 2560 pixels of width. However, because we are zoomed in at 200%, the browser actually realizes it has only half of those software pixels available (1280). So my media queries aren't respondig to 2560 pixels, they are respondig to 1280 pixels, and serve the appropriate layout for that. So effectively we are looking at a blown-up 1280 pixels layout. The cool thing though is that JungleDragon V3 does not break when blown up up to 200%. 

And there is a reason for that: Retina. Making your web pages Retina-ready means one simple thing: it should not suck when blown up to 200%. Even without a Retina device, zoom your page to 200%. If it looks great and sharp, you're done. If things look blown up (most websites will), you have work to do.

So far for this teaser. Yes, my friends, your mega big devices too will get JungleDragon love.

Welcome to the 11th edition of my documented journey into JungleDragon's responsive redesign. It's been 3 weeks since the last post. Various distractions slowed me down during the last weeks, but I am here revived an all to present you responsive awesomeness. This post will be about JungleDragon's species pages.

First things first

First, a brief look at some general improvements:

Photo lists are now included in global navigation. They deserve more attention.

A second general improvement (again) is in navigation. I expressed concern last time about how usable it is. In particular the hierarchical order did not always make sense. I went back to all redesigned pages and changed the order of things. Example:

This new navigation shows the popular photos of a particular tag. Before, the crumbs would be below the sort filter, which does not make sense. 

Species pages

Whenever I start out on the redesign of a JungleDragon page (120 in total), I decide on its weight. If it's a simple and/or unimportant page, I try to be done with it in a few hours at most, preferably less. Pages with a significant weight get more attention. And on some pages, I go all-in. The JungleDragon species pages are such pages, begging for the best I can do in responsive design, as a humble student I might add.

JungleDragon at its core is a photo platform, yet is unique added value is being able to identify the species on photos. From the photo, you can click on the species ID to learn more about the specie. This page, or set of pages, that are all about the specie is what I am about to show you.

See above, the top part of a specie page (specie header) on a smartphone. Note the navigation directly below the green global navigation. Because there is no room for 6-level breadcrumbs to show the species' taxonomy, a grid is used instead. Should any text in this grid not fit, it is truncated using the CSS eclipse technique explained in earlier posts.

Next is the photo, which can be of any size or orientation. The species' common name, binomial name and description follows. The description text is truncated. The amount of characters before truncation occurs depends on the viewport size, as explained in earlier posts as well. Finally, the specie header concludes with sub navigation. We are now at the species' "homepage", but there are also dedicated pages for photos, videos and a map.

Check out how responsive this specie header is. Here is the exact same page on a small tablet:

The transformation is significant. The grid navigation for the specie taxonomy is now a normal 6-item horizontal breadcrumb, since space allows for it. The photo itself has grown in size, and will do so until it can't anymore. The specie description is not below the photo, it wraps around it. Yet it will only wrap with a specific minimum width available to avoid very narrow text columns. This too is a technique explained earlier.

All of this yet only concerns the specie header, which is consistent across the 4 species pages. Below the header, if we scroll down further, we get to the content blocks:

Content blocks are mixtures of JungleDragon specie photos and Wikipedia block texts. As you can see, on mobile the photo and text are below each other. On a small tablet, however, the text wraps:

Similar to the specie header, wrapping only occurs as of a minimum text width being available next to the photo. Scrolling down even further, we come across some interesting specie information:

First there is the distribution map, coming from Wikipedia. It will scale to the width available. The second block shows the species' vulnerability status. The threat status colors are CSS gradients, zero images are used. Third and finally there is a table showing the specie taxonomy (again).

If we'd look at these components on a tablet in portrait mode, we still have a fairly narrow width. However, it is width enough to split these components into two columns:

This is accomplished using CSS columns. I used this technique before on the redesign of the photo page. 

Note: Notice how in this post alone I have already mentioned "As explained earlier" four times? This bares witness that in responsive design, you need to solve problems once and solve them well. The reuse factor is incredible and much needed.

By now perhaps you are confused about this specie homepage, showing all these individual blocks. Let us then move on to the final viewport, the desktop viewport:

This is probably the most complicated responsive page I have created so far. I look at this page on my iPhone5 and in the background the same page is on a 27" 2560 x 1440 screen. They differ so much that you'd almost forget this is the exact same content being served to both devices. This stuff is the holy grail of web design, I am convinced of it.

Moving on, all of the above concerned the specie homepage. There's also a page showing only the photos of the specie:

As with any list of images in the new JungleDragon, we get huge edge-to-edge thumbs of Retina quality. I ran into an unexpected problem though. You have seen how the specie header is quite awesome, but also quite tall, especially on mobile. So if we'd move from the specie homepage to the photos page, it looks like nothing happened. In both cases the header will fill the screen, and users have to scroll down to see the content that actually changed. To avoid this issue, I am auto scrolling the page on mobile. So you click on "photos", and the page will scroll automatically past the specie header to the start of the actual photos. Code curious? This is all it takes:

    if ($('body').data('scrollto').length > 0 && mqMode.num <=2) {
        var scrollTarget = $($('body').data('scrollto'));
        $('html, body').animate({ scrollTop: scrollTarget.offset().top });
    }

I don't care to explain it now, post a comment if you'd like me to. Moving on to the species' video page:

Users can add videos to a specie page from Youtube or Vimeo. We're not looking at the actual videos here, these are thumbs of the videos, clicking them launches a video player (still to be redesigned). As you can see, there's a little layout problem: videos have different aspect ratios leading to different black bars around the thumbs. I can't solve this, because the thumbs are out of my control. 

Below the video thumbs are a caption and a link to remove the video entry, if authorized. Just like normal images, these thumbs will use the appropriate amount of columns (in this case 4) to fit the viewport.

And finally, we come to the 4th page: the species' map. The map will show geotagged JungleDragon photos of this specie:

The map obviously scales to the viewport. I've simplified the marker info windows. They only show the photo, which works better on smaller devices. Truth is to be told though: on smartphones the Google maps control really sucks. This is something that is usable as of a tablet-sized viewport.

There is no need for despair though. Imagine this: you are hiking in the forest, pull up your smartphone and JungleDragon shows you the list of species spotted around you earlier. That's the kind of mobile "map" experience I will aim for, but don't hold your breath :)

Wrapping up

It's been hell redesigning this page, yet the result is rewarding. If I'd care to explain responsive web design to a stranger, this would be the page to pull up. I'd start from mobile and slowly scale the window to desktop. The incredible transformation appearing in between explains why I am a believer, and why you will be one as well. 

Next time: the species section is not completed yet. I still have to redesign the wildlife browser, which is also a complicated set of pages.

Yesterday JungleDragon passed the 2,000 unique species milestone. This number is more impressive than it sounds:

With less than 10,000 photos posted, it means there is a very high diversity of species. It's not just the usual "elephant and bear" photos, the coverage of species is very wide. Mammals, insects and birds take up the largest chunk, plants is a large category as well, as are reptiles. Other categories are underrepresented, such as marine life, which is of course harder to photograph. 

Out of the 9,000+ photos posted, 75% has their species identified. The real number is even better, since that 25% includes photos that do not have any species, such as landscapes. 75%+ shows an enormous community discipline in identifying species. Above all, I consider the relationship between photos and species to be the biggest strength of JungleDragon, so I am proud of the community for this excellent number.

In fact, some people claim that the specie identification feature of JungleDragon has changed them as a photographer. I consider that to be the ultimate compliment. It has had the same effect on me. The feature somewhat forces you to consider what it is you are photographing. You'll think differently of wildlife photography as of then, it becomes a conscious process. It may even trigger the "collector" mechanism in you, where you are constantly looking for the next specie that you did not photograph before. That's the kind of addiction that is most welcome :)

Regarding 2,000 unique species as a number: of course the number pales compared to the millions of actual species that mother nature holds. Still, those millions need to be put in perspective somewhat:

Species in nature are spread out thinly. This means that specie rarity is not an exception, it is the rule. Most of those millions of species are rare. Rare in their distribution, rare to be photographed, rare to be identified, rare to be described anywhere. For example, the snout beetle family holds 40,000 species described. It's a tiny leaf on the total tree of life, yet still incredibly vast in numbers. Of most of those 40,000 species, you will find next to nothing online, whereas you will find lots of the top 100 snout beetles. This is even true for Wikipedia, a major source of specie information that JungleDragon depends on. It covers only a fraction of the actual species (about 180,000), and you will find that only the top 25% of those articles go beyond a basic entry of naming the specie.

What counts most for me is the educational value of 2,000 species. If you'd put me on the spot, I think I'd have trouble naming a hundred species by heart. That means 2,000 is incredibly educational. On almost all photos in JungleDragon you can directly see what the specie is, and learn more about it. Furthermore, one can browse through the tree of life without needing to be a scientist:

JungleDragon Tree of Life

Anyway, let it hereby be noted that I am deeply proud of our small yet enthusiastic community. Thank you all for your excitement and efforts, and let us march on to our next goal: 10,000 photos!

Anyway, the desktop setup I have been using was in need of an upgrade. For the last years I've been working on what effectively was a powerful Acer gaming machine back in 2007. To this day, it is still quite fast in many ways. As for screen real estate, I've been working on a 24" full HD monitor complimented with a 21" full HD monitor. In many ways, the old setup was working quite fine still in terms of general computing power, but I was longing for a graphical update.

I decided to go for an upgrade that borders insanity, one that will bring me daily joy for years to come. I went for the Alienware Aurora desktop setup. In it is an I7-3820 processor, which is excellent. It's not the highest end, yet CPU power never is a bottleneck for me. It has 16 GB of 1.600 MHz Quad Channel DDR3 memory. Awesome as well, but mostly a standard now for high-end desktops. Furthermore, the system has a 2TB 7200 rpm disk (no SSD yet, to be considered still), and a Blu-ray reader.

Excellent stuff all in all, but what really makes the system spectacular is this:

This is Nvidia's GTX690 GPU, the world's fastest consumer card. Effectively, it is a dual GPU: two GTX680s on a single card. It has an insane performance, there is very little out there that you can throw at this card that it cannot handle with ease, and this applies to both 2D and 3D rendering.

So that covers the main Alienware desktop system. Far more interesting is what all this power enables:

Part of the upgrade is a full monitor replacement. These are two Dell U2713HM screens, each running a resolution of 2560 x 1440. The photo is wide angle, in reality these screens are huge. I'm now looking at a working resolution of 5120 x 1440 pixels, which borders insanity. 

The other fantastic part of this upgrade is the switch from LCD TN panels to these IPS panels. The color accuracy is stunning, it makes me wonder what the hell I've been looking at all these years.

As for working space, here is the typical width a browser windows takes up in relation to the total available space:

If you think this is overdone, I agreed with that before buying this. Now that I have it at my finger tips, I am not so sure I agree:

• I do tabbed-browsing a lot, but really I'd prefer to have actual browsers open next to each other, as I often look up data between windows. This is very useful for that.
• In Lightroom, I can see well over a 100 thumbnails just on one screen alone, with the other screen having the photo open nearly fullscreen.
• In Photoshop, I don't have to keep toggling the zoom level when I do selective edits, because a large zoom level fits entirely on the screen.
• When programming, I see a lot more code on one screen, whilst also having the server console and two browser screens open next to it.

In other words, it's more than a toy factor, actual productivity is better too. I can't say the same thing for the GTX690 though, its primary purpose is for very high-end gaming. Here's some experiences:

• Crysis 3 currently is the ultimate benchmark game for GPUs. In-game it has an overwhelmingly large amount of lighting effects, reflections, shadows, etc. With the GTX690 at stock settings (not overclocked), Crysis runs at about 50fps with all settings at the highest, even the biggest performance killer (AA) is at its highest. In this torture mode, the cards runs hot up to about 90 degree celsius, but never crashes.
• Games like Farcry 3 and Battlefield 3 are a piece of cake, at their highest settings a constant 100+ fps is delivered. I could even clock down the power in such cases.

And then there is Skyrim. Playing it on this setup is the most stunning and immersive gaming experience I ever had. It is not the technically most demanding game, but certainly the most beautiful one. Playing it at a large 2560 x 1440 IPS screen is mind blowing.

So that is the new setup. It's been years since I was this excited about hardware, I'm happy as a child when I glance upon this machinery. And all of this in the midst of the post PC era. I hope that it is a telling sign that above all, I aspire to be a creator, not a consumer. And when not creating, I surely enjoy a world class gaming experience as well :)

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.