Starting Our Template…

We’ve covered a lot of ground in the previous lessons. All of it is background for actually creating a listing template. Some of it is functional. Some of it is conceptual. You will use all of it at one point or another, so before we forge ahead with actual template design you may want to go back over the first nine lessons to be sure you understand it all. If you are still having problems with any of it you should be asking questions.

Let’s also take a moment to go back over the tags and style parameters we have learned so far. We’ll be using all of these in this lesson and the lessons to come. You should probably be keeping a working list of tags and another of parameters and add to them as we cover new ones. Here are the ones we have so far:

We’ll be using all of these and a few more as we begin creating our first listing template.

Screen Size and Screen Resolution

When we create our listing templates we want them to look good. One of the first things we have to consider is where (on who’s computer) they are going to be seen. And in considering that we must understand both screen size and screen resolution differences.

Screen size is the measurement, usually in inches, of the viewing area on the computer screen or monitor. Typical monitor sizes are 15 inch, 16 inch or 17 inch, etc.

Screen resolution is a display setting that determines the number of pixels (picture elements) or dots that are displayed on the screen. Typical screen resolutions are 800×600, 1024×768, 1280×800, etc.

There is a lot of misunderstanding in regard to the effect of different screen sizes and screen resolutions. A bigger screen doesn’t mean you are going to see more. If you have a 15 inch monitor set at 800×600 resolution, and I have a 17 inch monitor set at 800×600 resolution, our screens will both show exactly the same amount of information. The same information on my screen will just appear bigger. If we both have 17 inch monitors but yours is set at 800×600 and mine is set at 1280×800 then I will see more information at one time than you will.

If you don’t fully understand that, think about it a little. Let’s say you were looking at an image that was 400 pixels wide and 800 pixels tall. On your 800×600 screen the image would take up half the screen width (400 pixels) but not fully show in the screen height (600 pixels). You would have to scroll down to see the remaining 200 pixels of the image. On my screen the same image would take up less than a third of the screen width (1280 pixels) and show fully on the screen vertically (800 pixels) without scrolling.

How much displays at one time is a factor of the screen resolution and how big the items look, at a given screen resolution, is a factor of the monitor size. Higher screen resolutions show more on the screen at one time. Bigger monitors make things look bigger whatever the screen resolution is. I’ve included a screen size test site in the free stuff list so you can play more with this if you need to.

So what does all this have to do with our templates. Well, remember one of the first things we want to do is make our templates look good. When coding your template you have basically two choices:

1. Make the template adjust automatically to the width/resolution of the viewer’s screen, or

2. Fix the width of your template so it displays the same no matter what monitor size/resolution is used.

Many designers argue one way or the other on this, insisting that it is best to… whatever their favorite way is. As we go along with our template design we’ll explore both of these methods and you can choose which works best for you. There is no hard and fast law about this but there are some things, like marketing and comfort issues, that apply and which should be considered. Often it is very simple things that can mean the difference between making, and not making, sales.

Templates come in all shapes and sizes with many different layout patterns. There is no way we can cover all of them in a course like this but we are going to explore several different layout styles and, from these basics, you should be able to construct almost any template design you wish.

We are going to look at five different template styles:

1 – single background

2 – outer/inner backgrounds

3 – outer/frame/inner (or layered) backgrounds

I’ve separated each section or layer with a white line using the border parameter in the code but this isn’t necessary. The backgrounds can also run up against each other, like this:

Dark text on a lighter background is the best choice. It is easier to read and thus potential buyers are more likely to stay and read what you have to say. Light text on a darker background may look pretty at first glance but it is generally harder for people to read, making them uncomfortable, and more likely to leave your listing before coming to the buying decision.

These little points are not, in themselves, going to make someone who doesn’t want your item actually buy it, nor are they likely to drive away someone who really wants what you are offering. They will, however, make quite a difference on the large, middle, group of undecided window shoppers who happen upon your listing by chance or who are searching for something but not quite sure what it is. These people may well purchase from you if they stay around long enough to read your listing and be sold. They certainly won’t buy if they wander off because you made your listing uncomfortable for them.

You can also use graphic backgrounds in your templates:

Graphic backgrounds usually need to be divided from each other in some fashion, even a simple line will suffice:

4 – multi-column template

5 – side positioned background

We’re going to look at each of these styles individually and learn the coding needed to create our own templates using any of these layouts, and even elaborating on them. In order to do this we first need to look at a couple of points:

1. Centering: you may have already learned elsewhere about the <center> </center> tag element. This was a badly designed tag originally and has long been deprecated. It should never be used. In this course you’ve already learned the right way to center text using the text-align parameter in the inline style attribute. You’ll learn about other centering methods shortly.

But it’s more than just the right tag to use when centering. For some people, it seems, centering becomes the only alignment concept they use. Everything in their listings is centered. This is not good. Centering titles, pictures, or even small blocks of text is okay, thought not always required, but centering paragraph text or bulleted lists is bad. It makes the text hard to read and thus makes the viewer uncomfortable and more likely to leave. By now we should all understand how that can be a bad thing.

Center things only when necessary!

2. The Division Tag: the division tag <div> </div> is used to mark out distinct divisions in your page and is a powerful way to enhance layout. A division can have margins, borders, padding and a background color or graphic, just like a table cell. It helps us define layered backgrounds without nesting too many tables. Nesting several tables is okay but it can quickly get confusing with all those table row and table data tags, and it can slow page display down considerably as the browser has to work out the positioning and sizing of all those cells. A mix of nested tables, divisions and paragraphs can better handle most designs.

Let’s now look at each of our basic template designs in detail, starting with example 1 from above. Here it is again:

The code for this is just a simple table, like this:

Note the use of the old attributes:

border=”0″ style=”border: none” cellpadding=”0″ cellspacing=”0″

in the table tag. These are not required for what we want to do, but some browsers default to different effects for tables and so it’s best to include these three attributes and set them to zero to force clear any default settings that might otherwise interfere with our design. If you find things not lining up correctly, even when you are sure your code is good, you may have to set to zero (turn off) some of the old attributes that you otherwise would not need.

It is not always easy to determine whether or not to include zeroed old-style attributes like this. At present, on eBay, it is a good idea to do so as eBay pages currently (at time of this writing) do not have DOCTYPE statements so browsers are left to their own devices to choose which way to render code. Since different browsers handle this different ways including these zeroed old-style attributes helps keep things consistant across browser brands.

Using the inline style attribute we set our table width to 600 pixels, wrap it in a medium grey boarder, and set the background color to a medium violet. Note the final attribute. It is another hold-over from the old way of doing things:

align=”center”

used to center the table on the page. The new, correct, way of doing this just doesn’t work in all browsers. In fact, I expect there may even be a change in the way this is handled. So, for now, just use this old way as it continues to work in all browsers.

In the table data tag we use the style attribute with the following parameter:

padding: 30px 30px 30px 30px

which provides 30 pixels of padding (space) inside the table data cell on all sides. This nicely spaces the text away from the edges. Using what is known as white space in good quantities to separate your text from the edge of the area it occupies is another one of those things that makes your viewers more comfortable while reading your listing. Text that runs right up to the edge of the area where it is located is harder to read. Let’s add some text to this example to see what it looks like:

In the example above the text is left-justified. This is the default; the way it will be if you don’t tell the browser any different. We can also full-justify it like this:

using the parameter:

text-align: justify

to accomplish this.

Some people like fully justified text as it has straight margins on both ends. Depending on the width of the space available, and the size (length) of the words involved, full justified text can end up with large gaps between words. Sometimes this can be corrected by carefully re-writing the content to have the right sized words so the spacing looks better. Sometimes you just have to abandon full justification.

Centering is accomplished using the parameter:

text-align: center

but should seldom, if ever, be used for general paragraph text. Our example text would look like this if it is centered:

