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

 

JungleDragon general site update - August - IV »

FERDY CHRISTANT - AUG 22, 2014 (01:26:02 PM)

Another week, another series of JungleDragon site updates, such has been the rhythm for a while now. This week is no different, so let's see what changed this time:

Style upgrade for activity feeds

I changed the look of items in the activity feed, which are found on many pages inside JungleDragon:

In the new look, the items themselves do not have a background of their own, they simply lay on the page, which has a general background. I find this less distracting and boxy. The text has a light shadow giving it an inset effect. Padding has been improved and made more consistent. User avatars are slightly rounded, but not much.

List guidance

In JungleDragon it is possible to make your own lists of photos, and include any photo on it (by you or others), based on a theme of your choice. A good list has at least these qualities:

  • It has a proper title and description
  • It has a specific weight, a minimum amount of photos
  • It concerns an original dimension of photos, and interesting topic

JungleDragon will now actively guide list owners in creating a useful list by providing guidance:

It concerns the block in red. It will only be visible to the list owner, and only when signed in. As you can see, essentially it is a todo-list where items taken care of are striked through. If the list meets all 3 conditions, it will dissapear. 

The idea of more proactive quality guidance will eventually also be applied to individual photos, but in a different way. 

Promotion awards and notifications

At JungleDragon, moderators decide which photos shine on the homepage, by means of photo promotions. I made some changes in this area. The first change concerns karma. As of now, if your photo is promoted, you will receive 100 karma points. More importantly, your image will also receive 100 karma.

This karma reward on the image itself, means that your image will appear "higher" in several areas of JungleDragon:

  • On the popular photos overview
  • Inside tags
  • On species pages

Getting your photos promoted is now much more rewarding, it goes beyond being listed on the homepage. Note that user and image karma for promotions is only rewarded:

  • When it does not concern a self promotion
  • When it is the first time the image is promoted, not during repromotions

The 2nd change regarding promotions is that it now also shows up on activity feeds:

This means it is now fully transparant which moderators promotes which image. This activity item does not appear on the general community feed, it only appears on the feed of individual users, moderators in this case.

And the 3rd change is that a new notification is linked to the event of images being promoted:

Above is a test email of the email that a photo owner would receive if his/her photo is promoted. This email is only sent when the promoter and image owner are different persons.

That's it for this week, I hope you appreciate these changes.

JungleDragon general site update - August - III »

FERDY CHRISTANT - AUG 15, 2014 (02:41:07 PM)

Hereby the 3rd site update for JungleDragon this month. This is only a small one, but every improvement counts.

Query performance

How fast JungleDragon is for you depends on many parameters: your location, connection speed, the load on the server, etc. In turn, the total page load time depends on multiple components as well: DNS, image download time, database query time, etc. It's a complicated puzzle.

In this update I focused on improving the database performance of JungleDragon's most important pages. With great success:

Above is diagnostic output of JungleDragon's homepage, which requires 5 database queries. This is the live site. As you can see, each query now only takes 5ms or less. I've done this on many pages, often the total time spent on the database for the entire page is in the range of  20 - 50 ms, which are really good numbers.

As explained, the database time does not dictate the total load time of a page. Most time will be spent now on the downloading of images, which is something I cannot speed up much further without adding substantial costs. It is also something one can except from an image-heavy site like JungleDragon. To put that in perspective:

The average web page size as per July 2014 of the top 1000 websites in the world is 1.6MB, and some expect this to grow to over 2MB per page by the end of 2014. JungleDragon's homepage, one of the heaviest pages on the site, is only 1.2MB in size, and much smaller even when you revisit with a full cache. And to add to that, realize that this homepage loads 24 large photos, in Retina-like quality. 

Even on mobile, JungleDragon is doing well. Sure, if you're on a slow mobile connection, its' speed will not blow your mind. But even that can be put in perspective: nothing will blow your mind in such a situation. For example, opening Facebook in such conditions takes me twice as long as opening JungleDragon.

I believe JungleDragon is optimized for speed quite well by now, but I'll always look for opportunities to improve it further, as long as they are reasonable.

Capture time

