List of HTML and CSS Tips to Improve your Website's Layout

This article gives you an indepth list of HTML and CSS tips to help improve your website's layout.

A lot of this article is dealing with "trends" in amateur web-design: extremes of width in layouts, extremes of font-size, color schemes and banner images and more. Here's a few of these you want to avoid jumping on the bandwagon.

Supersize vs. Superskinny Layouts

Your entire layout width should ideally be between 900px and 1000px (this includes both main content area and the sidebar) especially if your website contains a fair amount of content, words or images. Too many pixels smaller detracts from user-friendliness and too many pixels larger would make your website too large to fit the screens of computers with smaller screen resolutions.

This day in the Internet, you can expect the vast majority of your visitors to be using a screen resolution of 1024x768px or larger. Building a website that fits well inside an 800x600 resolution used to be the norm 10 years ago, but the resolution has recently been becoming more and more irrelevant. And now with the advent of even wider screens such as the ones found in laptops (typically 1280x800), and the larger Mac monitors, the 1024x768 resolution is also becoming a bit less, but with 20% of Internet users reportedly using a monitor of 1024x768, it's still a good standard to go by. Of course, it depends on the type of content your website offers as well when it comes to deciding whether or not a wider layout would be necessary. Be mindful that the larger website is typically much easier to browse and read than the smaller, more dense layout.

The Banner is Hogging the Screen!

If you do decide to include a header “banner” image in your layout as most sites do make sure that the banner is not too large that it engulfs the entire screen. An optimum banner image should be about a quarter and a bit of the computer's screen, in my opinion. Smaller is of course fine, but any larger an the visitor may find him or herself constantly scrolling down to read the content. This should never be the case.

Clear and Easily Identifiable Navigation

One of the most annoying things on a website is when the visitor is unable to find the navigation around the site. Make sure it's place somewhere visible, and easily accessible. Make sure you don't use extremely small fonts and hide your links inside the header image, as it makes it more difficult to find the links. If you plan to include your links in an image, make sure you use a legible font size and place them in a logical area so your visitors know where they are. You should also include a title attribute to the link tag, with the link's destination, as images may not always load on someones computer. Make sure that you use titles for your navigation links, rather than numbers or letters, as visitors wont know what the number means. You also don't need to put a link to every single page on your site, just the main sections of your site like Home, Blog, Sitely, Content, Tutorials etc. These links should go in or under the header, as they are the main “sections” to the site. You can include more links in a sidebar if you'd like, however make sure not to cluster the links.

Body Text is too important for a funny title

Body text and the use of fonts is another area of web-design that is heavily abused by amateur designers. Body text must use web-safe fonts. They are safe to use as these fonts are the most likely to be found on users computers regardless of OS. You should use web-safe fonts because they don't require you to download anything to view them & don't need additional http requests which of course slow down website loading time. Here are a list of some web-safe fonts that you can use. They have been separated into serif (curly) and sans-serif (not curly) and monospace.

Serif:

• Georgia
• Times New Roman

Sans-Serif:

• Arial
• Geneva
• Helvetica
• Lucinda
• Tahoma
• Verdana

Monospace:

• Courier
• Courier New

When writing your codes, it is safest to have your primary choice for the font, followed by a secondary choice, and then a generic fall-back typeface. For example:

The above will ensure that if the computer doesn't have Arial and Helvetica, it will pick the first sans-serif font it can find that is installed on the computer. And this might seem obvious, but just to ensure the point is made: decorative fonts are for decorative purposes only and have no place in body text.

As well as choosing a reasonably legible and web-safe font for your main body-text it is also important to take into account line-height. Line-height is the amount of space between each line of text and having too small a line-spacing makes the text look squished and hard to read. Line-height can be adjusted with CSS by adding this:

I prefer to use percentages in my line-height as this keeps the CSS command general across all font-sizes. A good percentage to use is 180% and above, it sounds like a lot but it really keeps the text from blurring!

Font sizes should also be considered and while many fonts do look better smaller (at least in my opinion) they are more easily read in larger sizes so avoid those piddly fonts.

