Don’t we all love building applications for the web. From the mundane page by page browsing, web development has come a long way - thanks to the web 2.0 mania. Building anything on the web these days require a good amount of HTML and CSS knowledge. Gone are those times when the “programmers” build the application and the UI folks plug it in. Most web based applications are Javascript intensive, which tag along a lot of CSS manipulation. And to top it all we have atleast 4 major browsers to support - one of which is a major pain in the ass.
The following things top my list of “remember-or-get-hurt”:
-
Always specify a DOCTYPE
I cannot tell you how much pain and misery not doing this would cause your development process. At one point we ended up writing completely different sets of CSS files for different browsers! - all because someone (read me) forgot to mention the document DOCTYPE. Here is a link to an ALA article if you want to know more.
- Never code for Firefox
Okay this is a personal thing. Thanks to Firebug, we love developing on Firefox. Its incredibly easy to work on and it probably has the best development tools to boot. YSlow, dozens of FireBug extensions, Live HTTP Headers, etc etc. All said and done, you still need to support the other evil - Internet Explorer. After all, 70% of the world still uses it - don’t ask me why!. During development, it is wise to have both Firefox and IE running. I know a few CSS dudes who would never ever develop just for Firefox. They will always have IE, Firefox and Safari open at all times. It’s always easier to check first than fix later.
Here are some tools that will ease your development on IE: (Just Google them for links. Too lazy. ;))
- Debug Bar
- Web Inspector
- IE HTTP Headers
- IE Web Developer Toolbar
- Firebug Lite
- Visual Studio Debugger
- Hacks are quick solutions, but better if avoided
Hacks. Well usually this means - workarounds. It sometimes also means, things you need to do to please the evil goddess of IE. By now there are about a gazillion different hacks to make things work in IE - give or take one or two. They all work, but make maintainability a major issue. Moreover you never know IE8 could actually be good when it comes to standards. Or if you do use browser specific hacks, please make sure you put appropriate comments and don’t just write understandable code. :p
- Don’t use AJAX everywhere
XHR calls and funky loading animations add that web 2.0 zing to your application, but don’t overdo them. With AJAX/XHR come a lot more lines of code in order to implement bookmarking, the back button, the page refreshes, etc etc. XHR will definitely speed up your page loads and will definitely make it look cool - but make sure you keep important pages of your application with linkable, bookmarkable URLs. And it would be better if doing this does not require a lot of JavaScript code.
- Graceful degradation
This is another thing that a developer should keep in mind. What would happen to my application if the browser does not support JavaScript - or rather, if the user has disabled JavaScript? Agreed, this is a hard-to-come-by scenario and probably anybody using a web 2.0 website would never have JavaScript disabled, but it is something one should spare some time on. Your application should at least be “readable” when JavaScript is disabled. It need not be fully functional. Most new age JS frameworks are unobtrusive and degrade gracefully, but make sure your code does too.
- Not everybody is on freaking Broadband
Yes, you heard it right. Don’t bloat your pages. Don’t clutter them. And for heaven’s sake don’t put videos, flash animations, big images all on one page. People designing websites which expect heavy traffic, go miles to ensure that their pages load fast. HTTP requests are minimal, external JS and CSS files are minimized. Interfaces which are light, load fast and are free of clutter are always better - even if this means sacrificing that cool gfx or Flash/JS effect. Yahoo’s performance benchmarks and YSlow are good to start with.
- Ditch support for IE6
This is my personal favorite. Just decide not to support IE6. It’s release was probably the biggest mistake anyway. Supporting it will result in countless hours of frustration and an end result which will be less than satisfying. I know a lot of people use IE6, but as I said, I personally will never build support for it. And I am not the only one. (I know it ain’t a very bright idea while developing commercial web applications, but hey!, a developer has to have his say at some point ;))
These were some very basic points to keep in mind while making a web based application - all on the client side though. Part II will feature things that one needs to take care of on the server side. Keep watching this space. 
Recent Comments