SITE REVIEW: Perpetual Thursday

  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

I'm hoping to get some comments on the general look and feel of my blog, Perpetual Thursday:

I'm not really concerned with the content itself (though if you decide to comment on it, that's fine), just the style. It's the fifth template I've used on my blog (the first one was a Blogger default, the second was the same as the first, but I heavily edited it, the other three, including this one, were done by me from scratch), and I think it's the best so far.

A quick note: I know it doesn't validate. But, in my defence, the template itself does validate - it's Blogger (and one or two poorly formatted posts - my fault) that causes the problems.

Also, this is my first foray into designing anything that isn't fixed-width, so any comments on the "flexible-ness" of it are especially appreciated.
  • joebert
  • Genius
  • Genius
  • User avatar
  • Posts: 13511
  • Loc: Florida

Post 3+ Months Ago

I had to make sure I do my part to discourage a "Perpetual Thursday".
No I'm kidding, but I couldn't comment without looking at the site. :)

First, you might as well forget about getting a Blogger blog to validate as XHTML. Unless you can get Blogger to change the ampersand "&" in some of their URLS to & it's never going to validate. You'll keep getting errors or warnings that say somthing like this because of the missing "amp;".
&postID is not a valid entity

The link color on the background image as shown below is going to be hard to read for some visitors. My eyes had to work a little to adjust & I have a tendancy to use colors without enough contrast myself.

Actually, when you look at this screenshot you can see that even the JPEG processor had a hard time telling the difference in some areas.

I generally believe that menu or navigation sidebars should retain a fixed width no matter what size the window is, but that's personal preference.

/* As this is a single-page site, all the CSS is included in this page, instead of in an external file. */

Good thinking. ;)

I'm guessing you haven't gotten around to combining some of the CSS rules yet.
Code: [ Select ]
  font-family:Georgia, Times New Roman, Times, serif;

/* could be */
  font: normal 0.8em Georgia,"Times New Roman",Times,serif;
  1.   font-family:Georgia, Times New Roman, Times, serif;
  2.     font-size:0.8em;
  3. /* could be */
  4.   font: normal 0.8em Georgia,"Times New Roman",Times,serif;

I'm curious as to why you're using somthing like
Code: [ Select ]
<strong>Links (Non-Blogs)</strong><br />

As opposed to
Code: [ Select ]
<h6>Links (Non-Blogs)</h6>

Come to find out, there isn't a single <h1-6> element on the entire page. :scratchhead:

I noticed you have a tendancy to use class attributes on elements with few or no non-text decendant elements.
This is needed in some cases, but if you can help it try to reserve using class attributes to container elements. It's easy to target decendant elements from there.

Code: [ Select ] div p a {
    color: #654321;
} address small a {
    color: #123456;
} address small {
    display: block;

<li class="post">
        <p>Lorem <a href="#">Ipsum</a></p>
        <p>Lorem <a href="#">Ipsum</a></p>
        <p>Lorem <a href="#">Ipsum</a></p>
        <p>Lorem <a href="#">Ipsum</a></p>
        <p>Lorem <a href="#">Ipsum</a></p>
        <small><em>Lorem</em> <a href="#">Ipsum</a> dolor</small>
        <small><em>Lorem</em> dolor</small>
  1. div p a {
  2.     color: #654321;
  3. }
  4. address small a {
  5.     color: #123456;
  6. }
  7. address small {
  8.     display: block;
  9. }
  10. <li class="post">
  11.     <h2>Title</h2>
  12.     <div>
  13.         <p>Lorem <a href="#">Ipsum</a></p>
  14.         <p>Lorem <a href="#">Ipsum</a></p>
  15.         <p>Lorem <a href="#">Ipsum</a></p>
  16.         <p>Lorem <a href="#">Ipsum</a></p>
  17.         <p>Lorem <a href="#">Ipsum</a></p>
  18.     </div>
  19.     <address>
  20.         <small><em>Lorem</em> <a href="#">Ipsum</a> dolor</small>
  21.         <small><em>Lorem</em> dolor</small>
  22.     </address>
  23. </li>
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

ok I'm certainly not going to be as helpful as joe, but here goes.... first - padding. There seems to be no padding at all, anywhere? Second, I agree that the sidebars should be fixed - only the main section should be fluid. And the fluidity thing works great.

also I see from joe's screenshot image that the divs holding the content are meant to be transparent - well they're just gray blocks in IE6. I've mucked around your code a little bit but I'm not sure what you're using for background in those divs - you can try jameson's technique (mentioned in another post somewhere, don't know where exactly) of saving a single half-transparent black pixel as png, and tiling that to get a transparent div.

also I agree with the link color - even on the gray background that dark blue is really hard to read.... make it a real pale blue maybe?
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

celandine wrote:
...saving a single half-transparent black pixel as png, and tiling that to get a transparent div.

Actually, that's what I'm doing. I suppose I should have mentioned that I had not hacked it to work in IE6- yet.

I'll look into all the things you mentioned, joebert, and try to fix them up - and I'll see what I can do about the links in the sidebar. Thanks for the comments and advice!

Oh, and as to my not using <h1-6> elements - I really don't have a reason for not using them, and looking back, I'm not sure why I didn't.

Post Information

  • Total Posts in this topic: 4 posts
  • Moderator: Website Reviewers
  • Users browsing this forum: No registered users and 6 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.