Web Design Secrets

The pesky ï»¿ Byte Order Marks, how to get rid of them

AJ — Mon, 22 Jun 2009 03:50:35 +0000

Have you ever seen ï»¿ appearing on your web pages or SSI, but no idea of how it got there? That is what’s known as a Byte Order Mark or BOM, and it happens to be one of the most annoying little critters you will ever come across (when building web pages, that is).

So what causes ï»¿, and how do you get rid of it?

There is a pretty technical description on Wikipedia about Byte Order Marks but it probably won’t help the average webmaster. You get a description of what it is (assuming you can understand the tech talk) but no hints on how to deal with it. So here’s the beginners guide.

In simple terms, the BOM is telling you that there is an issue with the characters, and you probably saved something incorrectly. That’s way over simplified, but who needs to know every technical detail….you just want to know how to get rid of it, don’t you?

Using MS Expression Web

This HTML editor is particularly prone to inserting ï»¿ into your includes or SSI files. There is a very good explanation on BOM and Expression Web here. Follow these instructions and you should have no further problems.

Saving Files Incorrectly

Do you ever save files to something like Notepad, before pasting that into your webpage content? If so, then you may have the wrong save options.

save files with notepad

It’s easy to assume that because the option of saving as UTF-8 is available, that you should do that. But please don’t, that is the most common cause of introducing the BOM into your files! Always save as All files and ANSI.

Your Charset Meta Tag

This is sometimes a last resort, to see if it makes any difference.Check your Meta Tags. Do they say or do they have

If they are UTF-8 then try changing to iso-8859-1 I don’t promise this will fix your problem, but it can do, under certain conditions.

Try using Notepad++

This is one easy way to get rid of those characters. Download and install the free Notepad++.
Get Notepad++

Open up your file in Notepad++, click on the “Format” option,check the “encode in UTF-8 without BOM” and then re-save your file. You should now have a BOM free page.

Fixed width, or a fluid design?

AJ — Fri, 19 Jun 2009 07:08:06 +0000

These are the 2 most common ways to design a web page. Your choice is either a fixed width, OR a fluid design that stretches the full width of the page. There are advantages and drawbacks to both. Many designers will tell you they are the only two choices you have. Not true, but more on that later.

Fixed Width

This is an easy way to design. Pick a width (let’s say 750px) and your page will always remain at that….never wider, no narrower. As you build a page, it’s comforting to know that everything will display just the way you see it.

That’s the good thing about it, so any drawbacks? Well, let’s see. The lowest resolution monitor you really need to consider is 800×600px (ignore things like handhelds and cellphones for now). But how is your page going to display on a widescreen 1680px monitor?

Yep, it will be 750px wide. So you have 750 of webpage, and about 900px of blank space. It’s not a particularly nice look. Some people will not have a full browser window open at that resolution, which is the only saving grace, IMO.

Fluid Design

So is an expandable page any better? Well, yes….and no. On the one hand, the page will expand with a wider screen. So you don’t get a narrow width on a wider monitor. But on the other hand, it will keep expanding as there is nothing to stop it. So you go beyond a comfortable line length.

Which all leads to the question – is there a better way? Some designers will say no, those are your two design options.

Another Way

So, if neither a fixed or fluid design is the ideal, what is?

How about something I like to call “the Oprah effect”. A page that widens and contracts. But unlike Oprah, it actually knows when to stop. So it will expand to a predetemined width, set by you then stop expanding.

Let me give you an example of how this works. Take a look at this website. No, it’s not my site, but it contains css and code written by myself. A simple, functional, and relatively pleasing to the eye page.

What’s Different About That Page?

Take a look at the page using 800×600px resolution (to do this, right click on your desktop, select properties, then choose the settings tab). You will see the page displays at 95% width of the screen, centered, and with a colored background either side of the page.

Okay, so now try 1024×768. What do you see? the page is still at 95% width, and centered. In other words, it has expanded to fit the available screen size. Now…..if you have access to a widescreen monitor, try viewing the page with that, and see the difference.

The page has stopped expanding at 1050px wide. It remains centered, only the body either side of the page has expanded to fill the screen. View it in any browser you like, and at any resolution you want, the result is the same. (with a few minor exceptions that I will explain later)

Because the page doesn’t expand indefinitely, a good line length of approximately 60 characters is maintained on this 3 column layout.

How To Do It

Have you seen this done before? And if so, have you ever seen instructions for how to do it?

Probably not, yet it is a way to get the best of both worlds. Think of it as a “capped width fluid design”. The how to will be the subject of another post. Take care until then, and happy designing!

