No this is not a application from the Itunes Appstore, what I am talking about is a mobile web application that could work on Iphone, Ipod touch, Palm Pre, and all Droid phone.

There is a new kid in town

If you own a mac you are probably familiar with the web browser Safari, well the Safari gut called Webkit is what is powering all the devices up there I am talking about, even blackberry is working on a browser based on webkit. What so special about webkit? Well it’s cutting edge technology. They implemented every animation you could have in a real application directly in the web browser using CSS3 and it have most features HTML5 will bring in the future, today. Most notably offline website and databases directly in the browser.

With all these devices, you get the big pie of the mobile web browsing, and you get a very good browser to work with. These was neither the case before. You had Windows mobile which use IE 5.5 rendering engine (ouch!), the nokia, backberrie browsers which was actually worse and opera mobile, which is actually pretty good, but do not have a big pie as smartphone goes.

Showtime is using jQTouch for its mobile website, you can save favorite shows and get your weekly schedule

Meet jQTouch and Pastrykit, mobille frameworks

On top of that, we get mobile frameworks popping up to ease the web application development. jQTouch is based on the jQuery javascript framework. To have used it before, it’s a pretty good  rapid development kit for mobile website. You can create basic website with lists and articles in a couple of hours and really feel like a mobile app. Pastrykit is the unofficial framework used by apple. It’s not officillaly released but some developers took the time to open the API to everyone.

An uncomfortable situation

As you can see, pretty much every giant step we took on the mobile web is based on the fact that Webkit is king of the mobile platform. What if the Firefox mobile would come to dethrone Webkit? Well that would be pretty bad for website based on webkit out here, most mobile framework are based only and directly on Webkit. But this is really not the trend right now, with blackberry soon switching to webkit and Google android phone becoming more and more popular (HTC, Samsung and others are developing phone on it), Webkit mobile seems to have at least some great years ahead.


Stats from Admob Metric

The jQuery mojo is write less do more, and this is exactly what it’s meant to do. This is an API that help you write better javascript. Unfortunately it is really hard to write good javascript on all browsers. What jQuery does is take your jQuery code and dispatch it to every browser in the more efficient way possible. This enables developers to write faster and better javascript. It adds some functionalities too, like for example animations.

Not unlike Adobe Flash, with jQuery it is possible to animate  objects on your web page, this is however limited. While you can do easing and opacity effects, you cannot rotate or use « photoshop effect » directly from javascript. Well used, you can create nice and clean animation with jQuery, but trying too hard might result in a look that feel like flash but not really as good as flash.

The famous AJAX

This is a common error for non-tech teams to actually refer jQuery as AJAX, in fact this is only a subset of functionality of javascript and not javascript itself. AJAX refers to asynchronous JavaScript and XML, what it means is that you can load external XML or HTML to and from your page. For example,  a form on the web normally sends you to another page when submitting it. Using AJAX, you could submit the form to your server in javascript using AJAX without quitting the page. Most recent websites make a major use of AJAX without the user noticing it to update content or save users preference.

Using it without an API like jQuery is pretty hard because of it’s weird syntax. This is somewhere jQuery really shines, because it enable you to do a lot, without wanting to bang your head on the wall. Because of javascript API like jQuery, using AJAX has been made a lot more easier and also popular, this might have to do with why people often call jQuery as an AJAX technology.

If you want more information on jQuery I would suggest you visit the official website.  There is a lot of information on the website and looking at the documentation might help you understand how jQuery can be beneficial for your website or company.

So you are happy of your new design, what is next?

You just approved the design of your next website, you are happy with what has been done so far. What’s next? well a pretty long process. Upon approbation of the design, front-end developers take these designs and translate it to HTML. This means that your design is taken, decorticated and translated to a programming language. This might look like a simple task, but on the contrary, you need excellent front-end developers to translate your design perfectly.

How Complex?

To translate your design we use 2 languages, HTML and CSS. HTML is the foundation of your website, and CSS is what styles all your website, adds colors and images. It is not all, unfortunately the implementation between browsers (Firefox, Internet Explorer and etc) of those 2 languages differs a bit, it creates the complex task of testing your website to all current browsers to be sure the integration is spot on. The front-end developer needs to be aware of the dependencies of every browsers and be able to turn around problem that could arise.

Front-end developer also optimizes your website the be the fastest possible, trying to use the fastest structure possible and optimizing your design without losing picture quality. This is what we call website integration.

A back-end developer develops features

When those templates are finished, generally a small round table is planned with designers in case front-end developers forgot some styling. When designers are happy with the templates, it’s ready to get implemented in your content management system.

It is the back-end developer’s job to develop all the features you need to be able to manage your website yourself. Like changing the text in a section for example. This is where front-end developers and back-end developers work together to integrate your design with all the website features you need.

Every web creation company should take great pride of doing spot on integration of website design with content management, and we, at w.illi.am/ sure do.

In the nineties, Netscape was flourishing with between 50% and 80% of the browsers’ market and was in a intense combat with Internet Explorer. A guy at Netscape, named Brendan Eich, was given a difficult task of creating a language to make Netscape interacting more dynamically with websites. And of course they wanted this language the day before they asked it . In the time Brendan had, he did the most he could, and created a versatile language that even script kids could pick up, Javascript, he also created the DOM (Document Object Model) on top of Javascript. Now the difference between Javascript and the DOM is simple. Javascript is the basic language you use to make sentence. But the DOM is what is understanding this sentence and makes it interact with the document the way you asked it.

Microsoft was not going to let that happen

Microsoft was certainly not going to let Netscape have « Javascript » and not them, they decided to reverse engineer and implement it in Internet Explorer. Now problems began. They, very unfortunately, did not do a very good job at this implementation. Which means that for doing one simple operation on Netscape and Internet explorer, you had to code 2 implementation for both of them, because the DOM was not understanding the same sentence for both. In fact javascript, the programming language is mostly fine, the biggest problem is the DOM API, some words means nothing to IE and some other means nothing to Firefox. This is what drives web developers crazy. You have to write code specifically to some browsers because they do not follow standards, you have no choice, Internet Explorer represent 67% of your user base, you have to do an implementation for them.

You need to understand that this happened in 1995. The web did not had the same needs than today. Now web applications are vastly more complex. Some people had to step up and create cross browser API’s to deal with the DOM, and they did. Which means now you write one line, and some API dispatch the good implementation to each browser. This has make the life of web developers much easier.

There is currently 3 major « all round » Javascript libraries, jQuery, Mootools and Prototype

At w.illi.am, we decided to use the jQuery framework, which is now endorsed by a lot of major players, like Microsoft. Not only this is the most use Javascript framework in the world, this is the one we found the most powerful. Writing Javascript with jQuery enabled us to create more powerful web site than ever before and this tool is one of many that make us confident that we are ready for the future of the web.