DESIGNING A BLOG: 10 TIPS I WISH I'D KNOWN

When I first started designing my blog I knew absolutely nothing about anything. All I can say is thank goodness I had a friend that was able to teach me the basics. But even with the help of that friend there are a lot of finicky details I wish I'd known before starting because, I'll tell you, I made a lot of irritating mistakes that I had to rectify later on. So in the hopes of having you avoid falling into the same traps that I did, I'm going to warn you about some of these mistakes. For reference I use Blogger. While some of these tips may also apply to Wordpress, some are specifically Blogger related.

1. Consider your blogging platform carefully:
This is a big of a regret of mine. When I first started my blog I briefly looked into Wordpress, decided it was too challenging and moved straight onto Blogger. Not that there aren't some good things about Blogger, but I wish I had been better informed before making the decision. Elaine has a great post on Xomisse that gives you a rundown of each option.

In general I'd say if saving money is a concern Blogger is probably a decent bet, however if you're willing to spend a little and you want a more freedom, then self-hosting with Wordpress is probably a good choice. Alternatively, Squarespace is another easy to use, beautiful platform.

2. Pick an easy to read domain name that you can live with:
Want an example of a terrible domain name? My own. When you tell people that your blog is called Bloomin' Rouge you know what they go out and search for? Blooming Rouge. I really recommend making sure your domain name is easy to remember and spell.

3. Adjust the widths of your blog to be wider:
This is completely up to you, but before you get started on posts and adding widgets and what not it's a good idea to take a look at the width of your entire blog and of the sidebar. You can do this in the “Adjust Widths” section of the Template Designer. I set my sidebar width quite wide because I didn't want all my sidebar widgets to feel narrow and crammed into a small space. Adjusting the widths of you blog later in the game, once you have added various widgets, is a lot more challenging. It means having to re-align a lot of things.

4. Utilize text transform uppercase and letter spacing:
This might seem super obvious to anyone that knows some coding, but like I said, when I first started my blog I knew literally nothing. I remember looking for fonts and thinking “none of these are what I want.” Then I realized that firstly, you can use CSS to transform any font into uppercase and secondly, you can add spacing between the letters of your titles that will completely change the way the font looks. I've explained how to apply these changes in my 5 More Ways to Clean Up Your Blogger Template post.

5. Google Fonts exists... know about it:
Google Fonts is a great resource. It grants you access to countless free fonts that you can install on your blog. Instructions on how to do so can be found in the “quick use” section of each font, however I remember still finding it quite confusing as a beginner. I'm thinking about putting up a detailed walk through on this for anyone that's interested.

6. Always add comments when adding CSS:
When I first started adding things to my CSS box, I regretfully never added any comments to them. By that I mean I never added anything that would help me find my CSS adjustments again in my code (because they annoyingly don't always stay in your CSS box).

What you want to do it leave a note for yourself, but “comment it out.” Comment it out means that anything you write in between certain symbols (/* */) won't make a difference to the code. That way, in the future you can just search for your note in your HTML, even if you don't remember what the specific piece of code looked like.

For example if you wanted to transform your sidebar titles to uppercase this is what you would paste into your CSS box:

/* custom – transform sidebar titles to uppercase start */
.sidebar h2 {
text-transform: uppercase;
}
/* custom – transform sidebar titles to uppercase end */

7. Set your image widths in your CSS box:
You've probably noticed that it's most aesthetically pleasing when all your post images have the same width. You can set the widths in each post or you can use a little trick that I learned from my good friend Brittany. You can add this little ditty to your CSS box and it will automatically set all your photos to be the same decided upon width so that you never have to worry about it again:

/* custom – set post image size start */
.post-body img {
width: 640px;
height: auto;
}
/* custom – set post image size end */

Change the width to whatever aligns nicely with you text. Additionally, remember that your photos need to be high enough resolution to use this code. If you have a small photo, trying to scale up in size will cause it to look pixelated.

8. Set all font preferences through your CSS box and not in the post:
Here's one that I absolutely killed myself with when I first started. I set font my preferences (size, font family) in the post, rather than through the template designer. Don't do this. Just don't. What happens is if you change your mind about your font you can't override all your posts at once, you have to go through each post and change them one by one. So my advice is don't set any font styling in your actual post, instead paste this into your CSS box:

/* custom – set post font size and family start */
.post {
font-family: arial;
font-size: 12px;}
/* custom – set post font size and family end */

Then adjust the font family, size and whatever other styling attributes to look however you want.

9. Set text alignment through your CSS box and not in the post:
You're probably picking up on a theme here... if you want consistency don't set things through each post. Same goes for text alignment. Say if you first decide you want to center your text and you set that all through your posts, then later on you decide you want to justify the text instead, you're again going to have to go through each post and change it one by one. Instead, I recommend setting your text alignment by pasting this into your CSS box:

/* custom – set post text alignment start */
.post {
text-align: justify;
/* custom – set post text alignment end */
}

10. Consider carefully if you want to host your photos on Blogger of Flickr:
The disadvantage of hosting your photos on Blogger is that the quality is diminished. Flickr then seems like the obvious choice. However, there is also a downside to Flickr. If you host on Flickr you won't be able to use thumbnails for your popular posts widget (that is if you want to use that widget). Blogger can't generate thumbnails from images hosted on external sites. So it's worth weighing the pros and cons of each.