10 Blog Layout Tips

10 Blog Design Layout TipsHi friends! Today we'd like to welcome Katrina from Pugly Pixel. She's got an incredible eye for all things Photoshop and Blog related. We're happy to have her as a new contributor here at A Beautiful Mess. Today, she's here to share 10 Blog Layout Tips! 

I really enjoy blog makeovers and looking through sites for the first time. It's so much fun when a blog has great content and a design that keeps me navigating fluidly from page to page. In fact, when it's really good, I can spend hours on the first visit. And then there's the other side of the story, a new blog with great content, but encumbered by a design that's really hard to go through. Blogs that hold my interest do some things right and make me want to keep clicking around and I've noticed that these engaging blogs have a lot of common features. I don't claim to be an expert in user interface design, but I've learned by experience that these details make a difference. 

10 blog layout tips-beforeHere's an example of a blog layout that's not easy to look at. Read the tips below to find out how certain elements could be improved. Then, look below to see an example of a stronger blog design. 

1Vertical Alignment. When something sticks out, you notice it. And when a picture or text sticks out from the rest of the column, it looks like a mistake and it becomes a distraction. Things look right when paragraphs and images all fit into their columns precisely. Images and paragraphs should be the same width and this applies to sidebar elements, too. There are times when a design may intentionally call for doing otherwise, but in general, it's good practice to keep things lined up.

Quick Tip: For the content area of your blog (this is where your blog posts reside), choose a common width for all the images and make sure that your paragraph widths are the same. Left-justified paragraphs are recommended for readability. Although the text may look ragged on the right side, that's okay.

If you have sidebars, the same tip applies — choose a consistent size for your images and make sure they line up vertically. Images that stick out make the the page look cluttered.

2. White Space. A crowded page can feel claustrophobic and overwhelming, even when it's well-organized. Having white space — or well-spaced page elements — makes those sections easily identifiable and easier to read.

Quick Tip: You can control the space between the elements or sections of your blog by adding some margins and/or padding. If you're comfortable with adding code to your blog, you can control the space between elements with the margin and padding CSS attributes.

3. Uncluttered Sidebars. Navigation usually refers to the links we include in our horizontal navbars and sidebars. Navigation's purpose is to make it easy for readers to browse and "navigate" through your blog. Since the navbars and/or sidebars are visible on every page, the information we choose to include in these areas has to be meaningful and useful. It's easy to fill up these areas with every conceivable link to all our static pages and favorite blogs and websites. However, since these areas have a finite amount of space, we have to be mindful of what we put there. If fill up these areas with a lot of information, it tends to confuse. So, we have to curate these areas with good links and keep them neat and tidy and easy to read. Keep your sidebars uncluttered!

Quick Tip: If you have a blogroll on your sidebar, consider moving it to its own page and then add a link to it from the sidebar.

4. Accessible Info. Sometimes you need to ask a blogger a question and you want their contact info ASAP. I've come across many blogs that don't provide any way to contact the blogger, and if it was there, I couldn't find it. Make it easy for your readers to find the information they need by providing visible and easy-to-find links to your about page, contact info, and RSS feed.

Quick Tip: Keep important links in plain view — categories, featured posts, search box, links to archives, and other links to resource/static pages.

5. Short Description. Your blog banner is the first thing visitors see when they arrive at your website. It's nice when a blog has a short description on the banner that tells what their blog is about. For example, Nubby Twiglet, Shutterbean, SFGirlbyBay, and Creature Comforts have short descriptions in their banners. These well-chosen words remove all ambiguity and give the reader a clear idea of what to expect. 

Quick Tip: If you don't already have a short description for your blog, browse through your old posts and observe the topics you've written about the most. The theme of these posts constitute the primary subject of your blog and is a good place to start when drafting a short blog description. This short description can be a comma separated list or a phrase.

6. Typography. It's good to limit the number of fonts to no more than three — one for post titles, one for the sidebar titles, and another for the post body. Too many fonts tend to make a page look really busy. Additionally, when choosing fonts for your text, aim for legible fonts in a readable size. Now that web fonts are popular, I've seen some sites that use script fonts that are really hard to read. Whatever font you choose, keep legibility in mind.

