Using Coconuts - a Pythonic Blog

Username:

Password:


Don't have an account? Get one!

Site Theming Issues

Those of you with eyes may have noticed the new site layout. I have gotten a fair amount of complaints about this, since the new look/feel is nowhere as shiny as the old one, but let me explain my reasoning.

The old layout was requiring users to download aroung 500 KB of data for every page load. This is, needless to say, pretty ridiculous, since the primary download was the around 300 KB background image, which adds nothing to the content, if not even drawing attention away from it (sorry, jwalsh). Secondly, I realized that between the side "panes" of empty background and the main content, I had between two or three separating "lines", which, while illustrating my underlying <div> structures, didn't really do much for the design in and of itself. Thirdly, the fsufitch@ubuntu:~$ banner was a rather useless use of "real estate". There are other reasons, but all these plus a night I couldn't sleep too well equals the design you now see.

http://blog.opensourcenerd.com/upload/cat-ew

Or, in a website's case: "rm it! rm it! rm it! rm it! rm it! rm it!".

I know it's not the prettiest thing, and I plan to remedy that. So, on that note, some lessons learned:

  • Prettyful landing page is prettyful.
  • Non-centered pages are not very prettyful.
  • Pull-down menus are good. They conserve screen space.
  • New theme will almost definitely be dark, since some of the images in my blog using transparency are currently broken.
  • Need to put headers in the right spots, and meta tags on all pages.
  • Clear-cut CSS separation between overall site theme, and blog-specific rules.
  • Absolute positioning only if strictly necessary.
  • Font sizes should be scaled by em values (maybe?)
  • Sorry, 5% of my readers, I will no longer make sure IE looks decent on my site, and a feature or page will be considered supported if supported by Mozilla Firefox, Google Chrome, Safari, and Opera. As such, you all will get a warning whenever visiting my site that your browser sucks.
  • That being said, even if the browser supports CSS3, or has a fast engine, no browser is happy with heaps and heaps of it...

At this point you might be thinking "okay, that's all well and good, but where is the actual new theme?" Well, I'm hoping to have some input from you first. Anything is good, really, from suggestions like "I wish your menu were rendered upside-down" to quick sketches of designs to (maybe) full CSS demos of a site, though that would be overkill.

A couple of notes, though.

Nobody should expect credit on every single page in the style of "Layout copyright such-and-whom". I am not going to use any design in exclusiveness, and unless you want me to claim intellectual property for your ideas for my site, then don't give them to me. I'm serious.

http://blog.opensourcenerd.com/upload/tumbleweed-anim

People who want to help now.

But really, I will thank those who give me the best ideas. Just don't expect auto name-promotion.

Secondly, this is not an opportunity for blog feature requests/wishlisting. I know I need a list of all uploads, a BBCode preview button, comments via AJAX, using Atom feeds instead of RSS, having a comment feed, etc etc etc. However! The WSGI infrastructure of my blog is getting... clunky. Plus, I am unhappy with Durus and a couple other things I'm doing, but that's a post for another day. For now, let's leave it at strictly stylish changes.

So, ideas?

River Tam says... source permalink

Nope, sorry.

on 2010-01-09 02:12:22

Fillip:

I'll send you a sketch of a design sometime soon. But first, a couple suggestions:

1. Some kind of borders around images in your post. Whether it fades to transparency or just has a simple black border, I don't really care. Just don't leave the images without any separation from the background on your page.

2. Animating the tiny things makes everything look so much smoother and shinier. For example, you might consider having the tabs at the top fade to a slightly darker color when you rollover them. Do this in flash, javascript, or CSS3, it doesn't really matter. Just don't do it too much :)

3. Curved edges. I like them.

4. Fix the email image in the bottom of the page! That really annoys me...

5. Text boxes: Inline labels = Amazing. Do it!

6. Simple dark gradient background, perhaps with a ~/ embossed in the top left.

7. No fixed footer please! (unless you put some kind of background on it.)

8. Theme buttons!

9. If you have the navigation on the top left, put the page title on the right (i.e. "Using Coconuts" or whatever its called)

10. I am by no means an expert (or even advanced) at web designing, but when in doubt, Smashing Magazine [smashingmagazine.com]!!

on 2010-01-09 02:55:38

Oh, and another thing: the home page is epic.

on 2010-01-09 03:01:36
bvargo says... source permalink

Does your server not support the If-Modified-Since HTTP header? If it does, then the background image should only be loaded once by each client until the cache is cleared, unless you were dynamically serving the image for some reason.

Fancy new site. I like it, especially the homepage. My only suggestion would be to center the links on the homepage and possibly center the menu tabs at the top as well.

Also, the email image in the bottom right of your page (http://blog.opensourcenerd.com/email.png) [blog.opensourcenerd.com] does not load properly (mentioned above). If I use your normal domain (not the blog subdomain), the image loads just fine.

on 2010-01-09 04:30:39
New Comment
You're not logged in! Log in to be awesome!
Format: BBCode ReStructured Text

Author (max. 20 characters):