|
|
 |
 |
A Web Page For All Resolutions?Teacher: Thomas Benton 640 x 480, 800 x 600, 1024 x 768, 1280 x 1024... so many resolutions! Is it possible to build a web page that looks good regardless of the monitor's resolution setting? Maybe not. But here's a web design strategy that will help the looks of your web page in the majority of your visitor's browsers. There are two requirements that must be met to give your page a *balanced* appearance at both ends of the popular resolutions spectrum. 1) It must not require horizontal scrolling at the lowest resolution. Surfers hate to use that horizontal scroll bar! 2) It should have some content that spans the width of the page at the highest resolution. Too much blank space is irritating to some. Accomplish these two things and your web page look like it *belongs* when viewed at any resolution. Sound difficult? Actually, it's easy to do. We'll use three main components to structure our universal web page layout. 1) A dynamic table at the top of
the page set to 100% width, The second table is your web page's main content area. It should be centered horizontally. This will allow it to *float* and remain centered between the margins regardless of the viewer's monitor resolution. Follow good design practice and set the background color to white. (Black text on a white background is easier to read.) The dynamic tables at the top and bottom of the page will stretch from left to right margins at all resolutions. This is where you can introduce a little color to your web page. Use a background image or choose a background color to complement the content of your website. A color stripe, or stripes, to define the top and bottom of the table looks great too. The table at the top should have a bolder appearance than the table at the bottom of the page. Use the top table for your logo, main navigation, and/or headline. Embed fixed width tables to control layout and positioning of any content you add here. Make sure that the table content doesn't word wrap at 640 x 480. Use the bottom table for a secondary text link navigator, copyright and contact information, etc. A picture is worth a 1,000 words so, to see how this page layout looks in actual practice, take a quick peek at http://www.webdesignwisdom.com. If you check it at various resolutions, you'll find that it looks very good at 640 x 480 and 800 x 600. And it still looks good at 1024 x 768. At 1280 x 1024 the center content table is somewhat small for the page, but, because of the top and bottom tables that span the page, a balanced design is achieved. You must admit that our page looks far better at the higher resolutions than a page that uses a single left-aligned, 600 pixel, fixed-width table. If you use Server Side Include directives to add the top and bottom tables to your web page, you can quickly change the look and feel of your entire website by simply changing the colors, content, or design of these tables. Apply your own ideas and create unique variations to this basic design theme. Experiment. Make your website look good to all your visitors. About the teacher: |