Some people think this looks nice but it is actually harder to read. When reading multiple lines of text (paragraphs) your eye wants to track back left to the same starting point for each line. A ragged left margin makes this impossible. Of course, it’s your template, and you can do whatever you want. There are no tests in this course and, therefore, no marks. I’ll just tell you the good stuff. You use, or don’t use, whatever you like. Some of these things, though, in the agregate, will go together to make a significant difference in making or not making sales.

Containing text can be as important as not centering it. We talked earlier about monitor size and screen resolution and the choice of fixed-width or auto-adjusting formats for our templates. When the difference was small, say, between 640×480 resolution and 800×600 resolution, it made reasonable sense to allow the template to auto-adjust to the width of the available screen, but as ranges between lower resolutions and higher resolutions increase, and as screens get very large and very wide, it no longer makes sense. In fact, auto-adjusting templates can be problematic.

Unless your text is carefully contained within a fixed width space it will stretch out to fill the available space on wider screens. What looks okay on your screen, with six lines of text filling the space to the left of a graphic, may string out to one long, almost unreadable, line of text stretching out across a larger screen set to a higher resolution.

Since positioning of all elements of your template is important to the look and feel of your listing, you should seriously consider using only fixed width structures in your layouts. That is not to say that you won’t use percentages (auto-adjustable) in certain cases but, generally, only if they are contained within another fixed space. We’ll see more of this as we go along.

When we get to design number 2 things look like they are getting a little more complicated but in reality the code for this:

is very similar to the code for example number 1. In fact, the differences amount to a different background color for the table itself and some extra parameters (border, padding and background-color) added to the paragraph tag that holds the text:

1. background-color: #d87093 is the darker outer background color.
2. border: solid 2px #ffffff sets the paragraph border to a 2 pixels thick white line.
3. padding: 30px 30px 30px 30px puts 30 pixels of padding around the inside.
4. background-color: #dda0dd sets the paragraph background to our medium violet.

Just four simple changes, additions really, to the existing style attributes and we make a distinct change in the look of our basic template. You should be starting to see the power of using the inline style attribute in HTML tags as these changes are explained.

Example number 3 seems to be even more complex, and it is a little, as it adds another layer to the backgrounds. In this case we get what looks a little like a frame around the inner box:

We introduce this frame layer using the division tag:

Within the division tag we use the same parameters in the style attribute in the same way to handle border, padding and background-color but we also add:

margin: 0px

to ensure there is not default margin imparted by some browsers. This is one more of those issues that you just have to work around due to browser inconsistencies.

All of this could be done using three nested tables with all their associated table-row and table-data tags but you can see how much simpler this really is using division and paragraph tags within our single table.

Let’s make this look just a little more like an actual listing by adding some title text and a picture. However, because our inner area was originally created using a paragraph tag, we are going to have to change a few things:

The three layers of this template, and their borders, are created by nesting a division (<div> </div&gt) inside a division (<div> </div&gt) inside a table (<table> </table&gt). Here’s the code that makes it work:

You should be able to see the changes above. I’ve added a new division element to handle the inner area’s border, padding and background, so the title, paragraph and picture code can all be placed within that division. Remember that images are treated just like text (the little pictures inline with the words in kids story books) so our image is placed within paragraph tags in order to center it. There are other ways to do this but this is the easiest and best for template use.

I’ve also introduced a new tag. The heading tag, <h1&gt </h1>, which defines headings or titles. You could, and many designers do, use paragraph tags around a heading to center it and to define other elements like font size and weight, but this would actually be incorrect. The heading tags server two purposes:

1. they indicate to browsers and search engines the fact that this is a heading and what importance it has on the page, and

2. they automatically set the font-weight to bold which makes the heading stand out

The heading tag produces six standard font sizes:

but it isn’t the font size that this is all about anymore. It is the importance of the heading or title that should be considered when using it. H1 is most important. H3 is more important than H4. Typically most templates will only use H1 and H2 tags, though this is not a hard and fast rule. Your main item title is probably an H1 and section titles for terms and other things would be H2. There is a positive value for search engine optimization (SEO) for using these correctly.