It's a small improvement, but on photo pages next to the capture date, you can now also see the capture time:

It's an interesting piece of information, for example to see how early the photographer was up, and what that means for the light we see on the photo. Note that this capture time is coming from EXIF, thus it comes from your camera. If the date/time on your camera is wrong (often happens on travel), so will this time be. Furthermore, no time zone is added, since most cameras have no idea in which timezone they are, thus they do not capture that information.

Daylight header

Related to the info panel on photo pages:

If your camera is GPS-enabled and embedded both the GPS coordinates and time in the photo, in JungleDragon a special link will appear below the map "View light conditions of this photo". This was already implemented before, but when clicking this option, the header is now different:

See above, the header can be seen in light brown. Coming from a photo, this header shows a different instruction compared to visiting the daylight planner directly. A subtle change, but it provides more guidance this way.

Other changes

  • Layout issue on "load original" button in full screen viewer: fixed.
  • Layout issue on daylight controls for long dates: fixed.
  • Breadcrumb navigation for species browser further improved for small screens
Enjoy!

JungleDragon general site update - August - II »

FERDY CHRISTANT - AUG 9, 2014 (10:00:56 AM)

It's good times at JungleDragon. We're seeing fantastic contributions by members, and we're crossing new content milestones rapidly. As a result, I am eager to keep improving the site. Here's the 2nd site update in August.

Slideshow titles and ambient backgrounds

My obsession with full screen viewing has not yet ended. I've improved slideshow viewing in particular this time. A slideshow is when you open any series of images in JungleDragon in full screen mode (by clicking the "play" button). 

There's 2 improvements. The first one is the slideshow title. Before there was none. Typically, you'd be in JungleDragon on a page showing a series of photos, and then open it as a slideshow. That way you'd know what type of slideshow it is. However, what if you would open a slideshow link directly, from outside of the site? Except for the window title, there's no way to know what slideshow you're really playing.  This is now changed:

(click to enlarge)

See above. Note the new slideshow title "Marvelous Macros" in this example. As you can see, it is in the same font as the JungleDragon logo, clearly separating it from the photo title in the bottom. In this case, we're playing a slideshow based on a custom list made by a member. Here's a second example, this time playing a slideshow of all photos of a particular species:

(click to enlarge)

The 2nd slideshow improvement can be seen from the above screenshots as well: ambient backgrounds. Ambient backgrounds dynamically change the photo background based on the average color of the actual photo. Before I had it enabled only on single photo full screen viewing, not it is also enabled on slideshows.

Other bits and pieces

The other updates for this week consist of several smaller items:

  • Fixed some typos in the moderation panel
  • Fixed an issue where the "share" button does not work on species maps
  • Fixed an issue in Chrome which would truncate the species navigation breadcrumb too aggressively
  • On touch devices, opening a photo full screen required an extra click/tap, as the device first shows the hover state of the element. This is now fixed.
  • I've removed the social footer from email notifications. I find them distracting and I rather have you visit the actual JungleDragon site, instead of our social channels. You can still find the social links in the site footer.
  • Lists (member-created collections of photos) are now sorted by the most recently added photo. In particular this makes the bigger/most popular lists more dynamic, easier to see what's new
  • Fixed an issue where the species photos and species photos slideshow have a different sorting
  • Both the forum body field and the photo description field now allow you to post much more text, 10 times more than before.
  • I've improved the speed of the homepage by 0.5s. Doesn't seem like much, but every bit helps.
That's it, hope you like these continued improvements.

JungleDragon general site update - August »

FERDY CHRISTANT - AUG 1, 2014 (08:51:18 PM)

Here's another few updates to JungleDragon.

Ambient Glass aftermath

Last monday I deployed a crazy fun new update to JungleDragon: Ambient Backgrounds. In a nutshell, these concern dynamically calculated background colors based on the photo you are viewing full screen. It's a feature that got me quite excited.

However, frustration followed after the initial deployment. It didn't work as well as it did on my test environment. The reason: CORS, differences in browser caching mechanisms and event orders, things you don't really want to know. 

Luckily, I was able to develop a fix, and now ambient backgrounds not only work reliably, the calculation part now also works in far more browsers, including mobile browsers.

