Creating your Custom me Page
Part 1 - Design Basics
How wide?
People viewing your page may have a different screen resolution than you do, so what looks good on your screen may be too wide on their screen. By width, we mean the number of pixels, not the width in inches. All of the web content is displayed in pixels (dots), and giant screens just have fatter dots. About a third of viewers have screens that are set to 800 pixels wide, so it is a good idea to make sure that your photos and content are no wider than that, or they'll have to scroll sideways.Breaking up your Page
A page should not run on and on. A page is easier to navigate if it is broken into groups of ideas, or sections with headings, making it easier for the viewer to skip around to the areas that most interest them. A page can be broken with titles (as with this tutorial), horizontal divider lines, photos, tables, or colored sections.Photos
Photos are wonderful to have on a ME-page. eBay Picture Services won't host your ME-page photos, so you would need to put your photos online where they can be seen by others. Frequently your own internet service provider offers free web space along with your subscription. Alternatively, you can use eBay Picture Manager or an image host to store your online photos. Fortunately, viewers can not peek into your home computer to see photos, so that is why online hosting is necessary.Fonts and Lettering
Some people have a huge variety of fonts installed on their machines, but most users only have the handful of fonts that came with their computer. A viewer can only see the font styles that are actually on their own machine, so it is fruitless to design a page using spiffy fonts that others can't see. eBay's page-designer provides the basic fonts that almost all viewers can see. What happens if you use a font style that no one else has? Each browser has a default font setting that is initially set to Times New Roman. If the viewer never changes that setting, your unique font will be seen as Times New Roman.- Arial
- Times New Roman
- Verdana
- Comic Sans MS
- Courier
- Trebuchet MS
Text Colors and Sizes
When users first discover that they can add color to their text, the rainbow effect follows. It's fun to play with and exciting to see mastery over the results. However, once the discovery phase has passed, there are a few tried and true guidelines. Color should be used to help the reader navigate or pass through a transition in content. Two or three font colors are the maximum one should use on a page - one color for titles, one for body text, and a third for highlights or a change in theme. Colors have a brightness to them, and the eye instinctively goes to the brightest color first. Therefore, you don't want your "fine print" to be in the brightest color.The size of your text is also important. Headings should be big enough, or in a different color, so that they stand out against the rest of the text. Just like having too many text colors, one can have too many sizes and too many font styles. Stick with just a few basics on your page. Change the size, color, or style only when it is important to emphasize or otherwise convey meaning.
Paragraphs and White Space
In advertising, white space is king. There should be a margin of empty space all around your page and text. Writing in paragraphs, and leaving gaps between blocks of text, provides a resting point that allows the reader to absorb what has been written before continuing to the next idea. Paragraphs should be short and contain a complete idea. Paragraph text should be left-aligned or fully justified. Our well-trained brains have difficulty reading text that is ragged-left, such as centered text or right-aligned text. That is why only headings and small blurbs should be centered. Another problem is text that is too wide. If the eye can not pan the text without moving the head, the text is too wide, and the reader can lose their place on the line. The solution is to bump up the text size, or decrease the page width, or create columns of text (as in magazines and newspapers).Page and Background Colors
This is where you can get the most impact for very little design effort, but it is important to understand how the eye reacts to colors. The easiest reading is dark text on a light background. Light text can be used on a dark background if the light text is bolder than normal. There are certain color combinations that can not be used together because they cause eye-jitter (used on some pages to agitate the reader). Those are some complementary colors or colors with the same intensity, like red-green. Also be aware that color-blind people may not be able to distinguish between colors of the same intensity (red and green being the most difficult combination).Borders
Borders are used to contain the content and the eye. White space can do that quite well, but sometimes you might want just a little more. Borders can range from a simple single line around a photo, paragraph, or page, to full-blown multi-layered picture-frames that inject the owner's personality or a seasonal theme. When getting extravagant, it is wise to keep in mind where you want to call attention - to the border or to the content.Music
Background music is a theme that attracts many folks, and irritates others. Adding sound to an auction may help sell a fog horn or old vinyl recording, but may be distressful to buyers who open such auctions surreptitiously at work, or when the household is asleep, or even when they have their own background music playing. Another sad fact is that not everyone appreciates your taste in music. So when users ask about sound in an auction, we always recommend a play/stop button. For a ME-page, we would also recommend a play/stop button, but since, unlike an auction, a ME page is a personal statement, that is really up to the individual. Keep in mind that a music clip needs to be a very small file; otherwise your viewer will be long gone before the music has even downloaded.Whizzy, Twirly, Blinking Gizmos
One word - distraction. These gimmicks suck in the newly-initiated like a quicksand trap. They are so fun and mesmerizing when first encountered that we just can't go forward until we get one on our own page. But do you remember the tiniest thing about the page where you first saw one? No, the distraction was so overpowering that the page content was forgotten or totally ignored. Filling up a page with such gratuitous images and scripts can slow down page loading for your viewers, and some viewers find them so obnoxious that they immediately close the page. So, my advice is, keep them out of auctions, but go ahead and put them on your ME-page for a little while. Then remove them after the fun and newness wears off.Part 2 - Creating It
eBay's Page Layout Tools
eBay's editors on the Me-page screen, on their auction listing form, and in Turbo Lister, provide most of the basics for creating your own page and adding a little style. You can change font styles, colors, and sizes, use preformatted layouts, and add attractive themes. You can start with their tools to create the basic look, and then add your own HTML codes to complete the look. Or you might start with a template created by a professional designer or online fill-in-the-blanks site.HTML Codes to avoid
There are HTML codes that are perfectly fine on a web page that should be avoided on an eBay page. The reason is that HTML has a coding structure for creating a web page, and eBay has already created all of the page structure. They offer us a slot within the BODY of their page to add our code. Therefore, we should not be using codes that set up the structure of the page. Redundant use of those codes will confuse some browsers, and can also modify eBay's portion of the page in violation of their site-interference policies. These are the codes that should be stripped from your code if you are using page-making software or an online site-builder.<!DOCTYPE..>
<html>
<head>
<title>
</title>
<meta..>
<link..>
<style>
</style>
</head>
<body..>
...your valid code is located here...
</body>
</html>
Dividing Your Page
- Horizontal Rule
A page looks better if broken into groups. A common divider is the horizontal rule, a thin line across the width of the page. This is the code:<hr>
The width, thickness, and color can be adjusted and will display as intended in most browsers.
<hr width="20%" size="5" color="red">
There are also images that look like fancy horizontal lines. They can be added like any other images.
- Photos
Photos evenly sprinkled throughout the page can provide visual relief in addition to adding content. Photos can be listed down the page with text between, can be in a column on the left or right, or can alternate from one side of the page to the next as punctuation to each descriptive paragraph. Carefully placed photos will pleasingly balance a page.- Tables
Another method for breaking up a page is to create blocks or areas using a table. A table cell can constrain content within a specified area of the page and is useful for multi-column layouts. A table can have any number of perfectly aligned rows and columns. Additionally, cells can be combined to span multiple rows or columns, and may have colored backgrounds or borders. There are so many ways to use tables, that they can't be addressed in one subject area.Adding Photos
The benefit of eBay Picture Services is that your photos will be appropriately resized and hosted by eBay. But eBay doesn't host ME page photos unless you subscribe to their Picture Manager hosting service. When using eBay's slots for adding photos from your own host, you will need to insert the complete URL (Uniform Resource Locater) for the photo. A URL is what displays in the address bar at the top of your browser when you load a web page or a photo. A typical photo URL will look something like this:http://www.myhost.com/myphoto.jpg
If you don't want to use eBay's picture slots and instead want control over the location of your photos, you can insert the image code in the HTML view. The image source tag for inserting a photo looks something like this:
<img src="http://www.myhost.com/myphoto.jpg">
If your photo or web directory has any spaces in the name, then you must add quotation marks around the whole URL like this:
<img src="http://www.myhost.com/ebay photos/myphoto.jpg">
Or you may see a special code substituted for a space, like this:
<img src="http://www.myhost.com/ebay%20photos/myphoto.jpg">
If you accidentally drop one of the quotes, the rest of the page will fail to display.
- Appearance
This code adds a black border around this photo. Change the size from 0, for none, to any larger thickness:<img src="http://www.myhost.com/myphoto.jpg" border="3">
Center your photo like this:
<center><img src="http://www.myhost.com/myphoto.jpg"></center>
Center two small photos on the same line by hugging them tightly together like this:
<center>
<img src="http://www.myhost.com/myphoto1.jpg"><img src="http://www.myhost.com/myphoto2.jpg">
</center>
Keep photos on the same line, but add a little breathing room by adding horizontal space to the photo:
<center>
<img src="http://www.myhost.com/myphoto1.jpg" hspace="3"><img src="http://www.myhost.com/myphoto2.jpg" hspace="3">
</center>
Force photos onto separate lines with the break code between them and add vertical clearance too:
<center>
<img src="http://www.myhost.com/myphoto1.jpg"><br>
<img src="http://www.myhost.com/myphoto2.jpg"><br>
<img src="http://www.myhost.com/myphoto3.jpg" vspace="3">
</center>
Photos will stay on the same line for wide screens, but drop to separate lines for narrow screens, when a space is added between them:
<center>
<img src="http://www.myhost.com/myphoto1.jpg"> <img src="http://www.myhost.com/myphoto2.jpg">
</center>
Use the alignment attribute to force photos to the left or right with text wrapping around:
<img src="http://www.myhost.com/myphoto1.jpg" align="left">
<img src="http://www.myhost.com/myphoto2.jpg" align="right">
Text following the image will wrap around it, but be sure that the photo is small enough so that there is room for the text to flow around. It won't look good if the remaining column is so narrow that only one word fits on each line.
Prepping Photos
In naming your photos, it is best to avoid spaces or punctuation in the names, as it can cause problems for some browsers. If you need a descriptive name, the underscore symbol can be used in place of spaces, like this "my_dog_rover_at_the_beach.jpg". It is also wise to avoid mixing upper and lower case because many servers are case sensitive and it is easy to forget that "wedding.JPG" is not the same as "wedding.jpg". Web designers have learned to use all lowercase for everything.When adding your own photos from your own web space or image host, it is important to make sure they are the correct size for your viewers. They should be resized in your image editor so that they are no wider than 800 pixels. Because there is a scroll bar and there may be some margins on the page, we like to keep photos under 650 pixels wide. Then you will need to compress the image so that the file size is no more the 70K. Anything larger will take too long for dialup users to download.
Compression is often set on the "save as" screen of your photo editor. Depending on the software, it may be called "compression" or "quality", which are opposite senses. To create a smaller file of lower quality one would select higher Compression or lower Quality. When the program offers numbers, we use a compression setting between 25%-50%, or a quality setting between 60%-85%.
If you don't have an image editor, this free online site can resize and compress your photos for you: http://thumly.com
You would then save to your computer and upload to your web space or image host.
Tables, Rows, and Data Cells
Tables are very powerful and useful. Originally designed to add size and color charts to a page, they have taken over as a formatting tool. Like all HTML code, table codes must be closed in the opposite order they are opened, and additionally, table codes must appear in a certain order. So it is important to check the source of your table code (a skilled coder) and be sure to copy it exactly as given. Dropping a code from the end, or adding your content in the wrong place, will create havoc on your page.A table can surround your entire page in a nice frame, or tables can be used within a page or to divide a page.
- One-Row One-Column
...cell contents...Basic table code looks like this for a one-cell table. Single-celled tables are often nested and used for borders or containment.
<table>
<tr>
<td>
... cell contents ....
</td>
</tr>
</table>
Table rows are called "tr" and table data (columns or cells in the row) are called "td". Notice that the closing tags start with "/" and follow in exactly the opposite order of the opening tags.
- One-Row Two-Column
...cell 1 contents......cell 2 contents...Code for a one-row two-column table would look like this:
<table>
<tr>
<td>
... cell 1 contents ....
</td>
<td>
... cell 2 contents ....
</td>
</tr>
</table>
- Two-Row One-Column
...cell A contents......cell B contents...
Code for a two-row one-column table would look like this:
<table>
<tr>
<td>
... cell A contents ....
</td>
</tr>
<tr>
<td>
... cell B contents ....
</td>
</tr>
</table>
- Nested
...cell contents...Nested table code looks like this, and is the type of code used for fancy borders:
<table>
<tr>
<td>
<table>
<tr>
<td>
... cell contents ....
</td>
</tr>
</table>
</td>
</tr>
</table>
Fancy Borders and Backgrounds
Tables are currently the most effective method for adding backgrounds and borders to an eBay page. Quite a few tables can be nested to create different effects. A table-tag has attributes to define its appearance and location. The attributes can be added or omitted, in any order, based on your needs. All the attributes are added to the single table-tag that will be affected, although we have shown them in different table-tags below.- Table Attributes
Attributes for a border, the amount of space between adjacent cells, and the padding or gap between the edge of cell and the contents within, are shown below:<table border="1" cellspacing="5" cellpadding="10">
One can also define it's size and position relative to what the table sees looking outward.
<table width="100%" align="center">
A table with a width of 100% will resize to fill the space that contains it, whether it is the screen or an outer table. A table with a hard-coded width of 600 will appear at that width regardless of the screen setting. However, the table width will give way to the width of a photo or inner table or cell that is larger than the outer table width.
A table can display a background color or image
<table bgcolor="tan" background="http://www.myhost.com/background.gif">
An image that is used as a table background should be a small tile so that it will load very quickly. An image used as a background will tile to fill the entire table. Full page images are awkward to use and don't resize onscreen. Filling the screen at one resolution, they may repeat at a higher screen resolution. Full-page images are also difficult to compress to a fast-loading file size.
Tiles used as backgrounds should be very pale and subtle if text will be applied, but can be bold and daring if used only for borders.
- Example Border Code
Here is the table code for a simple triple-layered auction or ME-page border frame. The outer layer has no border and acts as the page background. The cellpadding forces the next table to be smaller, allowing the page background color to show through. The inner layer has both cellpadding and cellspacing. Adding or changing the cellspacing creates yet another border area that we can color in the td-tag. Since the td-tag is the last tag before the content, we will make it a light ivory-color so that we can write text over it. By adding more cellspacing attributes and coloring more td-tags, we can increase the layered effect. We can change the width of the colored layers by changing the cellpadding and cellspacing attributes.<table border="0" width="100%" cellpadding="30" bgcolor="salmon">
<tr >
<td>
<table border="1" width="100%" cellpadding="30" bgcolor="teal">
<tr >
<td>
<table border="1" width="100%" cellspacing="10" cellpadding="30" bgcolor="tan">
<tr >
<td bgcolor="ivory">
...auction or ME-page content...
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Colors can be internet color names (white) or internet color numbers (#FFFFFF). More colors can be obtained using a handy free desktop color tool or this online palette.
Want to see what this border looks like and play with it. You can paste the code above into an online practice board and add your own colors. Or make your own at this border making site.
...auction or ME-page content...
