Method to My Madness: Redesign 2016

method to my madness redesign 2016

Instead of an all-out redesign, this year I decided to spend time refining. The results are delightful.

Every year since the inception of this blog I’ve done a complete redesign, generally launched at the beginning of the year. Until this year.

This year, instead of doing a complete overhaul I’ve decided to think big… about the smallest things. I’ve spent more time thinking through the tiniest details of my site design than I spent redesigning the whole thing last year.

And I think it’s really made a difference.

I’ll let you decide though as I walk you through all the details in this years blog redesign.

You may want to consider going back and reading my thought process on last year’s redesign first to add a bit more context to what you’re about to read.

Just FYI, if you want to create a beautiful website with minimal effort I highly recommend starting with a theme from Studio Press [aff link]. It’s the framework that powers this website and the only one I recommend for clients.


The most important part of any website design is the typography.

Unless of course your website doesn’t have anything to read and it’s just a bunch of photos. In that case, typography doesn’t matter.

In most cases though, typography (or the fonts, typefaces and their specifications) should be the top priority.

Last year I was very specific about the typefaces I would be using on this site, and I’ve been quite happy with them. However, I felt they could use some fine-tuning to assist with even better readability and visual rhythm.

Girl, look at that body

girl look at that body - LMFAO

Body text is the foundation of an entire websites typographic structure. So this is where I began my fontastic refinements.

Previously my body text was set at a base of 24px and a font-weight of 300. This resulted in an optimal characters per line (referenced here) at the full-width content area. The lighter weight also had a sleek, elegant feel to it that looked very smooth on retina displays.

But the problem is— not everyone is reading on retina displays. Yet.

The lighter weight also had a greater contrast with bold text in the older version, making the bolded text a bit more distracting than it should have been. (Hats off to David Kutcher for planting that bug in my ear last year.)

So after much consideration, I decided the best reading experience for my readers would be to thicken the font to a 400 weight to ensure readability on lower resolution devices.

But this also prompted me to reconsider the optimal characters per line. At 24px tall and 400 weight, it felt too heavy. So I ended up bringing it down to only 20px and thus ended up with what you see here.

Seeing this in action gave me a realization. The text actually felt like it held more weight— like it was somehow stronger, giving the words more authority.

As I’m a bit of a typography nerd, I took a look at some of my favorite high-authority sites with excellent typography, and I realized that they all had a similar average of characters per line. And comparing with my newly refined body text styling, they were quite similar.

Maybe this is more of a subconscious thing that I’ve psychologically associated with high-authority, beautiful sites. But I suspect if I feel that way, others might too.

That’s my story, and I’m sticking to it.

Aside from the font size and weight, I’ve also done some tweaking of the line height (the amount of vertical space that a line of text takes up) and paragraph breaks.

I was recently browsing Brian Gardner’s blog and took notice of his typographic style. His line-height really stood out to me, giving me the exact ease of reading that I was wanting to incorporate.

So I stole it.

The result is a line height of 2. The easiest way to explain this for the non-designer is that it’s very similar to when you make a document double-spaced. Every college student probably can relate to that trick.

In this case though, it’s not for the purpose of filling up more space because your teacher told you the research paper needed to be 15 pages long. This is actually a way of giving the reader plenty of visual breathing room to take in each word without the previous or next line encroaching on the current line.

Additionally, I increased the distance between paragraph breaks to a comfortable 34px. This gives a distinct enough break to make it clearly distinct but not too much as to break the visual rhythm.


Ah, the glorious hierarchy of typographic layout. Headings are a way for readers to decipher sections and sub-sections within your blog posts and pages.

Smart bloggers use sub-headings to increase a blog post’s “scanability”. Intelligent writers use them to keep their thoughts more organized and ensure the story they’re telling stays on course.

It’s important to make it so that these sub-headings stand out visually, so I’ve taken some time to think through my own.

The first change I made was to create a very subtle negative indent for heading text.

heading negative indent

A subtle -10px margin on headings makes them pop out to the left just enough to make them stand out without being obvious or distracting.

This will only happen, though, on screens larger than 1200px. But that’s a topic for another section below.

Next, since sub-headings signified a significant shift in the storyline or thought process of a post, I wanted to give them a bit of extra white space above to communicate a more significant shift than going from one paragraph to another.

I liken it to the kind of rest a musician might place inside of a musical score.