Capped Fluid Width Webpage Design

AJ — Fri, 19 Jun 2009 07:00:11 +0000

A capped width fluid web page

for those that have read the post on fluid versus fixed webpages, you will know what I’m talking about when I say “the Oprah effect”.

I discussed some of the benefits of a capped width, fluid web page. In other words, the page will expand with wider monitors, only to a pre determined width. Beyond that point, it will stop expanding, and the body either side of the page will expand. I’m sure you can see the reasons why this is beneficial.

A Little background On This Method

When I first decided to try and build web pages this way, I researched any information I could about it. And guess what? There wasn’t any – or very little.

So, was it something that couldn’t be done? Or perhaps it could be, but those that knew how weren’t saying? Either way, if I wanted to do this, I had to find the way myself, there was no simple step by step tutorial to help me.

So lets quickly recap what we want, and then we can get on with how to do it.

A page that looks good at all screen resolutions.
A page that will expand and contract
One that will stay centered
A page that knows when to stop expanding
And it must work with all OS and in all mainstream browsers.

An overview on how it works

Let’s take a high altitude view of how it’s going to come together, before we get to the specifics. For those that know a little css, you will realize that a simple max-width:some value; simply isn’t going to do the job.

For a start, Internet Explorer has no idea what that means. So what does IE understand? Well, a javascript expression that does a similar job to the max-width property.

We also need to consider the page centering – it can get quite messy if we don’t do things the right way. So, Im going to assume you’re using an external stylesheet, and show you what you need to add to that and your HTML page to get a perfectly behaved capped width page.

The stylesheet

On any stylesheet, you generally start off adding properties to the body selector. This isn’t intended as a css tutorial, but perhaps we need to be clear on what I mean.

Very basic css is comprised of 3 parts – a selector, a property, and a value, set out like this.

body{max-width:1050px;} where body is the selector, max-width is the property, and 1050px is the value. Ok, that’s simple enough.

So let’s assume you have a simple 3 column table layout on the page, with the styling in an offpage stylesheet. You could simply set the table width to 90% and leave it at that.

What happens then? the table will be at 90% width, regardless of how wide the monitor is (the resolution of the screen, to be more precise). So we are going to tell the page, occupy 90% of the width of the screen, up to a maximum width of 1050px, and remain centered at all times. Shouldn’t be too hard, should it?

First part of the stylesheet

body {

max-width: 1000px;

background-color:#bccbf2;

font-family: Arial, Verdana, sans-serif;

font-size: 93%;

color: #000;

margin:auto;

padding:0;

text-align:center;

}

Only the bold parts of this are required, the other properties are entirely optional. So, if we are going to be using a 3 column table for our page design, why have we put the max-width property up here in the body selector, and not in the following code which deals specifically with the table?

Im sure inquiring minds will want to know this – so more on that later.

Next part of the stylesheet

.main-table {

width:expression(document.body.clientWidth > 1002? “1000px”: “auto” );

font-size: 93%;

margin-top: 0px;

margin-right: auto;

margin-bottom: 0px;

margin-left: auto;

}

This is whats known as a javascript expression. IE can understand this whereas the max-width we used earlier will work for Firefox, and other browsers.

So let’s look at what this expression is really saying. document.body.clientWidth > 1002? “1000px”: “auto” Is the page wider than 1002px? If so, then make it 100px wide. Why are those 2 values different?

because IE6 has a slight bug. If they are identical values, then it will loop the code – result is a frozen screen.

Centering The Page

So, how are we going to ensure the page is centered? Actually, we have already done that! I said earlier I would explain why the max-width property was put with the body selector, rather than down here with the table.

Take a look at the table properties for a minute. You will see that I have set the left and right margins to auto. What the means, is that the table is now the same width as the body. Big deal, you say?

Actually, it is a big deal. Because the body and table are the same width, it means I can apply the max-width to the body instead of the table. This in fact gets around all those nasty centering issues you are going to have doing it any other way.

So think of it this way…..I have told the table to go to the full width of the body. I then told the body it was to go no wider than 1000px. Even if you don’t understand why this works, just trust that it does!

Last part to add to the stylesheet

One more thing we need to do in the stylesheet. As we have created the class above, called main-table, we need to create some properties for any other tables we might use on the page. This isnt essential, it’s merely to ensure they will format the way you want them. So here is a basic one that you can adjust to suit yourself.

table {

font-family: ‘Trebuchet MS’, Arial, Verdana, sans-serif;

font-size: 100%;

color: #000;

padding-top: 2px;

padding-right: 2px;

padding-bottom: 2px;

padding-left: 2px;

}

