Since forever I wanted to re-design Inspiration Bit. The two main reasons why I haven’t done that yet are time and indecisiveness: too many ideas and styles are floating in my head and too little time I have to experiment with all of them. I was contemplating about sharing my thoughts and sketches with my readers, but on the other hand I didn’t want to spoil the surprise with the launch of the new design. Yet Lauren’s decision to document the process of re-designing her blog CreativeCurio has convinced me that recording my own design process on Inspiration Bit will be mutually beneficial as well.

The two fundamental blocks in designing a site are the style and the layout. Sometimes the style dictates the layout, other times the structure of the site, its grid, influences the future theme of the site’s design. I will talk about various web site styles next time, today I’d like to tackle one of the new directions in blog’s layout that I consider using in my new design – it’s the trend of featuring only the latest article on the homepage while providing an easy access to a number of previous articles. I don’t know if this drift in the blog’s traditional design, where the readers are accustomed to seeing several posts all lined up in orderly fashion on the homepage, has a name, but I like how it makes a blog looking more like a regular web site than a journal.

To illustrate my point I’m presenting you with 16 blogs with this unconventional layout, which seems to be slowly overtaking the mainstream blog’s structure.

1. Warpspire by Kyle Neath

warpspire Kyle is the creator of a very popular and beautiful WordPress theme Hemingway that features the excerpts from the two most recent posts and provides links to the rest of the blog’s content from the large footer. I like how on Warpsire Kyle accentuates the latest article with the post’s excerpt displayed on a big header image. Make sure to check out how Kyle is showcasing all other posts on his blog: by default ‘Everything’ is displayed below the header, the clicks on ‘Tips/Resources’ or ‘Reviews’ or ‘Marks’ bring us down to the corresponding posts.

2. jek2kdotcom by Nicolò Volpato

jek2k This gorgeously illustrated blog’s design is based on Hemingway, however Nicolò is featuring only the newest article and listing all other articles in the footer’s section ‘Recently’. I like how the site’s structure changes very little when switching to the Single Post layout when viewing the actual post.

3. No Ones Listening by Yasser Dahab

no ones listeningYasser is a creator of another non-blog looking theme titled Kiwi that promotes the latest post. On his own blog he artfully features recent articles as four images in the header section (try mousing over them and follow the “star” icon going up and down the articles list in the middle column), and highlights his Newest article in a separate block. Too bad it’s been a long time since Yasser has updated* his blog.
*Edit: Looks like his blog no longer exists…

4. mezzoblue by Dave Shea

mezzoblue Dave is the co-author of the book “The Zen of CSS Design” and the creator of the site CSS Zen Garden that made thousands of designer to fall in love with CSS. So it’s not surprising that his attention to details on mezzoblue is so high. Browse his archives to see how his site is changing the hues and images in the header every couple of months. He’s featuring the 6 most recent entries in the header section, followed by the latest entry, which he ends again with the excerpts and links to three previous articles.

5. Left Justified by Andrew Krespanis

leftjustified As the title suggests this website is left justified, with the fixed width of 763px. Its exquisite retro design features the snippet from the latest entry, and grabs our attention with the book-like content with the links to the Recent Entries. Be sure to click on the article to read the rest of the content and look at how cleverly Andrew organized the auxiliary data in the left sidebar.

6. Design by Comfort by Daniel Mall

designbycomfort Another left aligned web site with a clean and minimalistic design. The last five articles with the linked titles are displayed below the first paragraph of the latest post. It’s interesting to note that despite being the co-creator of swfIR, a client-side image replacement technique, the only images Dan Mall used on his personal site are the blog and section titles.

7. Rob Goodlatte by Rob

robgoodlatte I absolutely love the style and the layout of this web site – a superb attention to details, a soothing colour scheme, an excellent use of Typography, including the use of sIFR for the titles. Notice the date implementation on the blog: the latest post was “Published 2 days ago, in the early morning under Apple, Design”, the previous article was “Published last year, at the end of December”.

8. North x East by Collis Ta’eed

northxeast It’s quite impossible not to notice the newest article on this blog – framed in a distinct box with the huge font size used for the title, accompanied with the arresting image, it substitutes the usual header section and immediately grabs our attention. The previous articles, displayed in a 23px Georgia font size, are not hiding in the shadow either.

