Minervity.com is a great site for resource and inspiration. We came up with an idea of creating a “Creative Corner” where the aim is for designers/developers to have an area where we talk to different designers and developers and ask them a question related to their field. We feel this would be a great way to help out the up and coming designers as well as an area for other designers to also get inspiration and insights as to the tools used and trends followed by their peers.  We feel that it is also a good way for us to showcase some of the work and ideas behind both the up and coming as well as the seasoned designers.  For this month’s edition we concentrated on Firefox extensions.

Firefox Extensions add more extensive features to the browser; some add simple toolbars while others can add a wide range of new features.

Main Image.

Here are the designer/developers’ answers to our question:  Which is your favorite Firefox Extension (s) to use when developing a website?

@andysowards

This one is easy. My favorite Firefox tool is Firebug. Hands down. I could not, and will not, live without it. Sample of work I provided is my site, AndySowards.com, which I used firebug on pretty much the whole way through, it definitely helped me build the look and feel of the sites css/javascript/jQuery fairly quickly and without any pain .

The reason that it is so invaluable is because it allows you to fully understand the html/css/javascript that is on a page, very quickly and easily. It has made my css building/manipulation process at least 75% faster if not more. I can just build out the css and have the page styled exactly how I want it in firefox, then just copy and paste the css into the appropriate place. Its that easy! Of course IE, Safari, and Chrome, may need some tweaks. But FireBug allows even the more difficult tasks to be accomplished within minutes! Finding css issues is so easy now. Thank you firebug. You rock.  Check out his website: http://www.AndySowards.com

@obox

I rely heavily on “TidyHTML” and the Firefox Web Developer toolkit to dev sites.

Without those two items I feel lost, Web Developer is perfect for tracking ID’s etc when styling widgets in Wordpress themes. It also helps with spotting div sizes and picking out style values.

TidyHTML is perfect for getting your site w3c compatible. I only use TidyHTML when splicing up designs and converting them to CSS + HTML.

So yeah, without those two tools I would be lost.

Since I use them for every site we develop I will just attach a screenshot of one of our themes because of the way I used the Web Developer toolkit to style the sidebar.

Details of screenshot: Press Theme http://wwwdemo.obox-design.com/press/

@adammccombs

My favorite tool called the 960 Gridder. 960 Gridder is a jquery based tool that overlays any webpage with a 960px grid. It’s great for testing size and spacing to make sure your layouts are pixel perfect. 960 Gridder is cross-browser compliant and works well in Internet Explorer 6/7/8, Firefox 2/3 and Chrome. Safari 4 Beta and Opera 9 is also working as expected and it should work in Safari 2.x-3.x also.  960 Gridder is built upon the very famous JavaScript framework jQuery.

960 Gridder will automatically identify if jQuery is present at the website and if it is not, it will include it. However, 960 Gridder isn’t affiliated with the jQuery authors at all.More information about 960 Gridder can be found at: http://gridder.andreehansson.se/.  Check out more of his work http://www.mccombs.me/

@iBlend

