Mobile Website Design

[amberbam]

Hi there,
I am creating a mobile landing page for www.selectyourtickets.com. The idea is to create a simple home page for mobile devices which will then be linked to evenue, a different server which deals with all of the 'ticket buying traffic'. So I was going to just create a simple HTML page. I, maybe naively, thought that I could just create graphics at mobile size dimensions (I used 230 px wide), center them in the page, and when you go to the page on your mobile the screen will just snug up to the graphics. I tested one and instead, the graphics were very small and in the top left corner.

Soo, I guess you could say I could use some pointers on designing a mobile site. I use dreamweaver, and just noticed the XHTML Mobile 1.0 Doctype option, so I assume that would be the right option when creating a new doc. But is html the way to go? I've seen mobile sites with a .asp at the end, but I am not familiar with that at all. Thanks so much.

Amber

[xhtmlcoder]

The file extension is completely irrelevant you could have one with a .kangaroo extension and it would work if you setup the server correctly. All it probably indicates is, its more likely to be using a server-side script than a static page. Even so I create PHP pages and give them *.htm extension occasionally.

XHTML Basic 1.1 superseded the XHTML-MP and (because MP was a poorly designed and implemented). Though nowadays a lot of these new generation mobile devices have better processing power and can handle standard XHTML 1.x family pages much better.

[amberbam]

Gotcha.

Can anyone help me with this: I want to make it so that the content scales to fit whatever screen is viewing it. I used this code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

which I found on several different websites, but it doesn't seem to accomplish what I want. I can only test on my iPhone so I have been creating graphics too wide for my iPhone and then testing them and there is a bunch of side scrolling that I have to do to see the whole graphic.

EDIT: or is this code simply so that zooming is disabled? Is it possible for graphics to be resized to screen size?

Thanks,
Amber

[Paul O'B]

Gotcha.

Can anyone help me with this: I want to make it so that the content scales to fit whatever screen is viewing it. I used this code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

If your image was 320px wide then it would fit exactly.

If your image is between 320px and 980px the you probably just need this:

 <meta name="viewport" content="width=device-width" />

Initial scale = 1.0 basically means no scaling and then you would need to scroll to see elements bigger than the device's viewport.

You can find a run down here.

[amberbam]

Thanks for the reply Paul. You say that if my image is 320 px then it would fit. I know this is true for my iPhone, but what about the smaller devices? Thanks for the link!
Amber

[Paul O'B]

Well the smaller devices won't scale the image you'd need to set up media queries for the smaller resolutions and supply a smaller image to fit assuming that the device understands media queries.

There's a useful article here and here that explains how to use media queries.

[amberbam]

Thanks!