- Global Voices Community Blog - https://community.globalvoices.org -

GV Design Refresh 2020 – With Video!

Categories: Announcements, Design, GV Guides

I made this post into a video! Watch it first to get a summary of the article below.

Hi there! I'm Jer, the “Tech Lead” for Global Voices (GV), and I manage all the WordPress sites that make up the Global Voices web presence. We're launching some small but poignant design changes to GV and in this post you can learn what they are as well as the thinking behind them.

If you're reading this on the GV Community Blog, then you can already see the changes! Check out the credits at the top of the post, and the size of this text, what do you think?

A Fresh Old Look

The last major redesign of GV happened in 2014 [1], when we launched our current theme with it's clean, monochromatic look, typographically-inclined design, and responsive support for all types of screens, from smartphones to desktops.

Since then we've done a lot of work within this design, and added a lot of new ways to interact with our stories, like Facebook Instant Articles [2], and Google AMP [3] versions of everything, but we haven't had any major design changes to the core theme in 6 years now, which is the longest we've ever gone, having previously redesigned the site several times between 2006 and 2010.

Why such a long life? Well for one thing we love this theme! It's original, straightforward, classy, and it makes our content shine. But no matter how good it was, it's getting a bit long in the tooth. In the years since 2014 standards have changed and technology has improved, so we're “refreshing” our design to breathe some fresh life into it.

While this refresh involves a ton of changes to the details of the site, we suspect that many people won't even notice the difference, because the changes have been made to fit into the design language already established by GV's brand and presence.

Overall, our goal for now is to keep the same look for GV while making the text bigger and easier to read, adding breathing room around the content, and simplifying the details to focus on a clean, minimal look that puts our stories front and center.

Aside from these aesthetic changes, we are also re-assesing our priorities about what content and metadata gets shown where, specifically when it comes to highlighting our contributors and translations. This is especially true for the new tablet and mobile experiences, where several changes serve to ensure that authors and translators are treated as the heroes of GV that they are!

Ok blah blah blah, what changed?!

If you want a quick, fun version, watch the video above for a visual tour through all of the changes. For the sake of not letting this post get too long, I'm going to describe the biggest changes below, but let you try and pick out some of the smaller ones for yourself.

To get us started, here's an animated gif showing the old and new versions of an article screen seen at desktop (full) size:

animated gif showing old and new versions of the article design

Comparison of the old and new article designs. The version with the circular avatars in the top left is the new one.

Bigger, cleaner look

