From the BlogSubscribe Now

The Writer’s Guide to Blog Design Bliss

Lao Zhai Mountain

Most writers know they need to build an audience online if they want to attract attention and establish a platform. The only problem is writers are not coders. Writers are not designers. And writers usually don’t have a lot of money.

So they buy a domain name, choose a free theme, and cross their fingers (if they get that far at all).

And unless they have a friend who is a coder (and is willing to invest his or her time) they are stuck with a cheap, second-rate design … that everyone under the sun uses.

Can you relate? I can.

Sure, you could invest your own time in hacking a design — but that thought is dreadful.

And so to make ourselves feel better we argue that design isn’t our job — or job is to write. So we persist in our bad design world.

3 Problems with Bad Design

However, there are problems with this attitude.

  • Turn off a potential agent or client – Neglecting a unique, personal, and professional blog design, however, can decrease your credibility. Sure, great writing can compensate for weak design — but perception is everything. Even Stephen King cannot sell like Stephen King if his name is Richard Bachman.
  • Drop search engine optimization – You might not know it, but design is an important piece in search engine optimization. While search engines can’t directly evaluate a website’s design, they can look at abandon rates and visitor paths to estimate whether design elements like too many ads or poor navigation are at fault.
  • Lag in speed — Code that is not optimized for speed could result in a slower user experience — depressing search results. All the effort you put into creating great content can be for nothing if your site isn’t optimized for speed.

And let’s not forget all this talk about multiple devices.

What In the World Is Web Responsive Design?

There is a good chance most people won’t access your site on a laptop. More likely it will be on a tablet or smart phone. If that’s the case, then a website needs to be visible on different devices: web, phones, and tablets.

In other words, they need to be web responsive. This can freak writers out:

You mean I’m supposed to create three different websites? I can’t even create one.

I’d rather watch concrete dry.

Inertia sets in. And we persist in our bad-design world. There is good news …

Why I’m Qualified to Write This

I have two personal blogs.

One I launched from the gate with a professional theme (by IA). It took me a lot of time figuring out how to make the theme work (reading the documentation is a great place to start.)

The other blog I updated recently from a cheap stock design. After twenty months of blogging, I figured it was time. I bought the StudioPress Minimum theme and updated Copybot in less than eight hours over two days.

One of the reasons it took me so long to update the site was because I didn’t want to hassle with the code, the back-end php editor file thingies … and what if I crash something and white screen my site?

All irrational feelings.

See, I get the hassle of running into problems — the fear of making a bigger mess out of something that isn’t broken.

However, the technology today gives non-technical writers like you and me tremendous advantage when it comes to creating a professional blog design. This is blog design bliss for a writer, my friend.

Here are the steps to getting to that place of peace.

1. Choose a theme:

The first step is to choose a theme that fits your needs and personality. I choose the Minimum theme by StudioPress because of its emphasis on content, readability, and decent rendering of images. (By the way, StudioPress is owned by Copyblogger Media. I did not work for CBM when I bought the theme. I do work for CBM now, however.)

2. Learn the difference between parent and child theme

There is some language you need to know when it comes to WordPress themes. I’m borrowing from the StudioPress 101 page now:

A framework (ours is called Genesis) is a powerful type of WordPress theme — the frame and body of the car — that acts as a design, security, and SEO foundation for your website. It also “future-proofs” your site customizations, so there’s no hassle when it comes time to upgrade your software with one click.

A child theme is the pure design element that rests on top of the framework — the cherry red paint job on that car. Or blue. Or black. Pink. Green. You get the idea…

3. You must know a little code

There is going to be a little bit of code you need to know. For example, in order to render the social buttons on the home page for the Minimum theme I had to know (I should say “find”) a little tag. But these you can usually find online … and once you have it, save it.

4. Jump on the forums

I jumped into the StudioPress forums to ask questions when I got stuck and to see if other people were having the same problem (it’s always good to see you aren’t the only one having a problem).

5. Email people who use the same theme

Find someone using the same theme as you (you can usually find these people through the forum) and ask them how they did X. Most people are kind enough to reach out and give their help. If you write “Can You Help Me?” as your subject line, then your email will get opened  by even the busiest people.

6. Use FastStone Image Viewer

Great images are what will make your site stand out. But they don’t usually come in the shape or size you need. I had to doctor the home page image to make it fit. I used FastStone. FastStone is free, by the way. Highly recommend it.

7. All else fails … look it up online

There was some work I had to do in my backend on GoDaddy (I’ve since moved to Synthesis for hosting – another Copyblogger Media product). Couldn’t find the proper location to upload an image to get the background image to display. Looked it up online and find what I was looking for. This works for just about EVERYTHING.

8. Create back up files

Yeah, the worst feeling in the world is when you hit “Save” and your site goes white because you fubbed code in the php editor. This is why before I do anything in the editor (which is minimal), I’ll copy and paste all code and drop it in Notepad. That way if I screw something up, I can replace it with the original.

9. Choose a responsive-ready design

If you already have a site, see what it looks like across multiple platforms using this StudioPress tool. How’s it look? If it looks janky on a tablet and smart phone, then you can bet people are bailing on your site when they arrive there. Now you could build a site for each device … or you could simply buy a theme that is web responsive. Fortunately, there are plenty to choose from in the WordPress theme market.

Conclusion

Here’s what it boils down to … persistence. Realizing that it’s not that hard. You just have to suffer longer than the code. And that can be done.

Of course if you have the money to hire a good designer (like Rafal Tomal), by all means … do so. I don’t have a clue what I’m doing half the time … but once I’m in it, I enjoy the challenge of getting my hands dirty.

If you love what you just read, then subscribe to CopyBot. And follow me on Twitter or Google+.

Image source: 2013 National Geographic Traveler Photo Contest

Comments

  1. Will Eifert says:

    Great advice, Demian.

    Having web designers as friends does help. I would recommend trying to make a solid relationship with a web designer. My experience has been that if you find a good one, they may often be willing to barter their design services for your writing services.

  2. Demian,

    I’m very anxious for Genesis 2.0 to come out. Your boy Brian Gardner has been teasing everyone with great screen shots as he works. Looks like Copyblogger may be on 2.0 now… but I’ve found that great web design on a budget is as simple as Genesis and Studiopress.

    Hanley

    • I know, right? He’s awful about teasing … and teasing. I’m eager for it to come out, too. What we have now works great … wonder how they can top this. :D

  3. Ever since I’ve moved to the Genesis framework a couple of months ago, I’ve had ZERO problems. I’m kind of surprised myself. Whenever I need help with anything related to my theme, I just send an email to the folks at copyblogger and usually receive a reply within a couple of hours. Great people.

    I’m thinking of moving my hosting to Synthesis but I’m not sure if it’s worth it at the moment since I’m not getting a ton of traffic.

    • That’s good to hear! I’ve met everyone who works at support and they are superiorly talented and super helpful people. One of the reasons I’m proud of working for CBM.

      Hm, I thought you had a lot of traffic coming to your site. Well, I’m sure it will only grow … and when you are ready, give me a call.

  4. So true, that the options today are so very easy for a non-coder. In fact as a technical manager; I’m a non-writer, as well as a non-coder. Writing is effort enough for me, no willingness to invest a lot of time into the technical development and/or maintenance of a site. Though I think mine looks smashing.

  5. Instead of watching concrete dry, try concrete5 instead.

    Built in SEO, version control (no more Notepad pasting), blog(s), forms, surveys, videos (and many other content types) and an in-context editing interface my Mother learned in less than 2 hours. You can try a free instant setup and the people in the support forums are the best. One click install available from many budget hosting providers.

    Almost all of the recent themes are responsive, and all of the add-ons and themes go through a strict peer review board process that among other things verifies that they will not conflict with any others.

    Step 2 above made my eyes glaze over; Step 3 forget remembering esoteric markup tags (they are for content and clouds).

    No more constantly hopping back and forth between an admin interface and your content – say goodbye to white screens and the security-ridden WP spaghetti code base and ridden-to-death themes. If you’ve had to battle with WP code before, you will most likely be able to create your own theme in a few hours.

    The upcoming 5.7 release will blow your mind! Step into the present and its possibilities and get back to creating compelling content.

    Hope this helps some writers without a lot of money :)

    P.S Resizing this comment textarea in Firefox lost the vertical scrollbar and resize anchor. Massive horizontal scrolling ensued. Sorry for any typos or misspellings – Not a friendly UX feature.