Blog Redesign: A Method to My Madness

dustn-tv-2013
90 SHARES

There’s more to web design than just making things look pretty. There’s a method to the madness and in this post I want to share some of my redesign madness with you.

It’s been one full month now since I released my new blog design into the wild. By the grace of God, I have got nothing but positive feedback! In fact, I’ve had several requests from people to have me build them something similar (if not exactly the same).

My hope is that through reading this you may understand not only what has changed, but why. This is so you can take these same concepts and philosophies and incorporate them into your own blog design.


Why the redesign?


You may have been around about 6-7 months ago for my last redesign. This was right when [st] 3 was released. The old design served me well and even brought me a great deal of business.

As a web designer though, my personal site is my greatest showcase. Therefore, I decided that it was vital for me that my blog showcased my skills as well as my values as a designer and consultant in the most up-to-date way possible.

I’ve decided that every year, at the beginning of the new year I will unveil a new design for dustn.tv. I think this is infrequent enough to not be overbearing on my readers and just frequent enough to keep up with the latest web trends.


What all has changed?


I’ve broken this down section by section. While I don’t list every single little detail, it should give you a general idea of the major modifications and the reasons for them.

Bigger Everything

go bigger or go home

The first thing you probably noticed is that everything is bigger. As opposed to being a standard 960px wide, I decided to go with a 1200px wide presentation for the desktop version.

Optimal reading experience is the goal. Making things as readable for you as possible. I don’t want you feeling like this when you visit my site…

hunched over computer

Instead, I want you to feel like this…

relaxing-with-laptop

I want you to be able to comfortably sit back and not have to hunch over your computer screen to read through my posts and pages. Hooray for good posture!

This bigger-ness is further enforced by the other changes that follow.

No More Containers!

get rid of the box

I got rid of the content containers. I found that the blogs that didn’t have containers around their content felt more open, more free, more solid and yet more soft and inviting at the same time.

This idea was solidified by 37 Signals’ blog redesign. They did a great job of explaining it, and I agree with them 100%. They propose that content that is held within a container feels more “temporary”, whereas placing it openly on the background of the site seems to give it a sense of worth.

Crafting for Social

sharing should be easy

My previous design incorporated a floating share bar (courtesy of Digg Digg) that remained on the left side of the blog post and floated along with you down the screen. While it was functional, and a very popular implementation among socially savvy sites, it felt like it was imposing on the reader’s experience.

On mobile devices, the bar was just off-screen and completely un-usable. Not very practical.

So instead, I added the social sharers at the top of each blog post and below each blog post. This solved the mobile issue and also got out of the reader’s way while scrolling through the blog post.

You’ll also notice that the first set of share buttons are directly in the title of each blog post. I had this revelation thanks to my friend Peg Fitzpatrick who kindly tested out my new design before I released it publicly.

She brought to light the fact that if a reader is on the home page and doesn’t know to click-through to the full post, they have no easy way of sharing a post. I had never thought of that before. If someone wanted to, for instance, add it to their Buffer for later, they would have to click-through the post, wait for it to load then share it. Not exactly seamless.

So having the sharers directly in the title of the post allowed people to be able to share from the home page, should they so desire. More seamless sharing.

More Visual

vintage camera

Imagery helps readers to connect on a different level with your content. It engages a different part of the brain making the connection to the content stronger.

Thanks to the rise of Pinterest, Google+ and other social networks that emphasize imagery, the web has got a lot more visual. I’ve always added a feature image to my blog posts, but I believed it was time to take it to the next level.

Since the site is bigger it allows for bigger images. Bigger images make for better sharing on sites like Pinterest and Google+. And as research (and recent viral success) shows, images get more attention and are shared more than just plain text.

As a graphic artist, it is yet another opportunity to showcase my work and the power of visual communication.

Even Better Typography

typography is vital

I was intentional before about typography, but I’ve now made some significant tweaks to make reading text even more pleasant. Obviously the bigger site allows for bigger font, but that’s not all I did.

Now, if you’re on a Windows device, you may not be getting as much of an improvement as those on Apple devices, but you should still notice a change.

My titles are bigger and bolder than ever, along with my sub-headings. This allows for easier scanning for those in a hurry, and helps break things up a bit.

The paragraph font is my good friend Helvetica (or Arial for Windows users) but noticeably thinner. I dropped the font weight a bit to give it a crisper, lighter feel.

De-clutterification

In an attempt to make things less cluttered, I looked for every opportunity to get rid of unnecessary visual elements. The first thing I got rid of was my header.

old dustn.tv header

Instead of having a big header image taking up space between the navigation bar and the content, I decided to free up that space and just nix the big header. Then I moved my logo into the navigation bar, making sure that my brand was still prominent.

The next thing I started chopping away at was my sidebar.

I reduced the number of ad spots I offer in my sidebar. This makes the few spots that I do offer more valuable and gives me less to manage. Both of those things are good for business.

I also decided to nix my “Recent Posts/Comments” widget. While it was a very pretty widget, I realized it just wasn’t necessary.

Meticulous (borderline obsessive) Responsive Engineering

Mobile continues to rise. With smartphones overtaking the marketplace, more people are spending their browsing time on their mobile devices. For this reason, it is vital that your blog design caters to this crowd.

Mashable talks about this in the explanation of their recent redesign. Taking their brilliant advice for “mobile first” I’ve also made sure to design for the best possible experience on every screen size.

This is made possible through [st]‘s responsive framework and a lot of testing. I have specific styles, sizing, and optimized settings for each possible screen size. This wasn’t easy, but it was well worth it.


