Jump to content

developing a mobile web app for the iPhone and Android phones


skaterdav85
 Share

Recommended Posts

I'm new to developing web apps for mobile devices. Recently I have been tasked to create a simple site based off a Photoshop composition for the iPhone (Safari) and Android phones (Browser and Opera Mini). For those of you who have developed a mobile based site, are there any special considerations I need to take regarding the DOCTYPE, JavaScript limitations, or performance? Or is it pretty similar as to developing a regular desktop web app (disregarding usability since someone else has come up with the design for me)?

Link to comment
Share on other sites

I haven't made mobile sites myself, but from I see in compatability tables, blog posts and other stuff... you're entering a world of pain.Performance - everything you know from desktop is true on mobile too, but is more noticeable, so every optimization technique you know - use it.DOCTYPE related stuff - AFAIK, it has no effect. They're in permanent "trying to be standards" mode.JavaScript limitations - event related issues, due to the touch interface. Other than that, iPhone and Android's default WebKits are good. The same can't be said for other phones, so do hope it's only those two that remain in the equasion.CSS related issues - that's where the world of pain is... different browsers implement various non standard techniques in order to make web sites tailed for desktop to appear fine, but that ends up creating a lot of complications. iPhone and Android are no exceptions. Expect A LOT of bugs there... about ~90% of the problems of mobile browsers I read about are CSS related.One of the best compatability tables yet - QuirksMode's one.

Link to comment
Share on other sites

It will probably help you to use a library designed for touchscreens. Here's one example:http://www.sencha.com/products/touch/The documentation for that library is good:http://dev.sencha.com/deploy/touch/docs/?class=Ext.ButtonIf you scroll down on the button class, you'll see events for things like tap, orientationchange, etc that apply to Android or IOS devices.

Link to comment
Share on other sites

I just found another resource on DOCTYPES for mobile devices: http://developer.android.com/guide/webapps...-practices.htmlAccording to the link, it says most mobile web sites use XHTML Basic 1.1. Can you use HTML5 tags if you provide this DOCTYPE?

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"	"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

Also, I've never put the xml declaration above the DOCTYPE before in my desktop web apps. What is that and is it necessary?

Link to comment
Share on other sites

I just found another resource on DOCTYPES for mobile devices: http://developer.android.com/guide/webapps...-practices.htmlAccording to the link, it says most mobile web sites use XHTML Basic 1.1. Can you use HTML5 tags if you provide this DOCTYPE?
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"	"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

Also, I've never put the xml declaration above the DOCTYPE before in my desktop web apps. What is that and is it necessary?

That's actually a "best practice", not necesarily what most sites use.No, this DTD doesn't make it valid for you to use HTML5 elements. It's an XHTML specific DTD - i.e. the document should be served with the XHTML MIME type.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...