Glass thumbs

It's a tiny change, but I'm further deploying the "glass" theme. As of now, all thumbs have it applied to their caption:

Dark footer

JungleDragon's footer is now dark instead of light, more clearly marking the end of the page:

Please view me full screen

When on a photo page and hovering the actual image, a hint appears in the bottom of the image, emphasizing that you can launch it full screen (as some people may not know that):

And yes, again it is themed like "glass". Let's click the image and open it full screen:

Note the ambient background, chosing blue based on the photo. New in the full screen viewer is the hint in the top bar, which says "Use your mouse wheel to zoom in and out, drag to pan around". Not everybody knows that JungleDragon has a desktop-quality full screen photo viewer, which allows you to zoom up to 10 levels deep, so hopefully this makes it more clear. The hint will fade out as soon as you zoom one step. 

Other changes:

  • Notification emails about awarded medals now have a better image, the old one was quite outdated.
  • The header of the community activity panel on the homepage had a styling issue. Fixed.
  • When playing a slide show and zooming and dragging, releasing your mouse button would move it to the next slide, which is unexpected. Fixed.
This is again a batch of small and subtle tweaks, but I love this kind of crafting. Many small updates over a long period of time ultimately lead to big improvements, or so I hope.

JungleDragon Ambient Glass »

FERDY CHRISTANT - JUL 28, 2014 (11:22:09 PM)

(warning: this post contains many screenshots, it may load slowly)

Weird title, right? Ambient glass, what is that all about? I'll get to that in a minute. First, I'd like to explain how I develop new features and improvements for JungleDragon. It's stupidly simple, really. As a heavy user of JungleDragon myself, I am exposed to it a lot, so I tend to notice annoyances, incomplete features or holes in the system. Combined with community feedback there's no shortage of improvement ideas.

Next, I put those improvements on a list and give them a priority, which I regularly change. I allow myself time to think through each idea until it is mature. Once mature, I know exactly what to build and how to build it. It's only a matter of executing it then. It is a rational way of doing things: think, plan, do.

Every once in a while though, I like to be irrational. To build things I didn't plan for, to just go with my creative flow and see where I end up with. The last time I did this for JungleDragon we ended up with the daylight planner.I never planned for it, nor did I think of how to do it, it just arrived out of thin air.

Today I am sharing the result of another completely irrational feature. It can be seen as a worthless design gimmick or as a very elegant design enhancement, I will let you be the judge. Either way, it is a little out of the ordinary.

JungleDragon full screen interactions

Let's get to the point. This post concerns JungleDragon's fullscreen interactions, which are:

  • Viewing a single photo fullscreen (as large as your viewport/device is)
  • Slideshow: viewing a series of photos fullscreen
  • Video: watching an embedded video (Youtube, Vimeo) fullscreen

I'll explain my changes to those interactions in three steps:

  • Removing complexity
  • Applying a more subtle new design (glass)
  • Doing something crazy with backgrounds

Removing complexity

Before getting to the good stuff, we have first have to go through the bad stuff. The way the fullscreen interactions were designed before this update was powerful, yet overly complex. 

The primary objective of these fullscreen interactions is to show content as large as possible. However, over time I added a ton of other functions to these fullscreen interactions. For example, when viewing a photo fullscreen, you could still view a species panel, vote/favorite the photo or share it. All of those features are already available on the normal photo page (the non-fullscreen one) and I was essentially duplicating them. Not just duplicating them, re-implementing them in a different way since the user interface is different. Given that those added features also have to work on a series of images as well as on any device, things were getting extremely complicated and hard to manage.

Because of this, I took the decision to simplify the fullscreen interactions, by removing the following:

  • The info panel (which shows species info, the photo title, description, tags, lists to which the photo was added and EXIF info) is gone. 
  • Voting, favoriting and sharing a photo from the fullscreen viewer is gone.
  • On the fullscreen video player, the related videos and species info is gone.

Again, all of these features are still there on their normal pages (non full-screen), they are only removed from the fullscreen pages. Therefore, the fullscreen interactions are reduced to just doing one thing right: showing content as large as possible.

