Do you know the “best practices” in web design and development? I figure since this is very individual, it would be interesting to do some research on it to see what people consider to be best practices.
This is post 15/30 for #30daysofcreativity.
Coding standards
Let’s start with coding standards. There are many different ways to write code and a lot of people do it very differently. I’m talking about what coding style they use’how their code looks and how they structure their website or application.
First of all, something that is quite obvious to most developers these days, the best practice is to separate presentation from content and behavior. The code should be written as semantically as possible to be easy to understand.
Third on the list on this website is progressive enhancement and the way I see it, there are two types of progressive enhancement’styling and Javascript. Start by applying styles that work in every browser and when it looks at least acceptable cross-browser, start adding any necessary CSS3 you may want to use.
As for Javascript, start out by developing the site without it. Once the site works well without Javascript, you can start progressively adding it. Note that any Javascript code you use should ideally enhance the usability of the site. “Communicate, don’t decorate.”
Readability
As for indentation, the above mentioned website suggests using four soft-spaces but I personally don’t agree. My preference is like the Drupal coding standard two soft-spaces since four is just too wide for my viewing pleasure.
But anyway, whether you use two or four spaces doesn’t really matter as long as you don’t use a regular tab. The tab messes with how the code is displayed across different OS’s and editors.
Then we have Javascript, HTML and CSS compression. I agree with the previously linked to site that readability should be prioritized over file-size. When needed, compression can be applied with server-side methods instead of formatting the text. Of course, using many comments is a plus.
HTML
As we mentioned before, the markup should be kept as semantic as possible. Now that the XHTML 2 specification is discontinued in favor of HTML5, I’d suggest using either HTML 4.01 Strict or jump right ahead to HTML5. You can add Javascript to make HTML5 elements work in older browsers so long as the user has Javascript enabled.
Ideally the markup should of course be valid, checked with the W3C validator. However, using some CMS’s this may sometimes be difficult to achieve. While I managed to get Drupal to validate as HTML 4.01 Strict, sometimes people choose to sacrifice validation for, as the mentioned site says, “cross-browser experience.”
As for meta tags, we should specify that the markup is served as UTF-8. You specify this a bit different depending on what version of HTML you are using. Another useful meta tag that should always be specified in my opinion is the meta description. Since this is what shows up in the Google search results, it’s a huge selling point.
Google themselves have said some time ago that the meta keywords are no longer used to rank websites. It’s possible that some other search engines still use it but since 98% of my visitors use Google, I feel that I can safely ignore it. It’s just a few unnecessary bytes of bandwidth being wasted.
I shouldn’t have to mention that today it’s customary to use CSS layouts on your site and use tables only for presentation of data—never build table-based layouts.
CSS
This is also basic stuff that we should all know. Don’t use inline styles’keep your code well organized in external files. Make sure your code validates. Try as hard as you can to avoid using conditional comments or IE “hacks” to keep the code easy to maintain.
It’s recommended by many to use shorthand CSS to keep the code tidy. Pixels versus Em’s is a much debated subject and the opinions about this differs. You’ll have to make up your own mind but what I can say is that all modern browsers do allow zooming text sizes specified in either of the two options these days and Safari for example lets you choose your minimal font size.
Again referencing Molecular.com which matches my own opinion, CSS sprites are preferred above the use of separate background images. The biggest advantage as far as I can see is the improved loading time and your images will no longer flicker on hover before the image is saved in cache.
The last thing I’ll mention for CSS is the use of a CSS reset file. It’s recommended to reset the browser’s default CSS with a CSS reset file and preferably customize it for your own needs. I usually start out with Eric Meyer’s CSS reset but check out this SitePoint Forums thread and you’ll see there’s a whole bunch of options.
Javascript
As with CSS, keep your Javascript well organized and in external files instead of inline, and separate styling from behavior. You should most often use CSS classes instead of changing the style of content from within your Javascript file.
This page on Opera.com describes many Javascript best practices. To name a few, we have the previously mentioned progressive enhancement with graceful degradation, validate any user input before using it, and avoiding global variables’try creating your own namespaces to keep the global scope uncluttered.
Check out the above linked to site or Drupal’s Javascript coding standards for a lot more recommendations on how to build your Javascript.
Performance
As for performance, Molecular.com mentions Yahoo! Performance Guidelines which is a very nice reference point for building efficient sites. The YSlow Firefox plugin will measure the performance of your site and grade you on several areas, showing you where there’s room for improvement.
When visiting Kings of Code 2009, I attended the presentation “Rich And Snappy Apps, No Scaling Required” by Thomas Fuchs and Amy Hoy, two great Javascript experts. They recommend using a tool called SmushIt to optimize images for the web, which works very nicely.
Another recommendation I agree with is to use a framework instead of going through the hassle of writing your Javascript from scratch’it will save you some time and make coding a lot more fun. While Amy and Thomas are Prototype users, I’m personally a big fan of jQuery.
Finally, they recommended another tool called Sprockets, which is a Ruby library that will give you cleaner and more efficient Javascript.
See Molecular.com for more recommendations.
Search Engine Optimization (SEO)
SEO is a very fuzzy subject and if I’m correct, Google is trying to get rid of the concept of optimizing for their search engine since it’s means to rank results very organically and it may be hard when people are trying to fool the indexing.
But still, there are a few things I would say are best practices that should be considered during every project. The first one is to simply have a nice structure of headings’ideally one h1 element that is the most important piece of content on the site, and the second most important are h2 elements and so on.
As we mentioned earlier, graceful degradation of Javascript is preferred. Assume search engine bots do not have Javascript. If the user needs to take a specific action via Javascript to access certain content, or you have a function instead of a URL in an anchor href attribute, the search engine may not be able to index it.
Some argue that URL’s should be kept “clean” and contain target keywords to rank well in search engines. While this may be true for other search engines, I’m not sure, it’s becoming less and less important when optimizing for Google. However, remember that complex URL’s are less hard for users to memorize, and they’re less readable.
For more on SEO you can check out Google’s Search Engine Optimization Starter Guide.
Cross-browser testing
You know how it works’you need to check the website in all major and sometimes less major browsers. I personally discuss with my client to determine if IE6 compatibility is necessary for the particular project I’m working on. If you know the quirks and use best practices, your page should work in most, if not all, browsers.
IE 6-8 I test on two different Windows XP virtual machines, and Chrome and Firefox is what I test with most frequently in MacOS X. Since Safari is using WebKit, like Chrome, I test my sites in that one less often. Opera is another one that needs to be tested for.
If you don’t have access to different platforms via virtual machines, dual boot or different computers, you can always use online services to test in different browsers on different OS’s. This is something I do regularly when developing email templates, and my favorite service which I dearly recommend is LitmusApp.
Litmus works very well for testing in email clients as well as mobile and desktop browsers. Sometimes it can be a bit slow but I still believe it’s the best software of its kind.
Conclusion
My conclusion after looking into this for a while is that these so called “best practices” are highly subjective and there are a lot of different ones. I would say they fall into two different categories’the best practices of “current coding standards” and the guidelines that a company sets up for its employees.
I’ve sprinkled this post with some reference links that I recommend you have a look at. Most of all, I suggest you make up your own mind about what your personal preference regarding these best practices are instead of blindly following someone else’s lead.
Tomorrow we’ll go through some of the so called best practices for freelancing and starting your own studio, so stay tuned.