What <div>s?

Now that I’ve written a few posts, I thought it might be good to write a post on the tools that I’m using. I’m running Windows Vista and despite all the hate that many people display towards it, have found it to be decent.

1. PSPad – This free applications is simple to use and gives me all the functionality I need to build any site. Syntax highlighting for 20+ different languages, easy ftp access, probably the best free ftp html editing tool out there.
2. Firefox – This should go without saying… every web developer MUST own Firefox.
3. Web Developer’s Toolbar – I use this countless times a day to quickly test different aspects of the site and to see what css is affecting particular object.
4. FireFTP – Great addon for Firefox. This is the only FTP client I use.
5. Firebug - Another great addon for Firefox. I use this primarily when using javascript.
6. Photoshop – An industry standard that I use for slicing design files.

I’m sure there are free alternatives to Photoshop and if anybody knows of any particularly good image suites for slicing design files let us know! Other than Photoshop all these tools are free and provide you with enough to manage almost all your web development needs.

The fact that IE6 sucks is nothing new. Anybody that’s ever had the unfortunate task of building anything for IE6 knows it sucks. It’s almost satisfying just saying it sucks, but I don’t think I could say that it sucks as much as it really does suck. Unfortunately, as much as IE6 sucks, the general public has not fully adopted newer browsers and consequently developers have had to continue supporting old software.

How can we as developers help push IE6 out of the market and encourage slow or stubborn adopters to start using new software? Surely, if as a collective group we totally dropped all support for IE6 and added a link on all our website telling IE6 users to upgrade their browsers the movement would speed up dramatically, but who’s going to be the first developer to go to this extreme? Clients expect you to support the viewing pleasures of their audience and as it stands IE6 is a large portion of the web audience. The number of users in IE6 has been steadily falling over the past year and as the IE6 user base continues to decrease, developers will be able to spend less time trying to achieve the same look and feel available in newer browsers.

Rounded corners and shadows are a large component of current design trends and IE6 sucks with both. While I do believe that pretty much anything is possible in IE6 in terms of getting designs to function, often times it may be more hassle than it’s worth. Recently, I have begun to feel more comfortable offering IE6 users simplified designs where design elements such as shadows may be chopped out of the design completely and replaced with transparent gifs. By simplifying designs you can knock off hours of fiddling with IE6 and 99% of the time the end user won’t know what they’re missing.

Understanding the audience of your website will help you to understand to what extent IE6 should affect your website. If your primary audience is your grandmother’s knitting club, your design and browser support should reflect that, likewise if your audience is a tech-savvy group of designers you can worry less about the restraints of IE6.

Whether it be access to information or providing some kind of service, the web exists to make life easier. Keeping usability in mind will make your website easier to use and navigate and will increase the effectiveness of your website. Usability is simply the process of examining how your users will use your site and how you can make it easier and less confusing to do so. In the relatively short existence of the web certain design trends have come and gone and some have stayed the course and proven to make websites more usable. For instance having a logo in the top left corner which is linked to the homepage is common among many websites. Similarly navigation is expected to be horizontal at the top or vertical on the left or a combination of the two for multi-level navigation structures. Here’s the top 5 rules for creating a highly usable site:

1. If at any point you are confused about how your site works, your end user will be 5x more confused. There are times on the web when we need to deal with up to 6 different levels of navigation and it can get really confusing, but striving to simplify the process will make your website much more usable.
2. End users subconsciously understand subtle hints. Green means go, red means stop. The idea is simple, if you have similar objects throughout your site find some way of connecting them. For example in a checkout process it is quite common to have 5+ steps; in each step you will often have a continue button or a back button. By using a green theme for continue and a red theme for back people will be able to quickly associate each button with a desired effect.
3. Know the rules before you break them. Web design has become as much science as it has art. By adhering to the general, unspoken rules of design your users will be able to understand and navigate your website much quicker than if you try to build it in a new “exciting” way that they don’t understand.
4. Know your audience. If your audience tends to be very web savvy you can explore more sophisticated organization patterns and techniques, but if you are appealing to a less technical audience, keep it as simple as possible.
5. Know your website. Understand clearly what the main focus and point of your website is. When visiting a particular website most users have an intended purpose. Understanding why people are coming to your website will help you to push them quickly and efficiently to where they want to go.

Usability is simply about understanding who and why are people visiting your website and finding the easiest, more effective way for that audience to interact with your website in that way.

The single most important piece of managing a website is keeping everything organized from the beginning. By taking a few minutes before you start coding to devise a plan will save you hours of annoyance, although you’d never know it. Most people, including myself, understand the importance of good organization but are often in too much of a rush to see it through. The time you save through good organization is rarely obvious time but more evident when you look at a project as a whole. Here’s five tips for maintaining good organization of your website.

1. Keep your files separated and always in the same place
   I always create three folders when I start a new website /images, /css, and /js. I always know where all my files will be. Similarly I always name my main css file all.css and many of the images I use have similar names such as logo.gif, header.jpg, etc.
2. Indent your code properly
   In my first programming class the prof would deduct 10% for every incorrect indentation. The practice of creating highly readable code will make it much easier to find syntax errors.
3. Create a set of naming rules that you will easily be able to remember and recognize
   By creating naming standards for yourself it dramatically decreases the amount of time you are flipping back and forth between your mark up and css. I have created a clear set of id’s that I use for common items which saves a ton of time and makes it easier to read through your mark up later.
4. Use server side includes for common pieces
   Headers and footers are good examples of commonly reused pieces. When the year changes from 2008 to 2009 you won’t need to worry about changing 10 templates or 200 static pages (worst case scenario).
5. Write your stylesheet in order as it shows up in the markup
   Stylesheet’s can get very messy quite quickly. By writing the stylesheet in order you should be able to find items quicker.

If you have any other suggestions for creating organized code let us know in the comments!