I set out to do a quick and dirty typography overhaul to make things
more consistent and a bit cleaner, but I kept running into things I
didn't like, so this lead me down something of a rabbit hole of design
tweaks to the OSM site.
Goals here are to have better content hierarchy, better vertical
rhythm, more consistent UI, cleaner markup with less tables, all while
keeping the basics pretty much intact. There are a lot of things I
didn't touch even though they need to be updated (lots of tables where
stuff shouldn't be tables, mostly).
Basic overview of changes:
I added a new persistent header that helps segment pages. It's now
a lot easier to know what you're looking at. The header has a page
title, a description, plus a submenu of actions.
There is now a pattern of 20px/10px margins and padding for more
rhythm and breathing room throughout the site.
I know there are other problems here or things I've missed - would
love another set of eyes to look over this! I am still getting comfortable
working on the site - it's my first time ever digging into a ruby or rails
so I'm not familiar with the templating language yet.
A number of small usability improvements / fixes, including:
* Small inconsistencies in spacing fixed
* Links now visually differentiated from headings in the menu
* Search bar actually looks right (or at least not as broken) in IE7 now
* New heart on the donate button + larger click area on the donate button!
This adds a new class to the body which we can use to do more styling
in CSS rather than erb-embedded Ruby. The only visual change is that
there's now a subtle transition for homepage links becoming active.
This changes the behavior of the editing tabs in three places. Instead
of the current hovering behavior, you can click on the arrow and get the
drop-down menu. Any click outside that on the page will deactivate the
menu, following the UI paradigm of most desktop environments.
This also simplifies the javascript code significantly.
The left bar is a bit of a kludge of random items right now, but it's a
little better having the GPS Traces item there, because it now makes the
top bar only items that are actually related to the map state.
