Hi guys, before I begin covering themes on my WordPress in Plain English series, I thought it would be a good idea to explain why so may blog themes and blog graphics (i.e. headers) are 960 pixels wide.
This is the 2nd post in my Build a Better Blog series that will look at design concepts related to every blog platform including ActiveRain, WordPress, Posterous, etc...
In my previous post Minimalism... It's Not Just For Breakfast Anymore I mentioned that we were going to look at...
- why I always use images that are 500 pixels wide (or less) in my posts
- and how to avoid "breaking" your blog (i.e. why sidebars sometime show up below the content)
This post will answer both of those questions and will also help you to see why it's so important to be aware of what you add to your posts and sidebars.
If you've looked at popular WordPress themes or customized your Rain blog, you've probably noticed that a lot of blog themes mention they're 960 pixels wide. You've also probably seen the number 960 when you upload an image into your Rain blog header.
That is not a coincidence or just some random number. Even with larger monitors being the norm these days, the majority of desktop monitors are still set to 1024 pixels wide by 768 pixels high.
So why is that important and what does that mean to you? Take a look at the graphic below. It's a screen shot of a WordPress blog design I'm working on for one of my websites.
- the overall design is 960 pixels wide which leaves a comfortable margin on each side of the screen
- it makes maximum use of the screen space available
- the posting area is 600 pixels wide
- + the sidebar is 300 pixels wide
- + the extra 60 pixels (= 960) is space (margins and padding) between and around those areas
Here is another example using my ActiveRain outside blog...
In this example I wanted a narrow design of 750 pixels so I could show more of the background so...
- I created a full screen background image of 1024 pixels wide
- a smaller posting area of 500 pixels wide
- and reduced the sidebar down to 200 pixels
- again the other 50 pixels are for margins and padding around the main blog elements
The reason you should know this is because it's also the reason why sometimes people's blogs look out of whack or their sidebar is way at the bottom of their blog (below the content area).
If you try to put a widget that is 350 pixels wide into a sidebar that is 200 pixels wide, it won't fit and will either break your theme design or it will spill over beyond the edges of your blog and look awful.
The same goes for your content (posting) area. If you add an image that is 900 pixels wide to a post area that is 500 or 600 pixels wide, it wont fit properly and will either spill over into the sidebar or the image will get squished down in size on some blog platforms and might look distorted so...
It's always a good idea to make sure your graphics and widgets are narrower that the space you're trying to fit them into.
One last thing. Why do always use images in my posts that 500 pixels wide or less? Because most blog themes have a posting area of 500 pixels or more. That means if you keep your images at 500 pixels wide or less and then you change themes, all your images will look just fine! It's that simple and will save you a lot of headaches in the future if you change blog themes!
If you have additional topics you'd like to see covered or would like more information about custom graphics, themes or to book a 1 on 1 consultation to create or customize your WordPress or ActiveRain blogs, you can reach me here Later...
For more info about how we can help you stand out from the crowd, contact GiselleStCyr@garaughty.com