Quick Tip: The most readable font under 14px is Verdana and larger than that, Arial is the most readable.

7. Colors. Colors are great. They're magnetic and draw attention. For our blogs, it's best to choose colors that direct attention to the areas where we want the eye to go. A splash of color in the banner and little dabs of color here and there place visual markers of importance for our readers. However, using too many colors can become a distraction — there will be too many places for the eye to go and it can cause attention paralysis.

Quick Tip: I personally like to keep my blog layout neutral so that I can go color wild in my blog posts. I LOVE color, but I minimize it in my blog layout and the reason is this: If both my layout and blog posts are colorful, it becomes confusing because there isn't a focal point the eye can rest on. So, use colors wisely and place them carefully in areas you don't want your users to miss — like your content (your blog posts).

8. Profile Photo. I used to think profile photos were unnecessary until I read an article about how the Wikipedia decided to use contributors' profile photos to show that real people were working behind the scenes to create all the free content we enjoy. I realized then that using a profile photo adds a lot of humanity to our online life and this especially applies to our blogs. Profile photos can be on the sidebar or on your about page. When I say photo, I mean a real photo, not one of those cartoon avatars that were so popular a few years back. 🙂

Quick Tip: I get really self-conscious when other people take my picture, so I usually take my own! 😀 Elsie has awesome tips on how to take better self portraits.

9. Fast loading pages. It's really frustrating to visit a site with a lot of great content, then find it painfully slow to load and navigate through. There are many factors than can make a blog slow, but this problem is especially common with image-rich sites.

Quick Tip: One way to help pages load faster is to use images that are optimized for your blog. Some blogs I encounter load images that are far too large for viewing. For example, the image width may be set to 600px, yet the image that loads is actually 1200px! To make it worse, there may be 5 images per post and 12 posts per page, which turns out to be quite an extra load! So, we help our pages load faster by uploading images with dimensions that fit our posts perfectly. Another way to help your page load faster is to limit the number of posts per page. And one more thing, you can add a "Read More" link after the first couple of images and an excerpt.

10. Backgrounds. Background Patterns are great and they can add a whole lot of fun and personality to a blog. However, background patterns that don't tile look like mistakes. I mention this because I once designed a site on a laptop with a small screen. Some time later, I saw the site on a pal's large monitor and I realized that the background covered only half of the screen real estate! It wasn't the end of the world, but it looked amateurish.

Quick Tip: If you're going to have a background pattern, make sure it tiles. What I mean is, make sure that no matter how large the monitor, that your background will tile from top to bottom and/or left to right. Take a look at your site from monitors of varying sizes. If your monitors are pretty much the same size, take a look at your blog the next time you visit a computer store and view your blog with the largest monitor you can find.

10 blog layout tips-afterHere's an example of a stronger blog design. In this design, individual elements are working together to create an easy to navigate site. 

