9 WordPress Blog Design Mistakes – And How to Avoid Them

Common Blog Design Mistakes and How To Fix Them. For WordPress and Blogger! | angiemakes.com

If you’ve just purchased your domain, purchased hosting, have installed WordPress, uploaded your favorite feminine wordpress theme (Harmless plug!) and are ready to get things customized to your liking and looking just right, this post is for you.

Here are 10 common WordPress blog design mistakes that I see beginners (And even seasoned) WordPress bloggers make that really have become a pet peeve of mine and should be avoided if you want your site to look professional.


1. Comment Forms on EVERY PAGE

If I had to choose a cardinal WordPress sin, I think this would be it. By default, WordPress is intended to be a blogging platform so the Comments / Pingbacks box shows up on every page. But do people really want to leave a comment on, say, your contact form page?

“Dude, sweet contact form!” 

“OMG! I just LOVE this contact form”

Umm…Not exactly. Let’s keep the comments on blog posts where they belong.

Wordpress Blog Design Mistakes and How To Avoid Them | angiemakes.com

Here’s how to quickly remove the comments from your pages by bulk editing them.

How to Remove Comments from Pages in WordPress | angiemakes.com

And for my blogging friends using blogger, here’s how to remove the comment form from your pages:

bloggerremovecomments


2. Sidebar Clutter

Your sidebar is a great place to feature your most popular posts, and call to action buttons. Ask yourself what you really want your users on your site to do. Subscribe to your newsletter? Follow your Pinterest boards? Browse your shop? Whatever action you want your site visitors to take should prominently display at the top of your sidebar.

*Sidenote: I know you’re trying to monetize your blog with ads… but please use them as sparingly as possible. Overusing ads can really turn users off to your site and increase your bounce rate.

*Second Sidenote: If you have a ton of badges you want to display, narrow it down. You don’t have to cram them all into your sidebar. Focus on what is important and necessary to display.


3. Font Overkill.

I know. It’s so hard to hold back on your font choices when there are So. Many. Good free ones to choose from. And especially when you can upload your own custom fonts like our themes allow. But do yourself and others a huge favor and stick to 2-3 fonts at a maximum used in your site text. Why? Because it is VERY easy to go overboard and create a cluttered looking site. Certainly you can incorporate images with some varying fonts, but if you want your site to look professional, you really need to reign in the number of fonts you use. Oh, and while you’re at it… find some Google font pairs that look good together!


4. Header Graphics Overkill.

Less is more. Like choosing too many fonts, going overboard with graphics, colors, and design elements can be a big detraction from your site’s actual focus and content. This is a true sign of a newbie blogger. Just because you find some great free clip art resources, fonts, and photoshop brushes… hold back! Choose one or two simple elements that represent your brand to use in your header. Then, let your content sing off the page. Use those extra free graphics you fall in love with for your blog post images. *Note, I could link and insert some pretty good bad examples here, but I don’t want to make any internet enemies. :)


5. Visual Heirarchy.

If anything is important for your blog posts and pages, it is this! Let your reader follow the flow of your text naturally by using your header tags (H1, H2, H3, etc) from within your WordPress text editor. (Bonus: This is really good for SEO.) Make lists when appropriate. Bold, underline, and italicize things so that there is a natural flow for your readers. Use divider lines.


6. Plugin Smorgasbord.

Again less is more! The more plugins you install in WordPress, the more chances there are that something will conflict, causing code bugs, and things to fail to work as expected. I have helped countless of our cute WordPress theme users who have something go awry only to find a silly plugin causing an issue. Take a look at our recommended and favorite plugins for WordPress here. Oh, and sometimes installing too many of the wrong kinds of plugins can cause your site to load slowly. Which reminds me…


7. Uploading Too Large Images.

I have seen too many photographers and bloggers who think that the bigger the image they upload, the better. Not true! In general, you want to upload an image that will fill your content area… no larger. Large images cause your site to load slowly. A slow loading site means your visitors will bounce away and never come back. Sad day! Upload images that are just the right size. And if you want a plugin that will automatically squash huge files upon upload, see this one!


8. Readability.

This one’s pretty straightforward. Use fonts and font sizes that are optimal for readability. Choose colors that can be easily seen on a variety of monitors. (Tip! Go to Best Buy and pull up your  website on a bunch of different computers. You may be surprised at how various colors are rendered on different viewing devices!) The debate is still waging as to whether sans-serif or serif fonts are the way to go for readability body texts. Be mindful of the fact that some of your users will be viewing on mobile devices as well. The key here is to really test how your site looks.


9. Images That Don’t Fit The Post Area

This is probably the second most common WordPress Blog Mistake and maybe you don’t even think it’s a mistake. You upload pictures that are too small to fit your post content area. Or, your pictures are all different widths which creates a pretty inconsistent look.

In my opinion, this can make things look untidy really quickly. The solution? Make sure you’re uploading images that are wide enough to fill your posting area. The width of your posting area will vary depending on the blog theme you’re using (*Hint, our themes let you set the content width to whatever you like.) If you have images you want to incorporate, use an image editing software like PicMonkey or Photoshop to create collages of images if you want to use several that are too small. Or, use a mosaic image gallery in a post. (Our themes come with these built in galleries!) *Also, I realize that many folks are now inserting narrow images because they are better suited for pinning. Why not put a couple of those bad boys side by side to fit your content area?*
Wordpress Blog Design Mistakes and How To Avoid Them | angiemakes.com

