Creating a mobi version of the site

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I would like to create a mobi version of my site. I am looking into the
different possibilities, and I don't like any of them.

1) Re-create the site for any resolution: Doesn't really work for the
site. Right now it is hard-coded at 760 pixels wide. Trying to make it
more liquid to work down to 240 pixels would make a mess of the site.
Yes, I know the reasons  why sites should have liquid designs. I am not
trying to start a debate on the merits of liquid designs.

2) Create a handheld style sheet: I like this option best, but there
doesn't seem to be very much support for media='handheld' style sheets
yet. I am testing using Opera Mobile Emulator, and the phones all seem
to use the media='screen' style sheet if there is one.

3) Wait until support for media='handheld' is better: I may do this, but
eventually I will need to support handhelds.

4) Try to detect the browser using Javascript: Javascript support is not
reliable on handhelds.

5) Try to detect the browser on the server side: This is a possibility,
but it feels kludgy. At the worst, a handheld would get the
media='screen' version of the site.

6) Create a second version of the site for handhelds: This looks like
the only completely reliable way to do it at this time, but I hate the
idea of having to maintain two versions of the site.

This feels like web design from 10 tears ago. There are standards, but
support for the standards isn't good enough to be able to use them.

Am I missing any options? Which should I use?


Re: Creating a mobi version of the site

On 4/10/2012 9:24 AM, Scott Bryce wrote:
Quoted text here. Click to load it

Funny I would get this just now. Jacob Nielsen recommends building a
second version of the site.

http://www.useit.com/alertbox/mobile-vs-full-sites.html

Re: Creating a mobi version of the site

email.me:

Quoted text here. Click to load it

If you are making money from it, or plan to, and mobile is a significant
market share of your visitors, then yes, building a second, mobile-specific
version is absolutely the best way to go.

The idea that "one size fits all" turns out that "all" tends to have a very
nebulous meaning. (I.e. 'Liquid' design)

Re: Creating a mobi version of the site

On 4/10/2012 1:36 PM, Marc Bissonnette wrote:
Quoted text here. Click to load it

I do make money from the site. Mobile is not a significant market share,
but I expect it to grow slowly over the next few years.

When someone comes to my site as a customer, what they eventually want
to do is print something. My site does no good to someone who is not
hooked up to a printer. My daughter has been demonstrating the site on
her Android, and it does not show well that way. She tells me that it is
often easy to find a wireless printer she can connect to. She never
touches her laptop anymore. People like her are the next generation of
customers, and I need to be prepared to serve them.

A second version of the site is a pain, but I think it serves the
handheld customer best.

Re: Creating a mobi version of the site

On 4/10/2012 1:36 PM, Marc Bissonnette wrote:
Quoted text here. Click to load it

So do I provide a link to the mobi version, try to detect the screen
width of the device and redirect when appropriate, or do both? I expect
a mobi version of the site to be fluid for any resolution below the
current width of the site, so any device less than 760 pixels wide would
get the mobi version, if I try to detect.

Re: Creating a mobi version of the site

email.me:

Quoted text here. Click to load it

I'd say both: Try the auto-detect, but ensure there is a link to the other
version on both versions of the site, so if the auto-detect fails, the user
can manually select it. This way, all the bases are covered. If your site
uses accounts and / or cookies, you can remember their preference for the
next visit, as well, overriding the autodetect, unless manually reset by
the user.

Re: Creating a mobi version of the site

On Tue, 10 Apr 2012 09:24:46 -0600, Scott Bryce wrote in
alt.www.webmaster:

Quoted text here. Click to load it

What you are looking for is responsive design.
Google it and you'll find all you need.
Probably the best info is at:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design /


--
idle
None of us is as good as all of us.

Re: Creating a mobi version of the site

On 4/10/2012 9:24 AM, Scott Bryce wrote:
Quoted text here. Click to load it

Thank you for the replies. In my digging around, I found that you can
specify different style sheets for different screen sizes. With a little
tweaking of the HTML, I can style for small handhelds, large handhelds
and desktops. This seems to have broad support. It looks like an ideal
solution.

Re: Creating a mobi version of the site

On 4/13/2012 9:11 AM, Scott Bryce wrote:
Quoted text here. Click to load it

This seems to be working well, but I am testing on an Opera Mobile
emulator, and there seem to be some glitches. When I test on an iphone
emulator, it works fine. When I test with my desktop browser (Firefox,
IE, Opera, Chrome, Safari), the page switches style sheets the way I
expect it to.

When I test on the Opera Mobile emulator, the page switches style sheets
at the wrong screen sizes. Also width=100% in the style sheet is not
rendered that way in narrow widths. I'm doing more digging to determine
if this is a known glitch, or I am doing something wrong.

I may post a URL when I feel I am getting close (or I give up).

Site Timeline