One size fits all, does not fit.

I heard this one before, but then kind of ignored. Why?!! For I, as a web and desktop designer and developer when started iphone development it seemed, “ok, fine, lets do the design and go for development” . Iphone and any iOS in that case have a clear guideline of user interactions. So no worries, if I am sticking to those guidelines, I am sure the product will have a nice user experience. Keeping that in mind, I moved on. And then it all went well. Until I started developing for other devices and other OS such as Android.
Developing games on the other hand is not about those default navigations, one has to think of it from the gaming UI perspective. So what I think is while game design can be one design for multiple devices but the size factor does the trick. If a game is designed for 2 different mobile phones (may be different make too of same OS), it does not matter which OS they are running in, as long as the size of the device screen is kind of same, we are good to go. But then if at all there is a difference in the ratio of height and width of a device screen, the design needs some tweak to give the user a same or similar user experience.
Now, if we talk about application design for mobile, then its all together different approach. Apart from the size, one has to take into account, the platform that is running the application. This surprised me, when I was trying to port an application from iphone to android. Well, we can just port it and it will work the same way it works on iphone, but then there are different physical buttons present in Android devices (even Windows mobile phones and other OS phones), which are not present in iOS devices. The point is either we are not utilising the UI of the device or making a bad use case of the UI of the device and in turn our application, if we port one application as is to another device.
So clearly, each device will have a different design, the code base may be same, but design must be different to be useful and give the same user experience through out devices.

Getting into web design action

Once we are familiar with the key concepts of the web, browser and how it works, now its time to see how to get started with it. If you have not yet gone through them, here are the links,
1. introduction
2. getting used to the terms
I hope by now you have gone through the above links. This is not mandatory, but then going through them will bring you to the same page with me. Else it will be a little difficult for any one to understand what is being referred in the tutorial here.
Well, lets get into action. By now, you must be knowing to start with a web-page we at least need 3 files (Not mandatory but good way to segregate different functionality in different files, refer to the “getting used to the terms” reference for more on this ). So the 3 files are, one HTML file, one Javascript file and one CSS file. We will start to put the basic code for these.
The HTML file is stored with an extension of “.html”, CSS files are stored as “.css” and javascript files are stored as “.js” files. Lets write our first html file.
The very basic HTML page code will look something like

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




	





Continue reading