A Few Things to Remember for Front-End Devs

After yesterday’s post about designers and their oft lack of web savvy, I want to offer a counter balance. One that will set right the woes of the relationship with my fellow designer at Stink Digital and will avoid a clip around the ear, as he sits right next to me. That aside, there are always bits and pieces to remember, both when working on web projects and when working with others. Here are a few things to consider:

1. Follow Conventions …
   When working on code, CSS or otherwise, make sure you follow formatting conventions, either globally or those laid down by the team in your company. A predominant one is regarding the use of 4 spaces versus tabs for indentation, another the use of encoding types, yet another the introduction of comments for documentation generation. Worst of all is the maintenance of different code styles on a shared code base with other team members.
2. Comment, Comment, Comment …
   No excuses, always comment your code. Even more so when you are working with others. It’s a real pain to figure out code in the absence of comments, especially the longer and more complex it becomes, though not impossible. Obviously, the longer the code and the shorter the comments, the longer the process to figure it all out. Comments are part of good housekeeping and reflect all round good practice.
3. Keep It Clean …
   When working on CSS, ensure that the files and rules are well structured, that they are clean, and that each section is well demarcated and for the “icing onthe cake”, keep an up-to-date table of contents at the top of the CSS file. If you are working on a massive site, with thousands of lines of CSS code, it is worth following the A List A Part model and split off the code by media type and rule type (colour, layout, text).
4. Accessibility …
   Your might grin with glee at your perfectly written semantic mark-up and your shining-ly brilliant css code, but in all reality, if it does not take accessibility seriously, then it isn’t worth anything. Making the site appear, and work properly is one thing, but to ensure that it works for each and every kind of web site user is another, impaired or not, is another matter. Don’t treat some users as second-class netizens.
5. Colour, Size and Fortune …
   To make your life easier, the team should ensure that all of their web graphics apps use the same color profiles, from the designers to the front-end devs. There’s nothing worse than fighting over the varying color palette displayed on one screen and another. Also, you will likely need to ensure you all use the same monitors and have their profile colour corrected too. On top of this, when exporting graphics, be sure to compress the files correctly. Over-doing it only ensures nasty glances from the designers who feel like their designs are being butchered with a sledge hammer.
6. Compatibility Testing …
   Test your sites in software and on hardware that will be used by your target audience. Take multiple versions of the same browser, as they may easily render differently and check out how the site looks and works on handheld devices. you may find custom stylesheets and tweaks are the way to go. Use conditional comments, selective media types and possibly even js to load in browser or device specific css or js code.
7. Cut Down HTTP Requests …
   Work on reducing the amount of HTTP requests made. This can be achieved in a number of ways. For one you can use CSS sprites. You can also pack CSS and JS files, so that the individual CSS or JS files are larger but are contained in one request. Another way is to use the googleapis.com hosted JS files. The advantage here is that other sites might use the same links and thus the files may be contained int he browser cache, thus limiting the request.
8. Right Balance …
   Constant think about creating well designed code. WordPress have it right with their strapline “Code is Poetry” though they themselves don’t necessary create the most poetic code. What I talk about isn’t the be all and end all, but these rules make life working with others and for others (your customer is the web site visitor) much easier. Beyond this there are plenty of ideas for best working practice, so go hunting.

Related Links

Colour matching and ‘Save for Web’ in Photoshop – http://beta.stinkdigital.tv/blog/2009/03/31/photoshop-save-for-web-colour-mysteries/

Progressive enhancement with CSS – A List Apart – http://www.alistapart.com/articles/progressiveenhancementwithcss/

10 Little Web Development Tricks – http://zygote.egg-co.com/10-dirty-little-web-development-tricks/