Designing for the Mobile Web

Notice: This is a discussion thread for comments about the SitePoint article, Designing for the Mobile Web.
__________

Although I would agree that device detection can get ugly if it is done badly it is possible to do it well and make a huge difference to your users.

I would say that simply deciding if your user is mobile or not is sometimes not even enough. As you say, some devices are suited to a beautiful XHTML site while others are only capable of WML.

Without device detection the content provider must decide who he will cater for and abandon the other.

I would recommend mobile web developers have a look at DeviceAtlas (www.deviceatlas.com) and consider the benefits of catering to your specific users more effectively.

Developers are able to use the API and download the device database free.

Disclaimer: I am an employee of dotMobi and one of the developers of DeviceAtlas.

[Stevie D]

Another reason for not serving mobile devices the normal page with a liberal smattering of display:none; is that this means you're forcing users to download lots of content that they aren't even going to see - which costs time, money and quite possibly performance as well.

You give WML and XHTML as languages people can use to write mobile pages - what about good old HTML?

I've just tried the ready.mobi validator, and it's a bit hit-and-miss.
* It tells me I have used layout tables, but I haven't, and that there are tables that have less than 2 cells per row - the tables are definitely data tables and have 5 or six cells per row.
* It tells me off for not using access keys - yet accessibility experts are pretty much united in saying the access keys do more harm than good because there are no internationally recognised guidelines on how to use them, and no easy way to find out what they are.
* It tells me off for using <b> tags ("unsupported style related tag")
* It doesn't notice that two links do open pop-up windows
* It suggests that the total page size, including all resources, should be less than 20k - my pages are very minimalist, and have only tiny images on them, but there's no way that I can keep them that small when you include the stylesheets (which should be cached)
* It tells me off for not giving cache information in the header. Given that I don't know when the page will next change, I'm not going to set a cache header that could result in the page not being updated when it should be. Browsers should detect when a newer version of the page is present.

It's important to remember that for a lot of sites, people simply won't have the time or resources needed to create and maintain separate versions. We don't want to go back to the days of one site for PCs and a separate lower-class site for other people, whether it's an "accessible" site or a "mobile" site. It may be useful to have a "front page" for mobiles, with the bare minimum (as in the example) but it should also be easy for mobile users to access the full normal site, as many phones these days are more than capable of doing so.

[Mongoose.wa]

Right on the heals of the Vitamin article. heh. Good post!

[mattymcg]

Originally Posted by Mongoose.wa

Right on the heals of the Vitamin article. heh. Good post!

Yes they pipped us at the post, dammit ;-)

[chris265]

Nice post . Some good points made

[fattyjules]

What's the state of affairs with mobile devices and Javascript support?

[Stevie D]

Originally Posted by Stevie D

It's important to remember that for a lot of sites, people simply won't have the time or resources needed to create and maintain separate versions. We don't want to go back to the days of one site for PCs and a separate lower-class site for other people, whether it's an "accessible" site or a "mobile" site. It may be useful to have a "front page" for mobiles, with the bare minimum (as in the example) but it should also be easy for mobile users to access the full normal site, as many phones these days are more than capable of doing so.

I know I'm following up my own post here, but it occurred to me last night that as the latest version of OperaMini for high-end devices like the iPhone and Nokia N95 will ignore media="handheld" altogether, and will only use the ordinary screen stylesheet, because they reckon that it will work better with the full web page as served to a computer than it will with an author's cut down version.

[roosevelt]

an excellent article I am reading here in sitepoint after a loooong time :).

[sharebear]

Originally Posted by Stevie D

I know I'm following up my own post here, but it occurred to me last night that as the latest version of OperaMini for high-end devices like the iPhone and Nokia N95 will ignore media="handheld" altogether, and will only use the ordinary screen stylesheet, because they reckon that it will work better with the full web page as served to a computer than it will with an author's cut down version.

I would like to expand on that statement a little. "will only use the ordinary screen stylesheet" ... and media queries. The theory is that the the coarse grained media="screen|handheld|projection|print" is no longer sufficient for targetting your style. There are "handheld" devices on the market (such as the Nokia web tablets) that have a resolution of 800x600, you clearly don't want to render your optimized for a SonyEricsson W880i styles on something with that high resolution. The recommended method is now to use media queries that allow you to target style rules based on, amongst other things, screen dimentions.

For a brief example of using media queries you can see here

http://dev.opera.com/articles/view/e...our-phone-des/

[Roar]

While optimizing your sites for the mobile web now is important - in my opinion the "mobile web" will be obsolete years from now. Case point: have you ever surfed the web with Opera Mobile? It renders the web as we know it and optimizes it for the mobile viewing via it's intuitive navigation features.

That's the long term direction of the mobile web: it will be the real web.

[Mongoose.wa]

Originally Posted by Roar

While optimizing your sites for the mobile web now is important - in my opinion the "mobile web" will be obsolete years from now. Case point: have you ever surfed the web with Opera Mobile? It renders the web as we know it and optimizes it for the mobile viewing via it's intuitive navigation features.

That's the long term direction of the mobile web: it will be the real web.

Valid point. However, while the "mobile web" will continue to get closer and closer to the "real web," it's not going to be identical any time soon. You'll still have to design pages to be easily navigated with a touch or minimal interface.

[netrepreneur]

Regards your testing strategy I'd include using volantis's web server that render's your mobile site in a consistent manner to any device.

http://opensource.volantis.com/

[dean.collins]

Once you finish your mobile website you might want to check out www.Amethon.com for mobile analytics.

(desktop analytics dont work for mobile browsers in case you haven't worked that one out yet - check out http://www.slideshare.net/dean.colli...2008?src=embed)


Cheers,
Dean

[slanza]

I recently purchased a Nokia N810 internet tablet with the intent of designing a website specifically for that device. However, all mobile sites I have browsed, including m.google.com and m.bestbuy.com look extremely small and not useable. Have you experimented with a way to design for this device?

Thanks for all the info, this is really helpful!

[morsela]

nice one ur the man

[AlexDawson]

I cannot agree with the article, firstly the use of XHTML over standard HTML when support for XHTML (especially the mobile profile) is extremely small and has no sway over the majority of mobile devices. Secondly the article failed to mention the high rise in other mobile devices apart from phones and Internet tablets such as netbooks which are vastly becoming a dominating force in the market and have their own unique aspect ratios, browser requirements and needs. Finally the author entirely put across the wrong idea that trying to allow the agent to choose what to view is a good idea when in reality is an extremely dangerous and poor method of quality control, the mobile web has a mixture of mobile browsers, desktop hybrids adopted for mobile and desktop browsers themselves.

User agents when serving style for example cannot be controlled simply with the media type "handheld", some will use screen, some will require media selectors and some require intervention at the serverside level just to get them to view the design without everything breaking. Unfortunately the author of this article did not read the A List Apart article on the mobile web as their approach to trying to deal with mobile devices would be weak or ineffective in all but the minority of mobile devices that like to follow the rules. Especially when it comes to screen width sizes and rendering style.

It seems that author of this article has never designed a website for mobile browsers.
Saying that one can just use XHTML is utterly wrong!
Mobile browsers don't support common CSS selectors and XHTML elements/tags what usual desktop browser does (:hover, line-height, thead, tbody, tfoot just naming a few).
This article is way too shallow, sale's man talk like bs.

[pyen13]

Thanks for posting this topic..At least we could learn from it as usually it's hard to set up design for mobile.

[DavidChildress]

Elizabeth Castro, author of "Visual QuickStart Guide to HTML, XHTML & CSS" 6th edition has removed her WML chapter from the 5th edition and placed it in her "oldway" archives.

I'm going to read the chapter anyway..but is WML indeed becoming obsolete? or is it ALREADY obsolete?

[AlexDawson]

WML is becoming obsolete due to modern mobile devices supporting HTML and CSS, this removes the need for WML which is a more restrictive language and requires a dedicated version of the website to use. Though its easy to learn and still worth having for the odd percent of people who want something fast and compact.

[Ryandc]

Great article! It covered a lot of the bases, especially the different types of mobile users and device detection. I think the debate of whether you need a special domain is quite a heated one (mainly coming from the people at .mobi). I personally believe device detection is the way forward, but i like to have the option as a user to full the 'full' website...

[fattyjules]

You mention renting time on mobile phones. Can you link to any of these services?

Edit: found a couple, haven't tried them;
http://www.deviceanywhere.com/
http://mite.keynote.com/
http://www.mob4hire.com/