Navigation overhaul and other new feature

Hello everyone,

I'm very happy to finally be writing to you today to present the biggest update to the site since Hio launched in 2018, one I've been working on obsessively for several months. This news post will therefore be quite long, as I'd like to share with you the thinking behind it, the choices that were made, and the changes you can't see.

In short:

• A top bar with a new menu, a trunk icon showing your money, your items and your collections, and the location title now displayed on phones;
• A bottom bar with the five most-used features (particularly handy on phones);
• Floo powder, a menu giving access to the whole site, with shortcuts and quick search;
• Work on accessibility, a weather system, a preferences page, location images on phones, faster pages...

▨ Since the beginning of the year, I've been engaged in a complete rewrite of the site. It's entirely invisible to you (except when I break things!), but it will gradually give us a site that is faster, more reliable, and above all easier to develop further. I hope you can already feel the effects, since the site has never been this fast and hasn't had a single outage in almost three months.

▨ The difficulty of a gradual overhaul: the simplest approach would have been to start over from scratch, rewrite the whole site, and ship the update in one go. That's what I did when I created this website, but it meant working alone for more than two years (from 2015 to 2018) before I could show anything at all, which was hard. So I tried to do the rewrite gradually instead. I wasn't sure I'd manage it (it amounts to changing cars by replacing the engine, the tyres, the steering wheel, the bodywork one piece at a time... without ever stopping!) but it's done! The page you're looking at is a mix of the old code (the pages in the middle, unchanged) and the new code (the top and bottom bars).



▨ I've been trying to improve navigation on the site for a long time. The site has almost 400 locations, spread across many levels, which makes it something of a labyrinth. That came up a lot in the survey. As a result, most of you go through the "new posts", "my posts" or "my RPs" pages instead, which is a shame, because it limits the discoverability of new locations and posts, and sometimes takes away a little from the immersion.

I've tried several things over the course of the site's history:

• On the second version of the original French site (2009), a panel (bottom left) let you go to the main locations (Hogwarts, London...), and a menu on the left under the crest let you navigate within a given location.
• For the new version and the launch of HiO (2018), the logic was similar, with the floo fire giving access to the main locations at the bottom left, followed by a dropdown menu under the crest to navigate within a location. I never really liked that system, because getting from one forum to another meant going first to a menu at the bottom left, then to a menu at the top left, which struck me as fairly disorienting.
• The current menu (2024), in three columns, aimed to address that by allowing navigation within a single place. It raised other problems: 1/ it wasn't very accessible or practical on a computer, where you had to aim carefully with the mouse so as not to open another location by accident; 2/ it was very rigid and limited what administrators could do in terms of the number of levels and locations; 3/ it was very costly in performance (half the page load time went into computing that one menu); 4/ every location looks alike, which makes visual memory difficult.

▨ A new bottom bar. For a long time I wanted a single bar at the top of the site, so much so that the bottom bar became optional in 2024. I've changed my mind: quite apart from finding the site more immersive with a bar at the top and at the bottom, it's very useful for navigating, especially on a phone.

On a phone, an action bar at the bottom falls right under your thumb. I tried to follow interface best practices (from Apple and Google in particular), which recommend placing at most 5 icons there giving access to the most-used features. Based on how you actually use the site, according to the statistics, I chose the following:

1. Floo powder, a new menu letting you reach every location on the site (more on that in a moment).
2. New posts, the most viewed page on the site, which you check religiously.
3. My posts, the second most viewed page, which you can change to "My RPs", "Favourites" or "Drafts" in your preferences. All of those pages remain accessible from a dropdown menu in that same spot.
4. Owls, which have moved from the top to the bottom: it's one of the most-used features on the site, and having it under your thumb changes everything on a phone.
5. Search, as usual.

▨ As for the top bar, entirely rewritten, you'll find the usual remembrall and profile menu. I've removed the "quill" icon, which had become completely redundant now that the bottom bar is back. I've also moved all items and collections into a separate "trunk", which lightens the profile icon.

▨ Location titles are now displayed on phones. Moving the owls to the bottom is what freed up (by the narrowest of margins!) the space to show it on every device, whereas it used to be visible only on large screens. I think it was a real gap; my general aim is for everything shown on a computer to be shown on a phone too.

▨ The menu under the crest has been reworked: as before, it lets you go anywhere on the site, but it shows one column at a time, with images.

Like the previous one, it lets you reach absolutely anywhere from any page, but it seems to me to have plenty of advantages over its predecessor:

• it opens where you currently are, which makes it easy to get your bearings and, for instance, to look through forums one after another without getting lost;
• it's identical on computer and phone, and the images help with visual memory;
• it's more accessible and no longer requires "aiming" with your mouse;
• it's considerably faster than the previous one, since there's no longer any need to load everything at once (more on that later).

▨ Several past features you've missed are making a comeback:

• The ability to see your galleons directly in the trunk menu. I hope you'll like the little design I made for galleons, sickles and knuts, which I'll be rolling out across the site.
• The envelope and remembrall animations, which can be turned off if you prefer. I've also created an animation with the smoke swirling inside the remembrall, to try to bring a bit of immersion and magic; I hope you'll enjoy it.
• The shortcuts on the Hogwarts crest to go to the houses or to the hall. This feature isn't available on phones, since tapping the crest has to open the menu, and the links would be far too small anyway.

So a new page is appearing: floo powder, located (as it once was) at the bottom left of the bottom bar. Like the menu under the crest, it lets you reach any point on the site, and it's deliberately in the same place on every page, within thumb's reach on a phone.

