Possible tweaks to the appearance of the website

[Paul Morris]

Greetings LilyPond developers,

Over the last few weeks I had some time and found myself experimenting with
the appearance of the LilyPond website, especially the main navigation
bars/menus at the top of each page.  You can see a "sketch" of what I've
come up with at the following URL:
(Take out the two spaces, inserted here to help prevent web crawlers from
finding and indexing these temporary pages. A robots.txt file is also in
place to prevent this.)

http://clairnote.org / lilypond-web-demo/

No big redesign, just some fairly subtle tweaks to the current one. If those
who make such decisions like what they see, I can submit the changes through
the proper channels.

Let me know what you think.  Some notes follow.

Cheers,
-Paul


Notes:

- Almost all the changes are CSS changes (presentation rather than content).

- I've used CSS gradients instead of background images wherever possible. 
This eliminates the need to download 23 background image files, providing
some small benefit to page load times and server load.  CSS gradients are
now well supported by browsers, except for IE9 and earlier (which should
just display a solid color fallback). See: 
http://caniuse.com/#feat=css-gradients  
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

- The gradients of the main nav bar are more subtle, like the gradients in
other places. 

- Active headings are a darker shade rather than being a reversed gradient.

- The second nav bar is simplified to one consistent color, making it
clearer which is the active heading.

- The home page link/heading is "LilyPond" rather than the lily icon. Since
LilyPond is not a big-budget commercial brand with a well known logo, having
"LilyPond" here seemed like a good idea.  Also the icon is a bit too tall to
fit comfortably in the space, and if shrunk for a better fit it would be
less clear what it is. The width of this link/heading now matches the others
instead of being smaller.  

- The search box is slightly smaller and light green to give the main nav
bar a more smooth and solid look.

- The light-green-to-white fade in the background is in both top left and
top right corners of the page. Since the site is a centered design this is
more symmetrical. The white on green diagonal staff is removed for a simpler
and less distracting look. (This is done with CSS gradients, but ultimately
images may provide better results in some browsers (e.g. Chrome)).

- The CSS file needs some clean up, since previous code has mostly been
commented out for now.



--
View this message in context: 
http://lilypond.1069038.n5.nabble.com/Possible-tweaks-to-the-appearance-of-the-website-tp170094.html
Sent from the Dev mailing list archive at Nabble.com.