// Internet Duct Tape

CSS Upgrade Complete

Posted in Internet Duct Tape News, Technology by engtech on November 27, 2006

I think I’m done upgrading the CSS design of the web site / blog.

I am finally done updating the blog design. :)

Thanks to the people who left comments and suggestions: vuee, Kristin K. W., Ben, adam, timethief (especially), roy, mpb, Mr Angry

And thanks to Kenji at Beats Entropy for the initial comments on my very horrible first draft while hanging out at my house.

Some thoughts:

  • I was surprised to find that the Sandbox theme was missing some selectors that would have been useful.
    • body .post-id
    • body.single .entry-meta span selectors for categories, comments RSS feed, trackbacks (would have made it very easy to add icons to the entry-meta).
  • I really like the icons, but do they slow down the page load too much?
    • Icons aren’t transparent on IE6 because of an IE6 bug (surprise). Too lazy to convert them all to gif.
  • Page excerpts won me over. It’s much easier to browse through lots of posts to find the one you’re looking for.
  • It know it’s fixed width. I also hate fixed width sites, but it was so much easier to do the design. Text and flickr images look better when the column is 200px.
    • It was designed so that it kind of fits on 800×600, with just the sidebar obscured. I wanted a wide sidebar so this was a better compromise than the page look very squished at 800×600.
    • It looks best 1024×768.
    • Technically, you can read the main column on 640×480.
  • The cat had to go. If you miss him, you can read more.

“It’s still missing a something…”

 

 

“It looked a lot better when my picture was on the front page.”

36 Responses

