1st mobile site

Question

I'm embarking on my first mobile site. Its a simple one and should be easy enough but I do have some questions:

Please answer any or all q's you can!

1) How do I tell the site to serve the "styles_mobile.css" sheet to mobile traffic? Is there a most commonly used piece of code for this?

2) I have an index page and am creating a new mobile one: "/index_mobile.htm" is that "wrong". Should the mobile page be it's own entity (e.g. /mobile.htm) or based of the existing index page? How do I redirect it? How do I create the address "m.mywebsiteaddress.com"

3) Currently I am making edits on my laptop and then to see what they look like am having to upload them to my ISP to see the effects of my edits on my iphone - how do I do this straight from my Mac?

4) s there a standard structure wrt html elements? E.g. a standard doc has html, head and body elements. HTML5 now has header, nav and footer elements - are there any mobi specific ones I should be aware off?

That's all for now but I can see myself adding to this over the next few days. Any pointers or ad hoc advice welcome

Answer 1

My experience with mobile is that you need to think about it as being a different site altogether. Different html, different css, different js. Many implementations i've seen just tag this to the address m.site.com or just www.site.com/m/. The key element is to think about them separately.

About your questions:

1. There various frameworks that help discriminate traffic depending on the device. The trick is to check for the user agent sent by the browser to do the discrimination. Depending on the user agent you would send traffic to each of the two sites you've created. Spring has some basic functionality to do this spring-mobile.

2. This goes back to the first part of my answer. I usually create a directory called /m containing the html, css, and js under it. You can use an http redirect, based on the user agent, to send the traffic to each site. As for creating the m.site.com, it depends on what you have setup and wether you can create subdomains.

3. You can publish directly on your mac, depending on what software you are using. In your mac you can go to system preferences/sharing and enable web sharing. This will actually activate an apache server in your mac. If you put your files in /Users/yourid/Sites/project you can then access that by hitting http://yourlocalip/~yourid/project. I'm doing this by memory so I might be off here or there.

4. I would suggest you take a look at jquery + jquerymobile for your mobile site. It will take away a lot of grief in the process.