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

 

Book review: Responsible Responsive Design »

FERDY CHRISTANT - FEB 19, 2015 (08:14:57 PM)

Yesterday I was confronted with how much I depend on internet connectivity. Whilst working from home that day, at around 3PM my 7 year old cable-company-owned modem broke down completely. 

In turn, this pretty much breaks down our household. I couldn't do anything for work anymore, as it is all online. I read my news online. I don't watch regular TV, I watch Netflix. I don't listen to the radio, I listen to Spotify. I can't manage my website JungleDragon, nor can I develop anything for it, as it is all online. I can't game, as that too is  online. Henriette does her work online, as well as her series and casual gaming. All shutdown. 

Henriette and I were joking that we rather have our heating shut down than the internet. Petty first world problems? Very much, but it gave me an opportunity to actually read a book, the above one. I had asked for it for my birthday, and now would be a great time to actually read it. So I did, and I finished it in a single night.

I've read several books on responsive web design about 2 or 3 years back, after which I applied many of those new learnings by completely redesigning JungleDragon to be responsive. That effort which took over a year, has taught me many hard lessons on the subject, so it's not a new topic for me.

However, the world of responsive design, mobile-first, and performance-tuning on the web is constantly moving. Many people struggle applying these 3 concepts in a practical approach, and that is where this book helps. Through many examples and clear writing, one is taught how to develop websites and components from the ground up to be accessible, fast and flexible, which are conditions for a user experience to work in today's web where we have an explosion of devices and ways in which those devices are used.

Whilst many of the individual topics were not new to me, some chapters offered extra depth, teaching me new things. In particular I found the chapters on performance tuning great. It has info like a performance budget, using a speed index, loading strategies that are non-blocking, all relatively fresh concepts that inspired me to learn more about it after reading this. 

The writing style is clear and at times entertaining, and overall this book packs a lot of value. If many of these things are new to you, I would consider it a must-read with a lot of value. If you're a bit more seasoned in these topics, it's still a good read.

I have few critical notes on the book, but I do have a few small ones. Sometimes I think the author goes a little overboard in implementing complicated ways to support ancient browsers. It makes me wonder if the medicine isn't worse than the disease, if you know what I mean. The pattern of the book too often is, here's a problem, here...include this library to solve it. I wonder how all of that ends up in a real world big website, whether that complexity and size stays managable. Actually, I don't wonder that, because I've seen it.

Still, this is more criticism on the web itself, rather than on this book. In fact, it turns out that several useful libraries and web initiatives were once invented by this author and the group he works for. In fact, you could even say that about a dozen people on this world are doing most of the heavy lifting in moving our web forward. It's amazing how much these people give back, and this author is one of them.

To make a long story short, would I recommend this book to anyone? No, I would recommend it to everyone.

JungleDragon 4 - Update 9 »

FERDY CHRISTANT - FEB 13, 2015 (09:21:20 PM)

Hereby I'm announcing update 9 of JungleDragon V4. This update is aimed at moderators and administrators, bringing new tools to make their life easier.

Photo guidance - for moderators

One of the best decisions I've ever made regarding JungleDragon is to introduce the role of moderator, whereby key members of the community are given extra powers. In addition, some maintenance tasks are shared with moderators. As a result, the community is more democratic, and the species system's data quality has improved drastically.

I care deeply about the moderators. And as I am a moderator myself, I experience both the good and the bad of it on a daily basis. With photo guidance, a new feature, I'm addressing one of such annoyances. I believe it can be a major time saver, so let's see what it is and how it works:

Above is an example photo shared on JungleDragon. There's nothing wrong with the photo itself, yet it is still useless. It has no title, description or tags, therefore it will never be found using search. It has no location info so it lacks context, and will not show up on the global wildlife map. It has no species info, so it will not show up in the wildlife browser or on any species record.

It's what we call a "photo dump". Often, the photo is shared in such a poor way due to the member being new, not aware that it is important to share with more context, or not knowing how. And this is where us moderators step in. Typically, we leave a comment explaining how to share it better, in a richer way.

The problem is that this part of educating the member is laboursome. You will find yourself typing the same long comment explaining the same concepts over and over again to different members. It's hard work, but needed. 

