Designing for mobile and desktop?

Mobile
1

I’ve seen a couple of articles on this, but I wanted to see if anyone here had any good resources on how to design a desktop site, with mobile in mind. Design techniques, and programming. Any suggestions?

2

I am not sure what you mean by desktop site with mobile in mind.

3

Basically a flexible layout that can accommodate many different screen sizes, instead of sending everyone on a mobile to a different site.

4

Oh ok. I understand. Well, there are a few things you can do.

You can either use a Mobile sniffer to detect if the user is on mobile and if so load a different style sheet.

Or you can just stick to a very simple layout that is fluid that can be squeezed down to about 160px wide. The biggest problem is the images your site uses, as on a mobile device you want to limit this as much as possible.

So you will need a different set of images, so it might be easier to use the alternate style sheet

5

I think the most efficient way of doing with mobile will be creating the different site for mobile. it doesn’t mean that you have to do all different.

detect wither it is mobile devices or not then assign respective css and js files and use server site script to change image to fit in mobile devices.

6

…and use server site script to change image to fit in mobile devices.
Are you talking about resizing on-the-fly or loading separate images for the smaller screens? Designing entirely with css an no tables present whatsoever?

I developed a couple of .mobi’s that started to take off traffic-wise, then simply waned. One is a major city site.

For these dual purpose pages (desktop display/mobile display) I’m wondering how the mobile css version would even work, given the natural wide format of most typical .com sites. Which is one reason I was sold on .mobi’s
Unless the desktop version stretches to total width without having a separate background. Also, say you have 8 or 10 nav bar links like the top of this page – how would that be converted by css for mobile unless a big compromise is made?

7

http://www.quirksmode.org/js/detect.html

check this out this can be easy way out with some simple javascript modification
or you can try WURFL http://wurfl.sourceforge.net/ which is more dedicated.