CSS for mobile sites

I wouldn’t mind designing in px for mobile users. At least the screensize for them wouldn’t vary and they’d be using the same 1-2 browsers (maybe 3 but I can’t think of a third one).

Huh, I just stumbled on something that maybe all of you knew, but I certainly didn’t. In Opera, if you reduce the width of the browser window down to around about 100-150px, it seems to jump to its mobile browser format, allowing you to see what the site looks like on a handheld device. Very handy. Does anyone know what % of mobile phones use Opera for browsing?

Oh Opera? I have no [url=http://www.opera.com/mobile/]idea :stuck_out_tongue:.

PS: I didn’t know that-interesting.

PS#2: Nice to see you on here Aarem.

In Opera go to View > Small Screen. (You can thank me later.) :slight_smile:

PS: http://marketshare.hitslink.com/report.aspx?qprid=0&qpmr=15&qpdt=1&qpct=3&qpcal=1&qptimeframe=Q&qpsp=40

This contains Opera Mini’s browser market share (in comparison against desktop browsers).

Thanks! View > Small screen is even easier, and the link to the browser stats is useful (and an eye-opener). I’m amazed at that spread of market share. Is Opera really such a small chunk of the pie? I’m also surprised that Chrome has so little share…


@RyanReese: I’ve been busy lately, but I do prowl this forum a lot, even if I don’t post. There are too many great posts, so not much point in me jumping in!

Unfortunately yes Opera does have a small market share; it seems to be the niece browser which has always stood in someone else’s shadow. But it remains a firm innovator, standards advocate and recognised mobile device leader so I guess all in all it isn’t too bad. As for chrome, you have to remember people don’t often switch web browsers (on a permanent basis), people get used to things and like to keep them how they are. Chrome is still extremely early in development and has not been around long enough to get a large following. After all Firefox only really gained huge public appeal by the second version which occurred way after Netscape Navigator fell and Mozilla suite was created.

marketshare.hitslink.com has a separate section for mobile phone browsers, here is the link:

From the above discussion I figured out that its better to use EM for fonts and PX for padding (if padding is really required).

I have some more questions:

  • whats the ideal font-size
  • whats the preferred font that is available in most of the browsers
  • which DTD to use (XHTML-MP or XHTML Basic)

It will be great if people can share what difficulties they have faced while coding for mobile browsers and how they have solved it.

Kiran Makam

Whoah! 77%… Go Safari! That figure amazes me. Does this have something to do with the iPhone?

What kind of browser(s) do Nokias etc mostly use?

http://mobiforge.com/ seems to have a lot of good info about designing for mobile, and http://ready.mobi/launch.jsp?locale=en_EN (as noted by escapedf above) is a good way to get instant advice on how to form a page better for mobile devices.

It has everything to do with the iPhone, before the iPhone browsing the web was a hassle and it was very limited, iPhone was one of the first true full screen graphical browsers for mobile devices and popularised browsing the web on mobile devices.

As for what browsers are used for mobile devices, check back on this thread (to post number 5) I list all of the major mobile browsers - Though I can’t give you general information such as what browser do Nokia’s use… It seems they swap web browsers between models all the time (all the major mobile phone companies do this). Check back earlier in the thread to the post I made and it lists the rendering engines to which the mobile market uses.

Thankx Alex. That’s great.

It is really informative thread about mobile application design/development.

Can some one suggest , how can we test mobile specific website locally [in localhost].

I think there would be some emulator to do this.

Can some one guide me in this regards.


In Opera you can emulate the mobile version (I believe). AlexDawson I think ahs already told us how to get into Operas mobile view.

I can’t get the link colour to work on OpenWave so I always make sure there is a light background behind the link or it is impossible to read the text properly

OpenWave is a very old platform with limited support, you should be prepared that there are limits to how your website will look on a mobile device.

dr_dumb99, emulators for mobile devices are ineffective and obsoleted by the very issue that the majority of mobile devices use their own independant browser, so unless you want to buy up one of every model phone and test using the various thousand or so platforms, you may as well just stick to the big ones… Opera Mini, Safari (iPhone), OpenWave and perhaps the likes of Fennec. :slight_smile:

If you have a stylesheet for handheld devices you may also want to include a link to it for small screens on the desktop too. I’ve seen simliar things done with javascript i.e. ‘McSwitchy layout’ but this seems much neater.

<link rel="stylesheet" href="css/minimum.css" type="text/css" media="handheld, [B]screen and (max-width: 481px)[/B]" />

You can see this in action with the new w3c redesign.

markbrown4, that’ll work for a few devices but not all of them. What about the mobile devices which ignore CSS3 media types (the max-width hook) and handheld. Most devices in popular use ignore the handheld stylesheet entirely and just rely on “screen” (the same as conventional PC’s use). Your method would have some effect, but it’s not an entirely usable one and it certainly doesn’t have widespread support on handheld devices whatsoever. :slight_smile:

What about javascript to detect screen resolution? Is it a reliable method to “switch” to a mobile CSS?

You misread my comment - It wasn’t directed at handheld devices. I was saying that where you have gone to the effort of creating a small res stylesheet you could also include it for desktop browsers.

Agreed, it can also be useful to make your own design more flexible. What I have started doing is using max-width in percentages (to prevent a liquid website overflowing) and using the CSS3 to collapse the design into something simpler if it falls below a certain width (with min-width to prevent the collapse dropping below a ratio)… it’s the ultimate liquid methodology and in my opinion a much better option than simply using percentage widths alone. :slight_smile:

I’ve been doing a fair amount of reading on mobile web recently and there are so many different suggestions for how to manage mobile traffic, especially now with all the newest phones coming with capable browser software and javascript support.

Currently for a test site im using a .htaccess file to direct iphone, blackberry and palm users to a m/ subdirectory and use jqtouch to make a nice little iphone friendly version of the site ala www.dominos.co.uk (I have yet to test the blackberry / palm devices to see if they can handle jqtouch).

If the user is not on any of those devices then they are sent to the “web” version of the site where i plan to implement a handheld stylesheet.

The problem is that a lot of the older phones will still only view the full web version so I guess my point is should we be putting in so much work making sure all mobile devices can view our sites or should we cut our losses and make the best experiance we can for the more able handheld devices while not worrying too much about devices that use old browser software that doesnt support even basic css / javascript etc?

Also what methods do you guys use for mobile detection?