I am available for freelance work - HIRE ME

The Echo Enduring Redesign

posted by Matt Ward on Sep 8, 2010.

Echo Enduring has finally been redesigned, and this is just that mandatory post outlining what I did. Seriously, though, this post will outline the six key areas that I knew I had to address going into the redesign, and the solutions that I devised to solve the related problems. If you like the new design, be sure to have a read.

If you’ve frequented the Echo Enduring Blog at all in the past (and I hope you have), you may notice that things are looking significantly different now. That, of course, is because I have finally launched the redesign that I have been talking about for the better part of eight months now. It was a long process, made longer by my own innate perfectionism, but I finally finished it and turned it live last night.

Now, you may have also noticed that when design blogs like this one introduce a new design, there is a common trend to post about the new design. So, that’s what I want to do in this article. Actually, what I want to do is take a very quick look at six of the key objectives that I set for myself when I started this redesign, and how I attempted to solve each problem.

Readability

If you remember the old design, I had a very dark background. In fact, it was black with (almost) white text. It looked kind of cool when I first put it together, but I received more than a few complaints about how that particular colour combination actually made it difficult for people to read. Given that the bulk of the content on the site is actually comprised of articles that are meant to be read, this was hardly good for usability.

This shot of the old design shows what the text looked like on the dark background

This shot of the old design shows what the text looked like on the dark background

So, when it came to doing the new design, this issue was first and foremost in my mind. I had to make reading articles on my blog a more enjoyable experience.

To do this, I turned to the tried and true white background. Sometimes it can seem dull or cliched, but the fact of the matter is that it works. I also opted to go with a dark grey type rather than pure black. I find that this softens the text, and eliminates some of the hard contrast of black on white. Lastly, I bumped the font size up just a tad.

Overall, I think that it’s much more readable now.

Typography

In addition to just readability, I definitely wanted to do more with typography in this design. This desire was two-fold. First, I’m a big fan of carefully mixed typefaces in a design – especially the combination of serif and sans-serif. That’s more of a personal preference than anything, but since it’s my site, I wanted to pull some of that into the design.

The previous design just used a simple Helvetica (which apparently doesn’t render well on Windows machines).

I also wanted to try my hand at using @font-face, so as to introduce some non-standard fonts into the mix. I chose two. The serif font is the lovely Latin Modern Roman, which is really just a subtle variation on the classic Times family (which is used for non @font-face compliant browsers). The serif font is Carto Gothic, which I really like. Despite my fondness for it, however, I may change it at some point in the future.

Anyhow, I built an interplay of variation between the two typefaces, working to find that balance where the typography adds both interest and visual hierarchy to the page, without becoming to cluttered and confusing. That’s a fine line, and I hope I’ve managed to walk it.

Organization

The last design was not organized as well as I wanted, on several counts. The first was the widgets in the sidebar. There were lots of them – and mostly the standard fare: categories, twitter updates, archives, recent posts, popular posts, blogroll, tag cloud and so forth. It was a bad case of trying to make my blog look like what I thought a blog should look like, and needed to brutally and efficiently corrected.

The old sidebar was full of widgets like this Twitter box

The old sidebar was full of widgets like this Twitter box

Now, you will notice, there are no widgets in the sidebar.

I took the Twitter, recent posts, popular posts and blogroll (friends) and shifted them all down into the footer, making them easily accessible for anyone who wants that information, without allowing them to crowd out the main content. As for the tag cloud, I just completely trashed that.

When it came to the archives, I don’t think that people used them all that much, so I just set up a dedicated archive page, which contains all of the posts, broken out by month. It’s clean, contained and easy to navigate.

Then there was the issue of categories. As of a few weeks ago, I had way too many, which was symptomatic of poor content organization. I just created a category for this or a category for that, and before I knew it, I had this ridiculously long list. No more! During the design I factored all of my content into just a few categories, with the key ones being articles, tutorials, freebies, interviews and roundups. These, of course, make up the core of the main menu.

I then meticulously went through all of my posts and re-categorized them appropriately. This helped enormously with the overall organization of the site and with the reduction of unnecessary clutter.

Improved Forms

