The Web Designer's Toolkit

8 must have web design browser plugins

0comments

One of the best features of modern browsers is utilising add-ons/plugins/extensions that enable you to add functionality, neat tools and useful features. Below is a list of some of the my favourite add-ons for web development, design, SEO and related services. These are the tools that I use (on either Chrome or Firefox) on a regular basis:

1. Web Developer

Link: http://chrispederick.com/work/web-developer/ 

cssedit

Inline CSS editing

If you’re a website designer and you’re not aware of this one then – where have you been?

Web developer contains a suite of tools for managing just about every aspect of HTML, CSS, Javascript, Cookies, Forms … and a whole lot more.

I’d recommend this plugin for its inline editing alone, which can save precious time in fixing CSS bugs and testing website flexibility with adding HTML.

Favourite features:

  • CSS inline editor
  • Outline Elements (Block, Inline, Tables, etc)
  • Window resize (with presets)
  • View Generated Source
  • Information > View Document headers, Details, Size and so on

2. MeasureIt

Link: https://addons.mozilla.org/en-US/firefox/addon/measureit/
measureit
I like MeasureIt because of its simplicity: just click the button, then click and drag to get a size for your element.

Great for checking gutters and margins, quickly assessing the size of an element or for scoping out the size of a new banner.


3. MozBar

Link: http://moz.com/tools/seo-toolbar

The MozBar SERP overlay

The MozBar SERP overlay

An SEO toolbar, MozBar gives you an instant page and domain authority for any website (according to the Moz Linkscape). Various extra tools allow you to perform keyword analysis on the page, highlight followed vs nofollowed links, change your useragent string … and more. There’s also a button that loads the website into OpenSiteExplorer for extra link analysis.

The MozBar includes a SERP (search engine results page) overlay that gives an instant domain and page rank for websites in the results – extremely handy for evaluating site competitiveness at a glance.


4. Fireshot

Link: http://getfireshot.com/

Fireshot's context menu: great for creating screenshots (like this one!)

Fireshot’s context menu

A simple screenshot app that allows you to capture different areas, including:

  • Entire page
  • Visible page
  • Selection
  • Entire browser window

You can then choose to save, copy to clipboard, email, print and so on.


 6. Firebug

Link: https://getfirebug.com 

firebugAnother developer plugin, Firebug enables inline HTML and CSS editing, as well as a JS console.

One of the most useful features in the ability to ‘inspect’ elements within the page – allowing you to identify chunks of code within the markup and CSS. This is great for finding and fixing troublesome bugs as you develop.


7. ColorZilla

Link: http://www.colorzilla.com/ 

Using the eyedropper

Using the eyedropper on a very nice bottle of whisky…

ColorZilla is an eyedropper/colour picker for Firefox and Chrome.

It’s quick and simple to use: the eyedropper will give a Hex and RGB value for your colour and clicking also adds the hex to your clipboard.

The utility also gives you a quick link to the ColorZilla gradient editor/creator – a fantastic little utility that creates the CSS for any gradient you care to specify. The CSS is generated with browser-specific prefixes for those not yet with CSS3 gradient support.


8. FontFinder/WhatFont

whatfont

Link: http://chengyinliu.com/whatfont.html

If you’re struggling to identify a font WhatFont saves you from trawling through a CSS file to track it down.

Just click the button, then the text on the page and voila! You get the font family, style, size and line-height.