Further you can use the font-size parameter in the style attribute to change the default size of the heading tags. There is no need to be stuck with the given sizes. Set the display size to whatever you want or need for your template design:

Example 4, our multi-column template gets just a little more complex:

The easiest way to work with a multi-column structure inside a background layer or frame is to nest one table inside another. You need to be careful with your tags (as always with tables) when doing this. The second table sits completely inside the table data (<td> </td>) cell of the first table. Here’s the code:

When we start nesting all of these tags we really need to watch what we are doing. Nesting is the placing of one set of tags inside another. You need to keep the order of the opening and closting tags sorted out. The first tag set opened is the last one closed:

So, in our template example we have:

<table> <--- open first table

<tr> <--- open first table row in first table

<td> <--- open first table data cell in first table

<table> <--- open second table

<tr> <--- open first table row in second table

<td> <--- open first table data cell in second table

<p> <--- open first paragraph

</p> <--- close first paragraph

</td> <--- close first table data cell in second table

<td> <--- open second table data cell in second table

<p> <--- open second paragraph

</p> <--- close second paragraph

</td> <--- close second table data cell in second table

</tr> <--- close first table row in second table

</table> <--- close second table

</td> <--- close first table data cell in first table

</tr> <--- close first table row in first table

</table> <--- close first table

You can almost imagine it like a set of kitchen bowls stacking one inside the other. The left-side handle or rim (opening tag) of one bowl matching up with the right-side handle or rim (closing tag) of the same bowl.

Example number 5 can be accomplished in several ways. often a very wide graphic with the border element on the left and a solid color background on the right is used to create this type of background. The background image would look something like this:

Using this type of background is okay but it gives you less control. In order to be suitable for large monitors and high screen resolutions it must be very wide. This can make the graphic big and slow to load. I prefer to use a separate left-side image and then provide the color or background texture of the rest of the template myself. Here is the graphic used in example 5:

By incorporating this into a two column table we get the same effect as the single fairy graphic above but we control the size of the graphics and the template.

The graphic in the left cell needs to be a seamless background so it will tile correctly as the template lengthens with more content:

Choosing the right background tiles for any template is important. Not only is it good to have great images, but background tiles should create a seamless display. Our first example shows the single graphic, a view of bricks in a wall, followed by a larger area where this graphic is tiled. I have put a single line border around the single graphic and the entire tiled area. Can you see the seams in the tiled area?

The second example is an image of coins. Again we see the single graphic image followed by a tiled area. Both have a single line border added by me. Can you see any seams?

Creating truly seamless background graphic tiles is a real art. Finding good ones to use for your template is worth every effort. There are, however, many background tiles that look great on their own, like this one:

but which just don’t tile seamlessly, as shown below:

Using background graphics that don’t tile seamlessly is probably not a good idea.

What Have We Learned…

In this tenth lesson we have learned:

• Screen size and resolution can affect the way our template looks.
• The center tag (<center> </center>) should never be used.
• Template designs can be easily created using tables, divisions and paragraphs.
• Paragraph text should not be centered.
• We can use graphics for backgrounds in our templates.
• The heading tag is the right tag to use for headings and titles.
• The proper nesting of tags is important to our template designs.
• Seamless graphic tiles create a much better look for our template background.

In these ten lessons we’ve covered all the basics necessary to put together a great template using any of several design layouts. The only thing left is to actually build a real listing template, from start to finish, using a dozen or so HTML tags. My new CD, Baker’s Dozen 2.0, is what you need next. A $49.99 value on its own, a special online version, created just for this course, is included here free. You will find it linked on the menu above.

Thank you for taking the Wizard’s HTML Template Design course. If you create a template for use with actual listings please send me a link to your store or listing(s) so I can see your work. I’ll promote your sales in return.

[ top of page ]

Patterns Fabrick Sewing Knitting Supplies At The Mall Main Street Patterns/div>