Blogging And All That Malarkey

Designing New Internationalist blog pages

Today I want to share and invite your feedback on my work on the New Internationalist blog pages.

Again, a few rules of the road

What you are looking at is (developed) work-in-progress, not a finished piece. I am very open to constructive criticism about ways to improve what I'm doing, in-fact I really want to hear it, whether you're a reader of New Internationalist or not.
Are you a reader of New Internationalist? Do you work there or are you a member of the co-op? Are you a web geek interested in the redesign process? It would really help me a lot if I knew a little about you when you comment.
So far my process has focussed on content architecture, layout and problem solving. What you're looking at is not my completed visual design proposal for New Internationalist, although it does contain some elements that are part of my thinking, particularly in relation to typography, content readability and minimalism.
The prototype layouts that you will see contain active hyperlinks to other layouts that I'm working on. Some of these are more developed, others less so. I'll give you an opportunity to comment on everything as this process continues, but for now I'd like to keep the conversation focussed and hear your thoughts on the home page.
These layouts have not been tested (yet) in Internet Explorer 7/8. If you use that browser, things could be a little stinky. To view these layouts, you'll need a browser like Firefox 3 or Safari.
Nothing that I give you access to as part of this open design process can be reused, repurposed or otherwise recycled.

(If you have been following the design of the home page, you might be interested in taking a look at my most recent iteration (5) that takes into account the comments that readers raised. If you commented on my designs for the magazine pages, there is a new iteration (5) of those too.)

Designing New Internationalist blog pages

If you haven't visited New Internationalist before, take a look at its current blog pages.

The New Internationalist current blog page

Hello again.

While I realize that these blog templates are less noteworthy than the other sections that I have shared, parts of my job are:

To take existing blog content and features and make them easier to find and browse
Design the content for better readability

My redesigned blog index (seen if you follow the blog link from the main navigation) takes the most recent blog entries across all of the New Internationalist blogs and organizes them by blog name, Editor's blog, Majority World blog etc.).

To improve clarity, I have intentionally reduced the number of blog entries shown per blog, but have added new navigation in the sidebar in the form of most read and most commented entries across all blogs. I have also introduced a new tabbed panel for multimedia items including photos (formerly the Photo Blog), Podcasts (formerly Radio) and Videos (new).

Blog index page layout (View in your browser)

Entries

Each blog now has its own index page. This design is almost identical to the main blog index.

Blog entry pages now feature a redesigned breadcrumb trail that can be repurposed in selective places across the site. They also include links to related entries as well as to a new, reusable, category template that I intend to be used to show all entries by the featured author.

Blog entry page layout (View in your browser)

Modular design

As I explained in my first entry about The New Internationalist redesign process.

For me, the best way to approach designing a project like New Internationalist is not to design a web site, but instead to design a system. This means focussing on creating a series of reusable, modular elements that New Internationalist will be able to roll out across the site. This will give them more long-term flexibility and better value for money from the time that I'm spending with them.

Nowhere is this better demonstrated than in the way that the modules and templates can be reused and restyled across multiple sections of the site. All that will be needed of the New Internationalist developers is to change the class attribute value on a template's body element.

For example, the most recent or standout blog entries can, if required, be presented in my article template that I have optimized for readability.

Article template used across different sections

The same principles and process apply to the category template and many others across the site.

Category template used across different sections

Working in this way, by making both markup and CSS modular, I hope to have developed a framework that will allow the editors and developers at New Internationalist to relocate any page elements onto various templates with minimal (if any) effort.

Leave your comment

John Holdun

May 27 2009 @ 12:07am #

I’ve been thoroughly enjoying this series and reading about your design decisions, but seeing you switch an entire layout via the body class is just a new level of ridiculousness.

Ridiculous brilliance, that is. Keep it up.

Chris Pacheco

May 27 2009 @ 12:07am #

Hey Andy,