9. 456 Berea Street by Roger Johansson

456berea If even Roger Johansson, a renowned advocate of web standards, has chosen this non-traditional look for his blog, does it mean that soon we’ll be seeing more sites following this path? His “Slightly older articles” are displayed with linked titles, short descriptions and supplementary data like the number of comments, categories and the date.

10. Veerle Blog by Veerle

veerle What can be said about Veerle’s blog that hasn’t been said already? She also chose to feature only the newest article on her homepage, while providing the links to the Recent Articles in the lower part of her sidebar.

11. Design Adaptations by Charity

designadaptions As you saw from the previous sites most of them display only an excerpt of the latest article, with a “read more” link leading to the rest of the post. Charity on the other hand displays the full content of her newest article, with the search engine like list of “Recently Featured” articles below. I like how she cleverly implemented the display of the Most Popular, Recent, My Favourite and Top Commented posts all in one compact section in the footer with a quick and easy access to all of them through tabs.

12. Svenigson by Bence Kucsan

svenigson I’ve already praised Bence’s blog design in my last year’s article about the sites with the unique navigation. The latest article along with the designer’s photo are the main attraction of the homepage until you scroll down and find amazingly displayed previous articles in evenly shaped rectangles with the notebook paper background and interestingly formated dates, like “4 months, 1 week ago”.

13. Bartelme Design by Wolfgang Bartelme

bartelme Wolfgang’s WordPress theme Dark Theme is another bloggers favourite. Each section of the blog – navigation, logo, latest post, recent entries and comments, sidenotes and Flickr stream – are all displayed in horisontally separated segments with different background colours, making them all stand out.

14. Tim Kadlec by Tim

timkadlec Tim’s grudge styled site features the Recent Posts twice: first time right below the fragment of the latest post, with the more detailed view that includes image thumbnails, titles and some auxiliary data; and once again in the footer where they stay even when you’re landed on the single page, reading the full article.

15. PR Blogger by Stephen Davies

prblogger Despite such a striking resemblance of this blog’s title with another prominent blogger, Stephen’s site design is very different. Notice the vertical titles for Recent Articles and footer sections. It’s been designed by Matt Brett, whose blog also features the latest article and provides links only to the “previous entries”.

16. The Apple News

applenews This site’s design obviously resembles one of a newspaper, with the list of recent posts displayed twice as Recent News in the left sidebar next to the Featured Article and once again in the footer in the form of Recent Entries.


So what do you think of this different approach in the blog’s design? Would you mind seeing something like that on Inspiration Bit?

I’ll be examining more web site features in my upcoming articles as well as let you behind the scenes of Inspiration Bit’s new design. So if you don’t want to miss all this, be sure to subscribe to my RSS or get email updates.

Recent Bits
Related Bits
Blog Redesign: First Steps – Inspiration And Ideas
When The End Is Just The Beginning
Blog Authority
8 WorthWhile Weekly Bits: 18-25 March, 2007
Show or Not to Show: That is The Question
Get Inspired by the Best Blogs
8 Remarkable WordPress Themes
The 2008 Bloggies – A Joke Or A Smack On The Face?
Comment Bits