With the brand new "Guidance" feature, this task is becoming a lot easier:

Note the new "Guidance" button next to the "Edit details" button. This button will show up if you're a moderator and opening a photo that was not uploaded by you. You will use this button in case the photo is lacking basic details. This is what happens when you click it:

A dialog appears. In this dialog, you simply check the items that are poor/lacking. As in this example photo, all info was missing, I'm selecting all three options. This is what happens next:

In the comments section, a new comment is automatically generated. It consists of 3 parts:

  • A starting paragraph that is always there (basically saying "thanks for sharing, but here are some tips)
  • Based on the choices you made in the dialog, 1, 2 or 3 middle paragraphs explaining the specific info that is lacking and how to set it
  • An ending paragraph that is always there inviting the member to ask for additional help if needed

As you can see, the generated comment is not saved yet. This means you are free to further personalize it based on the context. Once you're happy with the comment, just save it. It's a comment like any other comment, it will appear below the photo and the photo owner will get a notification from it (if he/she has that enabled).

Detailed instructions on when and how to use this is available on a help page in the moderator panel:

Dear moderators, I hope you like this :)

Feature control - for administrators

The following is a new feature available only to administrators (basically me). With feature control, I can enable/disable important site features across the site using a simple panel:

I can think of 3 scenarios where this is useful:

  • When I am deploying a complicated new feature, yet don't want to bring the entire site down, I can temporarily disable one particular feature only.
  • When there is a severe technical problem in one part of the site, I can temporarily disable it to prevent further damage from occuring, giving me time to find and solve the problem.
  • When JungleDragon is misused in an attack kind of way (for example a bot making bogus accounts), I can temporarily disable that feature, limiting damage and giving me time to investigate the problem.

When any of such features is disabled temporarily, it will apply to all users except for administrators. Users will see a screen like this:

The message in blue can be customized by the administrator, for example to explain the reason for the feature being disabled. 

Other updates

  • I solved a bug where any invalid taxonomy path in the wildlife browser no longer throws a blank page.
  • I changed the backgrounds of thumbnails when they do not yet have their photo loaded, which looks nicer now.

Wrapping up

There are a lot of aspect to JungleDragon to keep the machine working. This update focuses on moderators and administrators, giving them powerful tools to have more control and to be more efficient. Ultimately this serves all users of JungleDragon, and makes our platform more robust and mature. 

JungleDragon 4 - Update 8 »

FERDY CHRISTANT - FEB 9, 2015 (06:04:08 PM)

Here's the 8th update of JungleDragon V4. This update is small but nevertheless important. It concerns specie introduction indicators on thumbnails. Let's explain...

The above dialog in a way sums up JungleDragon as whole: identifying species on a photo. A vital activity. You just type in the species name and hit that search button. In most cases, that is all you need to do. After a succesful identification, you are returned to your photo:

If you're a JungleDragon regular, you know that blue label in the top right corner. You made a species intro, the first person to upload and identify a photo of this species on the site. It's a big deal, gives a sense of accomplishment, and it brings out the collector in you. It's addictive. Furthermore, it is of course great for the entire site and community, as we're expanding the diversity and usefulness of the content.

Species introductions matters. For that reason, a few weeks back we also included species identification and intros on each user's profile:

(see above, all species introduced to the site by this example user).

Today, I've deployed yet one more feature that further highlights the importance of species intros:

Above is a section of the homepage. Check out the blue ribbons on the thumbnails, indicating that those photos are species intros. Zooming in for a clearer view:

These ribbons are applied to all lists of thumbnails within JungleDragon (about 20 of them), with these exceptions:

  • Not on the "unidentified" list (doesn't make sense here)
  • Not on the photo lists within a custom list (visually conflicts with image remove button)
  • Not in your personal favorites list  (visually conflicts with image remove button)

This means that species intros are now visible pretty much everywhere inside JungleDragon. So it's a small visual change, yet has a large impact, I believe.

JungleDragon 4 - Update 7 »

FERDY CHRISTANT - FEB 6, 2015 (03:51:17 PM)

Hereby update 7 of JungleDragon since starting development of V4 late last year. This update improves the photo edit flow, implements better photo deletions handling for admins, and various smaller fixes and improvements.

Better edit flow

Several users forget the set a proper title/description for their photo. This is problematic as it makes searching for the photo impossible. Whilst some user may simply not feel like doing it, I also believe that some don't know that they're supposed to do it, or how to do it. Therefore, I made a few subtle improvements:

See above, right below the green tags is the "Edit details" button. It used to be white, and smaller. By giving it this yellow/gold color it is more consistent with the rest of the page, where now all three primary actions on a photo (edit details, identify species, geotag) have the same color and size. Let's zoom in on the improved edit button:

Note that there is an additional message after the button urging the photo owner to make the edit. This message is only visible when the user is logged in, this concerns his/her own photo, and when it has never been edited before. 

Admin deletions

In JungleDragon, users can delete their own photos. Administrators, however, can delete also the photos of others. In addition, any user can report a photo. This will send an email to the administrator, who then can delete the photo.

This works, but the workflow around it was a bit cumbersome. As administrator, I can delete the photo, but I also want to inform the photo owner why it was done. I can do this by making a comment on the photo, but then I can't delete the photo anymore, as that would also delete the comment. 

This is now improved. When an administrator deletes a photo, they get this dialog:

This screens looks similar to the one used by regular users when they report a photo. Here, administrators can decide to send an email to the photo owner. If so, the filled out reason for deletion will be emailed to the photo owner. Here's such an email:

Much better, more constructive, and it removes an old annoyance.

Other updates

This update also contains various smaller fixes and improvements:

  • There was an issue in the "species intro" not always being correctly calculated. Fixed.
  • "Save comment" on the photo page has been renamed to "Post comment"
  • Favicons have been improved, supporting more/most platforms now
  • The "season" indicator introduced earlier has been toned down in color, it was having too much emphasis
  • The minimum treshold for a photo to be automatically tweeted on JungleDragon Twitter account has been increased. This way less photos of a higher quality get tweeted
  • Fixed a small broken network request related to the new carrousel slider on the homepage
  • Rendering improvements specifically for Webkit browsers:
    • The name/copyright labels on the photo screen were misaligned. Fixed.
    • The breadcrumb in the wildlife browser was sometimes cut off. Fixed.
    • Labels on the upload screen help section were not wide enough. Fixed.
That's it. Not the most impressive update for users, but it checks of a lot of things on my list.

JungleDragon 4 - Update 6 »

FERDY CHRISTANT - JAN 30, 2015 (10:27:22 PM)

We're still only in January and here's already the 6th update of JungleDragon V4. This update concerns a single new feature: the JungleDragon story on the homepage.

JungleDragon has a lot of depth and powerful features, as is often expressed by regular members. However, if you're a new visitor coming across the homepage, that depth isn't immediately clear. At a first glance, it looks like any ordinary photo sharing site.

For that reason, I wanted to reserve room on the homepage to tell the JungleDragon story. I've implemented it using a series of slides in a carrousel. It is only visible to new users, logged in users will not see it. It is also not visible on very small devices.

The story consists of 8 slides, each featuring a large background image, and a foreground text that explains a concept or feature, followed by a call-to-action button. Below is an example, the first slide as shown on a small tablet in portait mode:

The slide automatically changes each 9 seconds to the next one, but not if you hover it, then it pauses. Alternatively, you can navigate using the little circles in the bottom, or by dragging with your mouse.

Below is an appearance of one of the slides in a desktop-like resolution:

Background images are loaded as per the size of your browser window. Even in the extreme case of a 2560 x 1440 resolution, the background image will span the entire width:

Finally, here is a full page render:

Implementation details

For the tech interested, this slider makes use of Owl Carrousel. Having investigated dozens of carrousel plugins, I found most horribly broken, overly complicated or not smooth. This one just works, is responsive, and has full touch support. I only did some minor CSS tweaks and implemented custom image switching myself. 

Anyway, I hope that to new visitors, this carrousel helps them understand JungleDragon better.

Note: For now I only used my own photography for the background images, to avoid any permission problems.

Continue reading...