The result is a slightly taller gap between the end of a paragraph and a sub-heading.



Throughout my past designs, I’ve often borrowed from several different sets of highly popular, free icon fonts to accomplish my icon needs.

The reason I used these is because they were both free, open-source fonts, not just .pngs or .jpegs of icons. This is important because using a font instead of an image ensures that the icon will look good on all screen resolutions and they will likely load faster.

This past year, Studio Press (affiliate link) began using an icon font in some of its Genesis Child Themes (affiliate link) I hadn’t seen previously called Ionicons.

It’s another free, open-source icon font that is very well put together. And for a detail-obsessed designer like myself, they’re drop-dead gorgeous icons.

So I took some time to replace every instance of an icon inside my theme with an Ionicon version. This ensures a consistent look and feel of every icon throughout the site.


Why, oh why, do I love buttons so much? Is it just me? Does anyone else out there just find buttons to be fascinating?

Maybe I’m just weird, but I find it a lot of fun to play with and create buttons. I guess that worked out really well for Social Warfare users, though— so maybe it’s not a bad thing.

Buttons are an important part of any website owner’s design because they are usually the devices used as calls to action.

  • Click here!
  • Buy now!
  • Subscribe!
  • Register!
  • Submit!

Buttons are the universal symbols for performing an action.

So when I wanted to re-think my own buttons, I wanted to revisit my idea from last year about Action Inspires Action and apply it more aggressively to my site buttons.

I started by wanting to add an action icon to my buttons to help the visual communication of “clicking this will do something”.

So based on inspiration from the buttons I saw on the That Church Conference website (see my interview with the founder here) and a few other sites that incorporated icons in their buttons, I decided to add an arrow (or “chevron” to be accurate) to my buttons when you hover over them.

Give it a try below:

Red Button

Clear Button

See, isn’t that fun? When you hover your mouse over the button you feel like you’re about to go somewhere.

But Dustin, why did you put the arrow on the front/left of the button rather than the right? Doesn’t the right make more sense?

I’m glad you asked… and don’t call me butt Dustin.

Initially, I placed the chevron (or arrow) on the right side of the button. But that can be kind of confusing when you place another button beside it— like on my home page.

button hover arrow problem

If the button on the left has an arrow that points to the button on the right, it can be a little confusing– like the left button is telling you to click the right button. For anyone who has decision anxiety, this is the stuff of nightmares.

So, I decided it is best to place the chevron on the left side of the button, before the action text. Not only does this eliminate the dueling buttons problem, it actually makes more sense. The chevron is now pointing to the action you’re about to take!

If this is getting just a tad bit OCD for you, I won’t be offended if you stop reading now. It doesn’t get any better, I promise. The good news is my company is ready for hire to bring this level of detail obsession to your next web project.

I also wanted to have some pre-made styles for when I wanted to quickly add a “download” or “buy” button.

Now, the reason for the more static (not moving) version is that these buttons represent a more sensitive action. In the case of a download, the click of the button would begin the file transfer immediately. In the case of a purchase, the checkout process would begin.

I consider both of these to be sensitive actions since you don’t want to just trust any download link and any buy link. You want to feel secure in that action. So I decided I wanted these buttons to feel less “shifty” and more stable instead.

And lastly, I’ve created one more variation of a button that I will use for one, very specific and highly important call-to-action:

Pin This!

I’ve created a “pin” class that, when added to a button will replace the chevron with a Pinterest icon. This is for when I have a great graphic that I want people to be able to pin easily.


active state inputs

The first thing I wanted to change about the inputs throughout the blog was the color. Since the background color throughout the site is white, having inputs with the same background color felt washed out.

So I decided to give them a low-contrast grey to make them clearly stand out on a white background.

Additionally, when an input is active (when you click inside it) there is a 2px border that fades in so you can clearly know where you’re cursor is if you happen to scroll away and come back.

Mobile Responsive

The previous iteration of this design had numerous flaws when it came to smaller screens. Even though I had started with a mobile-first philosophy, I ended up trying some different things that didn’t work as well on mobile devices. And then I just didn’t have the time to go back and rework them.

Well, I’ve gone through and looked for all the problem areas on mobile screens and adjusted them accordingly.

Font sizes across the board have specific adjustments that are made at the tablet/mobile level. Margins and spacing are also slightly adjusted to keep the visual rhythm consistent.

This site has never been more attractive on mobile devices.

