Congrats and thanks to saveth3day for a great new logo for
An Animal-Friendly Life:
(this is not the final version, but very close)
Now it's on to the site redesign competition:
My new AAFL Blogger template should look great in the latest versions of Firefox, Safari, and IE. Camino, Opera, and the others should look decent, too, but I'm more concerned about the first three, marketshare being what it is and all.
I want to build something around that based on the
current design, but much cleaner, simpler, and more elegant, utilizing the slick metallic button-like motif saveth3day went with for the logo design. Two other sites that incorporate this bright metallic look to pleasing effect are
CafePress and
AlterNet.
This
test site gives an idea how I want the logo to look, though maybe smaller, and I'm interested in left-justifying it to allow for banner advertising space or a quote off to the right-hand side (see the AlterNet link below for an example).
Yes, I'm using Blogger, and ideally all this would be a template redesign from the ground up to allow me to continue publishing blog entries without a beat. Best to start from scratch, stealing my basic ideas from
the current site, but getting rid of all my HTML and CSS novice coding and otherwise cleaning this up to higher standards.
1. I'm strongly considering going from 3 columns to 2, for a page no wider than 700 or 720, probably split upwards of 200 (wide enough for 160 or 180 ads... whichever it is) for the sidebar and in the neighborhood of 500 (wide enough for 468 ads, basically) for the main column.
The site is currently too "busy," I feel. I hope to move a lot of my content off of sidebars and to other pages or links. The one remaining sidebar would include easy subscription instructions via FeedBlitz and RSS (as it is currently, only easier for novices to understand what to do), an ad space for Google word ads, an ad space for one Amazon display ad (such as the ones that are currently in the left sidebar as "RECOMMENDED"), the Recent Posts and Archive sections from the left sidebar, and the Google search, though I'm open to using something that actually WORKS.
If there's room, I want to put more interesting logo-ized links to "Meet Your Meat" and other content at the site. I'm on the fence about bothering to keep the Flickr photo shuffler. It's kinda neat, but... Probably something the site doesn't really need. I will probably zap out the "green singles" ad, too. Too big, flashy, and I don't think I get a lot of clickthroughs on that, anyway.
I'd like to shift from using plain text headers for each of these sections and start using green 3D metallic buttons that match the look of the logo (kinda like the navbar, below). See
AlterNet again for examples of this, though the shaded boxes for the actual sidebar content are somewhat optional, depending on how it all ends up looking.
2. I'll need a couple other pages in addition to "home," all based on the home page template. These will include an "about" page I can add text and HTML to so I can introduce the site and its contributors, linking each contributor name to his/her own "about" page with identical formatting but with content about them instead. So that's really an "about"
template page, I guess, but it's just a variation of the home page that doesn't allow for posts or dates, since the sidebar should be identical to the home page. Then there's the "links" page, moving all my links to a completely separate page that's easy for me to update with basic HTML code, separating them again with a better looking design, either like
AlterNet's RSS feeds page (only with shades of green instead of gray), or something altogether new and different, but very clean and easy to navigate and search. This page, and all the others should have the same Sidebar with Recent Posts links and Archives drop-down menu, search form, etc., just like the main page.
3. I'd like my navbar to have the green look of CafePress (altered to best match the logo, which will hover above it on the page) but to have the button separation and hover and selection highlighting of AlterNet (lightening on hover and darkening on selection). In both cases, the white text looks great. Maybe we could go with all lowercase letters for mine, though, to match the logo as well. And instead of the black button dividers used by AlterNet, I was thinking white, so that the buttons are "connected" but completely separated visually with that very thin line. I don't like the incomplete divider look of CafePress as much.
4. Links on the navbar will include the following:
home (the main page) | about (as discussed in 2) | contact ("mailto" code) | shop aafl (link to
http://www.cafepress.com/vegemporium) | links (as discussed in 2) | podcast (link to
http://aafl.blogspot.com) | donate (the PayPal button on the current site should become a navbar link formatted like all the others)
I'm debating whether to include a subscribe button/page up there, but it will probably be easier to do it in the sidebar, or both... AlterNet keeps the e-mail subscribe at the top of the sidebar, where it's easy to see, and has a link in the navbar to all their feeds, but I would only be putting in all the feeds for automatically subscribing through bloglines, newsgator, yahoo, etc. Maybe flat, dark-green menus could drop-down from the buttons to offer multiple choices for the navbar links? I'd be willing to pay extra for this... Could use cascading menus off the navbar for the "About" pages and "Links," too. That'd be a lot easier for the person that is navigating the site wouldn't it? And it would be slick, too. I'm definitely open to that.
5. Post dates would be large and sans serif but not green. I want them to stand out so that it's easy to scroll through and find a date, but I'm thinking more of a compatible shade of gray, much like the post titles at this
WordPress page. I like the font shape and size, too, assuming those work for my site. Something in this vein is what I'm going for. Doesn't have to be exactly the same.
6. Post titles would need to go sans serif. I really don't like serifs all that much, and the logo is sans serif, so let's keep it consistent, unless serifs become necessary to further distinguish text. I want those titles to be a nice shade of dark green, kinda of like what's at the current
test site.
7. I like how most of my test page hyperlinks are a readable green but change to different shades of green on hover and visited status, so I'd like to continue with that theme.
8. Body text can be black.
9. I like how my current version of the blog puts the byline and post time below the title, but I don't like how I rigged it up. It looks too much like part of the post and it should be part of the header. I'd like it to be distinct from the body text. It should look more like a subtitle to the post title, so play with fonts, font sizes, color shades, etc.
The look will be:
Date (Bigger, but less bold color)
Title (Smaller, but still header size, bold font, bold green color)
Byline and time stamp (smaller, much more subtle, in the vein of the date, but perhaps a different color that blends it up with the post title, but still easy to find and read)
10. I want to keep using my favicon graphic in the address bar
11. If you can figure out how I can start using categories (a la WordPress, or
SuperVegan, to be specific), I would be forever grateful. I don't so much care about keeping my category tags to del.icio.us.
12. Though, I would like to add more of those icons in the footer for permalinking, e-mailing story to a friend, commenting, saving the story to del.icio.us (and all the other services like digg), etc. The contact link would be taken out, to be replaced by the navbar link, of course.
13. The website title bar should be changed to:
<title>An Animal-Friendly Life: Vegetarian news, views, reviews, links, and podcasts</title>
14. I'd like more metadata (vegan, vegetarian, animal-friendly, animal, etc.), used in a way that is web kosher and legit, but effective in search engines picking up my entries)
15. I'll need to keep my various footers and scripts, like the Creative Commons, Statcounter, copyright, etc.
I'm sure there's stuff I'm leaving out, so please hit me with your comments, questions, and suggestions. The current template source is attached as a text file, for your reference.
I'm willing to pay well for a site that really looks slick and professional, on par with the likes of AlterNet, but still allow me to update with new links and removing old ones, adding new "about" pages and removing them. Basic HTML work like that.
