Graphics For Bloggers [#6] - ActiveRain Math

Education & Training with Tech Training for You!

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


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)


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.


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!

Posted by

Follow My ActiveRain Blog
See when new posts come out!

Read More Blog Posts

My YouTube Channel

About Me

Email Me

I appreciate every new subscriber
to both my ActiveRain blog AND
my YouTube Channel!

Craig Daniels
This blog is all about technology and helping you to use it smarter! Your digital footprint is your chance to attract new clients. What kind of impression are you making via your website, blog, and social media? We’ll be talking about that! Are you as productive as you can be? What apps might help you out? Do you know how to use all the best tools inside the apps? I enjoy photography and videography, you can expect to see those topics also on this blog.
Are you ready to learn?
Welcome to Craig’s Classroom!

PS - get ready for some homework… :) 

Comments (118)

Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Jeremy - while you are on a roll... google bookmarks are better than AR bookmarks IMO :)

Apr 27, 2011 08:18 AM
Elisa Uribe Realtor #01427070
Golden Gate Sotheby's International - Oakland, CA
Opening the Doors to California Homes -East Bay

thanks so much for posting this. I'm going to give it a try again. I took the class in January, took what I thought were good notes, but couldn't get my header to work with the template in AR. Even after I resized it. thanks again.

Apr 27, 2011 10:06 AM
Sharon Tara
Sharon Tara Transformations - Portsmouth, NH
Retired New Hampshire Home Stager

Awesome and very helpful post!  One question:  Is it better to have two different headers for AR blog and Outside blog, or does it matter if they are the same?

Apr 27, 2011 11:34 AM
DeeDee Riley
Lyon Real Estate - El Dorado Hills CA - El Dorado Hills, CA
Realtor - El Dorado Hills & the Surrounding Areas

Craig, This is great!  I've tried to go back though and fix pics that appear too big as my header doesn't align like Sheldon's but other than pictures how can I get my blog body back to the 684 pixel size?

Apr 27, 2011 03:16 PM
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Elisa - I hope it goes better on your 2nd try - feel free to email me if you have questions

Sharon - they are virtually the same size 960 wide - however outside blog I understand has to be 134 pixels high and regular AR blog is 130 pixels high. I would suggest creating the taller graphic as the master and then cropping off 4 extra pixels for the regular blog - strange that they are different but it is pretty easy to workaround

DeeDee - I looked at your blog - your header graphic is 930 pixels wide and is short by 30 pixels - that is why it doesn't align quite right - but you can fix that easily enough once you know your target number now... :)

Apr 27, 2011 03:34 PM
Robert Courtney
Lihue, HI
Century 21 All Islands, RA, CDPE, MCRE, CIAS

Wow Craig!  Thank you.  Great tools and have been using Chrome and did not know how to analyze features I like.  Love the Inspect option.

Apr 27, 2011 08:24 PM
Steve and Jan Bachman
RE/MAX Gateway, Reston, Herndon, Ashburn, Sterling, Fairfax - Herndon, VA
Realtors - Northern Virginia

Thank you soooo much for this Craig. I learned some of this by making ugly mistakes and I still have to check my presets...I try to move them over from Picasa at 640 but if I don't pay attention I send them over higher and then they take too long to load. Great advice and continued great service to our AR community.

Apr 28, 2011 02:58 AM
Justin Dibbs
Fairway Independent Mortgage - Ashburn, VA
Mortgage Advisor

Man, you always write the best posts.  I have a bunch of your stuff bookmarked for when I have time to work on my blog.  Thanks so much for sharing!

Apr 28, 2011 03:29 AM
Chris Smith
Re/Max Chay Realty Inc., Brokerage - New Tecumseth, ON
South Simcoe, Caledon, King, Orangeville Real Esta

Craig, thanks for the Active Rain Blogging lesson.  It is much appreciated.

Apr 28, 2011 04:30 AM
Ron Marshall
Marshall Enterprises - Saint Michael, MN
Birdhouse Builder Extraordinaire

Craig, let me go grab a pot of coffee.  I will need it to sort through all this information.  Thanks!

Apr 28, 2011 09:09 AM
Mona Gersky
MoonDancer Realty, Dillsboro,NC - Sylva, NC
GRI,IMSD-Taking the mystery out of real estate.

I'm with Ron - glad I'm sipping coffee as I read this.  I'm bookmarking AND printing!  Thanks.

Apr 30, 2011 10:49 AM
DeeDee Riley
Lyon Real Estate - El Dorado Hills CA - El Dorado Hills, CA
Realtor - El Dorado Hills & the Surrounding Areas

Thanks so much Craig.  I thought I checked that but will check again!!!

May 01, 2011 08:22 PM
Tara Cummins
Stratagy4SuccessNow - Mesa, AZ
Marketing Concierge, Strategy4SuccessNow

Okay, I think it's worth mentioning that the sidebar width is 220.  I remember reading that somewhere before, but I wasn't sure so I came and found this post hoping it would tell me.  Fortunately I was able to use the inspect feature of Chrome that you mentioned to confirm it.  It's important to know so you don't end up with widgets too wide for the sidebar.

May 06, 2011 09:23 AM
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Tara - isn't the inspect tool cool - I use it all the time - widgets too wide are a common problem - now there you go doing extra credit work :)

May 06, 2011 09:36 AM
Lyn Sims
Schaumburg, IL
Real Estate Broker Retired

Wow, thanks for not stopping over & 'correcting' my header! Whewwww.

I hate it when you reblog someone & it contorts all the past posts & just messes things up!  Good FYI & tutorial.


Jul 09, 2011 05:24 AM
Linda Graves Arnold
Coldwell Banker Gundaker-St. Louis, MO - Chesterfield, MO
St. Louis Real Estate Pro - 314-422-2762 - Referr
I still need to create a header (will check out that blog post soon). I also hate the the way my side picture tiles. Any lessons I should check out on that? I now understand why some of my widgets look funny. Size does matter!
Sep 21, 2011 02:20 AM
Jon Zolsky, Daytona Beach, FL
Daytona Condo Realty, 386-405-4408 - Daytona Beach, FL
Buy Daytona condos for heavenly good prices


It is a very good information. i use images and was hesitating about the size, so this makes me happy. 684 is perfect ofr me.

One thing still bothers me. I think the blogs that go to Localism have more restrictions to the width.

Sep 24, 2011 04:46 PM
Craig Daniels
Tech Training for You! - Staten Island, NY
Technology Instructor/Project Consultant

Lyn - reblog often messes up another page, you inherit their graphics! thanks for visiting

Arnolds - background for blog pages, hmmm sounds like a good idea for future post

Jon - yes localism is VERY narrow at 493px... the good news is that the AR app automatically downsizes the photos for us (however you do have to be aware of that size for other things like youtube embeds where it cannot downsize the embed... I wish AR ould widen the localism frame - it is far too narrow in my taste!)

Sep 25, 2011 03:54 AM
Christy Walker
Christy Walker & Associates - Cornelius, NC
Christy Walker & Associates

Thank you for the tips!

Oct 12, 2011 08:18 AM
Sheila Newton Team Anderson & Greenville SC
Berkshire Hathaway HomeServices - C. Dan Joyner - Anderson, SC
Selling the Upstate since 1989

Hey Craig... I wanted to make a new background/wallpaper  image for my blog.. i actually did do it on picnic, but the size needs to be tweeked some... what are the dimensions for that?

Jan 04, 2012 11:47 AM