Site Redesign 2012

I’ve wanted to redo the look of my website for about a year now and have finally finished a new look that I’m reasonably happy with. With this redesign, I had a few goals in mind.

Goals of the Redesign

Create a responsive design

By leveraging the power of media queries, the browser is able to adjust the layout and typography, based on the width of the browser viewport.

Use a grid system to set the type

Typesetting was based on a 13px vertical grid to maintain the flow of the text throughout an article. All elements, including headlines and lists, take up a multiple of 13 in vertical space.

Use Typekit for custom fonts

Web fonts are finally a viable method of changing your site’s fonts without the hassles and downsides of previous methods: sIFR, Javascript replacement a la Cufon, and others. I wanted to experiment with Typekit to see what kind of impact using a different font has on a site. A very significant one!

Things I Learned

Love the single-column layout

My initial design had two columns, which created a lot of useless empty space on the right-side where the sidebar was located. However, the content of my site doesn’t really need the second column, so I removed the additional column. As a result, the layout pulled together nicely, become simpler and more elegant. Single-column layouts might be a luxury only smaller sites can use, but they really allow the focus to center purely on the content at hand, rather than distracting the reader with various other articles.

Grids as a guideline

Grids are a great starting point for layouts because they let you quickly prototype the frequently used elements of a site: the logo, navigation bar, content section, sidebar, and footer. However, sticking too strictly to the grid starts to make a design feel too rigid. In future iterations of the design, I’d like to style some elements that break out of that rigidity without breaking the flow of the content.

Experiment with web fonts

We’ve finally reached a new era where the majority of our web audience is using modern browsers with decent standards support, allowing us to use increasingly more technologies that blur the lines between print and screen typography and layout. This is extremely exciting because it enables us developers and designers to present our messaging and content more effectively and creatively than ever possible.

Conclusion

This is a very exciting time for web development, with lots of really great technologies coming out that open up new avenues for both designers and developers. Also, the openness of the web development community is amazing. There are many fantastic resources out there that greatly ease the development and design processes, giving us more time to spend on creating a unique experience for the most important people – our visitors.

Resources:

ZURB Foundation: Rapid prototyping and building framework
Typekit: Web fonts provider

3 Responses to Site Redesign 2012

  1. Steve says:

    Dear Richard,

    I would like to try your Kindle manager but I cant download the installer. 401 error.

    So far I have not been able to find a manager that actually works consistently. Why Amazon didn’t use the tried and trust folder system I don’t know but I look forward to the day when they realize that it works a whole lot better than their “collections”… Why reinvent the wheel.

    I love my Kindle as well, as a concept at least, but there are so many fundamentals I miss.

    I hope your manager will be the one.

    By the way it would help if you had a “Contact me” on your main page.

  2. Steve says:

    Kindle for PC from Amazon

    I cannot believe that Amazon is so bad at launching and maintaining such a superb product.

    The Kindle Manager from Amazon cannot sort collections into alphabetical sequence and it cannot sort books into collections in a way that affects the Kindle tablet. I have the AmazonKindle.

    I am hesitant to get the latest Kindle because I bet you that it has also been released with 101 problems.

  3. rpeng says:

    @Steve: Thanks for your comments and letting me know that the download link was broken. I’ve fixed it and you should be able to download the installer zip now.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>