Friday, July 24, 2009

Multi-Lingual Encoding

I have built many websites in many different spoken languages. But one site in particular has taught me a few valuable lessons when it comes to building a website with special encoding. That site was a Japanese website.

This site was built in classic ASP and includes are a common component in this code. An include is it's own page and used mainly for items that can be reused throughout the site, such as the header, navigation, or even functions. That page is then included on each page you use it on. It's extremely valuable and efficient for large sites.

Well in the past, I used to build all the
<head>
components into the include file. A typical include would contain the title tags and all meta tags as well as any encoding for language. The Japan site has taught me not to put the encoding in the include. I frequently get content that's written in Japan and when that content transfers to the US, it is all jumbled without the encoding. It is more valuable to have that encoding on each and every page so you get the characters to show correctly to the developer. Having it on the include ensures users can always see the site correctly in their browsers, so it's never a problem to users. But to developers it's a nightmare and if you add the encoding to the page after it's jumbled, the encoding makes sure it stays jumbed, even to the end user at this point. So you can't add it afterwards without messing everything up and therefore you are stuck working on a jumbled page forever.

The lesson learned is to break out the encoding on every page when you are designing a site. In Japan's case that code is
<meta equiv="Content-Type" content="text/html; charset=shift_jis">


As a side note, I now also put all the elements in the
<head>
on each indivivual page for better SEO. For SEO, it's helpful to have unique title tags, and meta tags for every page. You can still do this on an include by using variables, but I think you can achieve more meaningful meta data/descriptions by placing these tags on each page thereby making your search engine display more helpful to users and more accurately pinpointing their needs.

So leave the includes for navigation and functions and let the
<head>
have it's own space at the top of every page.

Wednesday, July 15, 2009

Table-Less Design

So this was the question of the week: What is table-less design and how do I do it?

Traditionally, web pages were designed using table tags in order to achieve the exact layout desired. It was easy to use and easy to control your look and feel, although quite difficult to navigate when using numerous nested tables. Another drawback is the need to touch every page of your website in order to do a redesign.

Those days are over. The new trend in web design is table-free using only CSS style sheets to control your layout. Personally, I prefer this method. I like keeping design separate for code. Some of the benefits are:
  • the code is easier to read
  • a major redesign no longer requires touching every page of the website
Additionally, if you use standard web tags such as h2, li, fieldset, etc. you not only are using tags that are easy to remember when coding, but you are also improving your SEO. In the case of a team working on a website, using these standard tags also helps maintain consistency despite numerous coders with unique habits. Classes are great, but if you can use a standard tag instead, go for it and you'll save yourself a lot of headaches in the long run and shorten the length of your CSS code as well.
I now mainly use table-less design. My goal has always been to make websites highly accessible and frankly, tables guarantee no matter what browser is used, the site looks exactly the same. Going table-free has a risk in that not all styles are translated the same across browsers. However, you can use extra styles to accommodate this. The key here is TEST, TEST, TEST. I hope to do more website table-free so that frequent and easy redesigns can be easily achieved saving time and money as well as opening up creative possibilities with no limitations.