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. 

Web developers who are trying to make their websites usable on mobile/touch devices, regularly use this in their page header:

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

Continue reading...