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 dustinstout.com. 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
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…
Instead, I want you to feel like this…
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!
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
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
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
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.
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:
- Abduzeedo
- Mashable
- The Resurgence
- 37 Signals Blog
- 8BIT
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.
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 dustinstout.com redesign?
Leave a Reply
You must be logged in to post a comment.