There are thousands of applications available which are specific to website design. Different designers each have their own preferences as to what programs to use. Some will swear by Adobe Dreamweaver, others Microsoft Publisher. Personally, such tools I find restricting. I will not touch Microsoft Publisher with a barge pole. So, at Griffin Studios, what tools do I use for website development?
Planning
Website layout planning, in my case, is usually done with the use of “wireframes”. There are tools specific to this; however, due to my comfortableness with Photoshop, that is generally my tool of choice. The reason for this is that once a wireframe has been developed and the client likes the design style and layout, I can move straight back into Photoshop with the wireframe and start fleshing it out with ease.
Design
In my opinion, the design aspect, which includes the development of colour schemes and website images (header, menu items etc), are most easily accomplished using Photoshop. CS3 is my current version and I wait with eager anticipation for CS5 which features a host of new and fantastic features.
Colour Schemes
When I was a rookie designer a few years ago, I struggled to find the right use of colours for a website. Colours which really complimented each other and brought out the design in an elegant an sophisticated way were hard to come by. I was thankfully introduced to an online tool from Adobe which has been an incredible help in choosing colour schemes for a websites. Adobe Kuler is an online resource with user submitted colour schemes to fit any occasion. There are literally tens of thousands of colour schemes. Signing up is free, and you can post your own colour schemes you have found that work well together.
Development
Server
Windows Apache MySQL PHP (WAMP) is my preferred server application. There is a Linux flavour, suitably dubbed LAMP, which provides the exact same functionality on a Linux OS. WAMP allows one’s localhost to act as a webserver for “hosting” websites on, which can be displayed and used as if it were live on the internet. For designers who deal with static HTML / XHTML, WAMP is not necessary. However, should one wish to make use of PHP coding and a MySQL database, I have found little that compares to the ease of installation and use.
Development Environment
Netbeans
An Integrated Development Environment (IDE) is where the coding takes place. Coding can be done in any text editor such as notepad; however, there are a multitude of applications which support the development of websites by using syntax highlighting and error checking. Of all the tools available, I have found NetBeans to be the easiest. NetBeans is free, and provides a great many features due to its extensive range of plugins available. It can be used for most programming languages and supports collaboration via the use of Subversion (SVN).
Dreamweaver has also peaked my interest for use in writing CSS code. It has syntax highlighting as does NetBeans and it also has wonderful suggestion and auto-complete functionality allowing you more time to code with less time spent typing. The preview view, although not perfect, provides a decent preview of what the CSS code will be doing to your website, thus there is no need to constantly refer to your browser and refresh the screen.
Testing
IE TEster
Testing can generally be a pain. It’s often not plausible to have 10 different browsers installed onto a computer, and with browsers such as IE6,7 and 8, once you update, the previous version is lost. I have installed the mainstream browsers: Opera 10, Firefox 3.6, IE8 and Chrome; however, this still leaves compatibility testing on IE 7 and lower impossible. With the aid of a very useful application, IE Tester (free), previous versions of IE can be used to test your website design.
Another useful resource is BrowserShots which allow you to enter a website URL and test it against a wide selection of browsers. Unfortunately, there is a waiting period between each submission due to the network traffic and bandwidth usage that comes from using this website.
Firefox Plug-ins
Firefox
Firefox is my browser of choice due to its abundant plug-ins which can assist in the development of websites. Some of the key plug-ins I make use of are:
- Web Developer Toolbar – Provides a wealth of tools allowing one to validate their code, outline elements on the page, test the website at various resolutions and much much more.
- Live HTTP Headers – Allows the designer to view the header information sent by the website.
- FireBug – View, debug and edit code in your browser dynamically, plus more.
- HackBar – Used for security testing purposes to ensure that there are no programming errors, allowing a user to gain remote access to the website.
- NoScript – Disables javascript. Allows a programmer to see what their website looks like and how it responds without javascript.
- YSlow – A Yahoo provided engine used to analyse a website’s code and determine where it could be optimized.
There are many more – so have a good search though the Mozilla website and be amazed at the added functionality these plug-ins may provide.
Conclusion
This setup is specifically my own. Each and every one have their own collection of tools for website design that they swear by. I would love to hear some comments regarding other people’s setups with the benefits and disadvantages each brings. Perhaps some of the tools I make use of will help you along. In either case, let me know.
Tags: Design, Development, Firefox, Plug-ins, Testing