Loving the redesign so far, I love the typography in all of it. Its so simple and beautiful! And the subtle hover effects are a nice touch.

Really appreciate you sharing your process on all of it, I look forward to each post about it :D

Thank you.

Phillip Smith

May 27 2009 @ 12:19am #

Diggin’ those blog category pages. Very nice. (Breadcrumb looks lovely too.)

Phillip

Cole Henley

May 27 2009 @ 12:57am #

Lovely stuff - whitespace and typography used really effectively to make the content on the page much more readable, scannable and digestible.

Only comment I would have is that the leading seems quite tight on the blog entries page - works fine for the index pages as these are shorter bodies of text and serves to distinguish between entries but on the entry pages themselves (where there is more text on the page) it just feels quite dense to me.

A wee bit more breathing space would work wonders.

Andy Clarke

May 27 2009 @ 01:26am #

@Cole Henley: Only comment I would have is that the leading seems quite tight on the blog entries page.

— You’re right. I have increased the leading on all larger blocks of text (with a wider measure) and you’ll see that in the next iteration. How come I missed that? Duh.

@John Holdun: Seeing you switch an entire layout via the body class is just a new level of ridiculousness.

— Ridiculous is right. Ridiculously simple, but very, very effective.

Al Stevens

May 27 2009 @ 02:09am #

Hi Andy, thanks for sharing this process with us - you are truly brave. I was hoping to reply to one of your earlier posts but I think my comments will still be appropriate here.

Although I know the design isn’t complete I think it’s definitely where NI should be going - clean, and more importantly “nuetral”. That said from an art direction/brand POV they have historically been quite in your face, bold and brash - is this a deliberate change?

There are so many good things I won’t comment on them all. That said I really like the back issues page and love your ideas behind the differing article formats (according to age) and am really pleased by the fact that the long and complex articles will be presented in a clean and digestible format.

That said I wonder whether you will provide the authors with the ability to have more heirachy in the content itself? At the moment you generally have a main header and then lots of body content. I wondered though whether it might be nice to have a ‘lead in’ (maybe an h2) and other sub header styles, which would allow authors to sub-divide their articles.

One last item - do you have pages you would consider as conversions on the website? If subscribe was one of them is it strong enough as a call to action?

I hope that helps

Al - (I am a Web Designer and former New Internationalist subscriber)

craig zheng

May 27 2009 @ 03:15am #

Coming along quite nicely… A few thoughts:

On the blog index page, I find myself a little overwhelmed by all the green links. This is not true of any of the other major sections (books, magazine, shop), probably because the prominent use of images in those sections helps to break the color monotony…

On the blog entry page, my eye seems to want there to be a bit more whitespace just above the article title…

Also on the blog entry page, there’s something about the boxes in the “aside” column that seems a tiny bit “off” to me. Maybe it bothers me that the blog info box (the first one) is the only one in the column whose header is hyperlinked, but it also strikes me that perhaps the first box and its content have sort of a different relationship to the entry than do the others… I can’t decide if I want to see the box’s difference represented visually, or if I don’t want to see the blog description at all but rather something more like this (note that it led me to try something different with the author box header too–just a thought).

Anyway, needless to say, I think this is really looking incredible. I hope these comments are at least somewhat helpful.

Andy Clarke

May 27 2009 @ 03:44am #

Hi everyone and thanks for the terrific feedback, it is helping a great deal.

To help everyone get a handle on all of the page layouts that I’m designing (and to focus the conversations into one thread), I have published the templates that I think to be feature complete and a top-down look at the New Internationalist redesign.

Stephanie

May 27 2009 @ 05:11am #

Looking good :)

Blog home page:
- I’m feeling a bit of a disconnect between the leader blog post and it’s meta info (date, author, ect.) It feels more like the info belongs with the blog features below it. Maybe if you used the double line border from each row group at the bottom of the leader as well?
- I know the design is still being tweaked - are you going to style the search button to match the section colours?

