// Internet Duct Tape

Presenting: Black and Blue and Read All Over

Posted in CSS and Web Design, Request for Comments, Technology by engtech on July 18, 2007

I’ve been tweaking my blog theme furiously in preparation for the Sandbox CSS Design contest. Again I have to say that I have the utmost respect for web designers. Making a good blog design that looks nice is hard work. But I feel that I’ve gotten a lot better since I touched CSS for the first time, and the recent incarnation of IDT has many improvements over the existing style.

  • Top header bar uses a much better technique for the buttons
  • Global style reset so it should look the same between all browsers
  • Support for asides (not that I use them often)
  • Support for pretty-printing
  • Georgia headings and Verdana text (thanks to these tips)
  • Styling on the navigation links between posts
  • Still readable in 640 width and 800 width
  • General reduction in hacks

So please step out of your web browser and let me know about any pages that are looking wonky. Please cut-and-paste the link to whatever page looks wrong and mention the web browser you are using.

In general site news I’ve gone back to having a front welcome page, instead of having the latest post on the front page. I feel it gives people a better introduction to the site. I desperately need to weed my categories, but that’s a job for another week.

29 Responses

Subscribe to comments with RSS.

  1. Ian Stewart said, on July 18, 2007 at 4:13 pm

    CSS design is indeed a bitch. But I tell you, It’s far less bitchy than having to purchase software to manage a decent design using tables. 1996′s killer websites probably killed a few designers.

  2. engtech said, on July 18, 2007 at 4:28 pm

    I really like your CSS redesign of Sandbox.

  3. Ian Stewart said, on July 18, 2007 at 5:10 pm

    Thanks, Engtech. I hope the judges like the entry I’m working on. And I’m looking forward to seeing yours (all of them, in fact). May the best sleep-deprived designer win! :)

    This is Sandbox here, right? I really like the buttons you’re using for the previous links above the comment area. They’ve got some authority to them.

  4. Trent said, on July 18, 2007 at 6:32 pm

    This design serves you content perfectly and to be honest, I am a little jealous of your design ;)

  5. engtech said, on July 18, 2007 at 7:50 pm

    @Ian: I know what you mean about sleep deprived. Frig… design takes forever. Fixed width can be a pain in the ass… well, until I figured out:
    width: 100% – 20px; to compensate for the padding.

    So far this is the only design I’ve done for the competition, but I’m going to try to do one more quicky under the wire. Unfortunately the icons aren’t by me so I can’t include them in the design.

    @Trent: thanks!

  6. steve said, on July 18, 2007 at 9:37 pm

    Mighty impressive! Looks very nice…I love it.

    –steve

  7. Mr Angry said, on July 19, 2007 at 12:11 am

    You just can’t stop yourself, can you? You’d be doing this tweaking even if there wasn’t a competition!

  8. Jalaj P. Jha said, on July 19, 2007 at 1:02 am

    Hi engtech! Your site design has indeed improved in last few days…

    Icons will not come in your way to participate in the contest they were anyways manually added in Text widgets which would not be there when designs are viewed by contest judges.

    The pages shown by “Pages” widget however needs to be properly placed as buttons on header. The link below is for a page as visible on a dummy site.

    http://marketingtraps.wordpress.com/files/2007/07/idt1.jpg

  9. Jalaj P. Jha said, on July 19, 2007 at 1:13 am

    Sorry!, not the Pages widget but the Page links that exist in navigation menu (currently set to display:none)

  10. engtech said, on July 19, 2007 at 8:31 am

    Hi Jalaj,

    it doesn’t use the pages widget, instead it uses the #menu or #globalnav div.

    Go to the Sandbox skins section and switch the skin to “No CSS” and then the globalnav will start appearing.

  11. engtech said, on July 19, 2007 at 10:19 am

    oooh, looks like there’s a problem with the comments by postauthor.

    I find the #menu/#globalnav thing confusing on WordPress.com. I have no idea why it turns off for all of the “pre-wrapped” layouts, but turns on if you have the “no layout” enabled.

  12. engtech said, on July 19, 2007 at 12:03 pm

    I love how FireBug can edit the CSS live on a site so you can see if your change will work.

  13. tanya said, on July 19, 2007 at 12:43 pm

    Man, I so want to change the front page of my site not to show the latest posts – at least not in full. But I’m scared that my readers are so used to seeing it that way – that they won’t like it. So it’s great to see you be the guinea pig :0) and that you are getting positive response.

  14. engtech said, on July 19, 2007 at 12:50 pm

    @tanya: it works really well to change the front page to a landing area if you include a list of the recent posts or a way to get to the most recent posts.

    Landing pages really help to convert first time readers into regular readers and gives them a starting point to navigating the site.

  15. Ian Stewart said, on July 19, 2007 at 2:46 pm

    I’m also a fan of the landing page. I was thinking of doing something similar myself. Except I wish it worked like the WWSGD plugin. You know, so regular readers would go to index.php while new visitors would land at home.php. I asked about it on a javascript forum but no one liked the idea. Perhaps because I mentioned SEO (the home.php, being an introduction, would be loaded with keywords — all natural, of course, an introduction to a blog would be just loaded with keywords by nature.)

    Maybe someone else out there will like this idea. Go viral, little one.

  16. raincoaster said, on July 19, 2007 at 6:16 pm

    Nice design. Clean, eloquent, easy to read: nice, nice work.

    Couple of suggestions:
    there should be more space between the comments permalink and the avatars
    the “Feedburner tip” text on the button at the top of the blog is too thin. Needs to be in a more substantial font, as it looks a bit spidery. Maybe just Bold it?

  17. engtech said, on July 19, 2007 at 10:34 pm

    I’ve made the changes RC…

    I also changed the background image on the comments to make it them more readable.

  18. Michael Sync said, on July 20, 2007 at 1:16 am

    Your “Welcome” page is nice.. I found one broken link in that page.

    internetducttape.com/tag/engtech-blogging-how-tos-tech-news-and-reviews/?
    Read the Most Recent Posts from oldest to newest

  19. Michael Sync said, on July 20, 2007 at 1:17 am

    Which plug-in did you use to get “Random Post” in your blog?? I’m looking for it since long time back. I might need it if I move my blog from wordpress.com to self-host..

  20. engtech said, on July 20, 2007 at 1:20 am

    Yeah, my tags are all broken right now. I just deleted them and I’m starting over from scratch.

    Random post is part of WordPress.com, it should be available in all the 2.2 or 2.3 versions of WordPress.

    Type ?random after the url.

  21. Michael Sync said, on July 20, 2007 at 1:20 am

    And two more ~~ Check “blogging” and “programming” at the header menu..

  22. Michael Sync said, on July 20, 2007 at 3:33 am

    >>Random post is part of WordPress.com, it should be available in all the 2.2 or 2.3 versions of WordPress.

    Okay. Thanks.

  23. bitbot said, on July 20, 2007 at 7:25 am

    Haha yea, CSS design is a REAL pain. I was so tired of it at one point I installed this code that’d load the appropriate CSS coding according to what browser the visitor was using. I had one CSS specially for visitors for IE, and one for Firefox visitors.

    Oh and hey nice design! Simple, straight to the point and navigatable. Good job engtech! Good luck for the competition!

  24. David Bradley Blog said, on July 20, 2007 at 7:47 am

    I love your drop shadow, round corner boxes but wonder why you don’t apply that to the comment standouts as well? We go from an almost 3D look to flat while browsing comments. Just a thought. Me, I haven’t quite mastered CSS to that degree, although I see there are techniques for generating such features now, without using any image files at all, which sounds neat, but no doubt will be a bitch to get right across browsers.

    db

  25. Bitbot said, on July 20, 2007 at 10:05 am

    Haha yea, CSS design is a REAL pain. I was so tired of it at one point I installed this code that’d load the appropriate CSS coding according to what browser the visitor was using. I had one CSS specially for visitors for IE, and one for Firefox visitors.

    Oh and hey nice design! Simple, straight to the point and navigatable. Good job engtech! Good luck for the competition!

  26. Dian said, on August 08, 2007 at 5:39 am

    Men your themes is better than the ones that wins!
    i don’t know how they ranking them, some of them are just plain vanilla!

  27. engtech said, on August 09, 2007 at 3:45 pm

    @Dian:

    Thanks for the kind words about my Sandbox blog theme. I’m glad you like it.

    I’ve read some of the responses of the judges and I agree with where they’ve found fault with it… it is lacking a unified design, the spacing between elements is rather arbitrary and there underlying CSS is really ugly.

  28. masterclasslady said, on October 15, 2007 at 9:00 am

    Once again, kudos, congrats and all that jazz on a magnificent site. This site encourages and inspires me to get moving on my own sites. I agree about the landing page -it’s very important. Thanks for being such a tremendous resource, engtech.

    Oh – and the new logo rocks.


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 285 other followers

%d bloggers like this: