Used in the html page title, should be keyword rich for search enginess
Written by: James Gregory on 20 May 2009
Mozilla for Web-developers
I generally try to avoid tech-evangelism. I've heard way too many people
espousing to me the benefits of their favourite technology and ultimately I
end up thinking that it's a different way to work, but it's probably
not superior. Occasionally though, there are some really innovative
ideas that permeate through to me and they actually do change the way I work
for the better. Believe me when I say that I wouldn't bother telling you about
Mozilla unless it had made my life simpler.
Mozilla, for those who don't know, is an Open-Source web-browser written
largely by the engineers at Netscape. For those of you with Pavlovian
responses to the phrase "Open-Source", that doesn't mean "difficult to
install"; There's a Windows installer program available for it that works just
like any other, and if you just want to use Mozilla as an Internet Explorer
replacement, it'll do that just fine as well.
The web-dev toolbar
If you're a web-developer, you really have to check this out. You can get
it from
here.
Once you've installed it (which is only a couple of mouse clicks), you end up
with something that looks like this:
sitting just below your location bar. Ever wondered what your webpage will
look like on a smaller monitor? This toolbar makes that easy, just click the
"Resize" button and select the resolution you want. Mozilla will instantly
snap to the size you selected and you'll be able to see the world through the
eyes of your smaller-monitored clients.
The toolbar has amongst its features the ability to turn your GET forms
into POST forms (and vice-versa), the ability to Javascript or CSS, show the
outline of all your table cells or block elements (this one's really handy --
it's just like setting border="1" on all your tables but without all the hard
work) -- great for figuring out how other designers built "that" look.
The Anchor website with and without cell borders
The last nifty feature of the web-dev toolbar you've got to know
about is the "Find broken images" tool that does exactly what it says -- hunts
down all those images you've referred to but forgot to upload. You'll find
that option in the "Images" menu along with options to hide all your images,
find missing ALT tags, and show images paths and sizes. Much better than
getting calls from your customers wanting to know why there's a big "broken
image" icon on their webpage.
Cool. What else?
There's heaps of extensions for mozilla. Check out
The Mozilla Extension Room for
more nifty tools you can hook into mozilla. Here's a few of my favourites:
- The Google
bar adds the ability to search google just as easily as entering a
URL.
- The Mozilla
Calendar is a full-blown calendaring application with support for the
popular ical format and group-calendaring features.
- Reload
Every will optionally reload a webpage as often as you tell it to.
Very useful for tracking stock quotes, sports scores, or just keeping a
live-preview of your website behind your HTML editor.
The Sidebar

The mozilla sidebar
Another surprisingly useful feature of Mozilla is the sidebar. Press F9 and
a panel will appear to the left of your screen. In the screenshot I'm using
the excellent CSS-reference which you can get from
Netscape Devedge.
I think this thing is great. If you ever need to look up an obscure part of
the CSS reference, just hit F9 and click on it.
You can also make your own sidebars, it's actually very simple. They are
essentially mini-HTML pages that sit in the browser all the time. Very useful
for site navigation on heavily used administration areas and so forth. Check
out
this
Howto to learn more.
Mozilla ships with details of a number of sidebars, so it's easy to add
some common sidebars. Just hit F9, and click the "Tabs" button at the top
right of the sidebar. That will bring up a menu, click the option that says
"Customise Sidebar..." and add tabs to your heart's content.
Browsing
Mozilla has made a number of breakthroughs in day-to-day browsing that
you'll find it difficult to live without once you start using them. Tabs is
one feature that everyone falls in love with; Hit CTRL-T and you'll get
another "tab" -- like another window but all accessible inside the browser.
The first time you go to a page with one of those annoying popups, Mozilla
will ask if you'd like to turn popups off. It's only when you go back to a
mozilla-impaired computer that you realise just how much time you can waste
with popups.
All the latest technologies
It has to be said: Mozilla's support for the latest web-technologies is
second to none. Mozilla's support for PNG images is light-years ahead of
Internet Explorer's, and the new 1.7 version adds support for SVG images. The
internet is starting to evolve and take up these new technologies, and Mozilla
is the only browser you can expect them to work in.
The Mozilla Suite
Hopefully I'll have convinced you to at least take a look at Mozilla. It
has powerful tools for web-developers and makes your life easier as an
end-user as well. If you're happy with your web-browser, check out the rest of
the Mozilla Suite at Mozilla.org -- there's
a killer mail client there as well.
Happy browsing!
Related Links: |