Web Developer
Although it is called Web Developer,
this Firefox add-on is absolutely invaluable for web designers. If you
were only going to download and install one Firefox add-on, this is the
one that I would recommend to you. The reason is that this add-on
provides a variety of different useful features, and could be
classified as the Swiss Army Knife of Firefox add-ons.
The first feature of this add-on that designers will find useful is the CSS menu. Features of this menu include the ability to disable styles, display CSS by media type, view CSS, view style information, add a custom user style sheet or directly edit CSS.
The next feature of interest for designers is the Image menu.
In addition to allowing you to display ALT attributes, image
dimensions, image file sizes and image paths, you can disable images,
find broken images, outline images, replace images with ALT attributes
and several additional functions.
Although I could devote several pages to all of the features that
this add-on offers, I just want to touch on a few other functions that
web designers will find especially useful. These include the ability
to outline different elements (ranging from frames to block level elements), edit HTML and show hidden elements.
Firebug
While Web Developer is the first add-on I would recommend to any designer, Firebug runs a close second in terms of usefulness for designers.
With Firebug, you are instantly given the ability to edit, debug or monitor any web page. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.
Like most of the best add-ons for Firefox, Firebug goes beyond its
basic functionality and provides a wealth of options that make it easy
for any user to completely customize their use of this add-on. Some of
the additional features and options offered by Firebug include keystroke
shortcuts, the ability to control how and where the Firebug editing
area appears, visual guides for editing CSS, analysis of network
activity and customizable logging for JavaScript.
Colorzilla
As
a web designer, you never know when inspiration is going to strike you
as you are surfing around the Internet. For example, you may be
looking at a website and come across a color that you really like.
If you want a quick and efficient way to be able to find out the exact HSV and RGB value for that tool, you should install the ColorZilla add-on.
The ColorZilla add-on features an online eyedropper,
which makes it quite simple to get the exact value of a specific
color.
In addition to the online eyedropper, ColorZilla offers
several additional features that most web designers will find useful
such as a DOM color analyzer and online palette viewer.
The DOM color analyzer allows you to locate elements on the page that
correspond to a given color and find out the CSS rules that specify a
certain color, while the online palette viewer allows you to bookmark
and share color palettes that you like.
FireShot
Although your OS undoubtedly has a built-in screen capture function,
this doesn’t mean that the default screen capture has all of the
capabilities that you may need.
For example, can the default screen capture of your OS grab portions of a web page that are outside of the browser window?
In most cases, the answer to that question is going to be no.
Fortunately, there is a Firefox add-on that offers this feature, along
with a variety of other useful functions.
FireShot is an advanced screen capture add-on for Firefox.
In addition to giving you the ability to capture an entire web page
(even when there are portions of the web page that aren’t visible as a
result of the constraints of your browser window), FireShot also allows
you to add annotations directly to your screen captures.
FireShot
gives you several options for handling your screen captures. Not only
can they be saved in a variety of file formats, but they can also be
saved to your computer, emailed to others or saved on the free FireShot
hosting server. As a result of its wide range of features, this add-on
has attracted over one hundred and fifty thousand active users, and has
proven itself to be invaluable for web designers and other Internet
professionals.
CSS Validator/HTML Validator
As a designer, you want to make sure that all of your hard work can
easily be accessed by visitors and displayed to them properly. One of
the easiest ways to ensure that both of these tasks are accomplished is
by validating all of your code.
Although they are two separate add-ons, both the CSS Validator and HTML Validator should be installed in the browser of any web designer. Once the add-ons are installed, the CSS Validator can be accessed from the Tools menu, while the HTML Validator can be accessed from the Firefox status bar.
Each of the add-ons validates the code against the appropriate W3C standards.
While the CSS Validator simply does a standard validation of the code,
the HTML Validator provides some additional functionality.
When using the HTML Validator, you can choose to validate directly in the browser (where
any errors are shown as a status bar icon), show the source with
explanations of errors after the validation or a validation with
proposed solutions to any errors.
Browser Window Resizer
As
someone who creates designs for the Internet, one of the most
frustrating issues that you undoubtedly encounter is trying to create
designs that work across a variety of screen sizes.
Because you don’t know whether a visitor is going to be viewing your
work at 640×480, 800×600, 1024×768, 1280×1024 or 1600×1200, it’s your responsibility to create designs that work at all of these resolutions.
While there are a variety of ways to view your work at different resolutions, I have found that the Browser Window Resizer add-on is the most efficient way to accomplish this task. Once you download and install this add-on, you will be able to instantly re-size your browser window to any of the standard resolution sizes listed above.
This will allow you to see if your design is going to look good to
visitors who aren’t using the same resolution as you.
The best thing
about this add-on is that if you are using it in conjunction with the
other add-ons in this list (specifically Firebug), when you see that
something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window.
No comments:
Post a Comment