Graphics For Bloggers [#6] - ActiveRain Math

By
Education & Training with Tech Training for You!
http://actvra.in/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
.

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!

Posted by

craig and his family

Hi! My name is Craig Daniels and I'm glad to have you visit me on my tech blog. I enjoy teaching technology and hope that you learned something new today! :) Be sure and check out my website where you can look up my posts by category. Be sure and also check out my new "Tech Tutor Video Series". It is a great way to learn as you get to watch as I explain AND demonstrate how to do various technologies that can help you. My material is not behind any paywall thanks to your voluntary support - learn more at my two in two patronage page.

if you enjoy subscribe subscribe

close

Re-Blogged 3 times:

Re-Blogged By Re-Blogged At
  1. Laura S. Baker 04/24/2011 08:15 PM
  2. Sidney Kutchuk 04/26/2011 06:41 PM
  3. David Gibson 09/24/2011 11:26 PM
Topic:
ActiveRain Community
Groups:
The Ninety-ninth Percentile
BananaTude
Addicted to Active Rain
Active Rain Newbies
Tags:
activerain
graphics
graphics for bloggers

Post a Comment
Spam prevention
Spam prevention
Show All Comments
Ambassador
301,819
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 03:18 PM #99
Rainmaker
169,399
Elisa Uribe Realtor #01427070
Wells and Bennett Realtors - 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 05:06 PM #100
Rainmaker
1,107,479
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 06:34 PM #101
Rainmaker
588,963
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 10:16 PM #102
Ambassador
301,819
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 10:34 PM #103
Rainer
68,804
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 28, 2011 03:24 AM #104
Rainmaker
708,792
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 09:58 AM #105
Rainer
239,777
Justin Dibbs
United Real Estate - 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 10:29 AM #106
Rainmaker
576,051
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 11:30 AM #107
Rainmaker
781,625
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 04:09 PM #108
Ambassador
593,461
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 05:49 PM #109
Rainmaker
588,963
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 02, 2011 03:22 AM #110
Rainer
87,352
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 04:23 PM #111
Ambassador
301,819
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 04:36 PM #112
Rainmaker
843,639
Lyn Sims
RE/MAX Suburban - Schaumburg IL Real Estate - Northwest Suburbs of Chicago - Schaumburg, IL
Schaumburg Homes

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 12:24 PM #113
Rainmaker
212,255
Jim & Linda Arnold
Coldwell Banker Gundaker-St. Louis, MO - Chesterfield, MO
St. Louis Real Estate Pros - 314-422-2762 - Referrals Welcome!
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 09:20 AM #114
Ambassador
1,356,983
Jon Zolsky, Daytona Beach, FL
Daytona Condo Realty, 386-405-4408 - Daytona Beach, FL
Selling Daytona paradise 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 11:46 PM #115
Ambassador
301,819
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 10:54 AM #116
Rainer
103,754
Christy Walker
Christy Walker & Associates - Cornelius, NC
Christy Walker & Associates

Thank you for the tips!

Oct 12, 2011 03:18 PM #117
Rainmaker
657,224
Sheila Newton Team -- Anderson & Greenville SC Real Estate
Berkshire Hathaway HomeServices - C. Dan Joyner - Anderson, SC
25 years experience -Residential Real Estate Sales

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 07:47 PM #118
Post a Comment
Spam prevention
Show All Comments
Ambassador
301,819

Craig Daniels

Technology Instructor/Project Consultant
Ask me a question
*
*
*
Spam prevention

Additional Information