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

The previous two answers were good, but I don't wholly agree with them. They are too complicated.

1. Use CSS media queries to style your content differently for different screen widths and/or orientations.
2. Don't bother. For maintainability, you should just create one site which is styled differently with media queries.
3. Again, media queries. Instead of using (max-device-width: 480px) for mobiles, you could use (max-width) and develop/debug directly in the browser. Otherwise, if you're on OS X, the iOS Simulator that comes with Xcode works nicely (includes iPads too!)
4. No. It's just a webpage as normal.

As a side note, I don't think you should take the advice of loading in another stylesheet for mobile devices. Loading another stylesheet means one extra HTTP request. You can keep all of your media query styles in your main stylesheet.

Answer 2

To use media queries inside your "regular" stylesheet (i.e. desktop stylesheet), do the following:

/* desktop */
body { background: #FFFFFF; }
header { width: 100%; }

/* queries for devices with a max viewing area of 480px */
@media only screen and (max-width: 480px) {
  body { background: #444444; }
}

The above CSS can be tested in a desktop browser. For instance, put the styles above into a style tag and view the page in a browser in a width greater than 480px (a maximized window will do). Then, resize the window width until you see the background change into a dark color (which will happen once the window width is less than 480px).

Answer 3

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?

You can use link stylesheets that have media queries in them:

<link rel="stylesheet" media="only screen and (max-width: 480px)" href="mobile.css">

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"

The other option is to serve one page (index.html) and just start stacking floated elements on top of one another as the viewing area shrinks. View http://www.html5rocks.com/en/ in both your desktop and on your phone. Or, if your phone is not near you at the moment, simply resize your browser and watch as the site starts getting rid of multiple columns and creates a one-column view. They are only serving one file (i.e. index.html) and not redirecting mobile users to a mobile page (i.e. mobile.html).

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?

Install Apache Server on your Mac, do a port forward on the proper ports (ports 80 and 8080 IIRC), and you'll be able to view the pages on your phone without having to constantly upload the files to an ISP. The URL will be (http://xx.xxx.xx.xx) or something similar to it.

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?

No, mobile browsers render the same HTML tags as desktop browsers. The one thing you should consider doing is using the HTML5 doctype (which mobile browsers support) because I've had a LOT of trouble getting "mobified" websites using XHTML or HTML4 doctypes to look OK in mobile browsers even when using the viewport meta tag as the sites would look extremely zoomed out.

Here's by far the best resource I've stumbled upon in regards to mobile web development.

http://www.html5rocks.com/en/mobile/mobifying/

Answer 4

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.