The forms on the old site sucked big time. At first, I was using a JavaScript library to beautify the forms, but that just caused more hassle than anything else. It made them look nice, at least most of the time. The rest of the time, it caused weird things to happen, such as text areas becoming a few hundred pixels too wide, or content falling out of the box.

The original form from the old design caused too many headaches

The original form from the old design caused too many headaches

It was a nightmare, and I eventually just removed it in favour of standard form elements, which looked more than a little ugly in the overall design.

So, with the new design, I wanted to do better. And, I think I have. I used basic CSS styles to format the actually inputs. I also added labels on the right side of the inputs, in much the same style that I did for captions on images. Overall, it makes for much clearer comment and contact forms.

I improved the search form too, throwing it up in the top bar to clear out some more sidebar room, while making it leaner and more compact, but still readily accessible. I also used the submit button much like a label, to keep a visual connection between all the forms.

Loading Times

Though you won’t notice it as much in terms of the actual design in front of you, another area that I wanted to address was that of load times. With the some of the big background images that I used in the previous design, load times could be a little slow. It wasn’t a huge deal most of the time. When I had the occasional traffic spike, however, it started to become an issue.

In terms of the design itself, I tried to help keep things moving quickly, by limiting the number of graphics that I used, and keeping them small. The cross hatching that should be seen in any browser that fully supports the :before and :after psuedo classes is only one small 10 x 10 PNG, and the textured backgrounds are 100 x 100 GIF files of just a few tiny kilobytes each.

Then, of course, there are the CSS sprites. All of the icons are broken out into sprite files. Currently, there are three different files, which made sense for organizational purposes right off the bat. Eventually, though, I will probably look at merging them all into a single file to help reduce HTTP requests even further.

I still have some work to do tweaking WordPress and the guts of the site in order to squeeze a bit more speed out of it, but overall I’ve found load times to be greatly improved.

Tasteful Ad Space

You may also have noticed that the site now has room for advertising. I put a lot of work into the content here, and I’ve been wanting to implement ads for a while now, but kept waiting until the redesign. So now it’s finally happened.

One thing that was important to me, however, was to not overload the page with advertizing. So, I decided to take the one ad per page approach. Once I’ve actually sold some ads, there will only ever be a single sidebar add served up with each page.

This will benefit the reader by not clogging the page itself with dozens of ads, which all just become visual noise. It will also benefit the advertisers, since they will have sole possession of each impression and won’t have to compete with other advertisers. It probably means less money, at least in the short term, but I’m okay with that!

Wrap Up

Anyhow, that’s pretty much covers the major points I think. Obviously, there was a lot more to the overall design that what I outlined here, but those were the six major areas that I wanted to address with the redesign, and the thinking behind solving each problem.

What do you think? I would love to get your feedback on the design, both in terms of what I outlined above, and the site as a whole. I expect that this will work as a foundation upon which I will build and tweak things in the coming months, so your input will be helpful.

P.S. Wasn’t that easier to read?

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Sep 9, 2010

InkSketch says:

Thought I might as well give some feedback now. Still awake and all.. Well, I like the redesign. The use of texture is good and the detailing subtle. Easy on the eyes. Choice of color works well too. I especially like the layout of your footer. The rounded corners don’t scream with bevels, nice and low key work here. Everything is so sleek and clean. Great job. Oh, and I’d like to say thanks for all of the articles you provide. Very educational and very much appreciated. I’m still learning and really get a lot out of your tutorials and other writings.

Sep 9, 2010

Matt Ward says:

Thanks! Glad you like the design, and especially glad to her that people are finding the site clean. That’s definitely something I was going for.

And you’re welcome for the articles. That’s what this blog is all about: providing my awesome readers with interesting content to help keep the grey matter strong!

Sep 9, 2010

Lauren says:

OH! so nice! It’s really soft on the eyes. I like the “letterhead” feeling of the site with the soft textures and borders.

I have to admit the bright text on such a dark bg made reading on your site difficult, so I just followed your content via the RSS feed and Twitter.

One thing that confused me at first was the archives. The icons that represent post type were not immediately clear to me. Maybe supplement post type text with the icon? I’m not sure, just a gut reaction.

All-in-all I love it! ^__^

Sep 9, 2010

Matt Ward says:

Thanks Lauren. Glad you find it easier to read! I’ll have a look at the Archives and see if I can rework it to be a bit more usable. Thanks!

