Interactive

7 Good Front-end Development Practices

June 16th, 2009

Written by: Jenny Messerly

Wordpress states it best on the their footer, “Code is Poetry.” Code looks beautiful on paper and functions best when executed with the correct “spelling, grammar and formatting.” Here are seven good front-end practices to create useful, well-written and drop-dead gorgeous designs…

CSS Reset
Before you build a home, you must first lay a solid foundation…same thing goes for building a website. Using reset code will make browser testing less painful and ultimately give you a better-looking site across various browsers.

I use Eric Meyer’s CSS reset, which he defines as: “The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.”

LoVe HaTe Rule
Another way to keep your visitor’s experience consistent across various browsers is to define your CSS styles for link states. In order for your link states to display properly you must list them in a specific order known as the LoVe HaTe rule:

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

Font Sizes
Relative units such as ems or percentages (%) should be used for font sizes, so that users can resize text. If pixels (px) are used then my grandma viewing in Internet Explorer will not be able to resize text. She will hunt you down.

For maximum compatibility with Internet Explorer, set the font-size of the body element to 80% or 90%, and then adjust the size of other elements using ems or %.

External JavaScript and CSS
•    Reduces the size of your XHMTL documents.
•    JavaScript and CSS are cached by the browser and can be used for multiple page views.
•    Spend more time with grandma and less time revising internal CSS and JavaScript. Revise one file rather than several.
•    SEO: Search engines tend to give priority to content on the top portion of the page. By removing JavaScript and CSS you are moving pertinent content closer to that prime location.

Avoid CSS Hacks
CSS hacks are lazy, plain and simple. If I open a stylesheet and see “!important” plastered all over the page, I automatically discredit the coder and shout at least 42 cuss words while completing the task at hand. Take a few minutes to learn about the issue and become a better coder by fixing it the correct way. Here are some more reasons not to use CSS hacks:

•    Hacks may work temporarily. When a new version of grandma’s Internet Explorer browser is released the hack may be obsolete.
•    Hacks bloat your code and make debugging more difficult.
•    CSS validation may not be possible and also make debugging more difficult.

Browser Test
Most likely, I pray to God, there was great thought put into the layout and graphics of your web design. Do you want your visitors to see it that way? Browser testing is a must, especially in grandma’s browser, Internet Explorer for Windows.

How many times have you banged your head against the wall over a CSS issue and found out there was a simple error in your style sheet or XHTML? I’ve done it. Before delving into cross-browser compatibility issues, validate your CSS and XHTML. If they pass the test, then you can be sure those silly errors aren’t the reason for your issues.

I currently use a Mac for development and use Parallels software for Windows testing.

Adobe BrowserLab was just released in Beta, but I haven’t had the chance to try it out yet. If any of you get the chance, please let me know what it’s capable of. I trust Adobe will make a useful product.

I’ve never used Debugbar, but many Windows users seem to like it.

Accessibility
“Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging,” according to W3C’s Web Accessibility Initiative (WAI).

After you’ve validated your XHTML file you should perform an accessibility check. I came across a great free web accessibility evaluation tool called WAVE. They also provide a helpful WAVE Firefox toolbar that allows you to directly evaluate your pages in your browser. Lastly, remove all CSS and JavaScript from the XHTML. Take a good look and see if the navigation is still usable and the content still makes sense.

Now, use these tips and make the world a better place (and grandma’s life easier) by writing some beautiful poetry.