New year, new look

Homepages are hard.

They have to make a good first impression on a new reader. They have to clearly display our tone and style. And, of course, they have to communicate our editorial voice.

We weighed up all of this and so much more when building our new homepage, which we’re excited to roll out today. At Rest of World, we believe that everyone can benefit from having a broader global perspective, from those building technology to those using it. With our homepage redesign, we adopted many of those principles to inform our engineering approach and product direction.

I’ve been lucky to be involved in a number of homepage projects. There’s always a tension between following a standard layout, which brings consistency but also inflexibility, and trying to account for every possible use case — building an over-engineered and fragile system that may never be used in all the ways it was intended.

I believe our new homepage is an effective and efficient statement of who we are, not just in the external interface you see, but also in the engineering that makes it all work. I’d like to highlight two elements we focused on that, I feel, are often overlooked in homepage development.

Page Performance

The nature of our coverage means that we have readers in places where data isn’t cheap — and isn’t fast, either. We might be used to LTE and 4G, but a large portion of the world (and our readership) still uses 3G and 2G connections on older devices. We want to be considerate of people in places where data is expensive and connections quality can vary greatly.

That means page performance matters. There’s just one problem: Measuring web page performance isn’t as simple as you think it is.

It’s always a moving target. It varies by time of day, by the number of ads, even by how congested the internet is at that moment. And different measurement systems (like WebPageTest or Lighthouse) provide different benchmarks, so they’re not directly comparable.

We’re proud to say that our page is one of the smallest in size and quickest to load out there.

WebPageTest Test Results

Test conditions: Chrome on a Moto G6 device with a “3G Fast” connection running from Dulles, Virginia. Results are an average of three tests with the page fully loaded (not “Document Complete”).

We picked these homepages to compare ours with because they have a similarly image-rich layout. But they also run advertising; we don’t. Ads can have a huge impact on performance, so we decided to run the test in Lighthouse with ad-blocking enabled.

Lighthouse Test Results

Test conditions: Lighthouse running from Developer tools in Google Chrome (V87) on macOS, as a mobile device.

We’re certainly not perfect. We’ve made deliberate trade-offs by forgoing some things that could have made the site even more lightweight. For instance, we could have reduced our image footprint, but we chose to prioritize rich, high-resolution images. We could have used browser-safe fonts, but we chose richer typography. But these are the sorts of decisions that any designer or engineer has to make, and we’re delighted with the results. They show that we were able to keep a distinct look while not overly taxing anyone’s data cap or transmission speeds.

Curation

While plenty of attention will understandably go to the external-facing parts of our homepage, one of our goals was always to create an optimal experience for our own editors. The tools used to publish stories and the CMS user interface are often neglected in digital news design, but editorial workflow is extremely important. In fact, I believe you must always start with the editorial side before you even begin to conceptualize a homepage’s design.

We wanted to allow our editors a good amount of freedom to feature stories in a variety of ways. But as I said earlier, this is a challenge. How do you produce a consistent design without being inflexible? How do you offer variety without creating too much choice, wasting time on things that will never be used?

Our solution was to create a small, but highly flexible, set of content blocks, which editors can populate with stories and freely move around the homepage. Depending on where these blocks are arranged, they can give the homepage a whole new look — while still sticking to the design principles we’ve established.

For instance, editors can use the “Big Story” block — just one story, taking up much of the horizontal width of the page — to highlight a special feature they’d like to show off. Or they can use the “Spotlight” block to display an infinite number of stories, scrolling downward for as long as they need.

They also work differently behind the scenes. Our editors could, for instance, use the “Curated Collection” block extensively, manually choosing stories to display together under a shared theme. Or they could use the “Recent Stories” block to simply and automatically show all of our latest work as it’s published. Keeping our homepage fresh, while reducing the time editors need to maintain it, is always the goal.

This is all achieved inside WordPress, which Rest of World is built on. WordPress allows for the creation of custom post types, and we’ve used Curations for our custom content blocks. We can even save and schedule particular configurations of these blocks, allowing us the ability to easily mix up the look and feel of the homepage depending on our needs.

As Rest of World approaches its first birthday, we’ve taken what we’ve learned and used it to develop our new homepage. But we’ve also built it in a way that allows us to change and adjust as we learn more, to develop new content blocks to reflect new areas of coverage, and to do it in a way that doesn’t stress data caps or slow internet connections. 

We consider our homepage redesign to be a major milestone for us, one that reflects not just our growth over the past year, but our needs and ambitions for the year to come.