Graphics For Bloggers [#6] - ActiveRain Math

Today's class we're going into some mathematics of our ActiveRain blog page layouts. Don't run away, this is simple math! I frequently see some problems caused by misunderstanding the boundaries and sizes allotted to us in our ActiveRain blog pages. When we don't watch our numbers, some unwanted results in appearance will follow! Let me give you three numbers that you should keep in mind and then I'll explain what these numbers mean:
960, 684, 502.

BLOG HEADER

Let's start off with the blog header and our first target number of 960. We have the option to customize the appearance of our ActiveRain blogs by creating a header graphic (if you like to consider one way to make a header, see my Picasa - Blog Header post). This header graphic has to be 960 pixels across (and 130 pixels tall). This dimension of 960 defines the overall horizontal edge to edge width of our blog. Because there is a right sidebar of information, our actual blogging area is the the difference of 960 less the sidebar space. Hang on to that thought for a second, back to it in a moment...

Let me sidetrack a tiny bit... Google Chrome has a cool tool that we developers like to use to analyze and adjust our web pages. If I right click on an element on a page, I can choose "Inspect" and it gives me some behind the scenes data to analyze. In the graphic below you can see our top level analysis which you see how the 960 pixel header governs everything that comes underneath. (and by the way, I'm using Andre Aragon in my illustrative graphics today because I want to highlight Andre, new AR blogger, as a resource for you to check out as he will soon be giving us great suggestions about RE Photography - I invite you go go over (after you are done here, of course!) and visit Andre on his Real Estate Photo Coach Blog)

BLOG BODY

Next, let's tour downward on our page and look underneath the header. It is split into left and right sides as we saw above. After we subtract the narrow space we need for our sidebar, on the left we have our larger width space for the body of our layout, or in other words our blog post. Notice when I click to inspect a paragraph on the body of our blog. The available width factor upon inspection is shown to be 684 pixels wide. Now to a main point for this class, when you insert a graphic into your blog post, make sure to scale it down to 684 pixels or less! For instance, I like to use 640 pixel wide graphics as it is a familiar preset size in graphics apps and a nice round number.

So if your app wants to save in a larger format (for example, 800x600 is another preset often available) make sure that you consider this! 800 pixels is too wide. If you have gone to the effort of creating a 960 header graphic and your blog body explodes through the normal size boundary, it will force the bottom of your blog to not align with the top. Let's take our favorite British Agent to illustrate this teaching point. Sheldon has inserted a YouTube video into his post that is 800 pixels wide. It causes his blog now to be too wide and now his header graphic no longer aligns properly. The extra space is shown in red. One quick solution for Sheldon... set your header background color to be the same color as your page background color so at least the overflow will not be as obvious. However, the better solution is to post elements that are no larger than 684 pixels wide. Another reason that you want to do so is an important one! You like when others reblog your posts, right? If your posts are "oversized" this causes big formatting problems on the page of the person who is reblogging.

BLOG COMMENTS

Now we move downward further into the comments section. If we analyze the comments text area we see an even narrower box to work in. As you can see below, when we inspect this box, it is 502 pixels wide. Normally we simply type text here and we could care less what this number is. However, occasionally we do post photos in the comments. When you do, aim for 502 or less otherwise you will cause the blog width problems and misaligned header and the blog owner will not be too happy to see this! :(

The other thing that I often see and is usually tied to when somebody asks, "why doesn't my header align?" relates to typing in a repeated character for example to draw a line.
If you do this ------------- a line made of a bunch of hyphens, it is possible and easy to go too far. Because there are no spaces to allow a wrap to a new line it will just keep pushing your blog wider and wider until you get the misalignment problems mentioned before. Also keep in mind that different browsers and systems and fonts might render differently than what you see on YOUR screen. If you choose to make lines like this (for example, in your signature) stop well short of the full width.

So this is the "math" you need to know when you blog on ActiveRain. Keep in mind that besides being correct on your own blog, you won't be causing misalignment problems for others when you write such an excellent article that OTHERS will want to reblog your work!