1 Posted by Alex Gibson on 15 September 2010 | Permalink

I'm curious what you think about the idea put forward in this presentation:

http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

i.e. - build for mobile first and foremost, *then* add media queries for desktop sites. IE <= 8 can use a conditional comment, served with its own style sheet?

That way, both IE8 and Symbian WebKit get the correct rendering, as does everything else? (in theory).

2 Posted by ppk on 15 September 2010 | Permalink

Hm, yes, that could work, couldn't it? IE is definitely covered by this.

The only problem is that Symbian WebKit doesn't have one screen size; there are at least a dozen. Still, they fall into a range of, say, 250 to 800 pixels, and creating default style sheets for that range is possible.

3 Posted by Ernst de Haan on 15 September 2010 | Permalink

Here's a list of some other potential ingredients:
- Server-side browser sniffing, possibly passing different or additional CSS files to the client.
- Server-side user agent sniffing, setting classes like "Browser-Phone" and "Browser-MobileSafari" on the BODY element. The CSS can then use these classes.
- Same thing, but then by using client-side user agent sniffing. May trigger flickering.
- Determine the screen size with JavaScript and then set certain classes on the BODY element, such as FrameWidth-LessThan600. When the screen size changes, listen for events and change the classes correspondingly.

For some examples of server-side browser sniffing, see www.pensioenpage.com

4 Posted by Arieh on 15 September 2010 | Permalink

The main problem I see with both media queries, and more so with Ernst's solution is that you don't prevent unnecessary resources from being loaded, and that's quite expensive for most mobile surfing.

5 Posted by Daniel on 15 September 2010 | Permalink

What are the possible solutions to prevent unnecessary resources from being loaded?

1. Server-side sniffing
2. Loading resources from JS
?? Others ??

6 Posted by Alex Gibson on 15 September 2010 | Permalink

@ppk - yes flexible layouts are becoming all too important for mobile web development. To be truly cross-platform on mobile, i think it is the only real way.

I think things like server side UA sniffing are quick way out, but not necessarily the safest, or most reliable.

7 Posted by Ernst de Haan on 15 September 2010 | Permalink

@Alex: True, user agent sniffing is a workaround, a last resort. But given the current state of incompatibilities and/or lack of standardization, it's still needed.

8 Posted by Jasper van der Kamp on 15 September 2010 | Permalink

For me there is only one way. Create a stylesheet with all default (and mobile) styles and include in the head of your HTML. Then create another stylesheet width the wide screen styles and include it with media queries in the head of your HTML. Then include the wide screen styles again with conditional comments for IE8 and below.
It costs an extra http requests for desktop browsers, but fuck it. This is the most solid and easy to edit way.

9 Posted by Matthew Babbs on 16 September 2010 | Permalink

Why not use conditional comments to serve one stylesheet to IE<9, then another to everything else? That would allow defaulting to mobile styles for Symbian's benefit, and avoid burdening IE with an extra HTTP request. (See http://gist.github.com/581794 for an example of how it might work.)

10 Posted by Sasha Sklar on 16 September 2010 | Permalink

"CSS media queries are parsed and interpreted before the browser starts to lay out the page. Scripts aren’t."

That's the case if you follow current front end performance best practices. But what if you take advantage of the loading/blocking properties of script tags to prevent the page from rendering until you have the width set?

Putting a your script tag in the head before the CSS link tags should do the trick, no?