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

About the
Author
  is a Technology Manager residing in NYC who specializes in applied technologies in the fields of Architecture and Real Estate. Craig focuses on finding the best uses of tech as can be used to help a business be more successful. He is keen on always seeing the perspective and viewpoint of his audience and he tailors his teaching to be easily understood. Visit my "Recent Posts" page to see a listing of all that is new in case you missed anything!

if you enjoy subscribe subscribe


Would you like to be a sponsor of Craig's Classroom productions?
It is now possible! Please check out my
 sponsorship page for more information.

           

close

Re-Bloggged 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
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the envelope to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Topic:
ActiveRain Community
Groups:
Active Rain Newbies
Addicted to Active Rain
BananaTude
The Ninety-ninth Percentile
Tags:
activerain
graphics
graphics for bloggers

Comments 118 New Comment

Anonymous
Post a Comment
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the foot to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Rainmaker
211,905
Jim & Linda Arnold
St. Louis Real Estate Pros - 314-422-2762 - Referrals Welcome!
Coldwell Banker Gundaker-St. Louis, MO
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!
September 21, 2011 09:20 AM
Ambassador
1,305,385
Jon Zolsky
Selling Daytona paradise for heavenly good prices
Daytona Condo Realty, 386-405-4408

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.

September 24, 2011 11:46 PM
Ambassador
259,718
Craig Daniels
Technology Instructor/Project Consultant
Tech Training for You!

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!)

September 25, 2011 10:54 AM
Rainmaker
89,869
Christy Walker
Christy Walker & Associates
Christy Walker & Associates

Thank you for the tips!

October 12, 2011 03:18 PM
Rainmaker
602,379
Sheila Newton Team -- Anderson & Greenville SC Real Estate
--Residential/Short Sales/Foreclosures
RE/MAX Realty Professionals

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?

January 04, 2012 07:47 PM
Anonymous
Post a Comment
Spam prevention

Accessibility option: listen to a question and answer it!

To submit the form,
drag the key to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Ambassador
259,718

Craig Daniels

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

Accessibility option: listen to a question and answer it!

To submit the form,
drag the envelope to the circle on the side.

Type below the answer to what you hear. Numbers or words, lowercase:

Additional Information

Since 2010, Craig's Classroom blog has been the place to come for short technology lessons - here on ActiveRain I focus on technologies for real estate professionals - please subscribe if you want to catch future posts! :)

Check out a listing of my most recent posts

Would you like to be a sponsor of Craig's Classroom? click here to see my Sponsorship Information Page for more details. Thanks!

Circle me on Google Plus

Like my page on Facebook