# Graphics For Bloggers [#6] - ActiveRain Math

By
Education & Training with Tech Training for You!
http://activerain.com/droplet/8SH

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)

## 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.

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

Hi there! Thanks for checking out my blog today. I'm a tech guy living in New York City but I love that I can reach so many via means of the web. In my blog posts and tutorial videos, you'll get many new takeaway points that you'll be able to apply. By following my blog (button below), you will be able to see my new posts in your "following" newsfeed. If you enjoyed this post also be sure and click "like". It helps me see that my content is hitting the mark!

My blog home page lists my most recent posts, so if you feel like reading more, that's the place to go next!

Click to

close

Re-Blogged 3 times:

Re-Blogged By Re-Blogged At
1. Laura S. Baker 04/24/2011 01:15 PM
2. Sidney Kutchuk 04/26/2011 11:41 AM
3. David Gibson CNE, 719-304-4684 ~ Colorado Springs Relocation 09/24/2011 04:26 PM
Topic:
ActiveRain Community
Groups:
Active Rain Newbies
The Ninety-ninth Percentile
Addicted to Active Rain
Bananatude
Tags:
graphics
activerain
graphics for bloggers

Spam prevention
Spam prevention
429,468
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 #99
Rainmaker
233,501
Elisa Uribe Realtor #01427070
Golden Gate Sotheby's International - Oakland, CA
California Homes for Sale in the 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 #100
Rainmaker
1,911,741
Sharon Tara
Sharon Tara Transformations - Portsmouth, NH
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 #101
Rainmaker
633,359
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 #102
429,468
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 #103
Rainer
68,954
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 #104
Rainmaker
754,983
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 #105
Rainer
241,727
Justin Dibbs
Pearson Smith Realty - Ashburn, VA
REALTOR® - Ashburn Virginia Homes for Sale

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 #106
Rainmaker
579,396
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 #107
Rainmaker
917,567
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 #108
631,527
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 #109
Rainmaker
633,359
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 #110
Rainer
87,672
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 #111
429,468
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 #112
Rainmaker
1,309,776
Lyn Sims
RE/MAX Suburban - Schaumburg, IL
Schaumburg IL Area Real Estate

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 #113
Rainmaker
214,021
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 #114
1,659,985
Jon Zolsky, Daytona Beach, FL
Daytona Condo Realty, 386-405-4408 - Daytona Beach, FL
Buy Daytona condos for heavenly good prices

Craig,

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 #115
429,468
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 #116
Rainer
122,910
Christy Walker
Christy Walker & Associates - Cornelius, NC
Christy Walker & Associates

Thank you for the tips!

Oct 12, 2011 08:18 AM #117
Rainmaker
816,470
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 #118
Spam prevention

What's the reason you're reporting this blog entry?

Are you sure you want to report this blog entry as spam?