It plays a slightly different role from the top-left menu, however, since it doesn't start from where you currently are but always from the "root" of the site (Hogwarts, London, etc.), which makes it predictable when you know exactly where you're going.

It also has two features you'll like:

• An instant location search, which lets you easily get to a place when you've forgotten where it is. On a computer, you can open the search at any time with a keyboard shortcut (Ctrl+K on Windows/Linux, ⌘+K on Mac), so regulars will be able to apparate from one place to another instantly.
• A shortcuts system: by clicking the star in a forum (or in the floo powder search), you can build your own shortcuts to your favourite locations and reach them directly from the floo powder.

I hope you'll like the flame animation in the background, which took quite a lot of work, meant to reinforce the immersive and magical side of the site. It's been tuned to be very light on resources (your phone or computer shouldn't heat up).



Here's a small addition, unrelated to navigation, that I had fun with: the site now has a real weather system (snow, rain, storms, falling leaves) over the location images, based on the season and on where you are.

Unlike the snow that used to fall non stop for two months, this will be real weather, with snowfalls, rain and so on, whose likelihood depends on the day and the time. This weather is the same for everyone.

So that you can see it, a storm is taking place in London right now and for the next few days.



▨ Location images are now visible on phones, following the same logic I mentioned earlier: everything present on a computer should be available on a phone too. A small space is set aside for them at the top of forum and topic pages.

▨ Background images are also shown in the menus, both in the top-left menu and in the floo powder. I feel they contribute a great deal to how those look, and they also help enormously in building the visual memory that lets you find your way among the site's many locations.

▨ Finally, the images are necessary for the weather.

▨ These images were generated by artificial intelligence, as we discussed at length in the topic devoted to it two weeks ago. Let me briefly recall the reasons.

The illustrations used since 2018 came from Pottermore: we don't have the right to keep them, and that alone was enough to require replacing them all. We had about thirty of them; nearly four hundred are needed to cover all the locations, and the new navigation rests entirely on them. Having them commissioned would, according to the quotes I requested, cost between 300 and 1,000 euros and take several weeks for a single image. As for royalty-free image banks, they offer neither corridors, nor classrooms, nor places that exist only in our writing. That leaves two options: generate these images, or show none at all. I chose the first, and I take responsibility for it.

Several of you offered to draw some voluntarily, and that generosity means a great deal to me. If I didn't take that route, it's first because I'd be very uncomfortable asking for such a substantial amount of work for free, but also because these backgrounds are subject to thankless constraints (a common style, colours matched to each theme, a consistent brightness, no overly striking detail near the edges), and I'd inevitably end up turning down images that had been given to me: I don't want to put anyone in that position, nor put myself in it. Finally, it would in all likelihood have covered a handful of images at most.

▨ I'd like to acknowledge the work of your administrators: they spent weeks on it, reworking each image until it matched the descriptions found in the RPs and fit the colours of the location. It's long, painstaking and largely invisible work.

▨ I've made these images entirely optional for those who'd rather not see them: a preference lets you replace them with a plain texture matched to the colour of the location.

As mentioned before, a poll will be run in the coming days to gather your views on whether to 1/ let people choose whether or not to display the images, or 2/ remove the images for all users.



▨ The preferences system has been entirely rewritten, and will make it easier for me to give you choices. You can already choose whether to show each animation individually (remembrall, envelope, floo flames, weather), whether to show location images, and whether to show the number of unread owls or notifications. You can also set the middle link (between My posts, My RPs, Drafts and Favourites).

▨ This work has also improved the site's performance. Page generation time has been halved, from 0.06 to 0.03 seconds on average. That may sound small, but it makes a real difference to how the site feels and to the load on the server (and to our resilience against bot attacks).

The amount of CSS (which handles page styling) in the rewritten parts has also been cut by two thirds.

The weather animations have been rewritten to be as light as possible on your devices: those of you who turned the snow off because it made your computer heat up can give it another chance!

▨ I've tried to address every accessibility recommendation, for people with disabilities, particularly those affecting vision or motor control. My thanks in particular to the few people who helped me. This subject matters a lot to me. Please do keep the feedback coming!




▨ I'm now going to gradually turn to rewriting the pages in the middle, to improve their accessibility, their layout and how they display on phones. First I'll need to work on a theme I'm happy with, which will probably take a little time.

▨ The pace of updates may also pick up now that the hardest part is done: I'll be able to publish new features as I build them. There are several of them that I think you'll really like. I plan to devote most of August and September to this, and I'm aiming to be finished by 1^st November, the date at which my real life will catch up with me!


I've tried to run every test, including on old devices (a 2013 Android and a 2017 iPhone), but there will inevitably be all sorts of little bugs I haven't spotted. I'm counting on you to help me hunt them down!

More generally, I'd be very glad to read your feedback and ideas.



First of all, I want to thank everyone who answered the survey last May, which was invaluable in helping me understand what you wanted and in writing my roadmap. There were too many responses for me to reply individually, but I think I'll be able to address many of the suggestions that were raised.

I also want to thank your wonderful administrators, with whom I've talked a great deal, who acted as beta testers and brought an enormous number of ideas. My thanks too to a few people who helped me test these new features and will recognise themselves!

Finally, I'd like to thank everyone who supports the site financially, helping to fund the server. Hosting costs have risen sharply in recent months, due to the crisis in memory and computer component prices, which makes things a little harder than in the past, and your support is all the more precious and appreciated for it.