April 10, 2012, 11:24 am
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
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
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
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
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
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
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
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 width0% 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
- » OT: VPN from a Win 7 computer to my Win XP3 Apache Server
- — Next thread in » Webmaster Forum
-

- » Got a new Technique for Website Promotion
- — Previous thread in » Webmaster Forum
-

- » Accents Showing up as Question Marks
- — Newest thread in » Webmaster Forum
-

- » For loop not showing the entire array
- — The site's Newest Thread. Posted in » PHP Scripting Forum
-

Subject






