Tips and Tools for Web Designers and Developers
Essential Add-ons and Design Tips to Make Great Websites
Aug 23, 2009
There are many useful tools available for web designers and web developers that help them quickly and efficiently complete websites on schedule. Some tools are free, while others can be rather expensive – choosing the right tools will be determined by quality of work expected, price of software and functionality.
Tip #1: Develop and Design Using Mozilla Firefox
Mozilla Firefox has plenty of free tools that make web design extremely simple for designers and developers. Firstly, the Web Developer Toolbar for Firefox allows developers to quickly and easily view source code, css stylesheets and disable various functions of any site for fast debugging and development.
Also available for Firefox is an add-on called Firebug, which allows for inspection of the various elements on any site so that designers and developers can check the CSS and HTML of their site on the fly. Edits can even be made within the browser so designers can speedily test other options before implementing them in their final site. Another cool tool is called ColorZilla, it allows designers to extract colors from their website so that they know exactly which colors to use to ensure the consistency of their site.
Tip #2: Hack CSS for Internet Explorer
As most designers probably already know, designing for Internet Explorer can be a pain as it is not standards compliant. One good thing it does allow, however, is for separate stylesheets that are browser specific to target Internet Explorer browsers. Using the following code:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles/ie.css" />
<![endif]-->
allows the stylesheet for ie to override any other stylesheets. There are other tags available that allow the stylesheets to target various versions of Internet Explorer:
For example, <!--[if lte IE 6]> targets all versions less than or equal to IE6 while <!--[if gt IE 7]> targets all version of Internet Explorer greater than IE7.For testing purposes it may be useful to use programs such as MultipleIE or IETester, that mimic various versions of Internet Explorer since IE only allows one version to be installed at a time.
Tip #3: Invest in Adobe Web Premium
While Adobe Web Premium may seem expensive, Dreamweaver is an extremely user friendly and easy to use HTML editor that has become the standard for web development in recent years. With a hybrid display system that allows designers and developers to view their pages in design mode, code or split, so that programmers can immediately see the results of their code.
Adobe Web Premium also comes packaged with other essential Adobe tools, including several graphic programs like Photoshop and Illustrator. Although web designers and developers may not need to create files in these programs, since they are widely used by graphic designers to design webpages and therefore can easily be spliced for faster integration.
There are plenty of open source HTML editors, like HTML-kit, and graphics programs, such as GIMP, but for the best quality and ease of use Adobe really delivers the best option available on the market and is worth the investment for serious designers and developers.
Conclusion
Working with a standards compliant browser, such as Mozilla which has plenty of add-ons, will make design and development progress much faster and then designers can worry about Internet Explorer once the site has been completed.
Also, Web developers and designers almost always have to work to a strict deadline and constantly have to deal with customers that are constantly changing their mind. With the right mixture of open source tools and professional programs designers and developers can quickly create amazing looking websites without forking out too much money.
 |
