Tag: html

Zen Coding

When I first heard of Zen Coding on Sitepoint, I figured it was some other gimmick that might save me about 0.01% of my time each year after I spend five or six hours learning the syntax.

Zen Coding works by expanding some abbreviations into properly closed html. The syntax is very simple, and can be easily explained in just a few examples. The syntax is basically CSS selectors which most web designers / web developers should already know.

Overall, I found installing and using Zen Coding to be very worthwhile. I just made sure to change the shortcut key in Notepad++ because Ctrl + E wasn’t doing it for me. 🙂

Ports exist for a lot of different editors, and IDEs, so check it out. What other productivity tools do you use?

Table Based Layouts Unnecessary (Part 1)

More and more often as I develop websites for companies located around Niagara Region (Fort Erie, Niagara Falls, St Catharines, Welland) I am seeing table based layouts for websites. Table based layouts depend on an html table to do all of the layout and often have many tables inside of tables creating an extreme amount of html vs content.

Table based layouts should have died out: CSS has increasingly become more and more supported. It is very difficult now to find a web browser that doesn’t at least support large chunks of the W3C Starndards.

The use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. CSS is easier maintained and changed compared to a large table based layout: less clutter and a great separation between content and presentation.

Problems with using tables

  • Redesigns of existing sites and content extremely labor intensive (expensive!)
  • Large file sizes: slow loading pages & more expensive hosting costs
  • Pages aren’t very accessible to users with disabilities or different devices (phones, pda, ipod, iPad.)
  • Simple change to table layout may take hours across multiple pages.

Benefits to using CSS Layouts

  • Content is much closer to top of file.
  • Allows extreme flexibility in positioning
  • Allows graphics to load later while user views text.
  • Changes only need to happen in 1 file.

Browser Redirection – Yahoo Answers

I am having problems getting mozilla firefox to display my website correctly. It works fine on Internet Explorer. So I was thinking of making a mirror of the website that is made specifically for firefox browsers. Is it possible to code a website so that it detects what browser a visitor is using and them sends them to the correct mirror ?(i.e. index_firefox.html or index_ie.html)

Background Information
At the root of this question, there lies a huge problem that really never would have occured if browser creators followed the w3c recommendations. Microsoft and Netscape fought the original browser wars in the 1990s and throughout this time both created proprietary nonstandard tags and didn’t always follow the w3c recommendations. Eventually, Microsoft’s Internet Explorer won the war and Netscape disappeared into the oblivion to eventually become the Mozilla Project.

Mozilla Firefox, Opera, Safari and Chrome basically render almost exactly (99% of the time) the current w3c recommendations for css,html, and javscript and most of the draft recommendations are followed in the current builds of these browsers. Internet Explorer on the other hand, barely follows any of the w3c recommendations from even the year 2000. IE’s terrible rendering results in us having to perform significant testing and spend significant amounts of time doing IE6, IE7, and probably now IE8 hacks.

Problems With Potential Solution
I believe that redirecting based on a browser is a terrible idea, and should be avoided at all costs because of the potential doubling or trippling of work with regards to content.

Also, what happens if the browser doesn’t have javascript support of a user has turned it off? Chrome, Firefox,Opera, and Safari users would continue to be dished out a crap website that only works on some version of IE.

My Solution
Avoid the use of redirections for different browsers and instead developing a website that is 100% standards compliant and than start to add IE hacks as necessary.