Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you want to support older browsers, then you should have multiple sites. But take a look at mobile browser stats first to decide if it's worth it. If you just want to make your existing website work for iPhone/Android or other phones with A-grade browsers, then you can customize with a mobile friendly CSS (for small screens). But to get good performance on mobile devices on slow/unreliable connections, you probably need to have a separate stripped down html.</p> <p>Apple has a very good guide to help you optimize your site for iPhone. Most of it will also work on modern mobile browsers: <a href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html" rel="nofollow noreferrer">http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html</a></p> <p>Peter Paul Koch has done an excellent research on different mobile browsers. He has several articles, but this one is a good start: <a href="http://www.quirksmode.org/mobile/browsers.html" rel="nofollow noreferrer">http://www.quirksmode.org/mobile/browsers.html</a></p> <p>Like Nate Bross mentioned, you should optimize for touch devices. Unfortunately it's very difficult to know if a device has touch or not, since there is no media query for it. You can do user agent sniffing for some devices, but I don't recommend it. More discussion here: <a href="https://stackoverflow.com/questions/2607248/optimize-website-for-touch-devices">Optimize website for touch devices</a></p> <p>For the moment, I detect touch events (with an exception for Chrome). If this returns true, I inject a touch CSS. A bit nasty, but the other options are worse:</p> <pre><code>function() { if( /Chrome/i.test(navigator.userAgent) ) { return false; } try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } </code></pre> <p>You specifically asked for sites for mobile web browsers, but you might also check out the possibilities of creating a mobile web app. It looks like an iPhone app (or Android for that matter), but it's built with the help of HTML5. You can do pretty slick animations with the CSS3 in the webkit image, and iPhone also has meta tags to hide the Safari navigation toolbars. Users can then bookmark your page to their home screen, and it will work just like a normal iPhone app. Of course you're limited to the browser and it's performance. But you can create multiplatform apps :) HTML5 + JS is the only multi-mobile-platform language Steve Jobs approves, and with the help of PhoneGap you can even get it into the AppStore! If web-app sounds interesting you should check out <a href="http://jqtouch.com/" rel="nofollow noreferrer">jQTouch</a>, <a href="http://www.azarask.in/blog/post/animation-css-transitions-jquery-easy/" rel="nofollow noreferrer">jQuery CSS Transition plugin</a> and of course <a href="http://oreilly.com/catalog/9780596805784/" rel="nofollow noreferrer">Building iPhone apps with HTML, CSS and JavaScript</a> by Jonathan Stark.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload