Taginfo gets a new layout

Some of the most often seen pages on taginfo are the pages describing a key. To be more specific, the “Overview” tab on that page. And it has never really looked that great. The layout is strange and a lot of prime screen real estate is wasted.

And to make matters worse, the layout totally breaks on small screens:

So it was high time we did something about it. The new design is built around fixed size boxes containing different information about that key, as you can see here:

The boxes will wrap as needed, so the whole thing is still reasonably pretty on small screens:

To fit the values distribution chart into a box, it had to change. It uses a 3D layout now which shows a lot more information. I threw in a small version of the chronology chart and instead of just showing the image from the wiki, a list of wiki pages is shown that link directly to those pages. So there is a lot more information right there on the overview page.

Oh, and all of this goes for the tag pages and the relation type pages, too. They have also been updated with the new layout.

An added benefit of those boxes is that we can have more or less of them as needed. For instance when there is no wiki page about a key, the wiki box will not show up. For some tags (like website or wikidata) an extra box will be shown with links. I am already thinking about more boxes to add, but this will come at another time.

The new layout is now online, try it out at taginfo.openstreetmap.org.