Blog entry page:
- not seeing the comments or a way to leave a comment.
- The blog entries feel very dense, if the CMS allows it would be nice to have pull quotes, style the opening paragraph differently, and insert pictures. The grey quotes on the magazine article pages really helped with the readability.
- In the right column I would consider moving the link to blog off the heading and to the bottom of the box for consistency’s sake.
- I like that the blog entry has info on the blog itself and author in the right column. I thought about linking to recent entries instead of related ones but I think you made the right call on that one.
- I liked the “this article was part of this issue” at the bottom of the magazine pages, a similar feature could work at the bottom of the blog pages for recent articles or to highlight the tags.
- A photo of the author would help balance the text heaviness of the entry and they seem to have them for a few of the authors even if they’re awful photos.

Still really enjoying the clean open design!

Those “share” links make me shudder. At least the icons are hidden in your design, a nice compromise if one has to have them. I’d be curious to know if you evaluated whether or not to keep them and if the client feels they get good value for them.

Andy Clarke

May 27 2009 @ 05:41am #

@Stephanie: Some great feedback there, thanks Stephanie. I’ve worked on every single point that you brought up and you’ll see that next time I update the templates.

I know the design is still being tweaked - are you going to style the search button to match the section colours?

— Over the last few years, I’ve moved away from styling submit button as I prefer to leave those to the OS. Of course, I use a Mac, so buttons look just lovely. Windows? Don’t get me started on that. The other issue is that I don’t yet know how the developers will build the site and what form markup they’ll use. I’m sure that I’ll be returning to this just before launch when I tidy up any outstanding issues.

Jess Worth

May 27 2009 @ 08:19pm #

Hi Andy,

I’m one of the NI editors, and totally non-techy so I can only comment on how it looks to me, which is basically great. As if the NI online has finally grown up! I would agree with some of the previous comments that it looks a little text-heavy - is there any way to liven it up visually without messing up the lovely clean style?

Also, as someone who’s going to be providing content, it would help to be able to see whether there have been comments and to be able to click through to them easily.

Finally, something I’ve often wanted to do is to have a list of links to other blogs I’ve enjoyed/found useful on my personal NI blog page. This might make it easier to get our blogs linked to by others in the blogosphere, tit-for-tat style. Is there any room for something like that?

Thanks for the great work,

Jess

Dinyar Godrej

May 27 2009 @ 11:35pm #

Hi Andy,

Another of the NI editors here - and also non-techy and also not really design educated - but I know what I like, which I hope is enough.
I like the clean, open look of the blog index page but find it all a bit too quiet. One tiny pictorial element stuck at the bottom of the page - not sure that balance is right.
The categories of blogs available - would they be differentiated enough to someone coming new to this page. I didn’t know what the little boxes with 100 on them were until I clicked one and found it was for comments. Would other readers know this was the case? Maybe the boxes need to look a bit more like speech bubbles. When browsing the web I am often drawn to comments because they are bite sized and opinionated - so I want to be able to see clearly where I can read them and leave them.
Also on this page, I felt a ‘more’ button for each category would be great to alert readers to other entries - at the moment the design could suggest that what you are seeing is all there is, ie not much.
Not sure some of the blog categories (Yasuni) would be active enough to feature prominently on this page - maybe this is an editorial thing.
On the entries page - not sure that losing the author pic is a good idea. One is then confronted by an entire page of text. Also can we please have an option of ‘other blog posts by this author’ under the ‘more info on this author’ option?
There are playful bits in the old design like the NIBL logo which I think I will miss in this more sober presentation.
thanks,
Dinyar

Andy Clarke

May 28 2009 @ 12:06am #

@Dinyar Godrej: I like the clean, open look of the blog index page but find it all a bit too quiet. One tiny pictorial element stuck at the bottom of the page - not sure that balance is right.

— I’m currently finishing some more examples of these layouts including blog post images as well as the text. That should bring the pages to life a little more.