Some may not agree with this decision, but I hope they understand that the cost of complexity was high whilst the benefits were minor. A proper term for this is "unrewarded complexity".

Applying a more subtle new design (glass)

After removing redundant features, I found myself with a simpler fullscreen image and video viewer. Next, I applied some design changes to the few elements remaining. I call it "glass", because it involves the use of transparency and very fine and thin elements. Here's an example on a large desktop:

(click to enlarge)

Above you can see the "glass" theme in action on a large desktop screen. Both the top bar and the footer (containing the image title and credits) are transparent, yet not entirely. There's both a small lighten as well as a shadow effect, blending in with the image. The top bar contains only two buttons: "load original" and "close". "Load original" does what it says, it loads the highest resolution possible, if the photo owner has it enabled. It has a label and icon that is much more clear than before.

Here's a 2nd example of "glass" in action, this time on a smartphone in landscape mode:

Again you can see the top bar and the title blending in with the image. So that is the result of removing fluff and adding the glass theme to the fullscreen image viewer. Nothing crazy so far, just simplicity and elegance.

Doing something crazy with backgrounds

Now it is time for the design gimmick. The above 2 screenshots are not entirely fair. They are made in ideal circumstances where your viewport matches exactly the orientation and aspect ratio of the photo. Very often this is not the case, and you will either have room on the side or above and below the image.

That empty room is filled with a background color. Before this update, it was a shaded very dark grey color with a noise pattern applied to it. This is a solid and classic choice, as photos on a dark background tend to do well. It is pleasant viewing.

Yet I wanted to do something different to that background. I want that background to mimic the actual content of the photo that lies on top of it. I have tried this before, and failed. My earlier approach had many problems:

  • The actual effect was often ugly, it was hit and miss
  • It was terribly slow
  • It only worked in a few browsers

More than a year later, I gave it another try using a totally different approach. And I believe it works now. It works quite well actually. Let's put in simple terms what I am doing: rather than setting a dark solid color as a background in the fullscreen viewer, that color is now dynamic. The color is decided by the dominant/average color of the actual image you are viewing, which is automatically calculated. Next, that calculated color is set as the background. However, not just as a pure solid color, an additional layer applies a gradient to it as well as semi-transparent "dragon skin" pattern.

If that still doesn't make sense, let's just have a look at it. I have an overwhelming amount of examples, simply because I find the effect to be so cool. Let's go:

(click to enlarge)

See above. This reedbuck in Tanzania isn't surrounded by a dull black background, instead it surrouned by a safari-like green, the result of automatically calculating the average color of the scene.

See above. This creepy wolf spider as seen on a small tablet in portrait mode is not surrounded by black, instead it is surrouned by a blue-ish cold dark color, making the total experience even creepier. The atmosphere of the scene is extended beyond the photo, which is exactly the point of this feature.

(click to enlarge)

This tiny jumping spider in its green-dominated world will naturally get a greenish background. But wait, it can get even cooler:

See above. In Safari on iOS, not only will the background extend the photo's atmosphere, the entire browser will get the atmosphere,  since the iOS browser controls happen to be transparent :)

(click to enlarge)

See above. These leopard soul mates will get an Africa-themed background. Automatically. 

(click to enlarge)

See above. In this uninviting scene, 2 male lions observe a hippo skull from a distance. It is raw black and white photography, which automatically get's an emotionless grey as a background.

See above. This dreamy autumn macro scene gets a fitting background color. Notice how neatly the glass theme fits in as well.

(click to enlarge)

See above. We're still in autumn, but this time the scene is darker and has more harsh light. The alghoritm automatically selected a dark earth color as the background.

(click to enlarge)

See above. This mysterious scene is viewed on a giant resolution of 2560 x 1440 pixels. As it is a cool and dark scene, a cold dark black/blue is automatically set as the background.

(click to enlarge)

See above. Viewing a portrait photo on a wide screen leaves lots of empty space on the sides. Luckily, that empty space is well toned to match the Africa style color of the actual photo.

(click to enlarge)

See above. Possibly my favorite example of this feature in action. The scene cannot seem to decide between being overly green or blue, so the background is an ideal mixture of both.