Sep 9, 2010

Rachel says:

This is a beautiful redesign! Arguably one of the best I’ve seen – the attention to detail is amazing. And the use of typography and colours really does make the articles much easier to read. Well done! :)

Sep 9, 2010

Matt Ward says:

Thanks Rachel! That’s quite the compliment and I really appreciate it. At one point, I thought the attention to detail was going to kill me, but it seems to have worked out!

Sep 9, 2010

Joseph says:

Well done, big improvement over the last design. I really dig the super subtle texture, and the way you’ve presented the social bookmarking icons at the bottom of the post. Nice work!

Sep 9, 2010

Matt Ward says:

Thanks Joseph. I thought the social bookmarking worked out pretty well too.

Sep 9, 2010

Jack Rugile says:

Matt,

Well, I am jealous of the your redesign. It is remarkable! Your subtle use of color and textures is beautiful, yet modest. I agree that your old design needed a lot of work, and this is an incredible improvement.

I remember visiting your old site and thinking that it was like a college graduate showing up to an interview in a Hawaiian shirt and jean shorts. It just didn’t fit the content. Your content deserved more credit than that, and now it has been given justice :) Ok, your old site was not that bad, but you know what I mean.

There is just one thing that needs work I think: The metadata text (also used for captions) is difficult to read. I don’t know if it is just how it is being rendered in Google Chrome, or everywhere, but it gets lost. The white background kind of creeps around it and makes it very difficult to discern.

I wish you the best of luck with the continuance of your blog and will be enjoying the aesthetics much more now ;)

Sep 9, 2010

Matt Ward says:

Hey Jack!

Interesting metaphor about the Hawaiian shirt! haha! I agree though, the previous design just didn’t reflect the content of the site, or my own maturity or aesthetic as a designer. It was only just over a year old, but I’ve come so far in that year that I needed something completely different. Glad it seems to have worked out!

As for the metadata text – what resolution are you browsing at? Things looked okay in Chrome for me, but maybe you have a higher screen resolution?

Sep 9, 2010

Amber Weinberg says:

LOVE the new redesign Matt! I’ve been working on cleaning mine up a bit and removing a bunch of stuff people don’t use anymore as well. This blog is so much easier to read now :P

Sep 9, 2010

Matt Ward says:

Thanks Amber. I hope people will spend more time on the blog now that it’s easier to read, both in terms of colour scheme and less clutter!

Sep 9, 2010

Jason Gross says:

Matt,

I like the new design, the colors, and the readability :) I will say that when it comes to the blog I was lost for a bit on how to write a comment!

I think the “Related Articles” section threw me off because my first assumption was that commenting was disabled for the time being. Obviously I figured it out but it did make me think for a second.

Sep 9, 2010

Jon Phillips says:

Matt, this is sweet! I remember when I first test-drove the new design I was already convinced it was a step in the right direction (and a huge difference from the dark background and white text – definitely more readable), but you added some really nice and subtle things here and there – love the texture in the footer btw. Great job ;)

Sep 10, 2010

Len says:

Dude, good work on the redesign liking it lots, especially the footer. Len

Sep 10, 2010

Jack Rugile says:

Hey, I am at 1680×1050. I can read the text, but it is just kind of getting close to too small. I have pretty good vision, but others may not. If you would like a screenshot of what I am seeing just let me know and I will send one over.

The redesign definitely shows your growth as a designer. I am loving it.

Sep 11, 2010

Sneh Roy says:

Absolutely love the redesign! Great great job and very well done :-). Your blog Matt, just got even more awesome!

Sep 11, 2010

Johnny says:

The only thing I don’t like is the liney shadow on the logo at the top. It just feels like too much. Otherwise great job man, keep it up.

Sep 13, 2010

Joseph Alessio says:

The redesign feels polished and detail-oriented. I like the idea of not having widgets in the sidebar, they can be very distracting and really quite an annoyance. White background? It may be common, but why have people been printing black on white for centuries? Good work, Matt!

Jan 3, 2011

Jad Limcaco says:

Haven’t visited your site for a while as I’ve been extremely busy but I’m really liking this new design. Great job all around. So many different subtle things in this design that is just pleasing to the eye. Congratulations Matt on such a great redesign!

Leave a Comment

Links

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014