Mobile Websites: What Works?

[Shhalahr Windrider]

I am currently working on the design for a blog. I’d like to actually set up a design for mobile/handheld devices. Unfortunately, not owning any such devices myself, I’m not familiar with what conventions exist regarding web design for them. As such, I’d appreciate any tips or insights from people who have experience using websites in this context. I’ll also take links to other sites with similar advice.

As far as specific advice is concerned, I’m trying to figure out how to best place the blog sidebar—that big list of links to archives, recent posts, posts categories, and so forth. How is this sort of thing usually handled on mobile-friendly blogs? I have an idea or two on approaches to take, but I’d like to know what mobile-users would actually expect.

Please don’t limit input to the spefic request above. I’ll take any any advice you may have. There are likely many more issues I haven’t yet considered.

[Don Julio Anejo]

I'm writing this off my phone as we speak :smile: so here goes:

1. Avoid flash. It takes literally forever to load. Even just the previews. Avoid java for the same reason.
2. Phones usually zoom in to specific elements on a page, like boxes in a table, stretching them across the screen. For example on this very forum I can zoom so topic list or the posts themselves are stretched across the screen and I can actually see the titles. If I need to, I can scroll to other elements like someone's avatar but they're not taking up valuable real estate.
3. As such you're actually better off putting your navigation bar on the side, like usual rather than at the very top. This way Im not forced to scroll just to get to the text i'm much more likely to want to read.

Hope this helps :smile: However do keep in mind that this is just me, my phone and my experience, other people's ideas may be different.

[Shhalahr Windrider]

1. Avoid flash. It takes literally forever to load. Even just the previews. Avoid java for the same reason.
Shouldn’t be a problem. There’s no Flash on the current site and no current plans to include it on anything important. In the future, there might be the occasional flash video (e.g. embedded YouTube clips or FLVs hosted on-site). And the videos on those don’t load unless a user wants to play them, so there’d just be the minimal overhead of the player itself.

Are these players mobile-accessible?


2. Phones usually zoom in to specific elements on a page, like boxes in a table, stretching them across the screen. For example on this very forum I can zoom so topic list or the posts themselves are stretched across the screen and I can actually see the titles. If I need to, I can scroll to other elements like someone's avatar but they're not taking up valuable real estate.
Okay, that was something I hadn’t heard of. I’ll have to see if I can find someone with a phone with this behavior to give me a demo.


3. As such you're actually better off putting your navigation bar on the side, like usual rather than at the very top. This way Im not forced to scroll just to get to the text i'm much more likely to want to read.
Well, the HTML actually has the blog widgets come after the posts. The only things before the main content are a Header banner and a small navigation list for the Home Page, About Page, and the home site with which the blog is affiliated. So a single-column layout would pretty well necessitate the posts coming before the really long list.

But even with that zooming thing—how common is it? I’d prefer to avoid accidentally locking out those few phones that may not have that feature if I can.

[Signmaker]

.mobi

I suggest you check it out. Specifically, sites like bmw.mobi.
Also, read the documentation surrounding .mobi for recommended site design.

[Don Julio Anejo]

My experience is mostly my iPhone + buddy's Blackberry Storm + a few other, more normal Blackberries with a qwerty keyboard (no idea which ones). The internet on them seems to function the same way, but I can't say much for any other phones.


Are these players mobile-accessible?

Yes


But even with that zooming thing—how common is it? I’d prefer to avoid accidentally locking out those few phones that may not have that feature if I can.
Quite common as I understand - you double-tap the element and it zooms into it. Also, for this reason, you may want to avoid fixed width elements (e.g. a block of text that's always 500 pixels wide) - a phone may not have that much space, forcing someone to scroll. Which is annoying as hell.

But honestly, your best bet is to find someone with a smartphone and borrow it to browse the internet for a few hours.

[valadil]

Page width is the biggest concern. As people mentioned, fixed width is bad. If your site uses a fluid width, the phone will probably be able to fit it to whatever level the user zooms to.

Try to limit the number of images used on the mobile version of the site. Even on 3g, internet access is slow and some plans charge per kilobyte. You don't want to make people wait and pay to see your content (especially if you're not the one getting paid). A logo for your site is fine. A fading background with diagnoal stripes can probably be omitted.

Javascript will work on some phones but not others. Make a site that works without js first and then add the scripts on top of it. You want the site to degrade gracefully if javascript doesn't work. This actually goes for most web design, but is especially true on phones where javascript isn't as prevalent.

[lesser_minion]

Opera have a tonne of articles on how to develop web pages, and some of them are specific to mobile phones.

It's a little browser-specific, but Opera Mini and Opera Mobile will run on basically any platform.

There is an introduction to designing for mobiles here (http://dev.opera.com/articles/view/introduction-to-the-mobile-web/).

It raises some of the points that have already been raised, and also points out that you have no idea what a user actually has available for input.

Bear in mind that large images are unlikely to ever be seen by mobile users as well - either the picture gets compressed down to a much lower-quality one, it doesn't get loaded at all, or it arrives at full size and the user doesn't actually see all of it anyway.

There's also a page with a java applet that emulates Opera Mini running on a generic smartphone here (http://www.opera.com/mini/demo/), which might be useful to you.


Mobile phones also use a slightly reduced version of XHTML a lot of the time. Apparently the missing elements aren't particularly important, but it's worth remembering. Older versions of IE also tend to mess up mobile-friendly pages, apparently.