*Ahem, yes I realize I am using a page from my very own site to illustrate something you should try to avoid doing on your own site. This is a super old post whose images were designed 2-3 blog design revisions ago. Still, if this was my #1 popular post, I really should go back and edit it.

So, what about you? Do you have any blog design pet peeves? Cardinal sins that drive you bonkers when perusing the internet? Share ’em below!

 

43 thoughts on “9 WordPress Blog Design Mistakes – And How to Avoid Them

  1. Fabulous tips! Especially #8 – Readability. I can’t tell you how many times I find myself straining my eyes trying to read a blog post because they’ve chosen a very fine font with small text size in a very light color. Drives me almost as crazy as those who embed music into their site & I can’t easily locate how to turn it off.

  2. Thanks so much for the tip on removing unnecessary comment forms on every page! That was driving me nuts and I had no idea how to remove them… until now!

  3. Great post. GREAT. I hate clutter. However, I do find the pale gray text colors hard to read and they are here and everywhere. Thoughts??

    1. Giada,

      I know what you mean about gray. The thing about ALL colors on the web is that they can show up great on one computer but look dull on the next. It has to do with your monitors resolutions / color rendering. If all the grays are looking dull, try to make a few adjustments under your monitor settings.

      What on this site are you finding hard to read? I’ll have to give it some attention.

      Thanks for your comment btw!

  4. Thanks for all of these great tips! I really like the way you have used divider lines in this post (as you mentioned in the #5 tip). Do you just use the underline key on the keyboard to accomplish this or is it a feature? I have blogger (which may not have this option).

    1. Hi there! We actually have a shortcode that makes inserting dividers… solid, dotted, dashed, and image dividers a breeze. I’m not sure with blogger! You could always create and insert a divider image though!

  5. So glad I found this. I’ve been clicking around reading and learning SO much. I came back to this post to start with this question: My photos usually fill the page area but is it possible that the file size is too large and slows down my site. How would I know? How do I know what size my photos need to be? I’ve resized some on Picmonkey and I use square photos alot since those seem to work best on social media (I think). Thanks for your help.

    1. Stacy,

      GREAT question! Yes, ok. So you’re right in that the large files can often bog down your site. Try running this plugin. I LOVE it. It basically squashes super ridiculously sized images to better sizes.

      https://wordpress.org/plugins/imsanity/

      To figure out what size your images need to be, it depends on the width of your posting area. Hmm. You can always right click the image, in google chrome you can hit inspect element to find the width. That might make a good blog post actually! :)

  6. Thanks for the great advice! I just created my blog the other day and I’m definitely taking these tips into consideration through out my design process!

  7. Thanks for the tips! I’m new to blogging and I’m SURE I’m making some of these errors. I’m currently trying to figure out if it would be easier to navigate and set up an attractive blog if I paid for a theme instead of using a free one. I’m assuming it would be?

    1. Hi Lisa!

      I’m sure you’re doing great. Everything is a learning curve at first and WordPress is no exception. :) That said, you got this! Just dive in. You can do it.

      The difference between a paid theme and a premium one is mainly ease of customization and extra bells and whistles, etc. I wrote a blog post detailing that recently. Maybe you’ll find it helpful!

      http://angiemakes.com/is-your-wordpress-theme-hot-or-not-meet-the-wordpress-customizer/

      Everything takes some time to set up, but I think the Customizer options make it easier for beginners.

  8. Angie? Holy #$%@!! You just totally saved me! I have been pulling out my hair with this space between words thing. Shift enter? Holy grail if you ask me!!

    Just one question. I think I did it the hard way. In a nutshell I kept copying and pasting so I could hit shift enter to make the paragraph look right. But is there an easier way to do the bullet point approach in a blog? I had already written my blog and had to go back and rewrite some of it after finding your site.

    Thanks!
    Joanna

  9. Thanks for very useful tips!

    I just want to indicate a minor spelling correction. Hint #6 should be spelled “SMORGASBORD”. The swedish word “smörgås” means “sandwich” and “bord” means “table”. “Borg” on the other hand is a perfectly valid swedish word but it means “castle”. So a SMORGASBORD is in essence a buffet or “a table with many dishes”.

  10. I am so glad I found this post. I had never thought to go to someone elses computer to look and see what my blog looked like. Thank you for sharing.

  11. It took me a long time to realize that you could remove comment forums from other pages. I think it declutters your overall blog as well. This is really useful, thanks for sharing. I like the wordpress platform a lot and I don’t think I’ll be leaving it soon.

  12. thank you so much i will chek out my blog asap :)

    if you want you can chek out mine and tell me if you have any recommendation

    kayvanity.blogspot.ca

  13. Hey Angie! I really like your theme, but when I tried to upload it, it said there was an error and that the style.css stylesheet is missing. Do you have any advice? Thanks!

  14. Than you for all of these awesome tips and “mistakes”. I am in the m midst of an exhausting rebranding process of both my webshop and blog (pretty much my entire Universe), and this was super helpful.

    Thank You,
    Charlie Ranger (@aholicbycsd)

Leave a Reply

Your email address will not be published. Required fields are marked *