If we didnt add this, then any other table we might add to the page would take on the properties of the class above. Things like auto width for example.

Making the changes to your HTML page

Okay, nearly there. All we have to do now is add in the class to our page.Here is a simple page, utelizing this way of limiting the width.

content goes in here

(please don’t leave a comment to tell me that the align attribute is deprecated for tables! I know that….just keeping it simple)

How will all that work?

The main content table will expand to 900px, no further. The max-width and the javascript expression ensures that. If your monitor is say 1024×768px then anything above 900px in width will just fill in with whatever color/background image has been used for the body.

The content table will be centered at all times, and you will have a web page that knows when to stop expanding.

Get the PDF

I have a free report on one of my websites, that explains exactly how this works, and how to apply it to your own site. Please feel free to download it, and try it out for yourself.

Get the report

Happy designing!

How to make a table based page layout search engine friendly

AJ — Wed, 17 Jun 2009 09:20:04 +0000

A table based webpage layout – how to get it right for the search engines

A purely css based layout is obviously ideal. That’s all part of the push to separate styling from structure, on web pages. So in the perfect world, we keep a table for holding tabular data.

But not everybody is a css wizz. Many people find a table based layout easy to work with and modify. And there are some things that are just so simple to do with a table, that require complex coding when using css.

If you’re going to use a table based layout for your page (preferably with an off page stylesheet, but that’s the subject of another post) then you need to get it right for the search engines. this page will show you exactly how to do that.

the WRONG way to lay out a content table

What’s wrong with the table above?

I have seen many people design their content pages like the diagram above. And its wrong. Never have your table laid out like this, or not if you want to rank well with search engines that is!

So why is it bad? Think about how a search engine reads a table. It starts at the top left, and continues across any further cells in that row. It then moves down to the next row, and repeats the process. So, it’s left to right, top to bottom, starting from the top left. The diagram is numbered in the order that something like Googlebot sees and reads the table content.

It’s quite abovious that in the diagram, the navigation column is going to be seen before your main content. And thats a bad thing. the higher to the top of your page you have your main content, the more relevance and importance the spiders will give your content. Stick navigation links, affiliate ads, or whatever in front of your content, and you won’t rank as well as you should.It won’t kill your site to do this, but you are certainly NOT as well optimized as you could be.

The RIGHT way to lay out your table

The difference between the 2 diagrams

In the first one, search engine spiders saw your main content (in cell 3) after the navigation column.

In the second example, a spacer cell has been placed in the table. This has the effect of moving the content up ahead of the navigation. Although to the eye, it appears exactly the same. So a viewer will see the navigation as appearing on the left, before your main content, while a spider will see it on the next row down, after your main content.

How To Do It

it’s simply a matter of making sure that each individual cell has the correct colspan and rowspan….see below for the HTML to do this.

Ok thats for the header, the colspan has been set to 3, so it will stretch the full width of the table, which is 3 columns. Next: the spacer.

I realize height is deprecated as an attribute for tables, and to be more correct, we should define that with css. But deprecated doesn’t mean it won’t continue to work for many years to come…..and we want to make this simple as we can. So, I have put a height in – this will ensure the cell doesn’t take on a mind of its own as far as height goes. We don’t want it to take up any more room that it has to, and 0px will not be recognized….it needs to be 1px at least.

We have given the main content area a rowspan of 2. You need this, to ensure the table formatting stays correct.

This also has the rowspan=”2″….this is the last cell in the column, so the

has been closed off.

This is the navigation column. Because it is on a lower row than the main content, search engines see it after the main content.

Your header goes in here
	Main content goes in here	Right column content goes in here
navigation links here
footer info is in this area

The footer is given colspan=”3″, the same as the header, as it spans the full width of the table.

Wasn’t too hard, was it?

And that’s it. Design you content tables this way, and you will see an improvement in your SERPs. You can add in all the extra attributes to the tags of course, I have only given a basic version to demonstrate the layout.

Have fun, and catch up next time.

OMG, not another site on web design? “Please say it isn’t true”!

AJ — Mon, 08 Jun 2009 13:24:21 +0000

Interested in web design? Do you have a desire to learn more about what goes on behind the scenes of a webpage? Then have a browse through the posts on this site, perhaps you will find something of interest.

This site has sat untended and unloved for over a year now. The subdomain is far more developed. However, that section of the site is aimed towards a specific group of people: those that own SBI websites.

While sbi-help looks at site design, a lot of the information is not generally applicable to those outside of SBI.