what are the rules for making mobile friendly website?

Question

I would like to add value to my website that I have developed at the moment so that user can check on their mobile phone.

My questions:

1. Should I make different template for mobile version and full version one? Like creating mobile.example.com for mobile version?

2. Does Opera Mini not support JavaScript? I have a mobile phone that has Opera Mini, it seems that JavaScript was not running. Do all Opera Mini not have JavaScript on it?

3. Does Opera Mini support full W3C standard HTML and CSS? Or do they have a different one?

4. Is there any emulator to view or test website in different mobile phones? For example: Iphone browser, Blackberry browser, WAP and Opera Mini.

Thank you!!!

Answer 1

1. It's up to you whether you want to make two different websites for mobile and non-mobile devices. However, if you do so, make sure to have a link from the mobile site to the full site to enable users to switch to it.
2. Opera Mini does support Javascript which certain restrictions (eg. on asynchronous operations). Be aware that Opera Mini uses a proxy based approach and the JS is executed on Opera's servers which imposes certain restrictions. Plugins like Adobe Flash are not supported.
3. Basically, Opera Mini supports the same standards as Opera Desktop since they share the same rendering engine (Opera Presto). However, due to device restrictions, some features like CSS rounded corners are not available in Mini. See Opera Mini 5 standards support for more information, but know that meanwhile Opera Mini uses Opera Presto 2.4, the rendering engine used in Opera Desktop 10.53.
4. For testing websites in Opera Mini, try MicroEmulator which is Open Source and comes with a resizable skin that allows you to emulate different screen sizes.

Hope that helps :)

Answer 2

Some websites offer an automatic conversion of your existing website. This converted, mobile friendly website can either be hosted at a new domain, or a "mask" can be applied over your existing site. Check out www.webtosmartphone.com, which easily converts basic websites automatically; a quick line of code and your website will be automatically resized and viewable in the most popular smart phones. If it is not converted automatically, you can request for a custom conversion.

Answer 3

1. You should most definitely adapt your output for mobile devices when the content is accessed via a mobile device. Whether you will do it by separating the mobile presentation on a subdomain or a special folder or not is totally irrelevant.

2. / 3. Mobile is way more than just Opera Mini. Various mobile device browsers support various degrees of rich content (JavaScript, CSS etc.) You should look into detecting what features are supported by the visitors browser/device and serve the appropriately rich/"poor" content. You should take a look at WURFL and Device Atlas which are two main databases of mobile device useragents which allow you to serve only the content that the useragent can consume.

3. There are many emulators out there, some better and some worse, that emulate various mobile device browsers. Off the top of my head, the two I've used are Yo Space SmartPhone Emulator (website broken atm) and Mobi TLD's emulator. There are also vendor specific (Nokia, SE) developer tools you should be able to find that emulate the vendor's devices.

Answer 4

Cascading Style Sheets (CSS) are the way to accomplish this. It does mean that you will need to review your site's use of HTML tables, and convert into a CSS based design.

The CSS Zen Garden is an excellent resource for showing what is possible.

A resource to convert your current site into a mobile device friendly format is Skweezer.com. Simply enter your website's URL, and it will display your website in a mobile-friendly version by removing large images, CSS styles and page elements that will not display properly. You can use this as a template, or starting point, for making a mobile CSS profile for the site. To provide an alternative CSS stylesheet for users with mobile devices, insert the following code in the head of an HTML document:

<link href="/css/global.css" rel="stylesheet" type="text/css" media="handheld" />

Ref.