On the entries page - not sure that losing the author pic is a good idea. Also can we please have an option of ‘other blog posts by this author’ under the ‘more info on this author’ option?

— The author photo will be returning, and you will also soon see a brand new author’s page that will feature other articles, books (if they have written one), plus their articles from the magazine.

There are playful bits in the old design like the NIBL logo which I think I will miss in this more sober presentation.

— One of the major issues of branding that we have been discussing is the dilution of the New Internationalist brand, especially online. You might have seen my post about New Internationalist branding? The current web site seems at times positively schizophrenic. If you dig deep enough you might be (un)lucky enough to find three different New Internationalist/NI/ni logos on the same page. This will change as the online brand is redefined as part of this process and we integrate all of the New Internationalist properties under the visual branding family.

@Jess Worth: I would agree with some of the previous comments that it looks a little text-heavy - is there any way to liven it up visually without messing up the lovely clean style?

— I’m currently finishing some more examples of these layouts including blog post images as well as the text. That should bring the pages to life a little more.

Finally, something I’ve often wanted to do is to have a list of links to other blogs I’ve enjoyed/found useful on my personal NI blog page. This might make it easier to get our blogs linked to by others in the blogosphere, tit-for-tat style. Is there any room for something like that?

— Great idea. I’m sure that would fit well on the author page that I’m working on.

Ian Nixon

May 28 2009 @ 12:41am #

Hi Andy

I’m a designer here at NI. I think what you’ve done so far is looking really excellent. I love the restrained use (and the choice) of colour, the beautiful sense of space, the rhythm of the grid, the consistent typography, and most of all the complete absence of the ‘Me! No, me! No, me!’ approach to designing web pages. As Jess says, we’ve grown up, but not only that we’re a little bit zen minimalist cool too, which is no bad thing.

It doesn’t worry me in the least that it’s text-heavy, the absence of pictures and logos screaming for attention is such a relief. Our readers will have no trouble coping with pages that don’t contain images and logos. It reflects very well the content. One minor concern is the line length in the blog – the recommended number of words per line for continuous text is 12-14, this exceeds that a little bit.

It’s good that you invite feedback but I would urge you to follow your instincts on this one. Experience suggests that when you try to accommodate all opinions you can end up losing what was strong and distinctive about your ideas. You’re the designer!

All in all top work, keep it coming!

Ian

Andy Clarke

May 28 2009 @ 12:55am #

@Ian Nixon: One minor concern is the line length in the blog – the recommended number of words per line for continuous text is 12-14, this exceeds that a little bit.

— Thanks for your supportive comments. Funny you should mention that Ian, as I have a new version of that page that deals with line-length.

t’s good that you invite feedback but I would urge you to follow your instincts on this one. Experience suggests that when you try to accommodate all opinions you can end up losing what was strong and distinctive about your ideas. You’re the designer!

— Top man! Don’t worry, I can stand my corner and stand my feet like a little girl if I need to.

Andy Kokotka

May 28 2009 @ 11:22pm #

Hi Andy,

I work with Ian in the studio at NI. I like what you are doing in terms of branding and developer flexibility… white space… fewer colours, typefaces, logos etc. I know you said to focus comments on the home page but after flicking back and forth between all the other pages, the overall effect of the calm clear boxy approach makes me feel the need for a bit of anarchy now and then – tastefully done of course. I suppose this would need to be content driven and have file size and flexibility issues, but are there any plans for introducing a change of pace?

I noticed a distinct lack of hard sell for a subscription. Is this still to come/intentional?

cheers,

Commenting is not available in this channel entry.

Designing New Internationalist blog pages

Again, a few rules of the road

Designing New Internationalist blog pages

Entries

Modular design

Leave your comment

Andy Clarke

Andy Clarke

Andy Clarke

Jess Worth

Dinyar Godrej

Andy Clarke

Ian Nixon

Andy Clarke

Andy Kokotka

Hardboiled Web Design by Andy Clarke