One of the most important things to notice is the size of the body text, which has been increased significantly. We feel this larger size has become the new standard (it's similar to what is used by the New York Times, for example), and most people will find it more comfortable to read long texts in this format. As always, users will be able to control the size of the site and text using tools in their browsers, in case they find it too large.

We've also made a subtle change to the font used for the body text, from “FF Tisa [4]” to “Georgia [5]“. The font change was driven both by a desire for a new look, and because “Georgia” is already available on all operating systems, and thus it won't require an extra download, making the page load faster for first-time visitors.

The other “size” related thing is a slight increase in the maximum width of the site, which applies to all pages. This extra space allows for wider margins between objects and overall breathing room.

Re-organizing the post sidebar and header

The most noticeable change is the new layout of the “post metadata” like the contributor credits, list of other translations, and categories.

screenshot of facebook and twitter buttons

Goodbye Javascript-driven Facebook and Twitter buttons ?

Why remove the dynamic (blue/teal) Facebook and Twitter buttons? The main reason we wanted to remove these buttons is that they needlessly invite Facebook and Twitter to load their many javascript files onto our sites. These scripts inevitably track our visitors in addition to bogging down the page with many extra kilobytes of downloaded code. Removing these buttons will mean better privacy for our visitors as well as a faster loading experience.

Note that the grey sharing buttons, including Facebook and Twitter, are still there next to the post (and above and below it at smaller sizes)! These buttons work great for sharing, and do so without loading any tracking scripts from their respective services.

The one big reason we've heard that people want to keep the old colourful-but-invasive buttons is to see how many likes a post has at a glance. Unfortunately there's no easy fix for this, but if you ever want to check how many Facebook likes a post has, you can at least copy the URL and paste it into sharescound.com [6] to find out. In terms of Twitter, the button we're removing used to count tweets, but stopped several years ago, and none of the services I found are able to load that info, so it seems like we just have to live with the mystery.

“Tablet” and “mobile” articles highlighting contributors

When you look at the site on a smaller device there's an even bigger change in the direction of emphasizing the work of our volunteers:

animated gif showing old and new versions of the article design at tablet size

Comparison of the old and new article designs at tablet/smartphone size. The version with circular avatars is the new one.

In the old design, once you got down to one column where the sidebar doesn't show, contributors were only visible at the bottom of the post, and the translations were hidden in a pulldown menu that few people used (“Translations” in the screenshot above).

Crediting authors and translators at the top: In this new design, the contributor credits will always show at the top of the page, whether you're on a desktop or a tiny smartphone.

Showing translations by default: Similarly, the translations will show in their full teal glory up at the top, making it as easy as possible for someone to jump to a different translation if their native language is available!

Overall, it takes a little more space to have these things at the top, but I think it's totally worth it, what do you think?

Where are the categories?: At these screen sizes, the categories used to show in the same way as the translations, in a pulldown menu at the top of the post (“Categories” in the top right of the screenshot above). In this new format the categories are instead shown at the bottom of the post, without the need for a popup menu. We think they look better that way and they're more useful at the end of the article, when someone might want to find related posts by clicking the category link.

Overall responsiveness revamp: As part of this redesign, I've gone through all the different screen sizes to review and clean up how our site behaves. It is now a lot more balanced at the “tablet” sizes in between computers and phones (notice the much larger headline in the screenshot above!). The smartphone-size experience will change for a lot of people to be a little more “tablet-like” as well. Since over half our traffic now comes from mobile devices, we hope this helps more people comfortably read our stories, regardless of the device they're using!

Homepage and post archive listings got cleaned up too

The changes to the homepage and archive screens are less dramatic, but they follow a similar theme. To get a sense of how this design also supports right-to-left languages and non-latin fonts, lets compare the GV in Arabic site to it's previous version:

animated gif showing old and new versions of the article design at tablet size

Comparison of the GV in Arabic homepage with the old and new designs. The version with the larger thumbnails is the new one.

Aside from the general “spacing out” and giving everything breathing room that I already talked about, here are the main changes to the homepage and archive screens:

Why the author name won't show on the homepage and archive screens anymore: I suspect this will be the most controversial change in this design, because we know that seeing your name on your work is important and a source of great pride for our contributors. Please know that we aren't making this change lightly, but after long thought and consideration over many years (at least on my part). Here are some of the reasons why we think keeping author names off the homepage is a worthwhile tradeoff:

Consolation prize: Contributor credits are now WAY more prominent on the article page! Remember that in the description of the updated Tablet size for articles above, I described how the credits will show at both the top and bottom of the post, rather than just at the bottom, and with nice big avatars! To me this is a much more important place to show the credits than in a tiny link on the homepage where most readers won't even notice it.

Overall, I think this new refreshed design is a big improvement to the visibility of our authors and translators, and I hope it feels that way to everyone.

More to come!

Is this it? No more changes for another 6 years? I hope not!

We've got lots of plans for more tweaks and improvements we can make to the current site, and ideas for future overhauls to come. We hope you like this batch of changes and are excited to see what's next for the ever-evolving visual and structural design of GV.

Bugs: If you spot any issues with the site, especially little things in the corners that I might not have noticed, please get in touch with me through the contact form on this site or by email to webmaster @ globalvoices.org

Ongoing experimentation: Keep an eye out for little style changes going on with the site. Our plan is to run some A/B tests (serving different versions of the site to different visitors to see how it affects different statistics) to see what works best. If you notice something a little different, maybe you're part of the research!

As always, I'd like to dedicate this design to all our authors, editors, and translators, it's your beautiful content that fills up the the canvas we create ??