Well since Fire fox got updated and I have got the universal package browser for web design I thought why not share it to those who do not know about these tools so here we go. I will explain each tool and what it is used for and then give you the simple instructions on where to get it and where to find it.

First download Firefox
http://www.mozilla.com/products/download.h...&lang=en-US

then install it and your set from there, Now for the plug-ins and add-ons.

ColorZilla

What this program does is that once you select it a small ink dropper icon will show up and when you move it around it gives you the hex and the RGB code for that color. So if you want to use that color you can copy it down and use it for your web design. So where do I download it, install it and find it to be used.
Download it here
https://addons.mozilla.org/firefox/271/

You can find it at the bottom left corner next to MeasureIt or you can right click and select it from there as well.

Firefox Update
It works for FF 2.0

It Works for FF 3.0a2

Next Add-on/plug-in

CSSViewer
This next Add-on/plug-in does exactly that, In the last few years web designers have been switching from hard coding their design to css. With css designers are able to design 1 page of coding that will be universally use through out the whole website. So what does CSS viewer simple, you get to see what that css code looks like for that website. The benefits of this well you get a better understanding how CSS design works and how to effectively use it. Downside is that people can copy it down and then modify it to there news thus saving the hard work of doing it by scratch. When you download it and install it you will see it up top under the url bar and the navigation bar as well. It is a simple drop down menu in which has options on who you want to view it. So where do I download it, install it and find it to be used.

Download it here

https://addons.mozilla.org/firefox/2104/

Install it from your desktop and it will appear under the navigation toolbar or if right click you can select it there as well.

Firefox Update
Does work in Firefox 2

Next Add-on/plug-in

Html validation
Name says it all with this Add-on/plug-in, you click on the drop down menu to what you want to validate, HTML, CSS, RSS Feeds, Links, Section 508 (security), find out how fast the page loads and more. The validation is done by w3.org who's validation is supreme as to what it check. Although sometimes there are errors that are not errors, but thats another story. So where do I download it, install it and find it to be used. Best part about it if you look at your your url bar you will notice that it is yellow if you do that means the website is 100% valid in html and css and whatever else you can think of.

Download it here

https://addons.mozilla.org/firefox/249/

After installing it from your desktop you will see it under the navigation toolbar.

Firefox Update
It works for FF 2.0


Next Add-on/plug-in

MeasureIt

Basically this little Add-on/plug-in measure the width and height of your website in pixels. Meaning you could get proper measurements for you site and be able to use them in your div tags alot better without the need to trial and error it to make sure everything lines up correctly. From the info page they do mention that the ie tab Add-on/plug-in doesn't work well with it. Maybe in a future update it will. So Where do I download it and install and then use it. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/539/

Install it on your computer, open Firefox and you will see it on the bottom left corner right next to colorzilla Add-on/plug-in.

Firefox Update
It works for FF 2.0


Next Add-on/plug-in

View Source Chart
This Add-on/plug-in basically is another way to view the website source code, but in a more structured way, it could be useful or it could be a waste of space depending how you want to use it. So where do I download it, install it and find it to be used.

Download it here

https://addons.mozilla.org/firefox/655/

install it from your desktop and all you have to do is right click somewhere on the website and select View Source Chart


Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Web Developer
By the time you have installed most of the Add-on/plug-ins you have most of what you need. But if want the ultimate package then you need to download this Add-on/plug-ins. This has so much stuff on top of what I mention it would take a while to type it all down but once you download it you never go back. So where do I download it, install it and find it to be used.

Well to Download it go here

https://addons.mozilla.org/firefox/60/

Install it from your desktop and then when you open Firefox you will see it under the navigation tool bar you can't miss it, since it is a series of drop down menus and what not. Also if you right click as well you can select the tools in those sub-menu's

Firefox Update
It works for FF 2.0

It works for FF3b4

Next Add-on/plug-in

X-ray

This Add-on/plug-ins basically is another way to look at the source code of the website. But it's usefulness is like beyond your imagination. Because it saves the time and effort of trying to look at the source code and then back to the website and then back to the source code again. It also shows you how that part of the page was set up as well. So where do I download it, install it and find it to be used.

Well to download it go here

https://addons.mozilla.org/firefox/1802/

Install it on your computer and then to use it right click and select X-ray and your set it's that easy.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

FireFTP
This basic add-on/plug-in is simple, if you webmaster and you want to move multiple files and you don't have enough Hardrive left on your computer to download ftp software then this little add-on/plug-in is all you need to move all those files instead of uploading them one at a time. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/684/

Install it on your computer and to use it click on toe Tools menu and then select it from there and your set to load up all those files and what not.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

IE Tab
So you want to create the ultimate site that is both fluid in FireFox and Internet Explorer? well with this add-on/plug-in you can do exactly that. This add-on/plug-in also saves the time of you going back and forth between browsers when all you have to do is go back in forth in tabs, this not only saves you the time but computer resource usage as well. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/1419/

Install it from your desktop then right click on the tab and then select Switch rendering engine and then BAM you have you website on what it will look like in IE. Side note like I mentioned about MeasureIt doesn't seem to work with this add-on/plug-in at this time So I will keep you update when and if it happens.

Firefox Update
It works for FF 2.0

It works for FF3b4

Next Add-on/plug-in

Window Resizer
So you want to test out out you newly create website in different computer resolutions and you don't feel like right clicking and changing your resolution every time you change the code to the site. Well have no fear this little add-on/plug-in will do the trick with this you will be able to change the way firefox looks at different resolutions with out spending 3 minutes everyitme going through each setting just to make sure your fluid design stays fluid. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/1985/

Installs automatically and to use it click on tools menu in the browser and select resize window and your done.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Opera View
Same concept as the IE tab but you can view what your site will look like in the Opera Browser. So where do I download it, install it and find it to be used.

Download Here
https://addons.mozilla.org/firefox/1190/

Install automatically, then to use it just right click the page and select opera view

Firefox Update
It works for FF 2.0

It works for FF3b4

Next Add-on/plug-in

Load Time Analyzer
With this extension you be able to optimize your coding and images by seeing how long it takes for your web page to load in different aspects. Like css style sheets, scripts images and other stuff. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/3371/

installs automatically you will find it on top of the tabs you can't miss it.

Firefox Update
It works for FF 2.0

Next Add-on/plug-in

Offline Validator
So you don't feel like uploading your page to your website and then test it's validation and then reedit it from there then upload the page over and over. With this extension you will be able to validate it offline from your computer and be able to make any changes you need to without all that hassle. So where do I download it, install it and find it to be used.

Download it here
https://addons.mozilla.org/firefox/2520/

Install automatically, to use it go to tools and select validate page and it goes through it's little process and bam there you go.

Firefox Update
It works for FF 2.0

So with all these add-ons and plug-ins you will be set to design websites without all the hassle and stress that goes with it and using different programs just to get it right. So enjoy these tools and use them well and you could be designing just as well. Also I as go through the add-ons/plug-ins I will let you know about them through updates and what not. Also if I am missing anything that web designers could use drop a post or pm and I will make sure to add it and what not.

 

 

 

Reply

Very, very nice... I didn't know the updated FF had that. Then again, I'm the type who's lazy to update (unless the program has an auto-update) so I may not try that 'til much later. Interesting package though. I'm interested in the IE tab. I want my sites to be compatible with both browsers at least, but I despise opening IE, so I usually don't get to check it out 'til it's too late. I'm planning on making a subsite for my fansubbing group, so once I get the layout and basic codes up, I'll probably get this package.

Thanks for showing this, Saint_Michael~

Reply

wow... i didn't know about this. the only problem i had with mozilla was, for some reason after i turned on my computer for me to surf the net, all of the sudden all the images doesn't show in mozilla. do they have issues with png extensions? but if i'm not mistaken it goes the same with other image formats. might as well try the new version. maybe it solves the problem there.

thanks!

Reply

Thanks a lot, i did not know about the cssviewer plugin for firefox, i usually see the css files from my websites or any other website with a personal program named "Instant source code", which only works with internet explorer, it shows about any file a website has, with tabs too, and you can see color codes, view source codein many ways, i like it better, but for firefox, cssviewer is very good.

icemarle, you must pay atention to internet explorer, it is still the most used browser in the world of computers, so any web designer needs to test his websites, and especiallly his clients websites with internet explorer first, and then with firefox, and finally with opera, this is just my advice to you.

Reply

@mbacarra you might have had your images turn off somehow, all versions of FF accepted the png format so other what I just mentioned no idea.

Just added in some new extensions everyone

-Windows Resizer
-Opera View
-Load time Analyzer
-Offline Validator

Reply

Pretty handy stuff. I have just recently started to download a few plug ins for Firefox and have found them to be quite useful. I never really looked through them all because I didn't think they'd have any of that kind of stuff. I have GSpace now for uploading files when I transfer them between computers. The validator will be very helpful to me, as well as ColorZilla. MeasureIt I especially need because sometimes I work on my site on another computer and don't have the dimensions without the PSD file of the design and sometimes I accidently delete it in the coding.

Reply

windows resizer is just redundant if you already installed the web developer toolbar extension. under web developer options, you can set additional resolutions in addition to the default 800x600 already in place. what i added in mine is a 1024x768 resolution (since i'm working with a 1280x1024 screen resolution). you can set it to change viewport upon selection, so your firefox browser expands and/or collapses to your resolution of choice. (see image below, encircled in green, which shows the icon to change window size with the web developer toolbar.)

one other thing i did is streamline my icons by right-clicking then customizing toolbar, and dragging my webdev items from it's original toolbar position (above the tabs) -- and placing them beside the menus. (see image below, encircled in red.) it would leave you with a blank webdev toolbar, so you have to hide it (by right clicking on the space above the google search form in the image, then disabling the webdev toolbar). when you're done, you will have a much bigger window space to see more of the page you are browsing, as opposed to the webdev toolbar eating up space which could be used to view a page.


(click to enlarge)

measureIt is also redundant if you have the webdev toolbar. you can use the Display ruler feature in webdev to measure the dimensions of anything on your browser. CSSViewer and HTML Validation would also be redundant with the webdev toolbar, although if you go for the "cute" factor, CSSViewer foots the bill. you might find other redundancies when you get to install and test the functions available in webdev toolbar.

if you're going to use FireFTP as many of us here do, you can complement it with the FireFTP button (https://addons.mozilla.org/firefox/2200/). this button you can add as an icon in your firefox browser (see that small blue seahorse somewhere? ). easy access for your fireFTP, with just one-click, instead of looking for it under tools menu).

hope these additional tips help. lesser extensions = faster firefox.

 

 

 

Reply

Thanks for the tip about moving the webdev menu, serverph.
That will be quite helpful on the Laptops with an 800 x 640 resolution.
I'll get working on that right away

Yes, the webdev toolbar does a whole bunch of things that other extensions do, so I typically don't use the others. That color sniffer is nice, though.

Reply

glad you like it, jlhaslip. here's a lifehacker feature on doing more streamlining for firefox, by digging into the innards of the chrome (control area) and tweaking it to suit your browser lifestyle.
http://www.lifehacker.com/software/firefox...rome-210542.php

i'm pretty sure web designers and developers (like most of us, if not all) here can appreciate the attempt on making the most out of whatever screen space can be freed -- on firefox!

and here's a bonus plugin for those of us who want to do screen grabs! instead of doing the ALT-PRINT SCREEN method, then pasting it on an image editor like photoshop or paint, then saving it -- there's something to minimize the steps, by doing a screengrab of a whole page or a window or simply a viewport, in firefox using java! more info on screengrab plugin for firefox here:
http://andy.5263.org/screengrab

this can be useful if you want a screenshot of anything you're viewing on your browser, like tutorials, design inspirations, and whatever else you can think of! enjoy!

Reply

very, very nice SM. i especially like the addon that allows users to be in both internet explorer and firefox at the same time. maybe now people can compare and see which one comes out faster and victorious...firefox is taking over the world!!! muahahah

Reply