Sites That Inspired Me


To make sure credit is given where it’s due, here are the primary sites that served as inspiration for my redesign:


Final Thoughts


Now as a designer it’s always tempting for me to tinker and make continuous changes. However, everything I’ve outlined above, from a design perspective, is pretty set in stone for the next year. I may make some minute changes here and there (that most people won’t notice), but nothing major.

There are a few functional features that I’m working on developing that will enhance some of the things I’ve talked about above, and as soon as I am able to roll those out I’ll be sure to update you again.

I hope you have enjoyed the changes. Please let me know in the comments below if you have any more questions or would like me to explain further.

Bonus: Free Child Theme for subscribers!

Now that my new design is fully integrated, I’m now going to be giving away my old child theme to my subscribers. I will be sending out the download link in the next week so if you haven’t subscribed yet, now would be a good time. The child theme does require that you already have [st] installed in order to use it, in case you aren’t familiar with what a Child Theme is.

What is your favorite part of the dustn.tv redesign? You can leave a comment by clicking here.

90 SHARES

Get On The Insider List

Get exclusive content via email, gain instant access to a growing library of downloadable resources, and first priority for the latest happenings!

Comments

    • Tyler Hess says

      I wouldn’t mind knowing that as well, but what I really wanted to say is that what I’ve been noticing not only on this site but others as well is that I enjoy the move toward less clutter on websites. I’m still contemplating if I even want a sidebar at all on my next, soon to be announced blog.

        • says

          Yes– a rather large chunk of code that needs to be added to your child theme style.css file. If you have a [st] support license then you can find the tutorial in the Support forums. All I did was copy exactly what they outlined to do.

  1. chris wilson says

    Great explanation Dustin and I’m interested to take a peak under the hood of your old child theme too! I love learning things by investigating.

    I think your site really does have a great reading experience and love it for that. You didn’t mention the sharing buttons at the bottom of your post (maybe they were there in your last version) I think that’s a great prompt for a reader. They finish and then you invite them to share if they liked it.

    Great stuff.

  2. Artur says

    When I read the text on this site or any site that has implemented these font ideas and then I go back to some of my sites with small text that’s crunched up together I immediately see how changing it would help increase many of the importnat metrics, including a better CTR.

  3. Mark Clifford says

    Dustin,

    It looks great. I have one question. Are you self hosting wordpress or using the .com version?

    Also I appreciate the download coming. I will be using it soon

    Thanks
    Mark

  4. says

    Dustin, I gotta tell you, since I first discovered you on Churchmag hangout #1 I’ve been following you on G+ and here. Man you really are one of the most talented graphic artist online today! I mean it. And the fact that you wrap your premium blog content with a commanding understanding of marketing, Social Media, and SEO has landed you on my top ten list of “must follow online personalities”.

    You remind me of the Pixar short “One Man Band”. OK Maybe not, but you get the point. You must have a team helping you with all this!

    God has surely blessed you my brother!

    (I like what you did to fog the social media buttons until hover, but I wonder if the design will cost you shares. Wonder why you did not add 16px social icons to the footer, Why reload the page when the featured image is clicked, I would set conditional tag to turn this off on single.php, totally agree with your assessment of Digg Digg, your typography is awesome, love that FB is missing from your Social Networks, Classy CSS .hr effect)

    • says

      Wow– thanks so much Jason! I really appreciate your compliments! Like really really!

      I never saw that Pixar short until I went searching for it just now. It took me a while, but I did find it! A great short indeed! And yes, I am currently a one man band for everything here on dustn.tv except for my wife who serves as my editor (most of the time).

      The “fog” effect is a css filter (Greyscale) and currently only works in Chrome. I don’t anticipate it will cost me shares, but if it does I think it a worthwhile sacrifice for a less cluttered reading experience for the user.

      I hadn’t noticed the featured image stays clickable– totally missed that one!

      I got rid of my Facebook page last month– never had much ROI there.

      And I love my .hrs! lol

  5. says

    Fantastic article explaining your design choices and WOW what an amazing new site you have! I shared it all over the socialsphere. It’s gorgeous and I love all the custom designed elements throughout. 100% pinnable and shareable.

    Smart, smart smart!! Thanks for the shout and that I gave you a little idea. :)

    I wish you all the best with your new theme.
    Peg

  6. says

    best part of it all for me: Go Big or Go Home! I am a tall guy and do not like to be bent over all day trying to read something… bigger is better! Great job! I am a fan of the sidebar category buttons (I might take that idea into mine!, hope you don’t mind).
    Ray

  7. David says

    Excellent article. It’s been a long time since Ive seen such drastic measures be taken, but well put together to explain why exactly you did what you did.

    I will be reading up on the article on the 37Signals Blog, But thanks so much for this great article!

  8. impacto says

    Do you mind if I cite a few of your posts as long as I provide credit and sources back to
    dustn.tv? My website is in the exact same niche as
    your own and my readers could undoubtedly learn from much of the knowledge you give here.

    Feel free to let me know if this would be fine.

    Regards
    . It’s made me remember the reason why I loved this blog so much.
    Thank you, I will try and check back more often. . How frequently do you post on your blog.?

    • says

      I would love to have you cite some of my posts! As long as you aren’t copying and pasting them (bad for SEO). A citation or even a small snippet with a link back to the original is great!

      My goal is to post 3 times per week– but life can get busy so I don’t post as frequently all the time. Your best bet is to subscribe to my email list so you only get notified when I post something new.

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>