Click for the Text Version Available SIZE MATTERS - WEBPAGE SIZE THAT IS... by Theresa Cahill Follow-Up Written November 2004 Copyright 2004 - All Rights Reserved Putting together a website? Wondering if everyone will get a good look at the entire presentation when they arrive? One way to ensure they do is in your initial page setup. When the typewriter ruled, and the 8-1/2x11 sheet of paper was king, layout was much easier. You always knew how much space you had to work with, what to set your margins to, and what size the type would end up when you pressed the keys. Then along came the word processor and its various flexible components. Layout changed. Tiny things we'd all done forever, such as double spacing after the end of every sentence, are no longer necessary. Word processing allowed for (and still does) a vast array of page tweaking and layout design - from font size and color to table arrangements and graphics. But this article isn't about word processing. We didn't stop there... some bright group of individuals developed the internet and the webpage with its HTML coding was born. And with that birth, our whole outlook on how to design, how to use that "piece of paper" flew out the window. No longer is it a sheet of paper but someone's monitor screen size and resolution that we must keep in mind during our design and layout phase. With screens from 13 inches and up, we've got to be prepared for all visitors. And with a wide range of audience ages, font size becomes critical. Choose sizes too large and your website looks amateurish, choose sizes too small and your viewer most likely will run for the hills versus re-adjusting their browser (which they could do, but most likely won't). So what is the ideal page layout? How is it accomplished? The simplest way after setting your page background color is to create an overall webpage table. Picture this first table as your 8-1/2x11 sheet of paper. Inside that piece of paper you'll create even more tables, opening and closing them as you go along, but ultimately ending the entire page - just before the total webpage closing tags with your overall webpage table closing tags. A typical layout that lends itself well to just about any presentation of material might look like this (see my ezine webpage at http://www.thewizworld.com to get a visual idea only - and while you are there resize your viewing window to see how it automatically adjusts for you): ============================================= (Note: replace * for < or > when coding your page) *body background="#4682B4"* *center* *table width="80%" border="1" bgcolor="#FFFFFF" cellspacing="1" cellpadding="8"* *tr* *td valign="top" align="center" width="10%" bgcolor="#FFFFFFF"* First column of information */TD* *TD WIDTH="90%" VALIGN=top* Second column of information */td* */tr* */table* */center* ================================================ The absolutely most important attribute for this entire page is the coding of the page WIDTH. Many webpages are created using a fixed table size. Setting your WIDTH using percentages though allows your page to automatically resize itself for each individual visitor. You can also place a fixed value inside the quote marks, but here's the rub. Even widths of 700-750 will be too wide for most browser windows. This will force your reader to scroll from left to right. You will lose them since most people will only put up with that for so long before they give up and leave. A good suggestion would be to work within a page layout of 650 or less if you truly must choose a fixed width. My second website, http://www.mywizardads.com, uses a fixed table width of 600. The tables within the overall table adhere to the 600 width also, with their individuals columns set with adjustable percentages. Granted, with the fixed table size a person will only be able to downsize their browser screen to a given point before some of the information is unviewable, but the 600 setting works for most visitors and surfers. ============================================= (Note: replace * for < or > when coding your page) *table width="600" border="0" bgcolor="#000080" cellspacing="2" cellpadding="10"* *tr* *td valign="top" align="center" width="95%" bgcolor="000080"* Top portion of information */td* */tr* */table* ============================================== Never, of course, take what belongs to another, but do surf, right click and view source, and study different websites. Teach yourself by hands on manipulation of the numbers within your own HTML editor or notepad file what works and what won't. And do consider using a main overall table in which to nestle additional individual tables. Use percentages or combinations of one overall fixed width and individual percentage settings inside your main- and sub-tables. You've worked hard! Ensure your website is viewed as you envisioned it. ======================================= ABOUT THE AUTHOR: Theresa Cahill is the owner of My Wizard Ads http://www.mywizardads.com, a true one-stop spot for your online advertising needs.