The IE Problem
Popular assumption may be that all websites look the same on all browsers but the reality is that what may look great in one browser refuses to work in another.
I have already highlighted the ridiculous volume of work that web designers around the world have had to do just to try and get sites to work in IE6, and let’s be realistic this browser is still used in many large organisations.
One of my favourite tools is netrenderer a simple quick online tool to allow you to visualise what a website will look like in various IE browsers.
Surely the fact that this site exists at all points to the problem? (Don’t call me Shirley).
Form and Content
HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
The content and the form of a website are therefore split. The content is handled by HTML whereas the form or the look of the site is dealt with through CSS via the stylesheet, w3schools.com gives a great intro to the subject.
Now this is all well and good if we are working with a neat stylesheet that we have created ourselves. But what if this isn’t the case? CSS styles are generally placed in an external stylesheet but can appear embedded in the HTML page (generally in the ‘HEAD” but may be inline). There may be a number of external stylesheets in different places, this frequently happens when one is working with a WordPress site that may have several plugins each of which has it’s own stylesheet. Good practice should lead us to put all of the styles in a single sheet but in the real world this isn’t always viable. So in steps FireBug.
Firefox can be extended to perform all sorts of functions from FTP to showing the weather. If you look at the screenshot above you will notice in the bottom right part of the window a set of plugins including,
- FireFTP FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.
- Screengrab It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard. It captures Flash too!
- SenSEO SenSEO is an extension checking the most important on-page-SEO-criteria and calculating a grade of how good your site fulfills these criteria.
- SearchStatus SearchStatus is a toolbar extension for Firefox and SeaMonkey that allows you to see how any and every website in the world is performing. Designed for the highly specialised needs of search engine marketers, this toolbar provides extensive search-related information about a site, all conveniently displayed in one discreet and compact toolbar.
In addition I am able to see the IP address of a page and validate the CSS code…stop me I’m off again. I could continue but, there we have it FireFox, an immensely powerful tool.