I want to mention again that these are tips, not rules. They're just things I've observed and really like to see in a blog. How about you guys? Any blog layout tips or opinions? Do you have any questions? Katrina 

  • Good article and very useful tips. White space is definitely something that you have to be careful with, how you add text or shapes there. But since we’re in 2019 now, animations are the way to go instead of static images. So some online tools already have editors for this. Pixteller is one of the best right now, Canva too, but there you do not have so much control over what you can do.

  • Great post for new blogger, like me.
    Thank you very much for sharing this artical withus.

  • I really liked reading this post, easy flow and good things to think about. Here’s one for you though, the comment box could go above preexisting responses rather than having to scroll past all 161 of them. Now 162 😉
    Well done though, id love to have that kind of readership.
    XoBeka www.bekaellen.com

  • Very informative tips, Appreciate the work you have done here to make a difference. By the way you have very cute and beautiful layout. Thanks again

  • Love this post!

    Fabulously Vintage

    P.s. Enter for a chance to win a $25 credit to my vintage etsy shop!

  • Great post and advice. Fixing my mistakes now! -Heidi

  • awesome, thanks for the tips! i’m going to save this and come back to it. love these shots, too. those flowers in their new bloom look amazing!

  • Great post! Already have a little paper scrawled with notes here beside me!

  • Excellent tips! I was doing a little updating to my blog as I was reading. Thanks 🙂

  • Thanks for taking the time to write this. I really enjoyed this post and feel the same way about it. I really need to take the time to look at my blog from other computers to see if my background looks right. Love this post!

    ~A Real Housewife In Houston

  • Thanks so much for this! I adjusted my blog today on the basis of your tips and it looks better or at least I think it does….:S

  • This is so helpful ~ I’ve learnt so much from Pugly Pixel already, it’s great to see Katrina guest blogging here too 🙂

  • Thank you very much! I just started setting up a new blog and your tips are very welcome and useable. 🙂 I love your own blog style, too! Best wishes from the Netherlands xMM

  • Great tips! Glad that my blog follows most of them.
    I also love being able to see the bloggers face, gives it that human aspect.

  • @alyssa: hi alyssa, if you use an image editor, you can change the image size for each image and when you do, set them to the same width value. for example, in adobe photoshop, you can set the image by goind to image >> image size.

  • Excellent tips. I sometimes run across blogs that have really teeny pictures or randomly varying size pictures in their posts – it does come across as quite amateurish, you’re right. Obviously sometimes you can’t line everything up perfectly, but at least having a standard that you shoot for helps keep things looking polished and clean.

  • Thanks for your sharing. it is very good. nice article.
    Friend Link: http://www.shoestyleonline.com

  • hanks for your sharing, this article is very good, I like it very much, as you learn a lot!

  • Please let me know what you think of my blog:



  • Great ideas! Those are the exact things that I find employed on all my favorite blogs!


  • I love this post! It’s very helpful since I”m thinking about changing my blog layout. The points were simple and straightforward. Thanks so much.

  • These are really good tips 🙂 thanks

  • Thanks for the advice Katrina! Really helpful, as always! Just added description caption to my blog header =)
    Oh, and nice to meet you Elsie and Emma!

  • Awesome advice! Thank you for sharing on this topic!!



  • great info thanks! now I need someone to redo my blog, any takers?

  • Hello! I tried figuring out how to get the same width on all my photos and text for blog posts, but I couldn’t find an article that made sense. Do you mind instructing me on how to do that? Thanks!

  • Thanks for this! I’ve now improved the look of my blog a little bit: www.bnjrmlle.blogspot.com


  • Great, thanks! Changing a few things about my blog right away 😀

  • Awesome tips! Excited to update my blog. Thanks!


  • I recently started my blog and still working on the layout and some illustrations for my header so this post is super helpful! Thanks!!

    Got your flatforms yet?? http;//MissPlebian.blogspot.com

  • oohh…great tips.



  • These are awesome tips! I’m just starting out, so best practices are always appreciated 🙂

  • This actual website just took over ten minutes to load on my iPhone. It’s still not fully loading FYI.

  • @de cooper: have you considered hiring a designer? there are many out there. i have some listed here: http://www.puglypixel.com/blog-design-directory/

  • As someone very, very new to the blog game – these little tutorials and tips really help me out. I’m eager and excited, but also feeling a little nervous and lost! Thank you for helping a girl find her aesthetic, her voice and blogging confidence!

  • Right, i’m off to update my blog right now….thanks for the great tips.

  • unbelievably helpful post! i did the same as many and adjusted my blog as i read. some amazingly helpful tips, and i hope it’s improved my blog…if any want to take a sneak peek and give me any more hints (sometimes you can be too close to a project to make the right changes), would be greatly appreciated!!


  • The timing on this post couldn’t have been better. I have just 1 question right now. How sucessful can I be in designing my .com without knowing how to write code using wordpress or a program like that.

    thanks for your time,


  • this was so useful to read – thank you!
    Katrina is awesome!!

    Sally 🙂

  • Great tips here, especially checking out your blog through other monitors! It’s amazing how different it can look!

  • I’m currently doing some research to try and fix up my blog layout. It’s hard work, but I will keep at it. Thanks for the tips. =)


  • I LOVE the neon neon bracelets! I’ve tried to make my own bracelets similar to those and they never look that cute!
    Friend Link: http://www.yourshoeszone.com

  • Love this Katrina. I agree with everything you said. I always think it’s such a shame when a blog with great content has a design that encumbers the content. Will definitely tweet this one.
    Ronnie xo

  • @maria: i use old school html and css, but i think (i may be wrong) you can use dreamweaver.

  • What software or WordPress template do you use and can recommend to take your blog from a psd file to an actual live working blog?

  • Thanks for the tips ladies, I always appreciate it as a fellow blogger! I just did a Moonrise Kingdom themed outfit on my blog, take a look!


  • Super useful!! Thanks for the advice!


  • @Laura: hi, i think the plugin you’re looking for is the LinkWithin widget and it works for all blog platforms:


    you’ll find ample installation instructions on their site!

  • This was really helpful! Thanks so much for your advice.


  • Can you tell me how to add the ‘you might also like..’ bar under your posts? I’ve been looking so long and I just can’t find how to add.

  • The best advice EVER! Would love your input Katrina on what you think of mine. I spend hours going back and forth about things and then second guess myself constantly. Thanks for the great post!!


  • This is exactly what i needed to read, thank you so much for a brilliant post!
    I have just started my blog up again and am trying to find my groove there, these tips will be so helpful as i play around and try and make it more of a reflection of me.
    Thanks again! xx

  • I’m currently working on a new blog design, so this post came in time perfectly! Most of your tips were already covered in my new design but tip #8 really makes me seriously consider putting up a photo of moi. Thank you very much Katrina! Good luck on A Beautiful Mess! x. Maria

  • I recently use Katrinas advice to do a mini blog make over, love the hints.


  • Great advices!
    But i am not good in html so i have to use the patterns of blogger…


  • Hi,
    I have to disagree with one point: I detest the “read more” bit in blogposts,it really makes me leave a blog.

  • This is very helpful blog post, especially for those who are still new to blogging. I’ve been struggling with my blog interface and trying to find the one that looks the best. I think these tips help me a lot


  • This is such a precious post!


  • I like blogs that have easy to find categories or use tags efficiently. I try to keep the tags I use on my blog to a minimum so I use broader categories. Great tips!

  • @Mandi – it is Latin! It’s Lorem Ipsum, common placeholder text: http://en.wikipedia.org/wiki/Lorem_ipsum

  • Great post! These tips are so awesome. Paying attention to the smallest details really goes a long way. I always feel weird when blogs don’t look right but I never really sat there and analyzed it to figure out why. Now I know 🙂

  • Great post. I also like when blogs are organized and east to navigate thru.

  • After reading this, I really want to redo my whole layout to my blog. It’s not horrible but needs some freshening up.


  • What a great tutorial! I have been reading Pudly Pixel for a while now and am so excited Katrina is joining a Beautiful Mess


  • I did a post about this not so long ago….I tried and tried to make my blog more plain…but just couldnt do it Eek!

    I know what you mean and agree with everything…but mine will have to stay more than colourful for now 🙂

    Love your tips though!…perhaps one day I will follow them 🙂

    Love Happy xx

  • Thanks so much for the excellent advice. I love all your posts, but I especially pay closer attention to the blog improving ones, even though I’ve been trying and FAILING to set up my own blog for MONTHS now. I just have so many questions ( you guys have answered most of them), so much procrastination and just can’t sit down to ge it done. This week is the week I get it done! And I will avoid the before blog layout mistakes. Thanks for the inspiration! I also love the new look without the middle tab. You guys are learning too. Thanks

  • this is really great advice, i definitely need to redesign mine with a few of these tips!

  • I love this! It’s always a disappointment to overlook a blog because of a bad layout. Inspired me to re-do my blog. 🙂 Thanks for the tips!

  • Great advice! Thanks for sharing!


  • Thanks! A very useful post. I’ve bookmarked it under my “Blog Tutorials” folder for future reference!


  • What great tips & advice! Thanks, Katrina 🙂

    Silver from A Silver Snapshot

  • great tips!


  • I pinned this on my pinterest because I know I’ll be back to reference that!

  • Great taste and thanks for the helpful tips…I need to de-clutter my side bars!

  • hello – your site is new to me and I’m loving taking a stroll through all the wonderful content. I’m so happy to find more from Katrina, too! I’ve been a fan of Pugly Pixel for quite a while now. Looking forward to future posts!


  • Thank you for the inspiration! I’ve just started a new blog, so I needed some tips. 😀

  • eew, i’m really excited about this new feature! i’m planning a new blog layout for july, so these tips came in handy. (: thank you!

  • i’ve been a follower of puglypixels, so it’s awesome to see Kat sharing some advice here! yay!

  • Thanks for the advice! I’m constantly seeking ways to improve my blog. It’s just a small family blog, but I want it to rock! 🙂

  • Wow perfect post for me, I just started a new blog and I’m still working out all the kinks, tanks!

  • I loved ABM’s makeover so much, it inspired me to redo my blog too. And this helps even more! I’m still working on tweaking the details of my design, but I love where it’s going!

    Thank you!

  • I adore Katrina and Pugly Pixel! Just wish I had more time to put into practice what she teaches. I use the strawberry shortcake layout and LOVE it!

  • Bookmarking this post! I’ve only been blogging for a week but now that I think I can actually stick at it, it’s time to tweak my layout & personalise things a bit. These tips are super helpful, thank you!

  • @Amber Goodenough: great points! also, thanks for the tip about picmonkey.

    @Kim~whatpeggysaid : totally! i’m a blog love alumni, too. 😀

  • I linked over from the Pugly Pixel site because I love her stuff, I haven’t been to ‘A Beautiful Mess’ in a while because well… their older layout was SO difficult to read. And the advertisements/side bars took up more screen space than the content.
    I thought it might be a little contradictory to put layout tips on such an awkwardly designed site but I’m glad to see the look has been updated. The new look is SO much nicer, and the design tips from Katrina are really well written.

  • Hello from Ohio! I have been following your blog for quite some time, and am such a fan.
    I have a shop on Etsy called Choice Products where I sell hand painted, wooden home accessories (wine boxes, signs, and shelves). The reason I am writing to you is because I was wondering if you would do me the honor of featuring my products and shop on your blog, or possibly allowing me to host a giveaway.
    I know that you probably receive hundreds of emails asking you to feature people on your blog, but I would be so very grateful if you would consider my request.

  • PS thanks for the great post. Hope more like it in the pipeline
    Elena @ Randomly Happy

  • I was just wondering if Katrina, or yourselves, had any thoughts on how to get people to interact with posts. I’d love to get some meaningful back-and-forth going on my blog, but whatever I’m doing isn’t working too well.

    Think it’d be great to get a little blog community going, but don’t know where to start.

    Elena @ Randomly Happy

  • This is excellent advice, I’m just inbetween designs so this is fantastic! Jacob xx

  • so thankful for this! trying to update the look/feel of my blog without having to hire it out (or find a random free template that doesn’t fit the genre of my blog). these tips help immensely.

  • Thanks for the tips! I need all the help I can get for my blog. 🙂

  • Wow, well explained Katrina! I´m glad to see that my blog is following all the rules, I love the order and the white spaces and I also choose a neutral design to add some color in the posts.

  • This is such great advice. Alongside the Blog Love E-course that I signed up for, I am on the way to sorting out my little space of internet. Still a few things to work out as I find my feet.
    These posts are invaluable. Thanks so much xx Kim xx


  • I’ve been working quite a lot with my blog design lately, and realise now I’ve got more to do 🙂 Have to check on the vertical alignment and unclutter my sidebars for example.

    I loved this post and found it really helpful!

  • Love your tips! Now I’m off to clean up my sidebar. *grabs virtual broom*
    Catherine Denton

  • Thank you so much for your lovely tips!

    Vi leggo sempre = I always read your blog



  • I’ve never commented before – just admired from a distance – but I LOVE your blog and also LOVE pugly pixel – thanks for the post guys! 🙂

    www.charchiccc.blogspot.com x

  • Great tips Katrina! I’ve helped design and build many websites over the years and I think one thing is essential – KEEP IT SIMPLE! Make a site that people want to hang out on for a long time, so like you mentioned in #2, 3 and 7…it’s all about creating something that is not visually assaulting!

    Make your content stand out, not your background and messy sidebar! Choose a template or designer that understands that less is more. And I use http://picmonkey.com as a quick and dirty photo editor…a great tool for those of us that don’t have extensive photoshop training. Great photos can add sooo much to your blog, as Elsie and Emma know VERY well and is probably one of the reasons people love this blog so much! Including me!

  • Really good tips here. I read your site regularly, I love seeing you over here at A Beautiful Mess (another site I read often).

  • Fantastic advice, thank you Kateiba. Love your blog 🙂

  • Great tips! Going to look back on my blog layout right now!


  • Woohoo!! Such great tips and so timely for me because I just started a redesign!

    I lovvveeeee Pugly Pixel, SUCH an amazinf resource 🙂

  • I knew your advice would be worth reading, bookmarking too, Thankyou

  • Thank you for the great advice! it was exactly what i needed to figure out how i could improve mine 🙂 Thanks!

  • I love this post–it’s really so helpful. Something I have done for awhile to clean up my blog space is aligning both sides to form a ‘precise’ look to the body of the post. Of course, my blog is not nearly as ‘well kept’ as others, but I’m slowly learning code (s-l-o-w-l-y!), and it’s been really fun to see it improve little by little.
    Sarah M

  • Thank you for this article, I want to start a blog but the layout is very bad (to me unless) and these tips will be very helpful !

  • What a great post! Very helpful. One thing I would like to mention is I can’t stand blogs where music automatically plays. I leave those blogs as fast as possible.

  • Thanks, Katrina! It’s great to get tips from fellow bloggers. I’m definitely going to spruce up my blog with some of your pointers!

  • You’re THE BEST! Thank you always for such fabulous advice and words of wisdom.


  • This is great advice! I can’t wait to try out some of these tips.


  • Tip #4 = YES! This is a huge pet peeve of mine – not being able to find contact info for the blog author! I actually wrote a post about it yesterday:

    Great advice, Katrina! Looking forward to reading more. xo

  • I love this post – excellent tips and ideas.

    I also found myself able to nod along and mentally tick off the suggestions, which is always nice.


  • @mandi: yes, the sample posts are in latin. 🙂

    i’m so happy you guys enjoyed reading these tips. thanks for the awesome feedback!

  • Katrina is the BEST!!! I’ve been reading her blog for a while now and have learned so much from her. So much so I’ve considered doing blog designs for others. Katrina keep up the amazing work.

  • This was so nice to read! Excellent tips and ideas to improve my blog! Thanks ladies!

  • As someone that is brand-new to blogging this was very helpful. Thank you!

  • So cool to see Katrina contributing, I loooove pugly pixel, one of my fave blogs, I get loads of tips from there :o)

  • I have a massive blog crush on Katrina so really happy to see her here and kicking things off with a very useful post! Nice work!


  • Such awesome advice, Katrina! I am off to tweak my blog….

  • Great tips Katrina! I actually just decluttered my blog layout too, hopefully I’m on the right track!


  • Excellent advice guys. I need to dedicate real time to learning code, and how to make my blog look much better. Right now it looks pretty amateur.


  • really great advice. It seems like a lot of blogs have a zillion columns and links and it’s visually overwhelming. Simple is underrated

  • Thanks for a truly helpful article! I’m in the process of starting my own blog and have found so much great advice here!

  • Thank you for all the great advice! I greatly appreciate it and I’m looking forward to the new project ahead 🙂

  • I totally pulled up my own blog to compare when I was reading this! These are great tips! Now I just need to figure out how to fix some of the issues my blog has!


  • Thank you for the good advices, I´ll work on that right now! (:

  • Lovely post! I love Pugly Pixel and it was fun to see a post here 🙂


  • Love the tips. Your ladies blog is so wonderfully laid out. Glad you gave some tips and tricks!

  • i really loved this post. well written, Katrina. I always learn something that is USEFUL! xo, shari

  • I’ve been looking to update my blog layout, thanks for the great tips!

This site uses Akismet to reduce spam. Learn how your comment data is processed.