Webdoodles

Testing Webpages in Different Browsers

ukmagician — Sun, 19 Aug 2007 12:39:13 +0000

An essential part of developing a website is testing to make sure it displays correctly in different browsers and on different operating systems.

Here are a couple of sites that can help with this.

browsers.evolt.org is an archive of old browser versions for windows, mac, linux and other operating systems. You can download virtually every browser that has ever existed and test your sites with them. Handily, the old versions of Internet Explorer can be installed as ’stand alone’ applications so they don’t interfere with your current IE version.

If you don’t have access to browsers on different operating systems, Browsershots.org is an excellent free service that generates screenshots of a webpage in different browsers on Linux, Windows and Mac. Of course, this only shows that a page is displaying correctly, it doesn’t show anything dynamic like hover effects etc, but it’s better than nothing.

Optimizing a 2 Column Layout for Search Engines

ukmagician — Wed, 25 Jul 2007 11:47:53 +0000

A little while ago, I published a basic centered two column layout.

A simple change to the style sheet and the code will improve this layout so that it is more accessible and search engine friendly.

Screen readers tend read a webpage in the order that it is coded rather than the order that it appears on screen, which is controlled by the style sheet. So, if the navigation appears above the content in the code (as it does in the above layout), someone using a screen reader will have to listen to all the navigation links before they hear the content.

This problem is exacerbated by the navigation being identical and repeated on every page.

Search engines need to analyse the content to determine what a page is about and rank it in the search results. However, they don’t always analyse the entire page, they might only look at the first 100 lines or so. If the majority of that is navigation, they are not going to find all the content. Also, the search engines want to find new content, which needs to be as near to the top of the page as possible.

The solution is to move the navigation div below the content div in the code. Then change the style sheet so the navigation and content div’s are floated to the right instead of to the left (replace float: left; with float: right;).

This retains the visual layout of navigation n the left and content on right.

Basic 2 Column Centered Layout

ukmagician — Sat, 14 Jul 2007 12:09:15 +0000

This is a simple 2 column layout suitable for smaller sites. It includes a header, left column, content area and a footer.

These elements are centered in the browser window giving the page an overall width of 760 pixels, so it caters for those browsing at 800 x 600 resolution.

The centering is achieved by wrapping the left column and content in a centering div (see Centering a Layout Horizontally).

The code below will reproduce the screenshot above. (you may need to replace the quotation marks with straight quotes for it to display properly).

“http://www.w3.org/TR/html4/loose.dtd”>

Two Column Fixed Width and Centered Layout

heading

Mauris fermentum, risus eu hendrerit convallis, urna metus porttitor lacus, in pretium purus nisi id magna. Nunc tristique vehicula sem. Nam non nunc. Duis orci justo, imperdiet a, pharetra sed, rutrum quis, diam. Sed nec enim a sapien sollicitudin laoreet.

Sed eu pede eget diam fermentum scelerisque. In ut arcu. Vivamus lacinia, libero non molestie varius, nunc quam mollis ligula, ut malesuada nibh nisl vitae tortor. Cras blandit, felis sit amet viverra consequat, enim tellus rutrum mauris, a tempus enim turpis quis erat.

Sed dictum sollicitudin augue. In eros tellus, luctus ac, vulputate sed, consectetuer ac, pede. Ut porttitor mauris vitae nisi. Etiam lectus metus, porttitor sed, viverra vitae, ornare in, ipsum. Donec in eros a arcu auctor ultrices.

Heading

Duis tempus condimentum metus. Etiam feugiat, justo eu cursus pretium, magna odio malesuada turpis, at euismod nibh risus at metus. Fusce eleifend massa nec pede. Donec tristique nisi fermentum felis. Nunc et sapien nec dui malesuada malesuada.

Integer sem tortor, mollis sed, gravida eget, molestie eu, lorem. Nullam in nisl at lorem facilisis fermentum. Ut eros. Praesent suscipit pulvinar eros. Nulla purus. Aliquam ac nisl quis erat tincidunt vestibulum. Mauris scelerisque malesuada tellus. Nam ultrices purus sit amet tellus. Morbi dignissim elit laoreet orci. In sit amet tellus. Donec malesuada tempor turpis.

Integer in lorem. Mauris nec urna eget justo eleifend fringilla. Quisque lobortis ultrices enim. Phasellus id nisi eu mi cursus mattis. Nunc facilisis, mauris et pellentesque sagittis, diam augue faucibus nisl, in tincidunt lorem magna non lorem. Fusce vitae elit in nisl tincidunt blandit. Proin auctor nibh non neque. Nulla nisi.

Left Column

Nav link 1

Nav link 2

Nav link 3

Nav link 4

Nav link 5

HTML Tag Reference

ukmagician — Wed, 27 Jun 2007 12:02:22 +0000

It’s not easy to remember the multitude of html tags and their attributes, so it’s good to have somewhere to go for a quick recap.

My favourite site for most HTML help is Your HTML Source, which has a great glossary of HTML tags. It clearly outlines the correct usage for the all the common tags and many you might not normally think of using.

It’s a good idea to use an existing tag if possible, rather than defining your own class, as it makes your code more compliant with web standards and screen readers.

Centering a Layout Horizontally

ukmagician — Sat, 16 Jun 2007 10:58:49 +0000

This is, what should be, a simple technique for centering a page horizontally in the browser window.

Logically, you would think all you have to do is wrap your content in a div, give this div a width (say 760px so it fits nicely on a screen resolution of 800 x 600) and set the left and right margins to ‘auto’.

#centeringwrapper {
width: 760px;
margin: 0 auto;
}

This works in Firefox and other browsers which display CSS correctly, but of course with Internet Explorer nothing is that straight forward.

IE doesn’t interpret the automatic left and right margins. However we can use another incorrect CSS interpretation to achieve the desired effect in IE. If you apply a centering text alignment to the body tag, IE applies it to all divs within the body, thus centering them. However, this also centers all body text on the page so we need a further fix to reset the text to align to the left.

Finally, the body tag needs to have a minimum width equal to the width of the centering wrapper. This deals with an issue in older Mozilla browsers where reducing the size of the browser window results in half of your centered div hanging off the left of the page.

So the final CSS looks like this:

body {
text-align:center; /* IE centering fix */
min-width: 760px; /* Mozilla resizing fix*/
}
#centeringwrapper {
width: 760px;
text-align:left; /* Negates IE centering fix in other browers*/
margin: 0 auto; /* Ccentering in non-IE browers*/
}