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.
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.
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.
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.
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.
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.
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.
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.
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.
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.