Website Design United States, Website Design California, Website Designing United States, Website Designing California

Web Developer/Designer Tool Kit: Part 1 - Browsers and Text


If you're pretty handy with designing and developing websites or even if you're just getting started in this field one of the most important things to have is a "Web Tool Kit". These are the tools that you need or even should have to make your life easier.

Putting together a Tool Kit will vary depending on a few factors. The first factor is money. Some of the tools out there that are nice to have, like image programs, can be pricy. You can get by with freeware programs, but at least in the area of image making it's probably a good idea to spend a little money. The second factor is your skill level. If you can pick color combinations for your site with little to no problem then you're not going to need a color scheme program. The last factor, at least in my opinion, is your experience. The more experience you have in designing and developing web site the less you will need to rely on certain programs.

So what programs should you have in your tool box? From years of experience and countless number of hours in front of various programs the following list is a good start. Remember that you may not need all of these tools but they sure can make or break you.

(Please note that the majority of these programs are Windows based. Mac and UNIX/Linux users may need to find other programs similar to the ones mentioned if they are not available for a particular operating system.)

Web Browsers

This should be obvious. If you're making a website you're going to need a way to check your work to see how it's coming along. But with all the different browsers out there, which should you have and which should you test with?

There are two courses of action you can take here. If you're still developing sites that use tables to control layout then you can pretty much get away with just using your favorite web browser. Table layout designs will look similar from browser to browser and from operating system (OS) to operating system. If it looks good in Netscape 4 it'll look good in Internet Explorer 6.

If you're focusing more on using Cascading Style Sheets (CSS) to handle the way your website is laid out then you're going to want to get your hands on certain browsers. CSS layouts do not render the same from browser to browser or from OS to OS. But which browsers should you use to test on? Of course you're going to want to get the "Big Two" - Microsoft Internet Explorer and Netscape. You're also going to want to have "the third browser" - yes that's Opera. And of course there are new browsers that have been developed lately that you're really going to want to consider (the reasons why are explained later).

Internet Explorer (IE) :: (Get IE Browser)

IE is the most commonly used web browser out on the market. IE 6 is being used more now that earlier version of IE, but you cannot forget about IE versions prior to 6.

The problem comes when you're on your Windows OS and you try to install multiple versions of IE. It can't be done. Okay it can be but it's a royal pain. Luckily there are stand alone versions of IE 5, 5.5 and 6 that you can download. You simply place the files into a folder (individual folders for each version is recommended if not required). Then you can simply open the "iexplore.exe" file to run IE.

Note: When you do this (at least with the versions I have and have linked at the end of this article) you cannot use the "favorites" option in the toolbar. It will crash the browser. Also if you select go to "About" in the help menu you will see the version of the browser to be listed as the one that is installed on your computer (and not the version you are running). Don't worry, the version you opened is in fact the one that is being run and will act like it.

IE Stand Alone Browser :: IE Stand Alone Browser Second Site

Recommended: Have at least IE 5, 5.5 and 6 on your computer (you'll have to use the stand alone versions to accomplish this). Each one handles CSS differently and each has their own quirks you need to look out for.

Netscape :: (Get Netscape Browser)

Netscape is, of course, the other major browser. While it is losing steam to its competitors it is in fact one that you need to test on. Currently version 7.1 is out and it's a must have. If you don't have this one but you have Netscape 7 that's okay too.

Earlier versions of Netscape like 6.2 and even as early back at 4 (called Netscape Communicator and not simply Netscape) are worth having. Yes I know that going back to Netscape 4 is probably not needed it is helpful to have. Why? Its support of CSS is very limited and can be used to gauge how sites with little to no support of CSS will look.

Recommended: At least Netscape (Communicator) 4, Netscape 6, and 7.1.

Opera :: (Get Opera Browser)

Opera is a good browser. Sometimes referred to as "the third browser" it came into existence when IE and Netscape were both buggy and not very supportive of web standards. Opera's support of web standards was excellent (compared to IE and Netscape) and it continues to do a nice job. You don't need too worry about having the very first version of Opera to test with but make sure that you at least have Opera 6 and 7.5.

I should say here that Opera 7.5 is a wonderful tool to have at your side. Not only can you use it to check your news feeds, but you can use it to check what your site will look like under a number of conditions. Under the "View" toolbar you can go to "Images" and/or "Style" to do a number of different things. First under images, you can remove all your images so that you can see what the site would look like without and images (think about text-only browsers like Lynx). Under "Style" you can select "User Mode" and then you can render you page into a number of different layouts, like "Accessibility Layout", "Debug with Outline", "Nostalgia" (think Commodore 64) and a number of other layouts. It's very handy.

Recommended: Opera 6 and 7.5

Other Browsers

There are of course a number of other browsers out there that you can check with. Keep in mind that the three major browsers mentioned above cover almost 98% of (Windows) users. However there are some newer browsers out now that are starting to become popular, such as Mozilla based browsers, Firefox and Thunderbird. Of course Thunderbird has really become Firefox. So you're safe if you get Firefox.

The one thing I want to say about Firefox is that you can download and install some very handy "extensions" for the browser that can be helpful. Like the Web Developers Toolbar for example.

Get Mozilla, Thunderbird and Firefox from

Recommended: Latest version of Mozilla and Firefox 0.8 or 0.9.

HTML Editors

Now I want to say right away that if you're a seasoned vet of the HTML coding world or you're just starting out. There is NO better HTML editor than a simple text editor. While WYSIWYG (What You See Is What You Get) programs are nice, you really want to work on the code level to make sure you have the most control over your site.

Notepad, Emacs, VI, WordPad, etc… The list could go on and on for which text editor you prefer. They are, of course, all great. For years I wouldn't code a page unless it was in Notepad. If the file was too big I'd more reluctantly into WordPad, usually kicking and screaming. But they both served their purpose. For UNIX and Linux I used emacs (sorry VI users, I know and love what VI can do but I'm an emacs man until the end).


Recently (and I mean in the past 2 years) I was turned on to a text editor called ConTEXT. The thing I loved (and still love) about this program was the fact that it has syntax highlighting for your code. Not only for XHTML, HTML, PHP, ASP, JavaScript, and CSS but for a number of other programming languages. It's a powerful tool that I can't imagine how I lived without for so long. I strongly urge every web developer I meet to at least give it a try. Did I mention that it's FREE???

Get ConTEXT and Highlighters (free)

Recommended: Which ever text editor you're most comfortable with.
Author's Pick: ConTEXT.


© 2008-2009