Must have Firefox Addons for Web Designers
1. Simple Window Resizer
One of the most frustrating issues that designers face is creating designs that work across a variety of screen sizes. Nobody is sure what size their viewer’s screen is. They could be viewing your work at 1600×1200, 1280×1024, 1024×768, 800×600, or 640×480. To bring in the most viewers, you must create designs that work at all of these resolutions.
There are many different ways to view your work at different resolutions, but the simplest way is to use the Simple Window Resizer add-on. After downloading and installing this add-on, you can instantly resize your browser window to any of the standard resolution sizes. This will allow you to see what your viewers will determine whether they are viewing your work at a different resolution. If you see that something isn’t displaying correctly or you designed the website way too big you can instantly make changes to your code to fix the problem.
2. CSS Validator and HTML Validator
There is no point in spending countless hours designing an amazing looking website and then have it function improperly when your viewers visit it. To make sure that your site displays everything properly it is recommended that you validate all of your code. These add-ons validate your code against the appropriate W3C standards in the industry.
When you are using the HTML Validator, you can choose to validate directly in the browser. This helps because the errors will be shown as status bar icons and you will know what you need to fix. Not only does it show you the errors, but it offers explanations of the errors after the validation.
3. FireShot
Your computer obviously has a built-in screen capture tool, but this tool doesn’t necessarily have all of the capabilities that you may need when it comes to screen capturing. You cannot grab parts of a web page that appear outside of the browser window typically but you can with FireShot.
Not only does this add-on give you the ability to capture an entire web page but it also allows you to add annotations directly to your captured screens. You can save the screenshots in a variety of file formats, save them directly to your FireShot hosting server, or email them to others with the click of a button.
4. Colorzilla
As a designer, you never know where inspiration can be found when you are surfing the web. You may see a site layout that you are particularly fond of or you may stumble across a website with a color scheme that you like. If you want to find the RGB quickly and HSV values of the colors on a particular site then you might be interested in the Colorzilla add-on. It has an online eyedropper, which makes it very simple to get the exact value of the color that you like on any given website.
It also has other features like a DOM color analyzer and an online palette viewer which can be very useful to web designers. The color analyzer allows you to locate the elements of the page that go with the given color to find the CSS rules that are unique to that color. With the online palette, you can bookmark and share palettes that you like, and you can eye drop colors online as opposed to sampling them from a screenshot.
5. Firebug
Firebug gives you the ability to edit, debug or monitor any web page that you come across. It gives you total control over the CSS, HTML, and Javascript of the page that you choose. Every change in your code that you make is done instantly so that you can test out different changes and see the results of those changes right away. Firebug is also useful for visual guides for editing CSS, analysis of network activity and customizable logging for Javascript.
6. Web Developer
This is a must have add-on for any web designer. The most useful feature of Web Developer is the CSS menu. The menu allows you to edit CSS directly, add custom user stylesheets, view style information, view CSS, display CSS by media type and disable styles.
The next most useful feature is the image menu. It allows you to display ALT attributes, image dimensions, image paths and image file sizes. You can even disable images, find broken images, replace images with ALT attributes and outline images. In addition to that, you can outline different elements such as frames and block level elements, show the hidden elements on the page and freely edit the HTML.