What extra do I have to do in my HTML/PHP coding to display my webpage on mobile browsers?? Is it possible to display website on mobile w/o coding it for WAP ?
It depends on what kind of mobile phone. Windows Mobile shows internetsites very good on my mobile, although flash and javascript are not very good supported. Furthermore, CSS div's are not shown next to each other, but the top left first, and the bottom right last.
modern smartphones such as all nokia types usually have high quality browsers based on Symbian OS. already 2003/4 I used a Nokia 3650 for testing and that time the built in browser had full support for clean HTML4.01 and XHTML 1.x as well as for CSS2. there was nothing at all I needed to change since by default I pay great attention to have fully w3.org validated pages for HTML and CSS. I also used by then a mobile version of opera 7.x with full support of javascript hence the single most important factor for WAP compatible pages is to have clean validated code of one of a.m. versions. same applies for PHP as long as it creates clean a.m. HTML pages
And where can I test the mobile compability on PC ? any virtual mobile device browser to see how will my page look on mobile ?
Here they are: Nokia: http://www.forum.nokia.com/info/sw....a36d11/Nokia_Mobile_Internet_Toolkit_4.1.html OpenWave: http://developer.openwave.com/dvl/tools_and_sdk/phone_simulator/index.htm
You can also use Opera's small screen view and even the Web Developer Toolbar extension for FireFox to simulate small and mobile devices. I'm gong to pull up (and copy/paste) a post I wrote on SitePoint about mobile devices and (X)HTML/CSS support for you as well.
And here it is (copied in its entirety from this thread on SitePoint): *** *** *** You may want to read this thread before doing anything else: http://www.sitepoint.com/forums/showthread.php?t=431774 Basically, mobile technology is in a state of transition. Older handheld units cannot (and I mean this literally) understand HTML, much less CSS, and depend on a wireless content specification called WML (Wireless Markup Language), which is served over the Wireless Application Protocol (WAP). Newer devices can handle HTML fine, but the CSS support varies wildly. As far as actual real estate goes, you're pretty much looking at anything (the following are in pixels) from 128x128 to 240x320. WML and the WAP are being abandoned by the Open Mobile Alliance, which is working in conjunction with the W3C Device Independence Working Group to promote access to a "unified Web from any device in any context by anyone." I'm not going to go into WAP and WML, but I am going to touch up on HTML and CSS a bit, since it will eventually be supported by just about everything, and it will also (in the meantime) help improve your existing HTML/CSS strategies for the "traditional browser" audience. Write clean, semantic, and valid HTML. A proper document structure is going to be essential. If something is a header, mark it up as a header. If it is a paragraph, mark it up as a paragraph. If it's a list, use a list (if it's a list of links, then use an unordered list of links - like you would for a navigation menu). Use the HTML code that was designed for the job. Also, keep your HTML code as small as possible. <div class="header"> <div id="header1"> <p>Level One Header</p> </div> </div> Code (markup): is just down-right atrocious. Not only is it not semantic, but your mobile users will be paying to download that. <div class="header"> <div id="header1"> <h1>Level One Header</h1> </div> </div> Code (markup): Ok, now we're getting somewhere. But we still have a ways to go. We don't need that second DIV in there (and arguably the first). <h1>Level One Header</h1> Code (markup): This (above) is the ideal solution. However, what if you want a tag line to be associated with the header? <div id="header"> <h1>Level One Header</h1> <p>Tag Line - Our site is the leader in...</p> </div> Code (markup): would be appropriate. Not only is it semantic (and valid) markup, but it's less bytes that has to be transferred (and processed) from the server (and to the mobile browser). Your mobile users will thank you (since they won't have to pay as much). Another thing to do is to avoid using actual HTML images as much as possible. If you do, try to keep them small. You can use CSS (and the IMG element as an anchor) to replace the default HTML image with a CSS background as necessary for regular and handheld devices. Where would the CSS go? In its own stylesheet, of course (remove the space and forward slash from the end of the tag if using HTML 4 - you only need them if using XHTML). <link rel="stylesheet" type="text/css" href="/styles/handheld.css" media="handheld" /> Code (markup): Here's a list of mobile browser (and their vendors) for you. Their sites change regularly, so I won't list the exact pages to get the emulators (if they even offer them). I'll leave that up to you: Opera (Opera Software) - www.opera.com NetFront (Access Systems) - www.access-company.com/ Nokia (Nokia) - http://forum.nokia.com Openwave Mobile Browser (Openwave) - www.openwave.com Pocket Internet Explorer (Microsoft) - www.microsoft.com Picsel (Picsel Technologies) - www.picsel.com Here's a list of mobile device manufacturers as well: Forum Nokia - http://forum.nokia.com (wow, haven't we seen this link already?) Ericsson Mobility World - www.ericsson.com/mobilityworld BlackBerry Developer pages - www.blackbery.com/developers And as an extra treat, I'm going to include Microsoft's MSN TV (formerly WebTV) in the mix as well. With a scant screen size of 544x372 pixels, it's one of the hardest to design to. Fortunately it remains just barely a blip on the overall usage radar, but it still has millions of users (I personally know one). You can get the emulator for MSN TV at http://developer.msntv.com/TOOLS/msntvvwr.asp