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.
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.
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.
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.
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.
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.
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.
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!
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: