10 ways to spot a good front-end coder
Front-end coding is certainly a craft and there are some amazing people doing it. When I visit a good site I often rummage around in the undergrowth to learn from the Masters. Here are ten practices I commonly see from the best coders.
It looks good naked
On good sites I find that the page will still makes sense with stylesheets turned off. If it does make sense then it is a good sign that the document has been coded semantically. This is good news for search engines, accessibility and maintainability. Good coders will always use the right HTML tools for the job, and you can see this by turning styles off.
If you are browsing using Firefox you can turn stylesheets off by hitting CTRL Shift S on Windows or Apple Shift S on OSX
It scales well
I always like to see if I can increase the font size on a design. I look to see that the design scales without the layout breaking. Often design items like curved boxes do not enlarge with text. The best coders will make sure that design elements scale without breaking. Dan Cederholm formed much of this philosophy in his excellent book Bulletproof Web Design.
If you are using Firefox you can increase the font by pressing CTRL ++ on Windows or Apple Shift + on OSX.
It prints well
I check whether there is a print stylesheet in the code and then preview it to see how it is designed. A carefully thought out print stylesheet is a strong sign of a talented coder. Print stylesheets are a real strength of CSS and it is a great shame if they are not used.
In Firefox you can preview how a page prints by going to File > Print Preview on Windows or File > Print > Print Preview on OSX.
No images? No problem.
I look for the site to continue to be usable with images turned off and for meaningful alt text to have been given to the images. This is good for users who browse with images turned off and improves the accessibility and SEO of the site.
If you install the Web Developer Toolbar for Firefox you can have a look at sites with images turned off. Go to Images > Disable Images > All Images.
Love for typography
I always like to look closely at the typography on a site. If a little care and attention has been given to the type it really makes a difference. I find that typography is a good sign of coders who give an extra polish to their work.
It [almost] validates
If I like a site eventually I will glance to the bottom right of my browser where two plugins give me more clues to the quality of the code. HTML Tidy and Firebug sit there quietly and show whether there are any HTML or Javascript errors. I'm not obsessed with validation but if a site is error free, or just has a few errors it is always a good sign.
It works ok without Javascript
If I find some AJAX or event driven elements on a page I like to see what happens when Javascript is turned off. If someone has gone to the trouble of making sure the site degrades well without Javascript then this is another excellent sign.
You can turn Javascript off using the Web Develper Toolbar in Firefox. Go to Disable > Disable Javascript > All Javascript.
The document size is reasonable
Checking the size of the document gives me an idea of how quickly the page is likely to load. I look for a document size of under 175k, and ideally much lower, so that the site will load quickly and that the user won't suffer long download times. Making sure the page load time is acceptable is a skill in itself and on a very rich site it is often an education to see how it is done.
You can check the document size using the Web Develper Toolbar in Firefox. Go to Information > View Document Size.
CSS is commented
Looking at the CSS file on good sites I often find a clearly commented stylesheet. This is a great sign that the site has been coded with maintainability in mind. A quick glance at ids and classes given to divs is another way to see a good coder. With good coders you will usually be able to understand where the div is without viewing the source.
Microformats in the house
Microformats have emerged as an excellent way to give HTML documents extra semantic meaning. Finding microformats on a site is a sign that the latest developments in HTML are being followed. It is a sign that the coder knows their stuff and that they are likely to stay on top of future developments.
You can see if a site has microformats by using the Firefox Tails Export plugin.
Our industry is unique in that you can see the inner working of someone's work at any time from anywhere. Learning from others by looking over and appreciating their work is a great way to improve skills.
How do you assess good front end coding?
Comments
What's this?
This is a journal entry written by George Ornbo, a web designer who lives and works in London, England.
Subscribe
Participating / Attending
Possibly related
May 14 2007
Will an extension for IE be available soon ?
May 14 2007
@back end coder - there are a couple of toolbars available for IE. You can find them here and here.
May 14 2007
That’s exactly what Im looking for. Thanks a bunch.
May 14 2007
Just to say I’ve got the live book mark for your blog and I’ve read your articles with interest. I’m not a coder, but a UAT tester. Very interesting, showed our developers your articles on php and css. Keep up the good work.
Daniel
May 15 2007
This is a great post. I always check the font resizing to see how it all scales, but there are other things you mention that I’ve never thought of checking. I definitely have a long way to go before I can call myself a legit and skilled coder. Thanks for putting some guidelines out there. These are worthy goals.
Jul 2 2007
A good post, thanks. I didn’t know about the FF validation extension, so that’s been very useful.
Jul 5 2007
I didn’t know about microformats so I am downloading the Firefox extension to find out more about them and how they are used.
Firebug is a very useful extension for analysing a web page and learning from it.
Sep 30 2007
Very nice articles you got here! Makes a webdesigners skillbook grow even faster. Thanks a lot for your effort!