See above. An ostrich as seen on a large smartphone in portrait mode, is enriched with a background that slowly goes from light brown to darker brown. 

(click to enlarge)

See above. Evil Wildebeest meets Glass meets Africa. It's almost as if the alghoritm can "feel" the scene.

Had enough?

Sorry for the many examples, I just want to showcase the dynamics of the feature and how well it can work. This brings the question: are these just exceptional examples of cases where it just happens to work really well?

Not really. In my testing of a few hundred images, the effect ranges between slightly enhancing to strongly enhancing. The good news is that in my experience, even in the worst case scenario it does not take away from the experience. So worst case, the effect is kind of neutral or slightly enhancing, and in many cases it will be strongly enhancing. It all depends on the actual photo, and of course our subjective opinion.

Slideshows

We're not done yet.  Besides the single image fullscreen viewer, we also have a fullscreen slideshow player. For now, I have decided to not apply the ambient effect there, as I figure it would be distracting to see the background changing as you navigate through a set of images. However, I did apply the "glass" theme to the slideshow player as well:

(click to enlarge)

See above. Note the new glass effect on the bottom panel, blending in with the image. Another small change is the "slide" counter being moved to the right.

(click to enlarge)

See above. A 2nd example of a slideshow, this time with thumbs expanded. Excessive glow effects are gone and replaced with fine thin borders.

See above. Even the loading indicator (which is animated) has the glassy theme applied to it.

(click to enlarge)

Another small change to the slideshow player: when pressing "play", all controls will be hidden as before, yet in the top corner there is now a spinning gear indicating that the slideshow is in fact playing, this wasn't always clear before.

Video

Finally we arrive at the 3rd and last fullscreen interaction: watching embedded videos. Although not used often, in JungleDragon you can associate JungleDragon species records with Youtube and Vimeo videos. Next, you can play those videos directly inside JungleDragon, using a fullscreen viewer.

As said before, I removed all content except for the actual video from this screen. In addition, I even beat Youtube into submission by removing virtually every element that is possible, except for the player control (which I themed) and ads (which I can't stop from happening).

(click to enlarge)

See above. This is a still image of a true power test. We're watching a 60 FPS 4K video of Costa Rica. Mind blown. Of course the power of the content comes from Youtube, all that remains of the JungleDragon design is the glassy header bar showing the logo and a close button.

See above. A Vimeo video of a cheetah running captured using a high speed camera, as shown on a smartphone using JungleDragon's video player.

Back to ambient backgrounds

Although I do not want to go into too much detail regarding the technical working of the ambient background feature demonstrated so excessively earlier in the post, there are some notes I must make on how it works.

Basically, I am storing the calculated background color as part of the image in my database. However, it needs to be calculated once, and this will only work in a modern browser (modern IE, Chrome, Opera, Firefox). Once it is calculated, the background color for that image will forever be known, and will display for all browsers.

So here is the experience based on different scenarios:

Somebody has already opened the image fullscreen in a capable browser.

Great. No matter which browser you use, the ambient background will show, as it has already been calculated.

You have a capable browser and you are the first to open the image fullscreen

In this situation, the ambient color will be calculated as a one time activity. The screen will starts out with the default dark background, yet after about 3 seconds, it will switch to the calculated color. And now, it will forever be set. Opening the image again will instantly set the correct background color, no matter your choice of browser.

You have an "incapable" or old browser, and the background color has not yet been calculated

Your browser will not be able to calculate the ambient color, so in this case we'll have to wait for a visit to the image by somebody using a modern browser. This is not a disaster, as the default dark background that you will see is far from ugly.

All in all, this feature basically is deploying itself, by visitors opening images. As over 90% of JungleDragon users have a capable browsers, I expect that soon we can enjoy many ambient backgrounds.

Wrapping up

Phew, this was a long post. All to explain a crazy feature. With this big update, I aimed to simpliy full screen interactions at JungleDragon and to make them more elegant and free of clutter. At the same time, I am experimenting with an unusual design choice, that of ambient backgrounds. I like unusual, the question is...do you?

Continue reading...