by Megan McDermott, 23 July 2010 - 9:29am
To build a website you need several types of software: a code editor, an FTP client, a graphics editor, and a selection of web browsers are the basics. This article will describe these tools and suggest popular software to try. In most cases, there are many alternatives available. It's a good idea to try several of them and see what works best for you.
Contents of this article:
Types of code editors
What you choose to use really depends on your own preferences. Every web developer has a list of their own ‘can't live without’ features. What ends up on your list is entirely up to your own coding style and preferences. The best you can do is try several different editors to see which works best for you. You may end up using different editors for different purposes.
Basic text editors
Your operating system will come with a basic text editor (TextEdit on Mac, gedit on Ubuntu, Notepad on Windows). This is a simple tool that just writes text with few other capabilities. You can use these for writing code, but they don't provide a lot of extra assistance. However, they are always available and start up quickly.
Text-based code editors
Editors in this group go beyond the basic capabilities of a text editor and add on extra features to help you write code. These features may include syntax highlighting, advanced search and replace, code helpers, advanced keyboard shortcuts and more. There is a range of capabilities in this category: some may be similar to a basic text editor with a few extra features, while others may go much further with a wide range of capabilities.
Popular options include:
Coda (commercial; free trial available)
BBEdit (commercial; free trial available)
TextWrangler (free, "lite" version of BBEdit)
Note: Some of the software listed above does include simple WYSIWYG capabilities. However, I have listed them as code editors because their WYSIWYG functions are unsophisticated, incomplete and/or not the main focus of the tool.
Wikipedia's Comparison of Text Editors and Comparison of HTML Editors provide detailed information on software available.
A WYSIWYG (What You See Is What You Get) editor allows you to design pages visually, (theoretically) without having to write code.
This may seem like an easy way to design web pages. However, WYSIWYG editors often don't work as promised. As I alluded to above, what you see is not always what you get. It can also be difficult to make the editor do what you want it to. If you know how the code works you'll have a much easier time building web pages that display as intended, even if you choose to use a WYSIWYG editor part of the time.
Adobe Dreamweaver - this is the best and probably the only full-fledged WYSIWYG worth considering. It is, however, very complex and quite expensive.
Amaya is a tool put out by the W3C. It seems to have trouble displaying complicated layouts, but is very useful for authoring complex text documents in HTML. Amaya is free.
KompoZer is an open source editor that might be worth a try if you don't have a budget for Dreamweaver.
Command-line based editors
You may also hear about another group of editors that are usually accessed through a command-line interface. Examples include vim and Emacs. These editors include many advanced features and shortcuts, have very steep learning curves. They are normally reserved for advanced programmers (who will debate endlessly about vim vs. Emacs!).
Important features to look for
As I mentioned above, which features become ‘must haves’ for you depends on your coding style and preferences. However, there are some common features that most developers find to be important. These include:
Many editors include support for plug-ins that allow you to add in additional functionality.
There are two basic types of graphics programs: raster-based and vector-based.
Raster-based programs create graphics made up of individual pixels. Examples are the Gimp and Adobe Photoshop. Vector-based programs draw graphics using lines and shapes. Examples include Inkscape and Adobe Illustrator. There are also a few hybrid programs like Adobe Fireworks that sort of act like vector programs but actually create raster-based graphics.
It's probably best to have one of each type available for creating your web graphics. The one you choose to work with will depend on the style you want to create. If you want something more sharp-edged and crisp, choose a vector program. If you want something that involves a lot of manipulation of photos, choose a raster-based program.
Of course, not all web browsers support vector graphics (in the form of SVG). If you choose to work in a vector program any images will need to be exported in a raster format. Personally, I prefer to design in a vector program most of the time because it acts more like CSS.
Raster options include:
Adobe Photoshop; Adobe Photoshop Elements is a cheaper, but less fully featured, alternative.
PaintShop Pro (commercial, but much cheaper than Photoshop)
Vector options include:
There are many other graphics programs but these are the most popular. Wikipedia has a comparison of raster graphics editors and of vector graphics editors.
Adobe packages some of their products together in different combinations as Adobe Creative Suite.
Do I need Flash?
Whether you want to work with Flash partly depends on where you want to go with your career as a web designer. If you want to get into high end animated features and websites, such as websites for movies, Flash could be useful.
However, it takes a lot of skill to do Flash well and a lot of time and effort to become proficient. Most sites do not benefit from a Flash-based approach. It usually results in usability and search engine optimization problems.
If you do acquire Flash with Adobe Creative Suite, it can be useful for generating videos for your site as well as image slideshows and things like that.
What? You need more than one web browser? Yes, you do! Although all web browsers follow basic standards set out by the W3C, they all do so slightly differently. For example, some browsers may have different interpretations of the standards, or they may be behind in supporting new elements or properties.
It is important to check your site in as many different browsers as possible. While you're at it, make sure you check different screen sizes as well (browser add-ons are available to help you with this; see below for more information). It is a good idea to install some analytics software which will show you which browsers are most commonly used to access your site. You may not need to check your site in a browser that is only used for a small percentage of visits.
Firefox, Google Chrome, and Opera are fully cross-platform (available on Linux, Mac, and Windows). Safari is available for Windows as well as Mac (note that Google Chrome and Safari use the same rendering engine and should display sites the same). Internet Explorer is most likely to display your site differently and, of course, is only available on Windows.
There are other browsers available but these four are the most popular and most important to test with. It may be necessary to run multiple versions of these browsers at certain times (e.g. soon after a new version is released). For example, currently there are three versions of Internet Explorer in common use, versions 6, 7, and 8.
If you are on Windows you can download a tool to run multiple, older, versions of IE. IE 8 allows you to switch to IE 7 rendering mode within the browser. For linux users, IEs4Linux allows you to run older versions of IE (version 6 and earlier), although it appears that this tool is no longer maintained.
If you don't have access to computers with other operating systems, you can use Browser Shots to get a screenshot of your site in different browsers.
Firebug is an add-on to Firefox that enables you to inspect your HTML document in detail. Among other things, it allows you to change CSS properties right within the browser and check which CSS properties are being applied to an element.
Opera comes with advanced developer tools by default (see tools > advanced > developer tools), and a web developer add-on is also available for Internet Explorer.
There are many other Firefox extensions that can help with web development. Our forum members have suggested some of their favourites.
FTP (file transfer protocol) clients are used to upload your files to your server. If you have a basic hosting account, you will need to upload your files with FTP. Larger hosting accounts may have ssh or secure FTP access as well (but we won't get into that right now).
Mac + Windows only:
WS_FTP (look for this on free download sites)
Wikipedia's Comparison of FTP Clients provides detailed information about many clients. If this seems overwhelming, concentrate on the Free table at the top. Your HTML editor may also include FTP capabilities. The usability and features of these tools vary. Experiment to see which tool works best for you.
You may also be able to connect directly to your server using your operating system's file manager. This enables you to use your file manager to navigate and manipulate files and folders on your server. This is often a lot easier than learning and using a new interface in an FTP client.
In Ubuntu, choose Places > Connect to Server from the Ubuntu main menu
In Mac OSX, choose Go > Connect to Server from Finder's main menu
In Windows, use ‘Map Network Drive’ in Windows Explorer (instructions are different for Windows XP and Vista)
A detailed tutorial on how to use these tools is beyond the scope of this article. Please do a Google search or ask on our forums if you have questions.
This doesn't have to cost a fortune!
Adobe Photoshop and Dreamweaver are often considered to be industry standards, particularly for people who specialize in design rather than development. However, these tools are certainly not necessary to get started – or even to become very proficient – in building websites. Free or low-cost alternatives are perfectly adequate for most designers' needs. The key is developing a good understanding of design principles and the technologies used to create them (i.e. HTML and CSS). If you understand the basic techniques it doesn't matter what software you are using.
To discuss this article or ask questions, please visit the forum discussion on Choosing your web building software.