Tips for designing your personal site

Last weekend I redesigned my website. The new site has a homepage featuring a bunch of different things I’ve been working on, and a blog post view with no header, just a sidebar and the post itself. As a result the site is way more usable.

With any redesign you have to start by looking at what your audience needs and then tailor the site for those needs. My user base divides into three groups:

  • Friends and family, who will read more or less everything I write
  • Drive by Google traffic, who are likely to visit one page and then leave
  • Potential clients/employers/partners, who were referred from Hacker News, Twitter, an email I sent out or a job application.

I am guaranteed to get traffic from the first two groups, as long as I don’t break the site. The third group of clients, employers and business partners are people who do not yet know me, but may interact with me soon, and the site plays a big role in helping them make that decision. So the redesign is targeted toward that group.

To win that third group of users, my site has to answer one question: Who is this person and why should I listen to him? My old site didn’t do a very good job of answering that question. Here’s what it looked like:

The standard blog template, where posts are displayed in reverse chronological order, is good for only one use case – where the writer updates frequently and the readers want to see what’s changed since the last time they visited. The majority of blogs on the Internet don’t fit this model because the authors update infrequently and don’t have a consistent audience. Therefore, they should consider a different navigation scheme for their sites; the main problems are outlined in this Jakob Nielsen article on blog usability. My old site used a reverse chronological order for navigation, and here are some of the problems with that design:

  • No way to find good content that may be a year or more older.
  • Posts are on a variety of different topics, appealing to different groups of users, with no organization.
  • No photo, or description of me, on any page.
  • All of the action items (send email, read more about me, etc) require at least one full page refresh; this is too difficult, as most users are lazy and won’t hunt around.
  • Articles are posted in full text, meaning that user attention span might run out quickly (and also that 10 posts worth of images are requested and downloaded)
  • Finally, the large number of different pages made it more difficult to maintain, and each attempt to tackle a part would leave me overwhelmed thinking about fixing the whole thing.

So I had the following goals in mind for the redesign:

  • Tell a better story about me on every page.
  • Put the best content on my site in front of users.
  • Make the action items (email, Twitter, etc) easier to click.
  • Also, improve page load time, which would boost user satisfaction and my Google rankings. Google found that a half second delay in page load time dropped traffic by 20%.

So here’s what I came up with for the homepage:

And the single blog post view:

I’m pretty pleased with the way they turned out. The homepage essentially consolidates the information that was spread across five pages in the menu of the old design. Furthermore, it displays ten of my best posts, organized by category, and a sample of things I’ve tweeted, so there will be at least some dynamic content on the page for users who visit.

I also took some steps to improve the page load speed. I installed two caching plugins – WP Minify, which minifies and combines all of your Javascript and CSS files into one file of each type, and WP Super Cache, which generates a static HTML file and then serves that file to users, instead of hitting the database every time a user requests a page. These help minimize the response time, the number of requests, and the size of each request.

I also use a sprite to display the icons on the blog page view, turning five requests into just one. As a result, the blog post view gets a score of 83/100 and the home page gets a score of 78/100, about a 20 point improvement over the old design.

So that’s the analysis of my site redesign. Now if I could just to find a posting schedule and stick to it!

15 thoughts on “Tips for designing your personal site

  1. Joe

    Okay, I’ll ask the dumb question: I read the article, and couldn’t figure out if you designed your own theme, or just changed the way your old one worked. I really like the new design, and while I don’t want to replicate it exactly, I’d like to implement some of the ideas. I’m not much of a PHP coder, but my partner is and he could probably help if it required a completely new theme. I plan on teaching myself how to program again (that muscle has atrophied from lack of use), and I plan on releasing source code as I go along, so a nice home page listing that stuff and integrating with my blog would be great. (Note: If none of this made sense, it’s because it’s past my bed time, lol).

    Thanks for the post, and for your time.

    Reply
    1. kevin Post author

      Hi Joe! No, it’s not a dumb question; I had been using this theme called Primepress and continually changing the CSS and hacking the files to implement the changes I wanted. I actually started from scratch for this redesign.

      My theme is a child theme of Twentyeleven; this means that if Twentyeleven has a file called style.css, and I also have a file called style.css, then my file will override the file in Twentyeleven, but if I don’t have a file with the same name, then the file from Twentyeleven is used (if that makes any sense). You can read more about child themes here: http://codex.wordpress.org/Child_Themes

      I used mostly my own CSS, with a lot of WordPress’s CSS for things like blog comments. The homepage is a custom page template. You can grab all the code I use for the site here: http://bitbucket.org/kevinburke/blog-theme.

      Let me know if you have any questions!

      Best,
      Kevin

      Reply
      1. Joe

        Just an update: I’ve started messing with a very simple template called build (meant for tinkerers), and I’m learning a lot more about wordpress themes than I ever thought I would, lol. So thanks for the motivation. Build is a GPLed theme, so when I’m done, I plan on uploading the child theme to GitHub or a similar repository. I’d use bitbucket, but I don’t like Mercurial. :-D

        Reply
  2. Pingback: A good personal site | The colorful wolf

  3. Marco

    Hi!
    I think is the first time I visit your blog, and looking at the screenshot you posted of the “old” design, I can tell you that the new one gives a much stronger impression. In particular, the picture with the short “about me” provide a better feeling of connection with the writer (at least for me); I’ll likely follow your suggestions!

    The point on the inverse chronological ordering of the posts is quite interesting… have you thought about sorting the posts also by views?

    Cheers,
    Marco

    Reply
  4. Noel Olynger

    I was curious if you ever thought of changing the layout of your site? Its very well written; I love what youve got to say. But maybe you could a little more in the way of content so people could connect with it better. Youve got an awful lot of text for only having one or two images. Maybe you could space it out better?

    Reply
  5. Pingback: links for 2011-09-12 « Bloggitation

  6. frebro

    Thanks for this post! Don’t forget to give a padding so the content won’t line up at the extreme edges of e.g. an iPad screen.

    Reply
    1. kevin Post author

      Hi Frebro,
      Thanks, I’ve been meaning to get to mobile styles for a few weekends now – will hopefully have time this weekend.

      Kevin

      Reply
  7. Pingback: tips for designing your personal website | si inizia da 0.1

  8. Brent Mair

    Excellent ideas. I like the look of the front page and your tagline. Bookmarking this page so I can use your ideas when I get around to making my site usable.

    Reply

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>