1 Going beyond just CSS

Useful discussion on something I have been thinking about for a while now.

What are your feelings on the need to go beyond just changing the stylesheet and actually altering the content and basic structure of the mobile version of the website?
So essentially removing all non-key content and having the most important features at the very top of the page, to avoid scrolling all-together.

Also what about putting this mobile edition of the website on a separate sub-domain?

posted at 08:54 am on January 6, 2009 by David Kindness

2 Re: Going Beyond just CSS

Hi David,

The more you can adapt a site to mobility, the more likely the user experience will be improved – adapting the style sheet is indeed only a first step, and altering the content and structure is likely going to be required if you want the best user experience possible.

Regarding a separate sub-domain: if you can avoid it, it probably is better – your users and search engines already know the existing addresses of your content, and creating a whole new addresses space reduce that value.

posted at 09:18 am on January 6, 2009 by Dominique Hazaël-Massieux

3 Untitled

Mobile browsing doesn’t just suffer from poor CSS compatibility. The experience is inferior by definition due to small screen size (even the iPhone doesn’t match a 22” LCD), no keyboard or mouse, and generally a totally different experience.

People use it when the information or functionality they need cannot wait until they are at a computer screen – up-to-date news, sports results, maps, quick reference, etc.

Hence, to take advantage of mobile traffic means more than adjusting your CSS, but considering your HTML, content, navigation, and general functionality. For the vast majority of sites, the effort required is simply not worth it.

posted at 09:22 am on January 6, 2009 by Dan Blows

4 Hand waving will only get you so far...

I read through your article nodding my head, thinking “wouldn’t that be nice?” Sadly, I don’t think it’s at all realistic.

Going from the web to the mobile is a pretty harrowing experience. In the beginning you try to provide “correct” web-inspired solutions to everything, but it’s not long before you realise that bringing best practices from the web to the mobile just isn’t possible.

You will need a separate website for mobile users. You will need to use tables for layout, font tags to colour text, HRs to divide content, and proprietary attributes to switch text-input modes and allow key based navigation. You will need to do not only user agent detection, but also capability detection using WURFL and/or DeviceAtlas to find out the size of the screen you’re dealing with, or perhaps to check if the device supports file uploading or sms:// linking. You will even discover devices that POST when told to GET, and GET when told to POST.

It’s easy to think that the iPhone and other recent non XHTML-MP devices have changed things overnight, but that’s most certainly not the case. If you want to support even just a handful of the most-used handsets, you’re in for a bumpy ride.

posted at 09:41 am on January 6, 2009 by Nathan de Vries

5 Re: Hand waving will only get you so far...

I’ve heard many people say or write that the only way you can reach users on mobile devices is to do full content-adaptation; while I think it is one of the options you need to consider (in particular if you expect a good RoI from mobile users), I fail to see why not going that far is not useful at all; I’m a heavy mobile-web user, and while I would probably rate higher web sites that are fully customized for a mobile experience, I do rate much higher sites that have made some simple efforts to be mobile-friendly than sites that haven’t.

I think my number one gripe with web sites on mobile devices is the scrolling/zooming problem – CSS can solve that one fairly cheaply without having everybody rolling up a completely separate mobile version of their site, so I don’t think we should ignore that option.

posted at 09:49 am on January 6, 2009 by Dominique Hazaël-Massieux

6 The promise of web standards

The anti-screen technique does seem like a fairly simple step to improve the mobile user experience. I wonder if it wouldn’t be easier for some sites to turn off css rendering? Is that possible? I have always felt like that a major benefit to designing with web standards is “design once, publish everywhere”. With semantic markup the more important information should be at the top of the page anyways and with css turned off and taking advantage of accessibility techniques mobile users could get their information quickly without much scrolling, although not as pretty.

posted at 10:34 am on January 6, 2009 by David Rodriguez

7 print on Blazer

You’ll note that some browsers (Blazer, the default browser for Palm, for instance) will interpret both the screen and handheld css. I did some testing on this last year and found that Blazer actually interprets ALL css, including print. It’s logic is to interpret them as part of the cascade, i.e. in order.

I must note that I completely disagree with Nathan who (above) stated “You will need a separate website for mobile users. You will need to use tables for layout, font tags to colour text, HRs to divide content, and proprietary attributes to switch text-input modes and allow key based navigation”.

I’ve not found that to be the case in my testing of common web site markup and coding on the more popular consumer mobile browsers (Safari, Blazer, Opera, IE). It sounds like Nathan may be referring in an unspecified context to uncommon browsers, devices, or web applications.

posted at 11:53 am on January 6, 2009 by Jared Stein

8 Benefits of a consistent design...

I haven’t designed for mobile devices much in the past, so I will be the first to admit that I’m no expert on the matter. But it would seem to me that there would also be a substantial benefit in keeping the same site design as the one people encounter via their computers.

It is likely that people get comfortable with a layout on a computer’s browser first. Being the “native” or “original” design, it is almost always exactly as the designer intended. Learning a site’s structure is an important element of usability as well. So if they learned on a computer, why not mimic the experience they already have stored in their memory when they visit via a mobile device?

There should definitely be an effort to make sure the site is very usable regardless. Eliminating horizontal scrolling as much as possible, etc.

But should we ever change the fundamental nature of a site’s navigation to be more suited for mobile devices if that undermines the users original experience via a computer?

I’m not so sure.

posted at 03:24 pm on January 6, 2009 by Chris Meeks

9 What's wrong with cascading?

What about letting the [code]handheld[/code] stylesheet cascade the default layout styles (like ALAs print style does for printing)?

<link rel=“stylesheet” href=“css/default.css” type=“text/css” media=“all” />
<link rel=“stylesheet” href=“css/handheld.css” type=“text/css” media=“handheld” />

Add [code]only screen and (max-device width:480px)[/code] to the second and/or use Javascript to change [code]handheld[/code] to [code]screen[/code] depending on browser width.

Now both basic browsers (ignoring media attributes) and more advanced browsers (supporting Media Query or Javascript) get the handheld styles.

Creating and maintaining a consistent style across both desktop and mobile would be much easier, because the same basic styles are used (in this example from [code]default.css[/code]).

This wouldn’t be a bad thing, is it?

posted at 03:47 pm on January 6, 2009 by Ronald Barendse

10 What about the future?

Using a different CSS doc for your mobile version is one way to do it of course. It’s common to see parts of a design disappear in a mobile version, and through CSS the only way is to hide it. This is not smart because what will happen when screen readers come with the IPhone is that the screen reader will read all of the content, even if you’re hiding parts of it, and things won’t make sense to the non-visual audience.

posted at 06:36 pm on January 6, 2009 by Nuovo Labs - Florida Web Design

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)