My favorite Firefox tool by far is FireBug (http://getfirebug.com).  Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

I use this tool to tweek styles and html on my local.  Once it looks right, I will edit the real files and upload them to the server.  I recently used this Firefox tool for the release of my new website (http://thewebblend.com). TheWebBlend is a community for designers, developers and tech junkies that keeps you current with a summary of the latest in web related news and trends.  Check out his site: http://thewebblend.com

@printedproof

The most helpful Firefox tool for me is FireBug. FireBug is an add-on that allows me edit, debug, and find CSS, HTML, and JavaScript live on any of my projects as well as any other live pages on the web.

I grew up designing for web using Dreamweaver and GoLive, so in other words “drag-and-drop”. I have no formal coding education. The past three years I have spent programing dynamic websites with Joomla! and WordPress.  For beginners like myself it is extremely helpful to have the ability to see the code of websites that have elements and designs that you may want to mimic or develop in your own ways. By finding the code behind these sites you can easily find what you are looking for and make it your own. This is big for developers who use pre-designed templates. Many times you can find other webmasters using the same template that they have customized. Access to the HTML/CSS/Javascript behind the scenes will help learning how it was done.

FireBug is great tool even for established designers and developers to debug and clean up messy code. FireBug allows me to easily find where an element resides within the HTML or CSS of a website. I can then go back to my files and make any necessary adjustments or changes easily.  Firebug also lets you make changes on the fly and see them immediately in your browser. You can measure and illustrate the margins, borders, padding, and sizes of elements to easily alight and locate. Use Firebug to break down load times to improve speed. It even includes a powerful JavaScript debugger so you can pause execution at any time.  Firebug pops up at the bottom of your window and is unobtrusive. In no time you can build upon your skills as a developer or simply streamline the process.

@lastwebdesigner

The first one colorzilla :http://www.colorzilla.com/firefox/ A really good tool for colors, with come really nice features. I use it for choose and test the color palette on my websites, and for check colors on other web sites,when I’m getting inspiration, or simply when I see a good web site and I want to know the color that is using.

The second is another classical ad-don used by a lot of web designers, the “Web Developer Toolbar“. I use a lot of the CSS options, making tests on the CSS and exploring other CSS websites around the world. It’s a really good tool. I use the re-sizer too for tests in different resolutions. Well, it’s a really good an useful tool. Also, I think FireBug is a must for any designer. The third ad-don is another great tool. It’s the “HTML Validator” for Firefox. This is a great add-on as I don’t need to go to the “W3″ page every time to validate my HTML code. I can just validate the source code while I’m working on it locally. It’s a great tool as I just have to take a look at the bottom-right corner on my Firefow browser window and see if the code is validated or see where it finds some errors. Very useful. I like it a lot. The fourth ad-don is a great one for SEO and to improve your position in the search engines. “Firefox SEO Tool”

I use this to get information about websites, competitions, keywords and checking my websites, it’s a good tool, if you use this in its fullest way it can help you to find how to improve your position on Google and other search engines. And another important factor, it gives me information about social bookmark links and you can disable this add-on with just one simple click.

The last one is a must for any designer/developer. FireBug, a plug-in that I don’t think needs an explanation. Everyone in the world knows what it is and how useful it is if you are developing a website. There are, in particular, two functions that I use a lot. It’s the console for Testing/Debugging my Javascript/jQuery/Ajax and inspector to “inspect” the HTML elements of the website.

@giographix

Flash Switcher

This extension allows you to easily switch from one flash player plugin version to another, or also to remove or save the currently installed plugin (maybe for testing the express install).Once installed you will find the “flash switcher” icon in the Firefox statusbar at bottom right (and also in the Tools Firefox menu). Click on it and a list of available options will appear.

The extensionhas been tested on the followings Operating System: Window XP, Ubutntu linux, Mac OSX Tiger and Leopard. Flash Switcher has been as essential to our Flash development as FireBug has to our HTML debugging. Before finding the now indispensable add-on, we had to keep a stockpile of player plugin installers and browsers in order to properly debug a Flash movie.

With a complicated full-Flash microsite such as the one we created for WayHuge.com, we used Flash Switcher to test Flash player detection and to switch to a debugger version of the player to do a live debugging in the SWF. Having the ability within the browser to easily test Flash pages with different player versions has made Flash Switcher a stable in our Flash development toolbox and helped us get WayHuge.com to a successful launch!

@svgrob

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse.  Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

Firebug is probably the ultimate web development plugin that Firefox has.  Anyone who codes for the web needs this plugin.  Firebug enables you to change CSS and debug JavaScript on the fly, live and yes in real time.

This is such a powerful way to work, as it saves time by enabling you to find out why your site is broken, without the laborious save and reload.

If you do not have firebug and you use HTML/CSS or Javascript, get it, it will change your developing life.  Here is a little introduction for you: Nettuts: 10 Reasons Why You Should Use Firebug

@ruhanirabin

I wrote an article about your topic on my site its the 10 Web Developers Firefox Extension, check it out here.  For this article I chose  a  must have tool for the SEO beginners and experts alike. Beginner web masters and seos will find SeoQuake useful for estimating effectiveness and competitive ability of their SEO efforts.

In the hands of professional SeoQuake will become a powerful and indispensable tool for analyzing optimization and promotion level of internet web-projects. SeoQuake can be distinguished from similar projects by a wide range of parameters available for analysis, simplicity of use and also a tool for creation of custom parameters.

SeoBar

SeoBar can be described as an additional toolbar, which shows the values of selected parameters for the page currently opened in the parameters shown by SeoBar is fully customizable by user window. Set of Inclusion of parameters in SERPs parameters for search results under each search result shown on SERP. Set ofparameters shown is fully customizable by user. Loading of parameters can be handled in two different ways – simultaneously with the loading of the SERP or after SERP loading, by user demand. Ranking of the results by selected parameter in ascending/descending order and storing results in file are available features.   After submission of the query into the search engine user is presented with SERP with search results. SeoQuake shows values of the parameters for search results under each search result shown on SERP. Set of parameters shown is fully customizable by user. Loading of parameters can be handled in two different ways – simultaneously with the loading of the SERP or after SERP loading, by user demand. Ranking of the results by selected parameter in ascending/descending order and storing results in file are available features.

@maddisondesigns

My favourite Firefox Addon and the one that I use the most, would be the “Web Developer” toolbar (http://chrispederick.com/work/web-developer). I use it every time I develop a website. I love the “Display Element Information” (Ctrl+Shift+F) option. It’s great for seeing the layout of your Divs and for seeing what Classes/Id’s are assigned to them. Another great feature is the ability to easily disable/enable JavaScript. This is great for testing, especially with the increased usage of JavaScript frameworks like JQuery and MooTools. The Web Developer toolbar has heaps of really useful options and is an invaluable tool when developing websites. Visit his site: http://maddisondesigns.com

@pixeljedi

Primarily, i’m a lover of colorzilla and fireftp.  fireftp has been used on most of what I’ve done.  start at ccconline.cc and branch out to all of our corresponding sites.

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

Regarding these two tools, colorzilla and fireftp . . . the simple answer is ease of use. FTP within the browser makes sense: upload alongside the program to download. It enables fast-switching for viewing and testing of files. Colorzilla’s just a beast to make sure that I can snag a color that catches my eye and hold on to it for future use.

Popularity: 6% [?]