Insider Downloads

insider downloads page

For those of you who are lucky enough to call yourself Insiders, you would have gotten my email notifying you about a significant upgrade to your private downloads page. Since that email, I’ve made a few more tweaks to increase that page’s aesthetic and layout.

I wanted to first update the page by organizing the downloadable content into categories. Then I also wanted to make the download boxes a bit more modular and have a small description for each download just in case you weren’t familiar with what the item does.

This page will continue to get upgraded throughout this year as I decide on a better way to organize and distribute the downloads I give away to my Insiders.

You’ll notice I’ve also added a contact form on that page so that you can send me feedback or requests right from there.

Consistency in Every Single Pixel

Overall, the major theme of my meticulous refinement has been to establish consistency in every detail.

One example of this attention to detail is that I’ve gone through and made sure that anywhere that a border is added (like when an input is active) the border is 2px.

Notice the navigation bar at the top of the page as it follows you down— 2px border at the bottom.

Buttons, when they have a border, always have a 2px border (as opposed to 3px previously).

Everything that has a border is consistently a thickness of 2px. A small detail that subconsciously communicates that this is not some hacked-together, disconnected quilt of a website. It’s a unified, coordinated and intelligently built entity.

That’s what every website owner should strive for.

One Last Thing

If you’ve made it through this entire article, I applaud you. If you’re fascinated with this sort of thing, you’ll probably like taking a look at the ever-evolving Style Guide page I’ve created.

It will be constantly evolving just as this site does and might be a good way for any aspiring designers (or digital do-it-yourselfers) to find inspiration or learn how I approach things.

Now, go build something beautiful yourself.

Dustin W. Stout Avatar