25 Insightful Bits in response to “16 Bits Of Blogs With Unconventional Layout”

  1. Great post Vivien. Stumbled. And Dugg. :)

  2. They are all very unique, thanks for sharing. :)

  3. Glad you enjoyed it, Ronald and Kriz!
    Ronald, thanks for the stumble and digg ;-)

  4. Woohoo! I’m excited for your redesign! But don’t let that pressure you too much ;) Stumbled your post (I have now installed the SU toolbar, so it’s much easier!)

    I was struggling with the layout vs. style issue, too. I finally broke it down into the two for my sketches so that I could concentrate on one or the other. Some of the sketches had a style that was more dependent on the layout, though. I started out with more mental notes about style and tried to stick with the layout, but sometimes when doing research it’s hard to separate style from layout.

    You’ve done some research for me, Vivien! I like your samples here. I think I’ll be doing the excerpt on the home page (but always full feeds, so no worries!) and list maybe the 5 most recent articles. I don’t like how the articles are display for Warspire though, because it looks like what is displayed on the home page is all there is to an article–it doesn’t say anything like Read More or Continue.

    Jek2 is unique, but I don’t know… it doesn’t appeal to me. I think there is too much image and the content gets lost in the overpowering illustration.

    CSS Zen Garden is also a great resource for inspiration. I absolutely LOVE the movie theater one. I can totally see how he did it and it’s not that complex, but the fact that he thought of it!

    Design by Comfort (Daniel Mall) isn’t working :( I got a 500 Internal Server Error. It looks nice from the screenshot though!

    For Inspiration Bit, my personal opinions: I don’t like left justified sites. They don’t sit well and are especially awkward with widescreen monitors. I like the post excerpts on the home page. Attention to details like meta data and comments is a huge plus in my book. It’s always interesting to see how people choose to handle these things. I like the samples you’ve provided here! The way NxE handles the home page could be challenging–every title you come up with better be captivating otherwise it’ll stand out like a sore thumb! I like the idea, but I would be intimidated to have my posts so… naked out there! The authors on NxE really know how to craft killer titles; I scrolled down the list of recent articles and every single one grabbed my attention.

    Great post and breakdown of details, Vivien. I really like these kinds of articles from you! You have a great eye for things that usually go unnoticed :)

  5. Lauren, really glad you found this post helpful. It’s weird why you couldn’t access Dan Mall’s site, I have no problems with the links.
    I agree about Warpspire, not everyone will be clicking on the text that says Permalink to read the rest of the Recent article’s content. People are used to having post titles clickable, and I think it should stay that way – it’s better to add to the default navigation than replace it with something very different.

    It’s interesting what you said about NxE, didn’t really think much about it, but then having boldly displayed titles does help to grab the readers attention and encourages us to be more creative and marketable (hate this word) with the post titles. :-)

  6. Great list, Vivien. I love WarSpire; can’t believe I’ve never seen it before :) The layout in terms of the grid is not quite so unconventional, but that header is just wonderful.

    No.7 is nice too. That date detail is good (and would be pretty simple to do with a couple of lines of PHP)–just wish I’d thought of it.
    You’ve also got me thinking or rethinking my own blogs front page; I’ve been contemplating displaying only the most recent article in full, followed by excerpts and thumbnails for the remainder. It would certainly reduce the file-size of my home page; but I wonder what the search engines make of that. Any idea? Interested to know what you think.

    O, and I’m also inspired by no. 16′s footer; I really nee d to sort mine out, but as I display my most recent 5 or 6 posts on the home page, I doubt that anyone makes it that far:)

    This post has really got me thinking: I’m off to rething my own design. Thank you!

    ps: I agree with you about the clickable titles–that’s what people are used to; by all means add to the norm, but don’t subtract–it’s negative;)

  7. having boldly displayed titles does help to grab the readers attention and encourages us to be more creative

    You are so right there!!

    Ah, I can access Daniel Mall’s site now. You know, this is a left aligned site that I do not mind so much. He has a comfortable (haha) cushion on the left side so it’s not trying to run off the side of my screen. At first I thought the columns are way too narrow, but it does make for easier reading because the lines are not so long; a problem you would run into with the fluid layouts, especially with the widescreen monitors like I keep talking about.

    Oh boy! Now John’s on the redesign party bus! We’ll have a fantastic unveiling ceremony when all of us are finished ;)

    edit: Oh hey!! Did you restyle your blockquotes??

  8. Oh, one more thing: I’m noticing a lot of blogs don’t take a strict overall grid structure into consideration; many times the content area and the footer are not on the same grid. #16 seems to be that way. It’s awkward to me. Brian does it with Revolution, too. Is it just me (John, love to hear your thoughts on this too)?

  9. Wohoo, now John joins the re-design-your-blog club ;-)
    John, I don’t think that having excerpts vs. full articles on the homepage would affect Search Engines much. They index individual pages, so the relevant post will be displayed for the requested keywords. However it will certainly reduce the loading time of the homepage, especially on yours with lots of images in the posts. That’s why last few months I’ve been leaving only the latest article’s full content and showing the rest with the more-tag, but I’d like to keep it down even further and better formatted.

    Lauren, I was hoping to entice you with at least some left aligned design :-) (though I can completely relate to the ever expanding content area problem). Dan Mall’s site layout feels awkward at first, but its minimalistic approach makes it very easy on the eye and we get used to it very quickly.
    No, I haven’t touched the style of my blockquotes here.
    Regarding the inconsistent grid structure – I too noticed that, and thought that like in everything else designers are trying to think/design outside the box, in this case outside the grid :-)

  10. Great list Vivien!

    Like Johno, I really like Warpspire, and don’t think I’ve seen it before either.

    This is a great source of inspiration, just when I needed it.

    Thank you. ;)

  11. VJ

    I rather like this new style

  12. Many of these I haven’t visited in a long time and some I didn’t know about at all, but it’s interesting to see them all put together in this context. I really like the look Kyle is sporting these days. MUCH better than what I remember from a couple years ago. And of course NxE is extremely well put together – every redesign I’ve seen so far has been. What great examples to consider from the outset of your redesign! Best of luck and can’t wait to see how things turn out. :)

  13. You’re most welcome, David. With all those ordeals you’re having to go through, I’m really glad you found it inspirational and useful.

    VJ, glad you liked it :-)

    Charity, thanks for the wishes. I also can’t wait and see what I will eventually end up with for Inspiration Bit. I’m very fond of your blog themes, you’re doing a great job there.

    Looks like Warpspire is the crowd’s favourite, too bad for Kyle for not commenting here and reading all the praise (and comments) about his site ;-)

  14. I have another to add to your list! Shylands. I really liked how Steven doesn’t use straight lines, even in his forms! The colors are very eye catching, too. I like the cyan/magenta combo.

  15. Thanks Lauren. That is a nice design. The only thing I found confusing at first is when I viewed the actual post the design switched from the light pink design to the light text on the dark bg, the same one he originally used in the footer area, while the grey footer section disappeared.
    But you’re right – it’s refreshing to see designs with no straight lines (except the flickr photos ;-)

  16. Terrific list It’s nice to see something different, make a little note of it and keep it ready in the wings for the next project!

  17. You missed a very unconventional and very cool one – http://www.upstartblogger.com

  18. bvs

    I haven’t gone through the list, yet, this comment is on the paragraph.
    A redesign is perhaps the most painstaking ordeal for a web designer, but when done with constructive attitude it becomes a rewarding experience.
    It gives you immense freedom to experiment (although it can quickly transpire into a one-more-little-revision cycle) while demanding high goal orientation.
    So all the best for a future redesign.
    Anyway, Vivien, you have got a well designed site going with great content.

  19. @BVS Thanks a lot and Welcome to Inspiration Bit :)
    I completely agree with you on the freedom to experiment and how-about-this-way revision cycle. The re-design can be as rewarding as it is masochistic at times ;)

  20. The link on no ones listening is broke. Just an fyi.

    Otherwise some greatly inspiring designs. It’s hard to make something look different but still have the functionality of a blog.

  21. Thanks for the heads up. Too bad No Ones Listening is offline now. I’ve updated the post, informing of a non-existing site.

  1. When The End Is Just The Beginning » Inspiration Bit

    [...] week I featured 16 remarkable web sites with an unconventional for a blog layout where only the latest article is featured, making it look [...]

  2. Best Graphic Design Articles from January 2008

    [...] 16 Blogs With Unconventional Layouts This is a showcase of 16 blogs that use a different style of layout (much unlike other blog showcases), useful for anyone wishing to redesign their blog. A great article from Vivien at InspirationBit. [...]

  3. Enlaces para leer y ver 65 « el50

    [...] 16 blogs con una maquetación inusual | Insparation Bit [en]. Un buen análisis a diferentes blogs con layouts poco convencionales. Puede servir de inspiración para crear mejores diseños o por lo menos, con mejor usabilidad. [...]

  4. Meticulous Design: Information Architecture » Inspiration Bit

    [...] architecture of your site. You may also find helpful two of my previous articles on blogs with unconventional layout and elaborate [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach, play with my daughter and try to balance family, work, friends and a somewhat active social life on