I don't own a smartphone or any "handheld" device, so testing has been down to the online simulators and periodically asking a friend with an iPhone to view the site.
I was in a similar position a few months ago. The nearest thing to a smart phone I had access to was the experimental browser on a Kindle. That has 600x800 screen, which is too big to represent the smaller screens still in use on the web. I really need a device with a 320x480 screen, and ideally a 320x240 screen, as I'd decided that was the smallest I was going to design for. So over a couple of months I've bought a cheap clone (looks like a BlackBerry but is actually a Symbian device with a 320x240 screen) for £60 or so, and a second-hand A5000 Android clone (with a 320x480 screen) for £50 - new ones are available for £80 or so. So you don't have to pay mega bucks. Both can surf the web via Wifi without a sim card. So they are ideal for testing purposes, with no nasty bills!!!
Having been able to see my sites on actual devices, I think that at least having a 320x480 Android phone is essential, if you want to learn what works and what doesn't. Not just technically, but visually as well. By the way, I still think emulators, like my EW Emulator, can be useful for routine testing, but they are no substitute for the real thing.
- Reducing image sizes or display:none to eliminate them via media queries works ok as long as you aren't worried about the bandwidth of the full size versions being downloaded anyway even though they aren't displayed. Do you have a solution for this?
Scaling larger images for use on low-bandwidth devices is a no-no. Ideally you need to use separate images and select which to download according to the media/screen. However, I've not found a solution yet for IE8 (and earlier) which will try to display BOTH, making a right mess of the page. That's work in progress. However, I'd have thought that if display is set to none, the images would not be downloaded? Hmm, have to think of a way to test that. If it is a problem, I'll look to use PHP to avoid the images being downloaded. Indeed PHP might be the solution to the IE8 issue as well!!!
- Perhaps the "screen" and "handheld" style sheets is something I need to focus on, but it was my understanding that they are very loosely implemented among mobile clients, some of which respond to being "screen" even though they have a small size. So I've avoided that route, thinking of it as a legacy implementation. Am I wrong?
- You describe using "screen" and "handheld" classes above, can you tell me how they get set per browser
Quite right. The Symbian phone is media type "handheld" but the Android one is "screen". So that alone is little help. But it can be used with a test for the screen size. See below...
, I'm not clear? Is it within a stylesheet reference like:
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld">
...in which case, see my above bullet - I've been thinking of that technique as legacy, less and less functional as new mobile devices come out.
I set up 4 css files:
1. style.css - the traditional style sheet for all devices.
2. screen.css - for screens.
3. handheld.css - for handheld devices.
4. print.css - for printers (in case users want to "print" a web page (preferably to a PDF file rather than paper).
screen.css contains only:
handheld.css contains only:
print.css contains only:
The link to call the different css files goes in the <head> section of the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" media="all" title="styles" type="text/css">
<link href="print.css" rel="stylesheet" media="print" title="styles" type="text/css">
<link href="handheld.css" rel="stylesheet" media="handheld" title="styles" type="text/css">
<link href="handheld.css" rel="stylesheet" media="screen and (max-width:639px)" title="styles" type="text/css">
<link href="screen.css" rel="stylesheet" media="screen and (min-width:640px)" title="styles" type="text/css">
Note the "and (max-width:639px)" and "and (min-width:640px)". These allow "screen" devices with low res displays to be treated as "handheld". So you can, in principle, direct output to:
- all devices (default).
- screen only (class="screen").
- screen and handheld (class="noprint").
- screen and printer (class="nohandheld").
- handheld only (class="handheld").
- handheld and printer (class="noscreen").
- printer only (class="print").
This works in HTML4 / CSS2. I have not tried HTML5 / CSS3. The problem, as I've said, is that IE8 (and earlier) blithely ignores all this. So, at present I'm only using this to suppress specific output to handheld (and low res screens), and printers, not to put different output to these devices.