Exit tutorial
 Web Design - Good and Bad Practice |
| Part Seven |
| Your Page's Title Don't forget to put a title on every one of your web pages. The title is what shows up at the top of the browser's window when a page is displayed. If your page doesn't have a title, the browser will display "Untitled," or "No Title, " or simply the URL of the page, or perhaps nothing. The title is important. If someone bookmarks your page, the title is what shows up in their list of bookmarks. Or, if someone puts a link to your site on their page, they'll probably use your page title as the link text. Or, if the page is indexed by a search engine, the title is what shows up in the search results. You get the picture. Even if you do have titles on your pages you still might want to reevaluate the actual wording. Make sure that the title actually says something. Instead of "My Web Page," how about "John Jones -- My Web page?" Imagine viewing the two of them in a bookmark list. If you have a business site, you may want to go even further. For instance, you may want to put the name of your business (or an abbreviation) in the title of every page on your site. You never know which of your pages will be bookmarked, and it will be far easier to pick you out in a list of bookmarks, or any other list that uses the page's title. And don't forget to tell people who you are and what you do. On the main page of your site. Don't make them guess. For example: "TLC Systems is a management consulting firm, specializing in the architecture, design, and implementation of systems involving computers and people." The Width Of The Browser's Window Imagine you're an art director and you have to design an advertisement that will appear in a lot of different magazines. You've been told that the same ad will be printed one, two, and three columns wide. Sounds crazy? How would you design such an ad? Yet this is one of the biggest problems facing web page designers. The height of the browser's window has very little effect on how your page is displayed -- you just see more or less of it, sort of like a window shade. But as the width of the browser window changes, it can have a spectacular effect on how your page is displayed. This is because the browser will try to rearrange the web page to make maximum use of the available browser width. Two factors determine the width of the browser's window -- the width of the visitor's screen, which determines the maximum width for the browser, and the proportion of the screen that the browser has been set to. The practical width of computer screens varies from about 640 to 1280 pixels. This is determined by hardware, software, and the display settings the user has chosen. Your web page should work properly with the browser window set >anywhere< within this range. There are a number of different elements on your page, but they fall into two groups: those items that can be adjusted in width, and those that can't. Items that can be adjusted in width are text (which can wrap) and tables and cells (if declared as a percentage of the window's width). Items whose width is fixed are images, text given a "NOWRAP" attribute, text within PRE tags, and tables or cells declared as fixed (pixel) width. Say you design your page for the middle of the browser range -- about 800 pixels wide. What happens when your page is viewed at other browser widths? Let's start with a narrower window. If the page is designed with the right mix of fixed and variable elements, the page should still work. You might want to use a table with multiple columns where the leftmost is fixed width and the others variable width. If fixed-width elements are used, the page may end up wider than the browser and a horizontal scrollbar will appear at the bottom of the window. Now the visitor will have to scroll left and right to see your page. If the window is wider than you designed for, a number of things can happen. If you've used an image as a background for your page, and it just fits your medium-sized window, it will repeat as the browser adds another copy to the right in order to fill out the increased width. Tables declared as variable width may be rendered strangely, with elements showing up in unexpected places. In addition, the way a particular browser juggles your page to fit its width will vary greatly with different browsers. And also with different versions of the same browser. Obviously, a certain amount of testing and experimentation will be necessary to make sure that your pages display properly at all browser width settings. A Tip Keep your home/main page small so that it loads quickly - under 15 seconds is a goal worth aiming for. (Especially important when the web slows down.) This will hook the visitor. Think twice about putting that 90K GIF on your home page. Remember that yours is only one of millions of sites - websurfers have short attention spans. |