Small screens…

…a serious matter…

been a long time coming…

I started to prepare my site for small screens and mobile browsers back in 2004, when there wasn't all that many mobile devices and browsers around. I styled some for them anyway, mostly for fun.

As I update this article in January 2011 the mobile device landscape is totally different – loads of those small screens around and browsers to go with them. Almost too much of a good thing…

I have added and modified styles for screen and print behind this site quite a few times over the years, but my handheld stylesheet for mobile/small devices hasn't seen all that many changes.

I created one handheld stylesheet in 2004, and an expanded version of it in 2007. The latter is working better and better as those small screen browsers are catching up on CSS standards, and with some additions and/or slight modification based on real-world testing here and there from time to time, that old small screen stylesheet may serve this site well for years to come.

support…

Support is “pretty mixed” no matter how I look at it.

There is a W3C standard for handheld stylesheets intended for small/mobile devices, but direct support for the relevant W3C standard is less than impressive. If support were better the handheld approach would be the near-perfect solution.

Many browsers for mobile devices insist on using regular screen styles – styles intended for PCs and laptops that have large screens, keyboards, mouse etc. With the limitations imposed by small screens and minimal control over inter­action on mobile devices, the result isn't all that convincing for a large majority of web sites.

I think they started using screen styles simply because not many sites were prepared for mobiles a few years ago. Made it simple for those unprepared sites to begin with, but now this approach only makes it harder to style a site properly both for mobiles and large screens.

.mobi? iPhone? … forget it!

I won't waste time and resources on targeting individual mobile devices and browsers. There are literally several hundred brands and variants out there today, and nobody knows what will be spread across the market tomorrow. Thus, trying to serve them individually simply doesn't make sense.

I fall back on standards to the degree that they exist to serve all small devices one set of styles, and leave to those who program software for small devices to make their products adhere to same standards. There is of course a lot of “smart” and diverging solutions and a time-lag across the market, but I see no point in turning all the confusion created by the enormous spread into a problem for myself.

two-way approach…

In an attempt to work around how the various browsers for mobiles work, I present them with two alternative “gateways” to the same stylesheet for small screens. One is provided via a handheld link in the pageheads, and another is provided via a device-size targeting @import in the screen stylesheets. This approach covers both main camps of mobile browsers – those that use handheld styles directly and those that insist on using screen styles.

As mentioned: there is only one stylesheet for small screens behind a given layout on this site, and I don't care much about what standard and/or non-standard the individual browser supports and how it gets to that small screen stylesheet. The only thing that matters to me is that as many mobile browsers as possible “get it”.

CSS sledge­hammer approach.

In that small screen stylesheet all irrelevant and unsuited screen styles are overridden and replaced with styles better suited for the large majority of small screen devices on the market today.

While most PC and laptop screens have space for decorations, side-by-side columns and drop-down and fly-out menus, such extravagance just clutter up small screens. Subsequently it all has to go and the minimal space available to us be used to present potentially useful content and illustrations and not much else.

To achieve this without having to hack my way around how various browsers for large screens support and/or don't support various screen styles, I use high specificity and lots of “!important” in the handheld stylesheet – it is “overloaded” to the degree that I feel disgusted just looking at it actually. This is “CSS sledge­hammer” approach of the worst kind, if I have to say so myself.

This heavy approach seems to be the only method that works well enough across browser-land on both large and small screens today though, so excuse me while I check up on the weight of my “CSS sledge­hammer” 

drawing a line between small and not-so-small devices.

I have put in a few “traps and barriers” – media queries – to avoid small screen styles affecting browsers on all those a bit larger screens. I have set both the “device-width” and the “window-width” arguments to 600(px) as a dividing line, as I think mobile devices larger than 600(px) in screen-width should be able to handle regular screen styles.

If some specialized and/or clever devices can't handle all styles in the @media format they insist on using, than that's too bad. I won't attempt to work around such problems until there's a common standard for them, and me, to lean on.

you may test this page…

For your convenience I have opened up the device-size targeting styles to screen for this page only, so you can see them in action on large screens on PCs and laptops – if your preferred browser supports @media-queries.

Reduce the width of your browser window to below 600(px), and the small screen styles will kick in. You can then keep on reducing window width to around 120(px) – if your browser will let you go that far – to see how various styles affect elements on the page.

120(px) should be narrow enough to cover all of today's mobile devices with web-access, so I see no need to go further in my styling or your testing of them.

I have no way of knowing how far and wide across the wilderness known as “mobile devices and browsers” the handheld styles behind my site will work, as I can't possibly test on all.

What I do know is that enough gets through to those high-end and low-end mobile devices/browsers I have tested on to bolster my confidence in my approach, so although I admit my method is kind of ugly I see no reason to change until there's a significant improvement in same-standard adherence across browser-land.

sincerely  georg; sign

Hageland 01.nov.2004
04.des.2007 - updated article to reflect present-day styles and support.
11.jan.2011 - almost completely rewrote article and archived 2007 version.
12.jan.2011 - revised the last version.
12.oct.2012 - added meta tags in pagehead.
last rev: 12.oct.2012


Small screens...


small screens seem to come in all shapes and sizes these days, and also in all bling, hype and price-classes…

Section

  • introduction
  • Table of Content

About

  • this is PTL web-design
  • CSS sledgehammer
  • accessibility
  • Print enhanced page
  • Projection enhanced
  • Small Screen enhanced page
  • validity of xhtml and CSS
  • html tidy
  • Opera and me
  • Firefox vs. IE
the usual
  • the author
  • Copyright
the unusual
  • Molly speaks up
the additional
  • Examples
  • Demo pages

'gunlaug.no' in Opera Mini 4

Used to look like something on a small screen…

'gunlaug.no' in Opera Mini 5

…and a few years later it still looks like something on a small screen.

For some reason or another we feel that we always have to stay connected…

want to see styles?

…and for now that's it on the subject.



about…
…2005 - 2012
last rev: 12.oct.2012