[openstreetmap-website] "browse history" page hard to read (#187)

Martin Raifer notifications at github.com
Fri Jan 18 10:31:35 GMT 2013

I don't think that the too-large vertical spacing is the real problem here. In my eyes, the old layout (with its almost zero spacings) was also quite hard to read. Good typography uses whitespace to help the user reading the page (but its not so easy to get it right).

I think the history page probably didn't get much love while developing the new layout, as it does whitespacing "wrong" (IMHO) on a number of spots:

* as already mentioned: no separating structure between the individual elements (=versions of objects)
* huge amount of unused whitespace below the mini-map right of the "details-table".
* the left column of the "details-table" uses a variable width (~1/6 of screen width) which can introduce a large amount of horizontal whitespace between the text in the two columns. This makes it very hard to read on wide screens. Better using a fixed (em-based) width left column and letting the right column use the rest (incl. the whitespace below the mini-map).
* the "details-table" uses a mixture of whitespace and horizontal lines to separate its lines from each other. "Good" typography very seldom uses horizontal lines (apart from separating header/footer from body), as those do only distract the user from the content. Instead, some vertical whitespace is used to guide the reader through the lines of the table. IMHO, the current amount of vertical whitespace is enough to provide a good table layout, so no vertical lines are needed (an could thus be used for separating the individual object versions).

current object history page: ![osm-historybrowser-current](https://f.cloud.github.com/assets/1927298/77680/0f77bfe8-6154-11e2-9f48-4ed5a9b27b9c.png)

*better* object history page: ![osm-historybrowser-better](https://f.cloud.github.com/assets/1927298/77681/14714e9c-6154-11e2-89f9-8642856b3f46.png)

Note that I'm not a typography expert, but those are glitches that I can identify even as a layman. Maybe @samanpwbb can give us some input here?

Reply to this email directly or view it on GitHub:
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20130118/0bb7e83a/attachment.html>

More information about the rails-dev mailing list