Mobile Site Design with CSS

Hi,

I added a mobile style sheet to UnitCoins.us.
Could you please check if the home page displays correctly on your phone

Thanks

Hi,

I don’t have an iphone to check but on the mac iphone emulator your layout is about 160px wide and tiny because you have set it to 50% width for mobile which is worse than it would have been had you left it alone. You really need it at 100% width and then set the device not to scale with a meta tag.


<meta name="viewport" content="width=device-width; initial-scale=1.0">

You should think about not floating the leftnav and letting it stretch full width with the content flowing underneath in a fluid container also. Try to arrange content better for smaller devices as in this old example.

Or re-think the process completely.

Paul…thanks for your feedback.
I tried using phpmobilizer - Convert any website to a mobile site. - Google Project Hosting.
When I view m.unitcoins.us in a mobile emulator it seems to display correctly even though it’s a stripped down version of the main site.

I may go with this solution if my client approves.

I had a look at m.unitcoins on the iphone emulator and it is usable but seems just to be mainly a version without a stylesheet attached.

Nothing wrong with that I suppose as its easier to use on a mobile than the normal version but of course lacks any style.

Seems like an easy solution though.

Paul…thanks for replying. Ideally I’d like to learn how to create a mobile site using CSS if it works across most mobile phones. I can then offer this service to web design clients.

Do you have a good resource to start?

Thank you

The link that is often bandied about is this one and answers a lot of questions (see the slideshow). The basics are that you design for the least capable first and then enhance for better browsers. Lower browsers and mobiles get a fluid with simple site that fits all sizes and then with media queries you enhance the experience for everybody else (and CCs for IE).

Ok thanks