There are plenty of Firefox add-ons at your disposal that can extend the browser's core functionality. The types of add-ons you'll encounter have a wide range of utility, from productivity tools that monitor the amount of time you spend on the Internet, to social media tools that conveniently give you in-browser capabilities for using popular services such as Twitter and Facebook.
The Firefox browser is a popular choice for web designers, and there are plenty of add-ons that can make the day-to-day work of web design significantly more efficient and fruitful. Here are 10 highly recommended, top-notch Firefox add-ons for web designers. Let us know what other Firefox add-ons you use in the comments.
1. Web Developer
The Web Developer Firefox add-on is a huge suite of web design tools packed with massively useful functions that will help web designers perform tasks more efficiently. By default, it displays as a toolbar towards the top of the browser, presenting you with various menus such as CSS, Resize and Cookies.
Whether you need to inspect the CSS of page, discover information about a webpage (such as seeing all the alt attributes of images on the page), quickly validate a web design for W3C compliance or measure design elements, Web Developer will likely have a convenient tool for you.
2. Firebug
Firebug is such a popular web design/front-end web development Firefox add-on that there are actually add-ons for it (see no. 5). And if you were to ask any web designer or web developer what Firefox add-on they can't live without, chances are he'll say Firebug.
Firebug is an open source add-on that gives web designers powerful tools for inspecting and debugging a web design. It can help you figure out what CSS styles affect certain elements (in case you're having trouble with a style rule that doesn't seem to render properly), inspect the document object model (DOM) to learn about the structure of the web page, determine attributes such as color, width, height of HTML elements and much more.
The extension can take a while to learn (trust me, it's worth the time), but the creators have some helpful documentation to get you started.
3. MeasureIt
This Firefox add-on has a single purpose: It gives you a ruler that you can use on any web page for measuring items. Since web design critically relies on the proper sizing of design elements, this is a valuable tool to add to your collection of Firefox add-ons.
4. ColorZilla
One thing that web designers frequently work with is color. This add-on includes a color picker (much like the one you see in Photoshop) and an eye dropper tool so that you can sample and identify the colors used on any web page. A similar Firefox add-on to check out is Rainbow Color Tools.
5. CSS Usage
CSS Usage is an extension for Firebug (thus requiring you to have Firebug installed) that uncovers unused CSS style rules. It works by identifying the CSS you use and don't use, pointing out what unnecessary parts can be removed to keep your CSS files as lightweight as possible.
6. Page Speed
A website's speed is important for usability and the user experience. Research has shown that website visitors hate slow websites, so you should do the best you can to design sites that are lightning fast.
Page Speed is a browser extension (for Firefox and Chrome) developed by Google that analyzes a web page and tells you where improvements can be made to increase the site's speed. It's a great tool for testing a web design's ability to render fast. Alternatively, you can use Page Speed Online, which is a web-based version of the add-on. You can also check out YSlow, which functions similarly to Page Speed.
7. HTML Validator
This nifty Firefox add-on helps to make sure that you're writing well-formed HTML. It checks your markup for standards compliance, and if it catches anything that doesn't cut it, the add-on tells you why so that you can update the code.
8. IE Tab 2
Web designers are always concerned about the cross-browser compatibility of their work. IE Tab 2 is a Firefox add-on that allows you to view any web page using Internet Explorer without leaving Firefox. All you have to do is right-click on a web page, and then choose "View Page in IE Tab" in the contextual menu.
9. Screengrab
Taking screenshots in the browser is a common task for web designers. Screengrab is a simple tool for taking full-page or partial-page screenshots. You can copy the screenshot to your clipboard, or save it to your hard drive as an image file.
10. SEO Doctor
Search engine optimization should begin in the design phase, when the site's HTML is still malleable and open to change. SEO Doctor is a convenient tool for checking any web page's SEO.
SEO Doctor gives you a score between 0 and 100% and highlights areas in the web page that can be optimized for search engines. One neat feature is that you can export the data for spreadsheets for further analysis and logging.
No comments:
Post a Comment