If you feel comfortable writing a full-blown English essay in your chosen font size and line-height, it should be right. The most important thing to remember is that your visitors need to be able to see and read your text clearly without a headache.

Slide to the Left, Slide to the Right, JUST NO

Another usability factor, center those layouts! It's uncommon to find professionally designed layouts maligned on the screen or shunted left or right. It's important to center your layout for two very connected reasons: one, it looks neater and two, it means that your layout will be anchored in the same position on the screen in all resolutions. By using position:absolute in your CSS and with a designated, specific number (left: 255px), it might looks center (or wherever you were intending to place it) on your computer and resolution but if you view on a different computer with a different resolution you may find your layout is shifted slightly to one side- not what you intended!

And for the record, a layout squashed to the absolute right or left of the screen (although will turn out fine on any resolution) usually looks unprofessional.

Below is the CSS for centering layouts.

This must be done on a container div, that surrounds your entire website. By centering the container div, it lets you position other divs like the content or sidebar individually.

As usual, IE usually has some other code that it will accept. Add this to your CSS to center our layout in IE.

You can then adjust the text-alignment in the content area, sidebar etc. as necessary.

The evils of tables and iframes

Don't get me wrong, I love a good table. Nice and organized for data. Don't get me wrong again, there is nothing I like about iframes.

Tables as useful as they are for small batches of data, not the HTML you want to use for you layout, simply because that is not their purpose. Divs are for this, don't let tables usurp their position! Table-styled layouts are hard to manipulate and use in a design because tables are rigid in their layouts. Divs are definitely the way to go. Here are some articles on why you shouldn't be working with tables: here's 1 and here's another.

There are millions upon millions of articles out there warning you against iframes. Let's add this one to those masses: don't use iframes. As simple a solution to your problems as they sound, they make things a thousand times worse. Better and perfect alternatives are available which are just as easy to use. Iframes trap information and content inside them. Information in a page inside an iframe can be viewed outside the iframe but with no navigation or layout or any information about the website the content comes from. Just the cell of information inside the iframe. And if you're outside the cell you can only see the information but you can't get at it, you can't bookmark it. This article explains why iFrames are not a good choice when coding your layout.

CSS is your friend

Most people think that CSS is extremely hard, and messy, and that it's not really worth their time. They couldn't be more wrong! CSS decreases the amount of times you have to add tags into your HTML codes, and makes your html look a lot neater. For example, if you want to style your links to be white with size 12 font, and when you rollover the link it changes to black font:

Using CSS:

Without Using CSS:

Without CSS, you would have to edit the link's font every time you include a link. Imagine having to type the font tags every time you add a link, or to change the background of a div, or whatever you use. With CSS you simply change the code once at the top, and it will change every link in your layout. This is particularly helpful if you want to edit your layout at another time. Rather than searching and replacing every tag, you simply change it in the CSS.

CSS can be referenced as a separate stylesheet, where you link to the stylesheet at the top of your page. This decreases editing time, as you only have to change one single page, whereas without stylesheets you would have to open every page of your site, and edit the pages individually. To link to your CSS page, name your CSS page style.css, and then insert the following code between the

*Note: Make sure you save your style.css in the same place as the header page.

For more tips with CSS coding, and external stylesheets, read this article.

Colouring the Scrollbar is not for men

As incredibly eye-catching as it may seem, changing your scrollbar colors to suit your website layout is a definite no-go zone. In web-design, we design only the rectangle that appears inside our browser, not the browser itself of which the scrollbar is a part of. Usually the colors chosen when editing a scrollbar end up clashing with the layout, or are confusing. This option also only works with Internet Explorer, and as has been discussed in this article about Google Chrome, you shouldn't be using IE as a basis for your coding.

Image Optimization and Site Load Time

You need to find the best images to use for your layout. Gif images are great if you want to have an invisible background, however it may lose some of the colors if there are too many on the image. This article talks about different image types, and when it's best to use them. Having the best format for an image also decreases site loading time, making your website more attractive to visitors. To further decrease your site loading time, read this article.

Thanks for reading! If you have any questions, comments, or anything to add please post below.