1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Compatibility with Mobile HTMl browsers

Discussion in 'HTML & Website Design' started by varun8211, Dec 20, 2006.

  1. #1
    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 ?
     
    varun8211, Dec 20, 2006 IP
  2. Pietercornelis

    Pietercornelis Guest

    Messages:
    631
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Pietercornelis, Dec 20, 2006 IP
  3. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #3
    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
     
    hans, Dec 21, 2006 IP
  4. varun8211

    varun8211 Peon

    Messages:
    483
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    And where can I test the mobile compability on PC ? any virtual mobile device browser to see how will my page look on mobile ?
     
    varun8211, Dec 24, 2006 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    There are a few. Let me go through my bookmarks and pull them up for you, ok?
     
    Dan Schulz, Dec 24, 2006 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    Dan Schulz, Dec 24, 2006 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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
     
    Dan Schulz, Dec 24, 2006 IP
    varun8211 likes this.