What? Mobile and Tablet Web design?

To be frank, Apple’s iPhone and iPad have turned the dream of viewing your web in the palm of your hand into reality. This reality has been broadening by join force of Samsung and Lenovo.  With people accepting tablet as one of the must to have when laying down at sofa and looking for information from web. Buying things by go through e-commerce’s site.

Tim Cook used to say: “I truly believe, and many others in the company believe, that there will come a day that the tablet market in units is larger than the PC market.”

Yeah right, so you need to design and develop your web for mobile and tablet friendly as well. So, I can say if you want to go into further understanding on getting things done, I can say you need a better understanding of all the new capabilities this new mobile platform offers: Location awareness, motion sensitivity, and even varying aspect ratios. This allows me to introduce you HTML5 which currently have fulfilled every single needs for mobile and tablet web development.

One of the obvious differences between mobile web and normal web is touchscreen! With touch screen, you can tap, point, flip, tilt, swipe and so on more. However, with HTML5 come alive with some of the javascript standard, it make website look alike native apps. I am not going to cover javascript part on this post, I am going to cover how to make different CSS style sheet for different type of screen resolutions, probably for iPad and iPhone. 

Here are the links to the two style sheets for the iPad:

<link href="css/ipadPortrait.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)">

<link href="css/ipadLanscape.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)">

Here are the links to the two style sheets for the iPhone:

<link href="css/iphonePortrait.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)">

<link href="css/iphoneLanscape.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)">

This will allow you to have a different css for different type of tablet and mobile device.I know this is difficult, I will continue to do some research and come out with more information on how to design your web for mobile and tablet friendly.  

Using multiple style sheets to create designs targeted to specific devices is relatively simple when compared with the more advanced programming required if you want to do device detection on the server and send completely different HTML files to different devices.  That will be more on creating one using PHP or some server side programming language. 

Posted in: HTML5, mobile Web