45 responses to “Method to My Madness: Redesign 2016”

  1. Danny Brown Avatar

    Hi mate, Nicholas was obviously ahead of WordPress in knowing what makes for a better UX. 🙂

    Yeah, there’d been requests by WordPress users for a while, as it made far more sense – comment, then tell us who you are. It’s a natural flow, and – looking back – you can’t help but wonder why they took so long to make it standard.

  2. Dustin W. Stout Avatar

    Thanks Brian! I stole that comments section idea from Nicholas Cardot when he applied it to our Warfare Plugins blog!

  3. Dustin W. Stout Avatar

    Was it really? I actually had to customize it in my theme– Nicholas Cardot convinced me to do it a while ago right after we did it for

  4. Danny Brown Avatar

    That’s actually a standard feature of WordPress comments since version 4.4. 🙂

  5. Brian Meagher Avatar
    Brian Meagher

    Great article, Dustin! I thoroughly enjoyed reading it, and will be trying a few of the tips for fonts, spacing and formatting. Because, as usual, it looks awesome!

    You’re so forward thinking, and sharing your expertise is so appreciated.

    Just looking at your unconventional layout of the Comments section (Comment first, then Name, Email, Website)… it just might be genius.

  6. Sanjiv Manifest Avatar
    Sanjiv Manifest

    Thank You for the reply, Dustin.

    This post has been most helpful in many ways.

    If its OK with you, I’d love to share the site with you before launching … and maybe get the Maestro’s feedback :-)) … plus it’s content/purpose might have potential relevance in another context ?

    As always, am deeply grateful.

  7. Dustin W. Stout Avatar

    Hi Sanjiv! “Steal” away! The fonts I use are always open source Google Web Fonts. The one I’m using is called Open Sans.

  8. Sanjiv Manifest Avatar
    Sanjiv Manifest


    Had meant to ask you this question back in Jan … would it be OK if I “steal” the font you are using (on your site)? :-)) … really like it – and want to try it out on a site “REDO.”

    What font is it? I checked “view source” but its not obvious – seems like its part of some plugin?

    Thanks as always for your great “sharings!”

  9. Dustin W. Stout Avatar

    Thanks Daniel! Great word– microinteraction. I’m gunna use that in a sentence this week and feel 5% smarter. lol

    And in that word, you’ve actually captured the strategy of these incremental calls to action– getting people to take in-the-moment small interactions that ultimately make it more likely for them to take a bigger action.

  10. Daniel Salgado Avatar

    Incredible insights. Love the microinteraction on the Pinterest button 😉

  11. Dustin W. Stout Avatar

    Thanks Mike! Glad you liked it! Have you implemented your updates yet?

  12. Mike Allton Avatar

    This was fantastic, as always, Dustin!

    I, too, decided to spend time improving my existing site – namely, re-creating the design as a responsive layout. But your ideas on typography were particularly helpful.


  13. Dustin W. Stout Avatar

    Thanks Hamlet!

  14. Hamlet Avatar

    Your article has captivated my imagination, mused my creativity, and gave me solid constructive guidance on style. Very well done. Thank you for sharing.

  15. Randy Milanovic Avatar
    Randy Milanovic

    Hey Dustin. Entertaining as usual. I’ve got a tip for you to add: get your links and graphical CTAs working together at the end of your blog posts. They’ll encourage intent-based clicks that you can track.

    For example, readers that are in research mode, poking around here and there seeing what’s down each rabbit hole are more likely to click a link than a CTA that takes them to a download. Whereas, readers who are more eager to get your download (they already trust you), will go straight for the bait, and your conversion tool.

    A little bit of link strategy/psychology for ya.

    Put the link in the final paragraph and the CTA below it.


  16. Dustin W. Stout Avatar

    Haha! Thanks Brent! Never be afraid to steal ideas– it’s how I got to where I am.

    “If I have seen further, it is by standing on the shoulders of giants.” -Isaac Newton

    We all learn from copying, learning from and applying what we see others have done before us.

  17. Brent Jones Avatar
    Brent Jones

    Hi Dustin!

    When I re-branded and relaunched my blog earlier this year, I often found myself thinking, “What Would Dustin Do?”

    Don’t get me wrong. I don’t have the design skills you do.

    And no, I certainly didn’t copy your look when all was said and done.

    But I’ve always liked the clean and simple layout of your blog. It’s excellent. So I borrowed a couple of ideas.

    And it’s amazing how few people ever talk about typography. Nice job! 🙂


  18. Dustin W. Stout Avatar

    Thanks so much Les!

  19. Les Avatar

    Fantastic article Dustin. Your site is clean, elegant, and always filled with powerful, relevant, practical, valuable content. Only the Best,
    Les Dossey

  20. Dustin W. Stout Avatar

    I’m glad you enjoyed it Sanjiv! Do let me know if I can be of any more help with what you’re doing. 😀

  21. Sanjiv Manifest Avatar
    Sanjiv Manifest


    GREAT post ! … I’m not a typography nerd but … am so glad you are ! 🙂 … PLUS this post’s timing is beyond perfect.

    And Yes, I did read all the way to the end – was informative, pertinent (for me), and very easy to read, so kept going – your conclusions are spot on, particularly re

    We are redoing one of our sites and typography is very much on our minds and we just looove this style pleasing to the eye and very readable (e.g., 20px, 400wt, and 2 line height and 34 para breaks) … looks really really good !) … it’ll be fun applying your suggested underlying principles in our case… (love the buttons style too !)

    Have been away from G+ for quite an extended time but just happened to “dip in”and this post was on top … so here I am 🙂 … G+ always delivers !

    Thank You Dustin … well done!

  22. Dustin W. Stout Avatar

    Hahaha! I’m happy to help and available for hire if you like. 😀

  23. Dustin W. Stout Avatar

    Thanks Henrik! Steal away! 😉

  24. Henrik Blomgren Avatar
    Henrik Blomgren

    Hi Dustin,

    looking good indeed. I was waiting around to see what madness you were going to pull this year. A bit sad I noticed the site was looking the same. Then I started noticing all the different changes you made.

    The site feels fresher than ever and I´m really liking what I see. Easier to read and everything. I might steal the whole line-height of 2 for myself as well.

    Great work and looking forward to reading more on this site.

  25. Kristie Hill Avatar

    I NEED your buttons. They are the bomb dot com. Great site redesign, I’ve been drooling over for 2 years now.

  26. Riley Adam Voth Avatar
    Riley Adam Voth

    Haha I was actually just inspecting the page to copy it 10 seconds ago when I thought, “I wonder if he has a template already? I’ll ask…” Welp, swell guy. Haha!

  27. Dustin W. Stout Avatar

    Thanks Riley! I now create a Style Guide page for every website I do now. I’ve created a template that I paste into the WordPress editor to get it started and build upon it from there. If you want, shoot me an email and I’ll send you the HTML file so you can copy/paste it for yours if you like.

  28. Steven Buehler Avatar
    Steven Buehler

    And my psychiatrist thinks *I* am OCD… 😉

  29. Riley Adam Voth Avatar
    Riley Adam Voth

    Hey Dustin! Long time no talk… It’s funny cause even if I fall out of touch and don’t read anything from you in months. I circle back around and look for these kinds of post—ones about obsessive details in how to do things. I really appreciate them. I’ve read ever year’s recap and tinkered with your site since you began doing this! No kidding. And it seems like every year there is some small tweak or idea that challenges me / I can steal! 🙂 Ha.

    One of them this year will be creating the style guide page like you did… I’ve been thinking through how to do this for and the many guys who use it and work with me there. We need one as we develop.

    Thanks for being obsessive… and sharing about it! I appreciate it! Keep up the good work!

  30. Gary Whalen Avatar
    Gary Whalen

    Looking for Dustins new 2016 but my msn 10 has no idea what I am talking about. His google topic is Method to My Madness unquote. Dusin is he only one I have seen before. No idea who the others are or what any of them is talking about.

  31. Dustin W. Stout Avatar

    Thanks so much David! Appreciate you my friend!

  32. Dustin W. Stout Avatar

    Glad you enjoyed it John! Never hesitate if you have any questions. 😀

  33. David Hartshorne Avatar

    Great detail here Dustin and the site is looking good. But it looked good before! I’ve always liked the white space and clarity to your pages – they’re very easy to digest.
    – David

  34. John Finkelde Avatar

    Hey Dustin I’ve been reading this on my Samsung tablet and it is so easy on the eye, it’s brilliant.

    I’ll be writing on my site tomorrow to see if I can adapt your typography work for my site

    Huge thanks for outlining what you’ve done in detail.

  35. Dustin W. Stout Avatar

    I hear you Dylan. A lot of small detail in that icon and at a size of only 14px, that detail makes it harder to determine what the symbol actually is. Unfortunately, I couldn’t find a better icon in the Ionicons family that represented a financial transaction better. The cash is even smaller with more details, so this card icon seemed to be the best option. I’m hoping they add something in version 3.0 (which as far as I know is nearing release) to replace this card.

    Since the icon will always be partnered with the appropriate text though, I’ve decided to not worry about it as much. I’ve also got a little bit of time before my next premium product is released too, so no rush. 😀

  36. Dylan Robertson Avatar
    Dylan Robertson


    Just one comment. On the Buy Now button, I find the credit card icon to not be so intuitive. Took a while for me to figure it out.

  37. Danny Brown Avatar

    Ah, OK. Yes…. that’s probably a wee bitty too much for this non-coder to try. 🙂

    I’ll just continue to learn from the likes of you and Brian in the meantime – cheers, mate, always enjoy reading the reasoning behind your design changes!

  38. Dustin W. Stout Avatar

    You just have to continue editing the @media queries until you eliminate the extra bit of space. It’s extremely meticulous and for most people isn’t worth the headache.

  39. Danny Brown Avatar

    I hear you, mate – I use that kind of image now and again, and tend to find it expands the window a little. Still trying to find a good compromise.

  40. Dustin W. Stout Avatar

    I’m sure the developer is dealing with the same thing I am. I think it’s because up to this point we’ve had to create so many of our own “fixes” and handling of responsive images that this new system just doesn’t account for.

    The only real issue I’m having with them is what I call my “pull” images (the images that stretch out wider than the body text on desktop).

  41. Danny Brown Avatar

    Yep, that got the bugger!

    I’ve heard a lot of pushback on the new WP handling of images. The dev that designed my theme has WP responsive images switched off at minute, probably for same issue you mention.

    Looks great, mate, looking forward to checking it out on desktop.

    And, yes, I’ve been taking copious notes from Brian Gardner in the last 12 months or so, especially as I move to a more minimal and pure approach. 🙂

  42. Dustin W. Stout Avatar

    Thanks Danny! Appreciate you taking a look. I was having some issues with WordPress’ new responsive image functions and I must have just missed it on my final pass through the code. Should be all fixed up now!

  43. Danny Brown Avatar

    Hi mate,

    Reading this on mobile, and agree, the font is much easier on the eye. Looking forward to jumping over on desktop to see the full effect.

    One weird thing. With the images you’re using, it’s making the browser window “stretch”, on that I can pull the screen from right to left, and see a big white space on the right.

    Not sure if it’s to do with image embeds? Cheers!

Leave a Reply