Reflections of a scattered Mind!!

"Not all scattered pieces are of broken glass"

Doing Things the HTML Way

Hi,

Some points that come into handy while developing in HTML:

  • Always use XHTML tags. meaning that, your HTML should be well-formed XML (closing  & ending tags should be present). Like, for example, use <br/> instead of <br>
  • Try to use XHTML 1.0 strict as much as possible. But, this mode doesn’t support target attribute on anchor (<a>) links. If you need to specify ‘target’ on links, they you should be using XHTML 1.0 transitional doctype.
  • Always specify the doctype of your HTML page. Also just run the validator test available at w3c.org to know where are deviating from the standards specified. And fix as much as possible to make it closer to standards.
  • IE doesn’t support *.ico [Icons] files as images in <img> tags. So, make sure that your images are NOT ico types.
  • Are you developing site in non-English language? Then, knowing about Dynamic Fonts is a must before implementation. Try to find more about it from Google ( I have no experience with them to tell you :-( )
  • A common bad practice among beginners: Uploading a large image to the server (like, 1024 * 768) & then set required image & height(200 * 150)  in HTML. This would cause unnecessary bandwidth waste which can be easily avoided by uploading the resized image of the desired dimensions.
  • You should learn about ‘Alternate Style-sheets’ if you wanna provide multiple themes to the webuser. Basic usage of this can be found at: http://javascript.about.com/library/blswitch.htm
  • One important, yet highly ignored practise, is providing a Print specific stylesheet for the page. This is possible by specifying media=”print” on the stylesheet link, like <link type=”text/css” rel=”stylesheet” href=”/css/print.css” media=”print” />. And, let all the unneccesary data be hidden in this css file (like, ads, navigational menu, header, search bar etc.). Keep the print to minimum.
  • It would also look good if we provide the end-user a ‘Print Preview’ from inside our page itself. This isn’t any magic, its similar to multi theming concept as said above.

Yes, I understand these are very basics, but don’t we know that Basics are the building blocks of any application?

Update: The Print Preview concept is borrowed from
http://www.alistapart.com/d/printtopreview/example.html.
Click on ‘Print this Page’ on the LHS of the page & see that page layout changes, giving the user the Print Preview Experience

Comments