Portfolio A Belief In Design
And A Love Of Photography

The Best Things in Life Are Free

There are browsers and there are browsers. I use a mac, I use Safari. But when I’m developing websites I use Firefox.

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.

FireBug is just one of many plugins that can be added to FireFox to extend it’s functionality way beyond that of a simple browser and is a great tool to help you find just which CSS style is in operation anywhere on a page. Beyond that it will let you perform a ‘what if’ function by allowing you to test changes in the CSS, HTML and JavaScript code, on the fly so to speak.

Extending Firefox

Firefox and 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,

  • Firebug Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
  • 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.