No, I’m not referring to the slogan of a large supermarket chain.

Some of you loyal blog readers may well have noticed a reasonable regularity with which I update my blog template, i.e. the way the site looks.  This is partly because I get bored with it, but mainly because I see my blog more as a showcase for my latest ideas and designs.  The theory is that if my blog looks good, I can transfer that experience into my work and be confident that the web sites I design will be at least as good as my blog.  The blog is, in effect, an advert for me.

As such, I have a new blog design that I’d like to share with you.

Rather than going for a purely visual focus to the design, I’ve actually tried to focus more on the interactivity, the functionality of the page.  There are no images or graphics designed yet, but rather I have sought to create an interesting and somewhat unique take on what constitutes a blog, focusing on the layout first and foremost.

Here is a preview of what I’ve got so far.

As you can see, it still needs a lot or refining in terms of graphics, but the idea is that the most recent blog post should be the most important at that time, so is given more space.  In fact, it takes up the whole width of the page.  Subsequent posts are, it is assumed, posts that regular blog readers will have already read, and so are decreased in size and hence importance.  This not only makes for a more efficient use of page real-estate, but also shows that blogs can be approached in a different way.

Each of those smaller boxes are set to float: left, which means that you’ll get some interesting effects as the browser tries to place them all on the page – this will be more obvious once it’s actually in use, since in the demonstration each box is the same size and nothing clever or complicated seems to be happening yet.  Once there is a good collection of smaller posts of varying lengths we should see those boxes being put in different places as the browser tries to align everything.

The other nice little gimmick I’ve included are drop down menus on hover-overs.  This basically means that when you hover your mouse over the ‘Menu’ text in the top right corner it should bring up a nice menu giving you more options and links.  This will eventually have a slightly transparent background so that the page behind it shows through ever so slightly – subtle, but effective.  There are also added features for each post in a hover menu beneath the text, since I figure those options are not always necessary so don’t always need to be displayed.

Oh, and one other addition is that images in old posts are not displayed on that front screen, since there is a smaller area available.  Just another little touch that makes it all a little tidier.

Let me know what you think.  If it turns out to be a popular concept, you may well see my blog with another new face soon!

Categories: Technology


Phill · 5 February 2007 at 12:12 am

Interesting idea, Matthew. Only thing I don’t like is, when you mouse over ‘more’ I think that should be a pop-up rather than actually displaying as part of the page. It’s probably just a personal preference thing, but I don’t like the rest of my page resizing in order to fit in a popup like that!

Other than that, it will be interesting to see how it works out 🙂

Matthew · 5 February 2007 at 11:47 am

The main problem with them being popups is the positioning. To have a div popup and not move other things around on the page you’d need to have them absolutely positioned, which means knowing beforehand where they’re meant to be. Or using Javascript, I suppose. But then of course you’d be covering up other parts of the blog post, which isn’t great either (the main menu can cover up the page because it doesn’t refer to the page directly).

I know what you mean though, hovering over the tabs at the bottom of the page can make the layout extend beyond the height of the page, which means you’ve got to scroll down to see it, which might mean leaving the hover zone, at which point the options would hide themselves again. Grrr.

I’ll keep working on it though, thanks for your comments!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.