Posts tagged Web Design

Firefox is by it’s nature a web browser good for designers and developers, it’s collection of add-ons just makes it better. Here is the list of, in my opinion, must have and most useful Firefox add-ons for web designers and developers, both front-end and back-end.

1. Firebug

[caption id=”attachment_150” align=”alignnone” width=”700” caption=”Firebug Console”][/caption]

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. It is the world’s most popular front-end development (web design) add-on. In detail, you can see every element’s characteristics like width, length, type, etc.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/firebug]Download[/button]

2. Web Developer

[caption id=”attachment_151” align=”alignnone” width=”333” caption=”Web Developer”][/caption]

The Web Developer extension adds various web developer tools to a browser. By default, it is displayed as a toolbar in Firefox. It is a place containing all useful shortcuts and tools you could possibly need.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/web-developer]Download[/button]

3. FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. With an add-on like FireFTP you don’t have to use other FTP Clients, but access your server without leaving your browser.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/fireftp]Download[/button]

4. FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/firephp]Download[/button]

5. HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon.This is a must-have if you deal with the HTML code a lot, it will check everything for all possible errors like syntax mistakes for example.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/html-validator]Download[/button]

6. CSS Usage

[caption id=”attachment_152” align=”alignnone” width=”700” caption=”CSS Usage”][/caption]

CSS Usage is made to be used with Firebug, that I mentioned earlier. This add-on uncovers unused CSS style rules. It is used for making your CSS files as light as possible.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/css-usage]Download[/button]

7. SEO Doctor

Search Engine Optimization (SEO) is one of your website’s most crucial and most important parts if you would like to get some traffic. This is why this add-on is important. It gives you a score between 0% and 100% depending how good your site’s SEO is. It highlights mistakes and tells you how to repair them.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/seo-doctor]Download[/button]

8. YSlow

YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/yslow]Download[/button]

9. CollorZilla

[caption id=”attachment_153” align=”alignnone” width=”200” caption=”ColorZilla”][/caption]

Advanced Eyedropper, ColorPicker, Gradient Generator and other colorful goodies. You can actually get some of Photoshop’s most useful web design “features” right inside your browser. Like that color? Use CollorZilla and get the RGB code right this instant.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/colorzilla]Download[/button]

10. MeasureIt

[caption id=”attachment_154” align=”alignnone” width=”425” caption=”MeasureIt”][/caption]

Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.

[button color=orange url=https://addons.mozilla.org/en-US/firefox/addon/measureit]Download[/button]

These are, in my opinion, must-have addons for every serious web designer or developer. If you think that the list is missing something, share it in the comments bellow!