[Pro] How to Create a Mobile Website

Hi, Team –

What’s the latest on creating mobile sites on Freeway?

Currently, I’m using the iPhone Re-Direct Action to get people over to the mobile version of my site, and it works fine for an iPhone. But it doesn’t seem to work for Android.

To solve this problem in the past, I use a line of code that “sniffs” out the screen resolution and re-directs the visitor to the mobile-optimized pages on my site.

That way, when someone visits the site from their Android, they’re re-directed to my mobile pages.

The problem is, my code suddenly stopped working.

Here’s the line of code I’ve been using before the :

To Recap:

  1. The iPhone action works fine
  2. But it doesn’t work on Android
  3. I used to use my sniffer code to solve the Android problem, but it stopped working

Any thoughts on why it’s not working anymore?

Thanks,
Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

When a new browser version is released it can break the “sniffing” code. This might be the problem your experiencing, or it might not. Tough to say. In any case it’s a far-from-future-proof solution. Generally speaking browser sniffing isn’t considered best practice these days though it is still widely used. It’s also a pain to maintain.

Todd

To solve this problem in the past, I use a line of code that “sniffs” out the screen resolution and re-directs the visitor to the mobile-optimized pages on my site.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

A known issue on Android

http://code.google.com/p/android/issues/detail?id=12455&q=javascript%20width&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi, Guys –

Thanks for your input.

Is there a work-around? The bottom line is that I need to find a way for Android users to be able to see my mobile website. I’m the author of a book about mobile marketing called “Go Mobile” so this is, shall I say, an important issue for me.

:wink:

All that said, is there a work-around for this?

Thanks!

– Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are javascript and PHP solutions and probably others. Or you could put this in an .htaccess file:

RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://yourmobilesite.name [R=301]

Todd
http://xiiro.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Just be aware that the Android OS runs on more than just mobile devices and can be found on tablets and ‘smart’ TVs (for example) where the viewing experience differs greatly from a mobile one. Redirecting users by sniffing the operating system may prove to be a brutal solution.
Regards,
Tim.

Experienced Freeway designer for hire - http://www.freewayactions.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi, Todd, Tim and Dave –

Thanks for your advice on this. Two questions:

  1. Todd, how do I put that line of code into the .htaccess file? I’m reasonably good with Freeway, but not a technical guru, so if you could dumb it down for me, that’d be great.

  2. Tim and Dave, what methodology are you guys using (if any) for your sites? Most of the (very kind and helpful) responses have said something along the lines of, “You could do this, or you could do that, but none of them are very good solutions.” What do you guys do on your sites?

As always, thanks for making this a very vibrant and very helpful community Forum. This is the best Forum of any that I’ve been involved with.

Cheers,
Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

  1. First you’ll need a proper text editor, TextWrangler from Bare Bones is free and will work nicely.
  2. You’ll need an ftp client to upload the file to your server. Cyberduck (free), Transmit etc. will do fine.
  3. Now create a file named “htaccess” (without quotes) and copy/paste the code. Be sure to change the url in the example to point to your mobile site address.
  4. Upload the file to your site root, the folder in which your site lives, usually named “public_html” or “html”.
  5. Now add a leading “.” the the htaccess filename so it looks like this: .htaccess
  6. When you do this the file will disappear, this is normal behavior. If/when you need to see the file again then your ftp client should have a setting to view invisible files.

That’s it. Now see if the redirect works.

I would use @media queries to target Android, which is a bit more involved than targeting just iOS but it should prove to be a better long-term solution. You may need to educate yourself on media queries but it’s time well spent.

For example for Android:

@media only screen and (-webkit-device-pixel-ratio:.75){
    /* Put CSS for low density (ldpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1){
    /* Put CSS for medium density (mdpi) Android layouts in here */
}
@media only screen and (-webkit-device-pixel-ratio:1.5){
    /* Put CSS for high density (hdpi) Android layouts in here */
}

Todd
http://xiiro.com


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On step 5, I would actually first enable the setting in your FTP app that allows you to see invisible files. Reason? Many ISPs use the .htaccess file (i.e.: there’s already going to be one in that folder) and you don’t want to overwrite theirs with yours. If you discover that there’s already one in your site root, then double-click it to open it in your editor (directly from your hosting provider) and add the lines that Todd has told you to that existing file. If the RewriteEngine On line is already there, don’t add it a second time. Just add the rewrite rules to the .htaccess file somewhere after that line.

Walter

On Dec 19, 2012, at 11:04 AM, Todd wrote:

  1. First you’ll need a proper text editor, TextWrangler from Bare Bones is free and will work nicely.
  2. You’ll need an ftp client to upload the file to your server. Cyberduck (free), Transmit etc. will do fine.
  3. Now create a file named “htaccess” (without quotes) and copy/paste the code. Be sure to change the url in the example to point to your mobile site address.
  4. Upload the file to your site root, the folder in which your site lives, usually named “public_html” or “html”.
  5. Now add a leading “.” the the htaccess filename so it looks like this: .htaccess
  6. When you do this the file will disappear, this is normal behavior. If/when you need to see the file again then your ftp client should have a setting to view invisible files.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, guys. I’m going to try to take care of this. Thanks for your help.

– Jamie


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options