There’s so many people who have great ideas to share, but for one reason or another they never gain a following on their blogs. It’s not their fault. A compelling reason is because of mediocre blog design.
Big brands know all about this problem. Just look at how much money goes into the design of packaging for products like software, books, and even toothpaste.
Packaging makes up approximately 75% of the cost of the final products we buy off the shelves of retail stores. Designing a blog is similar — it can take huge amounts of time to build even a mediocre looking website to post updates on. But you can do better…
Merging Inspiration with the Realities of Design
Recently I’ve been banging my head against the wall trying to build a better design of my own, first for JoeMescher.com and then right here at Social Media Commando. But nothing felt right to me.
I wanted a clean design that had some flair, was easy to navigate and encouraged social media participation. So I went on a hard target search of my favorite blogs, like Copyblogger, Blogussion, Cali Lewis and DIY Themes. You might notice a few elements from their excellent designs blended into this unique blog.
Next I started the process of trial by error. I purposely took a two week ‘sabbatical’ from blogging to create new designs (or ‘skins’ if you’re familiar with WordPress themes). The only way I could be sure a design would fit is to see it in action — think about that before you hire a designer or go about building your own. Updates are often a critical part of the process.
This is where things get technical. You have to know the basics of CSS and a little HTML in order to piece together a kick ass blog that people will find appealing. Don’t believe anyone who says you can ‘set it and forget it’ with respect to the technical details (I know from experience — my first blog designs sucked).
The best way to learn is to visit sites related to design and coding, or find a solution that makes life easier. Here’s how I found an awesome loophole and the technical/design steps I went through to get this blog to the place it is today.
Skeleton – Meat – Muscle
The skeleton that makes all of my blog designs possible is the Thesis Theme for WordPress (affiliate link). Thesis automatically takes care of most of the coding you need, and it’s structured in a way to give you an SEO boost on search engines like Google. In other words, the Thesis Theme is like my blog’s skeleton.
You still need a little code to make your blog shine, and that’s where you’ll need to invest some time learning the basics, or hiring a designer (if you know it’s not feasible to spend a lot of hours curating your site, go with a pro).
One of my favorite resources for learning how to master Thesis design is a site called Art of Blog. That’s the site where I snagged some code to play with full width coloring of my navigation menu, header and footers. Check it out:
Each color represents a different space you can customize. I’d been going nuts trying to figure out a way for my menu bar to span the entire page, and with a simple copy and past this blog was able to make it possible. That’s what I love most about Thesis. So many people make innovative changes to their websites and then share the code online. It’s crowdsourcing to the extreme!
Just by grabbing a copy of the theme and using the one blog post above, you can insert a custom header image, trick out every space on your pages with custom colors and gain some massive visual appeal.
* I use the following sites for learning the color ‘codes’ that tell your computer what to display:
Computer Hope and Colr
*For free and easy to use designs, check out Picnik
So, if Thesis is the skeleton and customizations are the meat, what’s the muscle behind our blog?
You. You’re the catalyst for building something great. For being inspired to learn how to include Facebook Like Boxes onto your site, buying into Photoshop and maybe taking a course…as far down the rabbit hole as you’re willing to explore.
That’s the new and exclusive focus of Social Media Commando — teaching you how to customize your blog and chase your entrepreneurial spirit using social media technology.
Much more to come…
{ 4 comments… read them below or add one }
Thanks for the coding tips. I’m going to have to spend some serious time learning some of this for my newer blogs and online shopping carts.
And I couldn’t agree more about the importance of a beautiful package.I’m so glad you’ve changed your look. I’ve always loved your information and writing style, but the look of your older version, with the soldier and camaflage? I had to force myself to look beyond it, which I almost never do. Usually if a blog doesn’t work for me visually, I never go back. Your new design is sooo much nicer.
I have to tell you though, that for my own blogs, I think I designed some that rock, and I made themt despite not knowing any coding at all, although I do have a design background so I know what looks good. Typepad is rather flexible and with enough trial and error, I figured out how to get what I want. Tumblr, too, has a lot of styles to chose from then tweak.
My next big ventures will be on Thesis, and BigCartel, and I will be needing to peek at those sites you mentioned.
So keep up the great work. I love your new look. Congrats. And please stop by my shop before I leave the block. Just come in and say hi and introduce yourself.
Thanks for the props Liza, I’ll be a good boy and come visit before the move.
It’s cool to hear that you explore all options related to blog design, including multiple platforms including WordPress and TypePad. Both have their advantages for sure.
The bottom line is that whatever works for you is what you should pursue. Whether that’s hiring someone, learning code ‘one step at a time’ or simply choosing a template or platform that does most of the work for you. Good to know you had a hard time with the old soldier logo too, I felt it was just too shticky and got in the way of the info I wanted to share with like minded entrepreneurs.
Here’s to your new adventures in design and coding!
Thanks! Perfectly timed and much needed info… I knew Thesis was the way to go, but had a hunch that “more” was more! you rock!
Hey Vivian,
Thanks for your kind words. Thesis is definitely the way to go. Once you know where to find coding and ‘hooks’ shortcuts, customizing your page becomes fantastically easy.
One thing I forgot to mention is that Thesis now lets you upload a custom header image from your WordPress dashboard instead of having to upload files via FTP.
Cheers,
Joe