Front-End Developing Tips to live by.
The following is an article I read on a blog regarding front-end developers and coding practices and thought I would pass it on. It is by Doug Neiner, an Editor at Fuel Your Coding and is president of Pixel Graphic Design Studio. He is addicted to new technology, and specifically loves spending time with WordPress, Ruby on Rails and jQuery.
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 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 graphics from the designer, 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.