Professional web page template layout tips
In this page we are going to learn many hidden web design tips which will make your web design pages look more professional and efficient. When you decide how your web page should look like it is important to know what the html properties are and how they affect the web page behavior. The most important requirements of web pages are following.
Optimized web design for different screen pixel resolutions
When web pages width are defined in the body tag and so when they are seen from different resolutions monitors they may either may floating in the left most side of screen or appear a horizontal scrolling bar or may stretch the body to fill the entire screen area. The remedies for all these are simply to define the body tag width in pixel value instead of percentage and set its margin property so as it remains in the middle of the web page like this
<body style=”width:780px; margin:0 auto;”>
some code
</body>
The horizontal scrolling of the pages appear when the pixel width of your web page are bigger than the screen size this can be avoided only when you set the pixel width to 100% however this is not advisable so we can minimize scrolling effect and design the pages for monitors which are mostly used they are 1024 x 800.
Automatically selecting the screen resolutions using JavaScript
This is bit tricky when you find out the viewers web page resolution using a JavaScript snippet and then redirect the visitors to pages set for properly resolved pages a good web page for this is found in here
http://www.pageresource.com/jscript/jscreen.htm
But from the search engine optimization point of view this approach is not recommended because two different pages having the same content will be treated as duplicate page and redirecting is also seen as black art by search bots, use this technique on your own risk.
Web page layout using HTML tables
Use of the tables are logical way to create the layout for any website they also avoid the use of irritating div tag which floats around when seen from different resolution screens. with tables you can create the website top header bar, content area with menu area and the footer area of the page now maintaining table width with differing browser resolutions is important for example you are using three column table to create the left menu middle content area and the right side advertisement banner to display in this case one can set the entire width of table to 100% this will make it equal to body size and fix the right side and left side columns to some set values remember fix the body size to any set value in pixel before doing this. One drawback of table is that content in their cells are displayed only when they are loaded completely this is by contrast in case of div tag which loads the article line by line when the bandwidth is too low.
Banner and Traffic counters
The third party codes written in JavaScript take little time to load and can create feeling of frustration among your visitors when because of them the article area in your page is taking time to load. So it is always better to keep the advertisement banner in the right most side and the traffic counter codes in the bottom area.
Use the professional web colors
Extent of how much to use web colors depends on the type of content you are going to put in the website for example your website gives the news whose snips are cluttered into main page then it is good to use many different colors so that it is easy for visitors to see the content distinctly, on the other side if the your authority website gives the valuable information to the users then too many colors can make the funny situation. Sometimes peculiar looking colors become the characteristics of website and stay longer in the minds of viewers.
Optimized website design for different browsers – cross browser
Different web browsers renders the some HTML codes differently, they take default values for some Html elements and they may be different so when you have tested the page in one browser may look different in another, hence leaving blank the critical properties like border and width is dangerous. Here are some steps to ensure your pages are compatible for all browsers. First validate the Html pages from w3c validator
|
