10 Rules of Front End Coding

What follows here is a series of 10 things to remember and practice on each web development project. I have listed them here in order of importance as many of the steps build on each other. If you take nothing else away from the reading, please take Rules #1 and #2 to heart and practice them. I think solving those two problems will lead to better design and better implementation in websites across the Internet.

1. Charge Enough, and Then Some

Especially in hard economic times, business and individuals alike are trying to cut costs and keep projects down to a minimum. Due to this knowledge, we as web developers try to move through each phase as quickly as possible. Front end development, however, take a substantial amount of time if done properly. Not adequately charging for that time leads us as developers to skip over things we know are important just to keep the project within the budget. The rule is simple… you normally won’t take the time to do it right if you don’t have the time to take. The only way to get more “time” as a developer, is to guarantee the time we DO spend is properly compensated. At that point alone can our hearts and minds be fully plugged into our projects… and only then can we take the time to follow the remaining 9 rules.

2. Educate The Designer

For those who are a designer/developer all-in-one machine, this one should be easy. However, coders who work with or for a designer who creates an uncoded website have a unique responsibility. As many designers come from a print background, it is up to you, the developer, to educate them on the possibilities available to their designs. No… I didn’t say let them know about the 150+ jQuery plugins you use, or your thoughts on using a UL/LI combo vs a series of A tags. I said educate them to the possibilities. Help them understand how their design might display on different devices. Help them understand how to leverage repeating backgrounds and tiled patterns to achieve great designs with minimum file size.

Don’t leave the creativity solely to the designer either! This is your chance to prove you are creative as well by finding the perfect technology solutions to meet the needs of the designer. Telling them “it just isn’t done that way” for every request is a sure-fire way to cause frustrations on both sides. Put your mind to work finding ways around hurdles.

Note: Rules 3 through 10 build off these first two rules. Some of the following rules require additional graphic design service, and all the rules take time to follow. Make a commitment to rules 1 and 2, and the remaining rules will both make sense and make your finished product that much better.

3. Think in Layers, Not in Slices

Even today, we still use the phrase “cut up the design” to describe the process of moving a design from Illustrator or Photoshop into the finished HTML/CSS layout. While this is still largely accurate, its name belies the former concept of slicing a design into pieces and reassembling it (usually in a table) back on the HTML page.

That was the old web. The new web uses the concept of layering, stacking, and z-index to achieve designs with depth. As a coder, be sure to get layered PSD files or layered AI files from the designer vs. a flat design. This will allow you to have much more flexibility in how you put together a web site. Remember, when working in layers, consider the HTML elements that are essential to the structure before resorting to adding additional divs and spans. You can use a repeating vertical pattern on the html element, and a repeating horizontal background on the body element without bringing the dreaded div#wrapper in to solve your background woes.

4. Use the Best Image Format

What is the “Best Image Format” you ask? It’s the one that is best suited to the task at hand. PNG, GIF, and JPEG files all have different advantages. When there is no transparency in an image, test out which file size/image quality is best between PNG, GIF and JPEG. For large images, JPEG will almost always win for quality vs size. For small images without transparency, see which has a better file size PNG or GIF. If you decide on a GIF, be sure to play with the dither options and the lossy options (Did you even know Photoshop has a “lossy” option for GIF?). Often you can squeeze even smaller files out of Photoshop through adjusting the output settings even further.

For images that need to have transparency, make educated decisions on how they will be used. If they will be layered over a complex background, you may need to consider using a PNG file. If the background is consistent enough that the color matte of a GIF won’t stand out poorly, see if the GIF file is smaller. GIF has the advantage of not needing additional programming to make it work in IE6.

Regarding JPEG use: If you use JPEG as part of your user interface (and not just to display a photo, etc) be sure to leave off the ICC profiles when saving for web. Certain browsers will honor the profile and produce a color difference between GIF/PNG and JPEG files of the same color. This is a simple problem to avoid by just turning off the ICC profiles.

What if it is a lose-lose situation? There have been times where I need the full transparency of a PNG with the image complexity better suited for a JPEG. In these cases I often stack (remember, think in layers) two images: a PNG for the transparency, and a GIF for the complex image aspect. It is creative problem solving like this that will ensure your pages load quickly, and that the design retains its integrity.

5. Know When to Use Classes vs. Ids

I thought this was just common sense, but apparently it isn’t as I see many coders using class names where they should use ids. It may not seem like a big problem, but it will when you try to target an element using Javascript.

The concept is simple, if there will only be one element on a given page, use an id. If there will be multiple instances on a given page, use class names. Anytime an element is one-of-a-kind, use an id. Its that simple! Things like ul.navigation for the main navigation bar or div.site-logo make no sense. Each of those elements are distinct and should have and id.

Instead of adding another rule to our list, let me lump something else in here: don’t use too many classes! Take the following code for an extreme example (Notice that classes appear six times):

<div id="navigation">
<ul class="navigation-links">
<li class="nav-link-wrapper selected"><a class="nav-link" ... >Home</a></li>
<li class="nav-link-wrapper"><a class="nav-link" ... >Contact</a></li>
</ul>
</div>

All that could be replaced with the following (A single id and a single class):

<ul id="navigation">
<li class="selected"><a ... > Home</a></li>
<li><a ... > Contact</a></li>
</ul>

For those who code frequently, you realize this is a ludicrous example, but it shows the fallacy of over-using classes. Use only what you need to correctly style and enhance (via Javascript) the HTML, nothing more.

6. Make Your Pages Responsive

Its important that the page responds correctly as the end user navigates through it. Using conventions like image rollover effects as well as :hover, :active and :focus states cannot be stressed enough. You don’t want to assault the user with too many interactions or styles but most people respond well to visual feedback. Here is an easy one for you: links should change state when the mouse hovers over them… period! It is not enough that the browser displays a little hand indicating a link. I can’t tell you how frustrating it is to search through a page with black text looking for the dark gray links and hoping and praying that the hand appears letting me know I found one!

Using conventions such as the “You are here” indicators or descriptive tool-tips all fall under this category. The more interaction and feedback that appears to the user while they navigate through a site, the better.

7. Always Use CSS Sprites for Rollovers

If you don’t know what CSS Sprites are, check out this article at Smashing Magazine or this one at A List Apart for details. For those who DO know what they are, why don’t you use them!!? If you tell me its due to a lack of time, I want to refer you to Rule #1 in this list. Past the time argument, I can’t really think of any benefit more important than using CSS Sprites for image rollovers. Check out the Starter for jQuery site. Almost all the user interface pieces are built using a single PNG file (pictured below). The interface loads all at once, and all the hover/active states are immediately available. No delay for a :hover image to load; One request to the server, not 10+. This a fantastic tool in the Front End Coding Toolkbox that developers need to use more frequently.

8. Understand the Difference Between Flash and Javascript

I think Javascript can do amazing things. I also love pushing the limits of what it can do. I love making widgets and plugins just as much as the next guy… but Javascript cannot solve all the problems in dynamic web development. Instead of spending 10 hours emulating a Flash feature that would take 1 hour to make in Flash, make the right choice and choose Flash. On the other hand, if you just need an image rotator… don’t you dare open Flash!

9. Test Your Site in Many Browsers (including IE6)

This one takes time, there is no doubt about it. I develop on a Mac, and have a PC (and multiple Virtual PC environments) that let me test is most of the normal browsers people use today. Unless you have Google Analytics reports that say no one uses IE or everyone uses Firefox, don’t make an assumption on how people will browse your site. I am not saying make the sites look identical, but make them work, function, and look nice (And certainly similar!) in most browsers.

Note: I mention IE6 specifically because my largest client is a corporation that still uses IE6. I have developed a coding style that allows me to build rapidly for modern browsers, and implement only a few style sheet and javascript fixes so the site looks right in IE6. I am sure I lose some edge by doing it this way, but it saves me from many embarrassing moments.

10. Always Keep Maintenance In Mind

As you are “cutting up” a Photoshop design, or preparing your CSS and Javascript, keep maintenance in mind. Some crazy-cool CSS hack you use today may come back to haunt you later. Dumping CSS rules wherever you please in a CSS file may seem fast at the moment (Guilty!), but will make changing and updating them later a nightmare.

An important step to remember occurs after you have prepped a designer’s file for export from Photoshop or Illustrator: Remember to save a version of the file just before export. That way if you need to re-export it later, add another button, change a line of text, etc., you will be able to export it again quickly. Photoshop normally saves Image Format choices, compression settings, and matte colors to make your job even easier.

Conclusion

There are a number of other things that are important for Front End Coders to keep in mind, but I think these are some of the most important. Many could argue that these aren’t rules, but I challenge you to think of them as such. Perhaps you will be less likely to break them in the interest of time or money on your next project. Remember, these rules still apply if you you’ve received a web design from an outsource web design service like DesignCrowd.