This Site Undergoes Design Tweaks

This weekend, I decided to get a different perspective on my blog by sitting other people down in front of my website to observe how they browse around and which areas of the site they click. Upon initial feedback, I was told that the top part of my site seemed a bit busy. I was told that it would be nice if a reader had the ability to click on a button that would either maximize or minimize the three content blocks near the top of the site.

The three content blocks in question are the Recent Articles, Recent Comments and the Most Popular Posts. After browsing around the site looking for solutions, I came across a post that mentioned the following plugin, JS Toggle Boxes Js Toggle Boxes provided a means for me to add a plus symbol or a minus symbol to a div element that contained an unordered list. Using a combination of Javascript, CSS and cookies, readers of this site can now show or hide at least 6 different content blocks. Show Or Hide Content By Clicking On This Icon

I’ve also rearranged my sidebar menus so that site specific content is in the left sidebar while, 3rd party widgets and misc stuff is in the right sidebar. I’ve also replaced the default technorati favorite image and added a custom one within the same box which contains my subscription images. I’ve also changed the entire background site to represent one solid color, as the gradient background image combined with a background color just never seemed to work in Internet Explorer. Surrounding the entire site is now a white 3 pixel border. The black one was not viewable with the darker background color.

Although the div elements never bothered me, you now have a choice as to whether or not you want to view those specific content areas or not. They work whether you have Javascript enabled or disabled. Also, because of the use of cookies, your viewing settings will be remembered unless the cookie is deleted, in which case all of the content boxes will be open again.

Please let me know what you think of the design changes.

8 thoughts on “This Site Undergoes Design Tweaks

  1. Hi Jeffro.

    As for myself I would make the outside background a little wider to open it up a little more.

    I would also put both your sidebars on the right side. There’s two reasons for this:

    1. Googlebot reads left to right so your sidebar is getting preferential treatment instead of your content.

    2. Most viewers also read left to right and it can be confusing having to keep look to the left sidebar and then to the right for information.

    My advice is to follow the natural flow of a reader and keep your content on the left.

    Hope that helps. Cheers!


  2. Hey Jeff, been watching you build the site for a while now. One thing I have noticed is that the load time seems to be getting longer and longer. Now for me that is saying something. I am on an 8MB connection.

    Sure service sites and sites that are not blogs do take longer to load (I am thinking Digg – I reckon it takes way too long to load). But for a blog I reckon yours is getting on the long side. But that might be the round world trip who knows.

    Just something to think about before you add more plugins. For example just looking at it – I reckon the +/- thing doesn’t serve much purpose. I will never use it. Maybe someone will but why?

    Yup the top is too busy. So rationalize – why do you have the latest posts? Can’t I just scroll down and see them? If it is too busy up there I am going to give it a miss anyway. Recent comments, who cares? It is only relevant to the content of the post to which they were made – that is only relevant to me if I have read or will read that post. Most popular posts, meh. Take that or leave it, I don’t like it on blogs, if you must have it then put in a side bar (way down). It always comes across as a bit of ego stoking to me. Plus if it is that popular then it will show up in a Google search right?

    Problem fixed. Delete busy top of blog content and add some nice space… I would say white but that is hardly relevant. Remove plugin. Load time reduced. Blog looks better. Everyone happy.

    Oh hey thanks for the link to the GGP as well dude. I was going to say something about the bottom as well :) But seriously does anyone look down there? Especially since I only noticed it now… how long has that been there? Cool.

    Just suggestions Jeff! I like what you are doing here and I think you are doing a good job, just don’t get lost on the journey :) and remember that some people still use dial up. Not your audience but some people are on connections that may as well be considering how slow they are.

    BTW we played your message in the show, it should be out tomorrow at some stage… Tim went to the snow… we recorded it tonight.

  3. Hi, glad to see my plugin is helping. Some suggestions for the layout.

    1) If I were you I’d use one single [+/-] toggle switch for the entire top box with the three columns. You mentioned that the point was to make the header less bulky. Well, it’s not really getting thinner until you’ve collapsed all 3 columns. And if people have to click 3 toggles to get one thing done, they’ll get pissed. :)

    2) If you can test your site in Firefox and you make the fonts bigger (Control+mousewheel down), at some point you’ll notice things stop looking fine. The very top menu bar (the red one), for instance. There’s plenty of space there, but for some reason the menu entries get cramped up. I’m guessing the theme you’re using employs some fixed heights. Yes, looks like it, you have a big background image containing the logo as well. You can work around that. Split the logo and let it stay on its own as a big image. For the top menu, make it a DIV, make the background one shade of red, and apply a darker shade as a background running only along the bottom length (bottom repeat-x). You get the same effect, except it will resize nicely when the fonts in the menu grow.

    3) I noticed your smilies have a border around them. WordPress automatically applies a “wp-smiley” class to them, so it’s very easy to fix this through CSS (img.wp-smiley{border:0}).

    Keep improving it, you’re doing a nice job so far.

  4. Locate the div that surrounds all three columns, I think it’s “Footer2”. Right before it place the call to JSTB_box_toggle(). Use “cookie_Footer2” and “Footer2” for the last 2 parameters. That’s basically it. Or, if you look at the example on my site, simply imagine that the li and the h2 go away and the ul becomes a div.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s