Subscribe to comments with RSS.

  1. billg said, on November 27, 2006 at 11:27 pm

    Looks fine. Fixed width used to annoy me, but not since I bought a 20-inch screen. As screens get wider we will see fewer people automatically running browsers full width, because it is difficult to read long skinny lines of text. Designers of fluid schemes need to fix a min- and max-width to prevent that.

    Along similar lines, the navigation links in the header go a bit wonky when I bump up the text size. Wouldn’t it be nice if CSS allowed us to set minimum and maximum font sizes, too?

  2. roy said, on November 27, 2006 at 11:58 pm

    Good point on that billg. And if you had a lot of spare time, you could detect the user’s resolution, and set the width accordingly. Never thought about how my site looks on a 30″ monitor running at a really high rez.

    I hate fixed width, but I agree with you, a long skinny line on a 30″ monitor would be horrible. I guess my true complaint are for the people that produce a column of text that’s really narrow, and that point, you go to the other extreme where you find yourself scrolling down the page every few seconds.

    It’s a ying yang thing :)

  3. engtech said, on November 28, 2006 at 12:05 am

    Yeah, unfortunately because of the way I do the header bar (it’s really a sidebar widget repositioned instead of text within the header) it doesn’t scale well if you resize it.

  4. engtech said, on November 28, 2006 at 12:06 am

    This isn’t too narrow, I hope. It’s 600px wide for the post entry. I could bump it to 650.

  5. Collin said, on November 28, 2006 at 1:34 am

    I run Google Analytics on my hosted blog and it has returned a couple of interesting stats:

    Only 9% of my visitors are using 800×600 or below. 35% are at 1024×768. All the rest are higher width resolutions. None are below 800px width. By fitting the layout to “about” 800px you’re only eliminating the very oldest of PCs/resolutions and those really should think about upgrading or using a text browser.

    What’s more worrying is that 55% of the visitor to my site are still using IE6. There are a couple of IE layout issues that you might want to investigate (or not!):

    1. The text is larger in IE than in Firefox.
    2. The word “Blogging” in the header. The g overhangs the bottom of the black box where it doesn’t in FF.

    Overall I think you’ve done a fantastic job of styling Sandbox, creating a clean theme with a great “techy” bent.

    Collin

  6. raincoaster said, on November 28, 2006 at 1:34 am

    It’s all right. You’ve done a good job making sure us narrow-monitor losers don’t have to scroll to get to the sidebar. Very clean design.

    I do think in your header your small white dividers are just a bit too tall, but that’s just a tiny quibble.

  7. Collin said, on November 28, 2006 at 1:36 am

    Oh, I don’t know if something is hanging it up, but the blog is *very* slow to load in IE. FF is great though. There’s one of the feedburner links missing in IE too.

  8. Collin said, on November 28, 2006 at 1:36 am

    Ok, ignore my last about the feedburner links… Sorry, I’ll go away now!

  9. timethief said, on November 28, 2006 at 2:04 am

    With the exception of the large white divider lines between page tabs that I previously witched about and still recommend eliminating, ***I like it.***
    (1) The background blue is a really soft and pleasing blue. YES!
    (2) The intense Barbie style fuschia pink lettering has been toned down nicely. alleluia>
    (3) The icons are very kewl and they didn’t take long at all to load on high speed [she observed covetously].
    (5) Do you foresee a need for bumping the post entry part could be bumped to 650 but for what purpose? And, if not then why do it?
    (6) The cat is very seductive. All cats are seductive and manipulative. If he will not be happy unless he is included and if you are willing compromise your anonymity just to please him then maybe you could make an icon from the photo above and replace the icon next to “About me” with it.
    (7) But HO! what is that skinny little stray white line at the very bottom of the black in the footer box. Nuke it! I say. ;)
    (8) Also the “w” in the little WordPress Resources icon has floated too far to the right.
    (9) Why don’t our avatars display on the comments. Have you done something to ensure they don’t appear or is this a glitch?
    (10) Re: excerpts/she nods.
    Thanks for the opportunity to shoot from the lip.;)

  10. billg said, on November 28, 2006 at 2:21 am

    Width: I wouldn’t change it. I’ve seen some usability studies that say people are most comfortable reading lines that are about 45 characters wide, which is usually 12-15 words. So, the question of “How wide is my design?” is one thing, but the question “How wide are the columns inside my design?” is another thing.

    IE6: It’ll be out there for a couple more years, at least.

  11. vuee said, on November 28, 2006 at 8:05 am

    Nice! My keyboard dancer knows which link to follow to find yours.

    Now, why does the stupid smiley face (It isn’t the Chesire cat) have to stay in wordpress themes (lower left)? I know it tracks something for wordpress.com (?) but for cross-cultural appeal I would try to hide anything that looks like a spy.

  12. Lord Chatterly said, on November 28, 2006 at 8:53 am

    I much preferred the previous version of your blog.The cat should be put back in.

  13. roy said, on November 28, 2006 at 9:39 am

    I agree…bring the cat back! Btw, the second photo of the cat reminds me of those cheesy graduation photos where you’re tilting your head and looking intellectual hahaha.

  14. engtech said, on November 28, 2006 at 10:09 pm

    Updated the navbar at the top.

  15. engtech said, on November 28, 2006 at 10:35 pm

    and the cat came back, the very next day.

  16. timethief said, on November 29, 2006 at 8:02 am

    YAY! Those ugly dividers are gone. YES! to the nav bar changes. And of course you couldn’t say “no” to the cat – you old softie, you. ;)

  17. engtech said, on November 29, 2006 at 10:03 am

    I de-pinked the blog a bit. Now it’s more of a bright purple.

  18. roy said, on November 29, 2006 at 10:15 am

    Yay for the cat! :)

  19. engtech said, on November 29, 2006 at 11:36 am

    Holy crap does doing a CSS design ever take a lot of work. I used to think it was ridiculous when people charge $300-$500 for a site design. But it takes forever. :)

  20. timethief said, on November 29, 2006 at 10:06 pm

    You’re right engtech. The pink font has now turned into a bright purple :P yuck! I think you could try changing it to a rose colour or an orange and see how that suits.

    Web designers are most certainly artists who deserve to be properly paid for the time and skill they put into their work. But like any other professionals we watch from them from sidelines working so skillfully and swiftly that it appears what they are doing is easy. Consequently, we undervalue what they do.

  21. engtech said, on November 30, 2006 at 12:42 am

    That purple seemed like a good idea late last night.

    I’ve switched it to bright blue. I might go further to a different shade of blue… I’m specifically looking for a blue that pops out on white background, and doesn’t look too close to black.

    Good tool: http://www.visibone.com/colorlab/

  22. timethief said, on November 30, 2006 at 2:16 am

    I like this lighter and brighter blue that pops out at me and that gawd awful purple has thankfully disappeared. :)

  23. Daijinryuu said, on November 30, 2006 at 12:29 pm

    The one thing I also hate about Sandbox is the lack of avatars showing. I even complained to the webmasters, and they said it was because of my CSS!!! Nuh-uh, Sandbox w/out the CSS doesn’t support avatars, period!!

  24. engtech said, on November 30, 2006 at 7:04 pm

    I might see if I can reinstate the avatars. I’ll look at it today.

  25. engtech said, on November 30, 2006 at 8:11 pm

    Yeah, it isn’t CSS that’s removing the avatars from Sandbox. They aren’t in there at all.

  26. jaybird said, on December 04, 2006 at 10:35 pm

    Msybe too boxy?

    It’s plain, but I like how clean it is.

    Colour scheme is a little on the boring side.

  27. engtech said, on December 05, 2006 at 3:08 am

    I got them to fix a bug with the WP CSS option so that it supports the Firefox “rounded-corners”, but it *really* doesn’t look good for outlines.

    I could use images, but I don’t want to put too many images inline. The mini-icons slow load times enough as it is.

    and holy crap you posted a lot of comments today. Did you just remember I had a blog over here?

  28. engtech said, on December 05, 2006 at 9:49 am

    Pretty cool site for transparent texture background images:

    http://realia.free.fr/stored/fabrique/index.html

  29. Mikle said, on December 05, 2006 at 11:40 pm

    WOW. Nice
    Opera +
    IE6 +
    FF +
    :)

  30. engtech said, on December 05, 2006 at 11:54 pm

    Does it look good on Opera? I only tested it on FF and a little bit on IE6 (to see if sidebar breaks).

    I wish I’d known that IE 6 doesn’t handle PNG transparency before I uploaded all the images. GRR.

  31. engtech said, on December 07, 2006 at 2:03 am

    This is a great looking tool: http://www.getfirebug.com/

  32. jaybird said, on December 07, 2006 at 7:53 pm

    New textures are good, things don’t look as flat.

    The ‘comments are welcome’ box doesn’t show up underneath the leave a comment box for all messages.

  33. engtech said, on December 10, 2006 at 2:36 am

    The comment box is a fixed position above the bottom bar, so if the sidebar is longer than the post it doesn’t line up.

    collection of CSS skins for Sandbox: http://ntuat.wordpress.com/

  34. Ariane5 said, on January 01, 2007 at 3:41 am

    Awwww..your cat is so f****** CUte!

  35. […] also give you optional CSS code (you will need the CSS upgrade to use — CSS is not required for the upgrade to […]

  36. […] also give you optional CSS code (you will need the CSS upgrade to use — CSS is not required for the upgrade to […]


Comments are closed.

%d bloggers like this: