Index
 |
Web Design Tools - Things to aid you in web design | ||
Discussion by 8ennett with 6 Replies.
Last Update: October 29, 2011, 1:58 am | |||
 |
|||
So I thought I would put up a list of the tools available to help you in designing your websites. This ranges from firefox addons to downloadable software.
When designing your website it is essential that you have the right tools at your disposal. You will generally need tools for debugging, cross-browser compatibility, page comparisons and so on. Just jumping in and throwing yourself at it can lead to some unexpected results in the long run.
#############################
Web Developer Toolbar (Firefox Add-on)
#############################
This is a brilliant toolbar for firefox. It contains all the tools you will need for debugging web pages quickly.
The key features of this add-on are:
#############################
User Agent Switcher (Firefox Add-on)
#############################
Switches your browsers user agent to mimick other browsers. Useful for visiting websites that only allow particular browsers, or for debugging browser-specific coding in your own web design. I also wrote a tutorial on how you can use this add-on to create a competely hidden website within another website, Creating a hidden website
#############################
Fox Splitter (Firefox Add-on)
#############################
Remove the tab system in firefox and displays all of your open tabs in the same firefox window. Very handy for checking design consistency of all your sites pages and for doing two things at the same time.
#############################
iMacros (Firefox Add-on)
#############################
Really useful tool for recording reptitive tasks in forefox. Record your macro and then simply click play every time you want to run the macro.
#############################
Firebug (Firefox Add-on)
#############################
Firebug is handy and very popular. It allows you to view code live in the page, edit live in the page, modify and view pages css, also has a great set of debugging tools.
#############################
IE Tab 2 (Firefox Add-on)
#############################
This add-on is for firefox 3.6+, for versions lower than this you will need IE Tab. This add-on allows you to convert one of your current Firefox tabs to an internet explorer tab (requires IE to be installed). This is good for cross-browser compatibility testing without opening multiple browsers.
#############################
FireFTP (Firefox Add-on)
#############################
An FTP client that is built in to FF and provides a great interface and is fast and easy to use. Makes uploading and updating stuff to your servers very simple and very fast.
#############################
GIMP (Software)
#############################
Excellent piece of free software used for advanced image editing, touching, design. Supports multiple operating systems.
#############################
Aptana (Software)
#############################
Free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications. Features code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger to troubleshoot your code.
#############################
WebXACT (Website)
#############################
WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.
#############################
JsUnit (Software)
#############################
Unit Testing framework for client-side (in-browser) JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs.
#############################
Xenu (Software)
#############################
Checks Web sites for broken links. Link verification is done on "normal" links, images, style sheets, frames, local image maps, plug-ins, backgrounds, scripts and java applets. It displays a constantly updated list of URLs which you can sort by different criteria. A report can be produced at any time.
#############################
VisiCheck (Software/Website)
#############################
Vischeck is a way of showing you what things look like to a person who is color blind. You can try Vischeck online by either running Vischeck on your own image files or running Vischeck on a web page. You can also download programs to let you run it on your own computer.
###############################################
So that's the list for now, have a look through and see if anything there interests you. Everything is free btw. If you have any other free tools that you think can assist other in web development then add them to this post.
When designing your website it is essential that you have the right tools at your disposal. You will generally need tools for debugging, cross-browser compatibility, page comparisons and so on. Just jumping in and throwing yourself at it can lead to some unexpected results in the long run.
#############################
Web Developer Toolbar (Firefox Add-on)
#############################
This is a brilliant toolbar for firefox. It contains all the tools you will need for debugging web pages quickly.
The key features of this add-on are:
- CSS and Javascript checker with green ticks or red crosses if there are any errors and the source and line number of the error.
- Forms formatting including live element formatting, reveal password fields and removing max length.
- Full page information including listing all elements, javascript (and sources) and meta info.
- Page validator and so much more
#############################
User Agent Switcher (Firefox Add-on)
#############################
Switches your browsers user agent to mimick other browsers. Useful for visiting websites that only allow particular browsers, or for debugging browser-specific coding in your own web design. I also wrote a tutorial on how you can use this add-on to create a competely hidden website within another website, Creating a hidden website
#############################
Fox Splitter (Firefox Add-on)
#############################
Remove the tab system in firefox and displays all of your open tabs in the same firefox window. Very handy for checking design consistency of all your sites pages and for doing two things at the same time.
#############################
iMacros (Firefox Add-on)
#############################
Really useful tool for recording reptitive tasks in forefox. Record your macro and then simply click play every time you want to run the macro.
#############################
Firebug (Firefox Add-on)
#############################
Firebug is handy and very popular. It allows you to view code live in the page, edit live in the page, modify and view pages css, also has a great set of debugging tools.
#############################
IE Tab 2 (Firefox Add-on)
#############################
This add-on is for firefox 3.6+, for versions lower than this you will need IE Tab. This add-on allows you to convert one of your current Firefox tabs to an internet explorer tab (requires IE to be installed). This is good for cross-browser compatibility testing without opening multiple browsers.
#############################
FireFTP (Firefox Add-on)
#############################
An FTP client that is built in to FF and provides a great interface and is fast and easy to use. Makes uploading and updating stuff to your servers very simple and very fast.
#############################
GIMP (Software)
#############################
Excellent piece of free software used for advanced image editing, touching, design. Supports multiple operating systems.
#############################
Aptana (Software)
#############################
Free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications. Features code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger to troubleshoot your code.
#############################
WebXACT (Website)
#############################
WebXACT is a free online service that lets you test single pages of web content for quality, accessibility, and privacy issues.
#############################
JsUnit (Software)
#############################
Unit Testing framework for client-side (in-browser) JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs.
#############################
Xenu (Software)
#############################
Checks Web sites for broken links. Link verification is done on "normal" links, images, style sheets, frames, local image maps, plug-ins, backgrounds, scripts and java applets. It displays a constantly updated list of URLs which you can sort by different criteria. A report can be produced at any time.
#############################
VisiCheck (Software/Website)
#############################
Vischeck is a way of showing you what things look like to a person who is color blind. You can try Vischeck online by either running Vischeck on your own image files or running Vischeck on a web page. You can also download programs to let you run it on your own computer.
###############################################
So that's the list for now, have a look through and see if anything there interests you. Everything is free btw. If you have any other free tools that you think can assist other in web development then add them to this post.
Tue Feb 15, 2011 Reply New Discussion
Most of tools i never heard !
Well you seems a good designer well its all nice and use-full add ons and all the software's well i love to use them they are really good and easy to use.
thanks for sharing with us, and the good news is all is free.
Well you seems a good designer well its all nice and use-full add ons and all the software's well i love to use them they are really good and easy to use.
thanks for sharing with us, and the good news is all is free.
Tue Feb 15, 2011 Reply New Discussion
Out of those tools listed above I only use the Web Development Toolbar, Firebug and for images I use the GIMP. I used to use FireFTP but recently I found FileZilla and the built in FTP software in Notepad++ to be quite sufficient (also I use Chrome primarily now so Firefox isn't really launched that often). I used to use IE Tab but I'm not even sure if it's compatible with recent versions of Firefox (7+) and also with the IE developer tools I find them to be more useful for checking compatibility with IE7/8/9.
Chrome also has nice developer tools built into the browser, similar with Internet Explorer 8 and 9. They are quite similar to Firebug in Firefox however Firebug is also compatible with Google Page Speed and YSlow (Yahoo!) as I recall correctly (with FirePHP if any of you use it). There is a Page Speed Extension for Chrome (of course, because it's Google).
All in all, everyone works differently, so use whatever tools you feel comfortable to maximum efficiency. The most important thing is user friendly, cross-compatibility with browsers, and visually appealing sites.
Chrome also has nice developer tools built into the browser, similar with Internet Explorer 8 and 9. They are quite similar to Firebug in Firefox however Firebug is also compatible with Google Page Speed and YSlow (Yahoo!) as I recall correctly (with FirePHP if any of you use it). There is a Page Speed Extension for Chrome (of course, because it's Google).
All in all, everyone works differently, so use whatever tools you feel comfortable to maximum efficiency. The most important thing is user friendly, cross-compatibility with browsers, and visually appealing sites.
Mon Oct 24, 2011 Reply New Discussion
Quite a nice list of web design tools, on firefox I also have the web developer addon, I can say that I have Firefox installed not only for web design testing, but for web developer addon too, I am quite used to it to check things out with, it's very useful. 
I also used to use User-agent switcher too, now I don't really care about those things, as usually I have all that done, what depends from browser side.
Even though a lot of who use Firebug addon, I don't really use it. Maybe due to I use Opera and it has it's own developer/debug tool called Dragonfly.
http://www.opera.com/dragonfly/
I think it's a matter who to what you're used to and what is enough for you.
For FTP I use Filezilla too for a lot of years now and in my opinion it's the best what you can get for free
Even though I've tried using addons through Firefox to use it as an ftp client, even an irc client 
I've used GIMP and stil use it sometimes, but in university in master studies, we had a a smester of Photoshop and when I've tried it by doing things I needed to, I've really liked it, I've claimed a copy as a student for free and sometimes play with it, it's really more powerful than GIMP. Nevertheless, I don't really do a lot with graphics anyway.
Never tried any other tools from the list I didn't mention.
I also used to use User-agent switcher too, now I don't really care about those things, as usually I have all that done, what depends from browser side.
Even though a lot of who use Firebug addon, I don't really use it. Maybe due to I use Opera and it has it's own developer/debug tool called Dragonfly.
http://www.opera.com/dragonfly/
I think it's a matter who to what you're used to and what is enough for you.
For FTP I use Filezilla too for a lot of years now and in my opinion it's the best what you can get for free
Even though I've tried using addons through Firefox to use it as an ftp client, even an irc client I've used GIMP and stil use it sometimes, but in university in master studies, we had a a smester of Photoshop and when I've tried it by doing things I needed to, I've really liked it, I've claimed a copy as a student for free and sometimes play with it, it's really more powerful than GIMP. Nevertheless, I don't really do a lot with graphics anyway.
Never tried any other tools from the list I didn't mention.
Mon Oct 24, 2011 Reply New Discussion
out of all those tools, Gimp is probably the one I've actually used, although i would add Paint.NET can be an alternative
Tue Oct 25, 2011 Reply New Discussion
bluefish editor . a must for linux users
Sat Oct 29, 2011 Reply New Discussion
 |
 |
|
 |
 |
| Reply / Comment | Ask a Question? | Share / Bookmark | E-Mail a Friend |
 Best Thing For Making Website Templates! website templates! (7)
|
(2) How To Share Your Site With Everyone Add Share This Buttons 
|