Device specific stylesheet

HTML & CSS
1

It seems like there’s lots of people straying from the ‘write once deploy everywhere’ mantra of web standards.

More sites are being written with customised HTML and stylesheets for:

  • mobile phones (crumby ones, mobile safari/opera)
  • iPad
  • Desktop

2 examples are http://www.gmail.com/ and http://m.theage.com.au/
It appears that the userAgent checking is done server side - you can test it out in firefox by adding the following to about:config
general.useragent.override Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

Is the the future to write a different front-end for each major device on the market?

2

Well said Stevie, I agree.

3

Yes, I was meaning ‘lots’ more than the handful that existed previously before the iPhone/iPad. it’s still a small number compared to all the content on the web.

It seems like a shift in web design to me, the ‘write once deploy everywhere’ philosophy just doesn’t seem as valid any more.

Yes, screen resolution is one thing - but touch screen is one of the bigger issues (drag / drop) - and even because of the success of the iPhone OS certain design elements are quicky becoming defacto standards like large clickable areas and lists with arrows to the right.

It’s seeming likely to me that all the major web applications with the resource to do so will look at device optimised content. it will be interesting to see how http://www.w3.org/standards/webofdevices/ responds to it.

4

I tend to the view that, particularly for large sites like Facebook and GMail that have plenty of resources available, there is a good reason for offering mobile versions of their sites. The bytage on these sites is usually huge, seeing as how they are riddled with trilobytes of images, Javascript and general bloat. A mobile user doesn’t want to be downloading all that - it might be OK if you’re on 3G but most mobile users aren’t going to benefit from that, at least not all the time - I know that a page that loads instantly on my PC takes a noticeable time to download on my phone. Large images and pages requiring lots of width are going to be horrible on a mobile, and the interaction process is quite different.

In principle, design-once is a great mantra to have (and is one that I have on my sites), but in the world of hi-tech, high volume sites, there are definite advantages to offering an alternative site specifically for mobile users.

5

I recently undertook a huge study of mobile sites for a very well known site and the methods they use are pretty broad. There are basically two types of argument…

  1. CSS3 Media Queries - these are amazing if you have a lightweight site as you can scale the surface area of the design to match whatever is available to the end user. If you have a small portfolio or if your site isn’t particularly “content heavy” it’s the best way to go as you can avoid the need to redirect users or have invasive and buggy UA scripts. This is probably what we can look to for the future (if the HTTP header spec is made better).

  2. Redirection - most of the top sites will redirect using JavaScript or PHP/ASP examinations of the UA string. It will normally be to one of the major subdomain conventions (there’s about 10) such as m. / mobile. / 3g. (something else). The real justification for this kind of method is if your site is particularly content heavy. You can justify the change as you can reproduce the layout, the content, the images and media so their scaled for the smaller region. Examples include less content per page to reduce scrolling, smaller images (as small screen won’t get much value of a 2000x2000PX image), compressed media (for smaller resolutions). You’ll get bandwidth savings, faster pages, less cap and cost issues for users - as you can see, there is a lot of justification for this.

The need for making separate sites WILL be an important consideration for the future, but I suspect that it will be less about moronic redirections (which people still think is a smart idea and throw logic out of the window) and more about CSS3 style enhancement in which you detect what the device is capable of, and from that you serve the images, media, content and stuff that matches the experience. As it stands, we can’t really do this unless we require JavaScript being enabled (as HTTP headers don’t provide resolution data - which would be helpful) so we have to stick with what we have. :slight_smile:

6

There’s a shop around here, bol.com (a pretty big one) and they redirect users to m.bol.com I assume by user-agent sniffing. I’m also not sure if they could do that entirely with CSS.

I have a page I’ve been trying out media queries and it is a shop, but it’s a simple shop and works nicely for those who understand the CSS3 versions of media queries. But sites with large dropdown menus, I dunno if I’d want to CSS that into huge boxes of lists or hide them entirely.

But sniffing user agents has always been iffy. Until recently, Facebook thought Konqueror Desktop browser was a mobile :confused:

7

Hi Mark,

It would be interesting to know what exact figures are but is seems some people are setting up specific mobile sites. I have had a few enquiries in this area recently and has never been mentioned before. I suppose the question is that can you expect a 1200px site to be usable on a 320px or smaller device?

There are some things you can do for modern devices with media queries etc and in the recent CSS3 Live course we had to build an Ipad looking interface that worked on different screen widths. My attempt managed 4 different screen sizes with the same content and html. Of course that only works for devices that understand it.

I think that if you are a large organisation with the resources to serve up specific content then that’s the way it’s likey to go. For smaller sites it’s probably a case of “the best you can do” with what you’ve already got.

8

True.

While I do start setting my larger images to display: none at sizes smaller than 400px or so, I’m actually not certain that mobile browsers don’t still send out a request for them (esp the ones who zoom). Though possibly <meta name=“viewport” content=“width=device-width” /> helps?

If anyone’s found an article discussing this, I’d love to read it.

9

Re media queries: apparently way too few phones even begin to support them. And, yeah, I discovered that display: none does NOT stop UAs from downloading the images.

THIS is AWESOME slideshow… I’ve already converted one of my templates over to this way of writing (basic CSS and then media queries for desktops) though I’m not a fan of 2 stylesheets for desktop… I tell myself one is really my “mobile/handheld” stylesheet.

Everyone should go through this slideshow it’s freaking rompecabezas man…

10

The content is often different in these mobile sites as people consume it differently - there’s also the other issues raised above around bandwidth and user experience that CSS alone can’t resolve.

11

OH I HAVE to chime in on this.

the mobile web is NOT the web. froman ERGONOMIC and Graphic design point of view it would be as foolish to try to attain the same design or employ the same layout strategies for a 480 x320 MAX screen as it is to try to lay out text in vertical columns ( as in print ) on a video screen.

CSS actually afford us teh chance to code the CONTENT once ( which is what I think was meant by “code once deploy everywhere”) Then the style can be adjusted as NEEDED… because that is the nature of style.

12

While quite a few phones do not yet support CSS3 media queries (in the bigger picture), it is true that those which do are the biggest platforms at the moment and thereby will have a greater number of users. As they degrade gracefully, I see no issue with using them to enhance a mobile orientated website. :slight_smile:

Supporting CSS3 MQ: iOS, Android, Blackberry (Some)
Not Supporting CSS3 MQ: Blackberry (Others), Symbian / Nokia, Win Mobile, Feature phones (custom)

13

Alex: so write your CSS the other way around, so it doesn’t matter if they support media queries. Progressive enhancement. (see end of slide, I’ve successfully done this once)

14

Except that then you’ll be serving the mobile version to about 60% of desktop users, seeing as IE6/7/8 don’t support media queries…

15

You don’t serve a mobile version, you serve a version that can work on mobile (generally very basic styles). Your desktop css adds to that.

I’m not done testing with mine, but I have one page/project which I tried to apply this idea.

The “main” css sheet deals with background colours, text, fonts, and watnot.
The “desktop” CSS builds on that by adding floats and things.

This should mean those only loading the “main” css sheet is NOT sending requests to the server for CSS background images such as used in image replacement!

IE reads them both, without the media query parts, and all IEs under 9 get what would be the full-width desktop experience (this means they DO get scrollbars if they are under the 990px width I’ve set). But, I am also making the assumption that IE is going to be used on a Desktop… I know this isn’t always true, but then, I tell myself, I normally don’t have any mobile stylesheet anyway. As this is an IE bug, other browsers on mobiles who don’t support media queries should do what IE does if I leave out the comma: not load the “desktop” css and ignore the entire line.

So instead of “handheld” and “mobile”, I have “basic” and “desktop”. So assuming I was going to support mobiles all along, I don’t have an “extra” stylesheet… I would have needed another one anyway (and if you saw how Simon Colllison’s site appears in various mobiles in the slides, you know that yes, you would have needed another stylesheet anyway… and then they may have been ignored by the phone! Arg).

This is what I have so far (and no, it’s not finished, it’s not cross-browser tested… very early stages):


    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" type="text/css" media="screen, projection, handheld" href="scooter.css">
    <link rel="stylesheet" type="text/css" media="screen, projection and (min-width: 600px)" href="desktop.css">

I’m not using “all” because when I do print sheets, I like to start from 0, not negate everything stated in the screen stylesheets. Too much work.

All browsers, and mobiles, should get the basic sheet called “scooter”.
This would style this much.

Layer on the desktop version, and you get this.

IE6 and 7 will load the desktop.css because I have a comma separating my media types. It’ll ignore the rest and just load it.
There’s a single media query inside the desktop.css and same thing, added a comma. IE8 is funny… the comma-bug is present for the stylesheets called by the markup, but not for the single @media rule I have within my desktop stylesheet. Which is interesting because 6 and 7 lap it up. But I prolly won’t be using the comma-bug in-sheet because it seems to break FF anyway. *edit: it’s removed

Firefox 2 does not understand media queries and so what you get is just the basic styles, not the desktop styles. Then again it also doesn’t understand inline-block without hacks and I’m using that freely as well. Whatever. This means the page is ugly in all the older-of-the-modern browsers: older Safari (older than 3), older Opera (older than 7), not sure about Chrome (did it always support?), and IE6 doesn’t get max-width so even on mobile-basics only it doesn’t do too well… however I’ve been thinking of giving IE6 something entirely different just for fun (and code bloat lawlz), dunno if I’ll do that though.

Worst comes to worst, I have an UGLY page. It should still be a USABLE page regardless, and actually I’m already reconsidering my layout for that page anyway… that text is inherited and may get chopped by the big guys here anyway. While re-doing it, I’m certainly going to be using IE6 and K-Meleon (which is a current, updated browser still using the Firefox2-age Gecko) to see what I’m getting in non-media-query-supporting desktops.

16

Arg, finally got my hands on a phone and the comma trick is screwing Opera Mobile and Safari on the iPhone. Bah. : (

17

I thought it was worth following up on this for Paul. Regarding specific implementations a 1200px site will work on a smaller device (using zoom) however it’s always better to have a native interface. Regarding the specific figures themselves, the study I undertook analysed the top 100 on the web (plus extended to the top 1,000 by taking random others to see if the trends continued). The study is going to be published in Smashing Magazine’s next ebook on mobile devices so if you want some real hard core stats on what methods everyone else is using (for ideas), I can recommend checking it out (it took me months to put together) :wink:

18

That sounds interesting Alex and I’ll keep my eye out for it as it will be very useful.:slight_smile:

19

Old thread…I know however interesting reading.

So if I designed a mobile website from scratch would you create a subdomain using CSS to create narrow cols then use php redirect code on your main site to redirect to subdomain?

What if my current site has 150 pages?
Would you just build a home page?

I look forward to your answers.

20

then use php redirect code on your main site to redirect to subdomain?

Personally I’m not interested in my servers checking some constantly-updated list of user-agents before every request to see if it’s a mobile. Not appealing.

And… tweet from Stephen Hay:
“We’re sorry, but this page is currently unavailable from a mobile device.” (hopkinsmedicine.org)

Sometimes unavoidable, but it’s a risk having a special site for a particular type of user agent.

Oh and what’s a mobile? Is an iPad a mobile? What about an Asus Eee?