Archive for the ‘HTML’ Category

I haven’t seen them quite as much lately, but corner banners were really popular for a while. You can see one in the upper left corner of my main blog JackLewis.net.

The first step is to get the image. You’ll want it to be no bigger than around 150×150 pixels.

Here’s how I do it in Photoshop…

File>>New>>

Now use the Rectangle Tool to make a rectangle, wider than the image.

Now use Edit>>Transform Path>>Rotate and rotate the rectangle until it can touch the top-right and bottom left corners…

Apply the following Effects…

Create your text and do the Edit>>Transform Path>>Rotate thing again to make it line up with the rectangle. It should look something like this…

Click File>>Save for Web & Devices. Set the Preset to PNG-24 and make sure the Transparency box is checked. Click Save and title the image and set the “Save as type” to Images Only (*.png). And save it.

And it should look like this…

The next step is to get it up into the corner.

The code you’ll use is…

<div style="float: left; position: absolute;
left: 0px; top: 0px; z-index: 1">
<img src="[url to corner banner image]" border="0"
alt="[Message to display when mousedover]"></div>

…except replace the parts between the [ ]‘s with the appropriate data. You can also add a link if you want, like this…

<div style="float: left; position: absolute; left:
0px; top: 0px; z-index: 1">
<a href="[my link]" target="_blank"><img
src="[url to corner banner image]" border="0"
alt="[Message to display when mousedover]"></a>
</div>

And that’s how it’s done.

Among the things the reader’s browser will need to load for the main page of your blog are quite a few elements that won’t change very often. Blog rolls, style sheets,  javascript, etc. Browsers will usually request the modification date of the file they need, first, and if it’s older than the one stored in the browser’s cache, use the cached version. That not only saves you bandwidth, but speeds up the load time.

A lot of blogrolls are handled from other sites, but some are placed right on the page. Take any blogrolls you manage yourself, and convert them to javascript, put then in an exterior file and load them separately. That actually much easier than it sounds.

Lets take an example blogroll. Here’s what the html might look like…

<a href="http://blogscripting.com">BlogScripting</a> <br>
<a href="http://jacklewis.net">Jack's Blog</a>

To change that to javascript we simply do the following…

document.write('\
<a href="http://blogscripting.com">BlogScripting</a>\
<br><a href="http://jacklewis.net">Jack\'s Blog</a>\
');

Notice, we put the code inside a “document.write(”);” and we put a backslash in front of any line breaks and in front of any apostrophes/single quotes (other than the two on each end of the text.)

We’d then save that text to a file…let’s call it blogroll01.js…and call it from the HTML (put it in the code where the blogroll was)  like this…

<script src="blogroll01.js"></script>

Now when the page loads, that part will be loaded from a separate file, and inserted into the page. The next time the reader looks at that page, or any other page on your site that uses that blogroll, their browser will load the blogroll from their cache, instead of from your server. Typically the cache would refresh every time they opened a new browser, so the next day they’d load a fresh copy, but use that when visiting other pages on your site.

Your CSS styles should also be external as should any javascript you need for your page. This will do wonders at speeding up the load time as well as reducing bandwidth.

While this won’t actually reduce the bandwidth, it will make your main page load more quickly and smoothly.

HTML tables are nice because they allow you some very concrete structure that much more difficult to obtain using other elements. But the biggest problem with tables is that none of it displays until all of it loads. That means the readers has to wait until the slowest loading element before seeing anything in the table, and if your entire page is in a table, you can imagine the headache.

But, most blog templates now use divs. Divs are more flexible and unlike tables will display elements as they arrive. If your blog uses tables, then you need to rethink the HTML structure.

The next important thing is load placement. Even if you have your sidebars on the left, you can still load your entries first. On my main blog, JackLewis.net, I use divs and one sidebar on the left, but my entries are at the top of the HTML and the sidebar at the bottom. I was able to do this by using a “float: left;” style for the sidebar div. That means that even though most elements are processed and displayed top to bottom, left to right, the sidebar, once it arrives, is positioned to the left. So if the sidebar takes a while to load (and often sidebars do since they have outside elements) the entries still show up immediately and can be read by the blog visitor.

Next: Part 4: Exploiting the Cache

There are several techniques you can use to reduce the bandwidth on your blog’s front page. One of the obvious ones is to reduce the number of posts that appear. My suggestion would be to keep it at 5 to 10, unless you actually create more new posts than that in a day, then keep it at two days’ worth.

Another method is to put only excerpts on your main page. Lots of bloggers don’t like this because they like making it easier for their readers to enjoy that main page.  We solved this problem at John Hawkin’s blog RightWingNews by creating a custom Javascript code that loads the full post into the page when a link is clicked. (While it looks like AJAX, technically it’s not.) There’s a WordPress plugin that’s supposed to do the same thing, called “Read More Right Here“, but I haven’t tried it out, but it seems to work well on the demo. This method will reduce the page size quite a bit, and still allow your readers quick and easy access to the full blog posts.

There are two reasons to reduce the size of your main page: bandwidth and wait time. While videos hosted at other sites won’t affect your bandwidth, they will affect wait time if you have quite a few videos. Depending on what other factors there are that delay the loading of the page, you may want to be judicious in using multiple video embeds on your main page. The same goes for flash (including ads) as well as java applets.

Blogrolls take up a lot of bandwidth but we’ll address a solution to that problem in Part 4: Exploiting the Cache.

Tomorrow: Part 3: The Load Sequence.

Most bloggers don’t really think much about bandwidth. If they use a free service like Blogger.com or HomeschoolBlogger.com there’s no financial motivation to minimize bandwidth so it’s never really occured to them to bother with it.

Today I’d like to discuss several reasons to be concerned about it, then in the next few days discuss solutions.

Well, first, there is the financial part. If you want your blog to grow you’ll eventually have enough traffic that any host will start grumbling about the bandwidth use, if they haven’t already, and you’ll find yourself scrambling to pay for it as wondering how you can reduce it.

Another problem is page size, which of course becomes a bandwidth problem.

Go to the home page of your blog and look at the code (In IE: View>>Source, in Chrome: right click>>View Page Source). Now copy all of the code and put it into a editor that can do a text count (Eric Fookes’ wonderful NoteTab does this. I use it almost exclusively as my plain text editor). That text count is going to be the initial bandwidth your blog will use just for that page. It will also have images and other files, too, but for now let’s just worry about this page.

If the letter count is more than 500,000 (half a meg) you need to either trim it down or be creative with how it loads.

If your page takes time too much load, then you may be losing readers. When they were begining, Yahoo set a goal of 10 seconds for their main page to load, and that was back when most people had dial up. That’s still a good measure, because, really, people have poretty short attention spans.

To test how much this is affecting your blog, go to the main page and count off the seconds before you see anything of interest. If it’s more than 10, you need to be concerned. If it’s more than 20 you really need to be concerned.

Another problem excessive bandwidth can cause is slowdown of the reader’s computer. All that data has to go somewhere, and if they are like a lot of blog readers, and multi-task, then they’ll start seeing a serious drain on their resources, which if they discover it’s your page, may make them decide to simply stay away from your blog.

The are three areas to focus on for a solution to this problem: page size, load sequence and exploiting the cache.