[Pro] Mobile redirect code insertion?

Freeway
1

Hi all,

Any one able to help me out here?

I’ve built a mobile site to go along side my regular one, mainly for speed of loading and ease of use etc, but I want to auto try to redirect to it.

I’ve found a script that works on screen size….

but other than editing my index file in Text wrangler or similar I can’t work out how to add it to my home page in PWPro?

I’m sure there is an easy way to do it… but I’m still a FW novice!!

Oh… and I don’t want to use the iPhone redirect… it’s a bit presumptions that every one has an iPhone I love my HTC!!

Thanks all. :slight_smile:

James

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

2

I’ve been dipping my toes into the mobile redirect stuff as well, your code is much simpler than some of the stuff I’ve found. I’m going to have to try it out.

Here’s how I’ve got my redirect codes to work…

From the Page menu in FW select HTML Markup paste your code there and from the drop down menu select, before

One thing I haven’t been able to sort out is, this…I give the smart phone user the option to view the full site, (just a link to the ‘home’ page)…But in order for them to view the full site, the link back home can’t be back to the homepage with the mobile redirect code, because then they will just be redirected to the mobile site and a bad loop is born. A way around it is to make a duplicate home page sans redirect code and have that be the landing page for the option to view full site. That works fine until some body clicks off that page and then clicks a home link, which then of course takes them to the mobile site…and we repeat.

I’m sure there is a smart way around this…just havent sorted it out.

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

3

To really gracefully handle the mobile/full site divide, you need to store the preference with a cookie. That way the redirect will only happen once. (And when they decide to go back to the mobile site, that preference will be saved, too.)

That is a bit more work.

I’ve been experimenting lately with responsive layouts, where the width of the screen drives the layout to collapse and become more vertical. Then there’s no need to maintain multiple sites and handle the transitions between them. A decent browser (read anything made with WebKit) can handle this layout perfectly on any screen size. This is not simple to do in Freeway (ironically, easier to hand-code) but I have one Action already that can help with the building-blocks. InlineBlock - ActionsForge

Walter

On Aug 27, 2012, at 9:59 AM, Rich Gannon wrote:

I’ve been dipping my toes into the mobile redirect stuff as well, your code is much simpler than some of the stuff I’ve found. I’m going to have to try it out.

Here’s how I’ve got my redirect codes to work…

From the Page menu in FW select HTML Markup paste your code there and from the drop down menu select, before

One thing I haven’t been able to sort out is, this…I give the smart phone user the option to view the full site, (just a link to the ‘home’ page)…But in order for them to view the full site, the link back home can’t be back to the homepage with the mobile redirect code, because then they will just be redirected to the mobile site and a bad loop is born. A way around it is to make a duplicate home page sans redirect code and have that be the landing page for the option to view full site. That works fine until some body clicks off that page and then clicks a home link, which then of course takes them to the mobile site…and we repeat.

I’m sure there is a smart way around this…just havent sorted it out.

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

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

4

Hi Walter,
I will check out your action, but I imagine it is best to start a design with this in mind…rather than trying to retro fit an entire site (with lots of pages).

I just found this Aimy Steadman (Mobile Browser Detection and Cookie Setting)

which looks like it pretty much describes the mobile-full site redirect issue…I’ve never worked directly with adding cookies to a site, not sure if all of the code described in the link above will work with Freeway, but I might give it a try.

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

5

This code will probably work in Freeway, but will blow up any of the FX Actions or Scripty Actions (or even Rollover + Target Show/Hide if you enabled the Effects menu) because it uses jQuery to store the data. You could substitute the Prototype.js library for jQuery, and the cookiejar.js script for the jQuery cookie plugin. The final result would be compatible and should give you what you need. I did a very lightweight yet complete shopping cart using this combination of scripts here: Catalog and there’s extensive discussion of it here: http://www.freewaytalk.net/thread/view/108340 DeltaDave did a copy of this in Freeway and has the document available for download, although I can’t find that link at the moment. That would be a good way to see how the various pieces are slotted into Freeway.

I do have a criticism of the Aimy Steadman script as written. While they do catch the mobile browser and set a cookie, thus avoiding asking that question more than once, they force-redirect to the home page of the mobile site, rather than redirecting each page to its apposite mobile page. (I’m assuming here that you would build an exact replica of your entire site for the mobile users, not force them into a Lilliputian version of the site map along with the smaller screen size.) Particularly if a visitor is coming from a search engine, and thus “parachuting” into your site somewhere other than the home page, you would want to redirect them to the inner page of their choice, not force them to re-find that page after confirming their choice of site style.

If I were going down this route, I would duplicate the entire site into a new subdomain, traditionally named m.yoursite.com, with the exact same site map as the desktop version. Then the code to redirect is incredibly simple: just swap www.yoursite.com (or just yoursite.com) for m.yoursite.com and send them on their way to the desired page.

//this code requires prototype.js and cookiejar.js
var jar = new CookieJar({ expires: 3600, path: '/' }); 
var newsite = window.location.href;
newsite = newsite.sub(///(www)?.yoursite.com/, '//m.yoursite.com');
if(!jar.get('site')){
	if(confirm('Want to see our mobile site?')){
		jar.set('site','mobile');
		window.location.href = newsite;
	}else{
		jar.set('site','desktop');
	}
}else if(jar.get('site') == 'mobile'){
	window.location.href = newsite;
}

Walter

On Aug 27, 2012, at 10:27 AM, Rich Gannon wrote:

Hi Walter,
I will check out your action, but I imagine it is best to start a design with this in mind…rather than trying to retro fit an entire site (with lots of pages).

I just found this Aimy Steadman (Mobile Browser Detection and Cookie Setting)

which looks like it pretty much describes the mobile-full site redirect issue…I’ve never worked directly with adding cookies to a site, not sure if all of the code described in the link above will work with Freeway, but I might give it a try.

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

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

6

Typo, always see these AFTER I press send.

newsite = newsite.sub(///(www.)?yoursite.com/, '//m.yoursite.com');

Have to catch the dot after the www subdomain, if it exists.

Walter

On Aug 27, 2012, at 11:12 AM, Walter Lee Davis wrote:

newsite = newsite.sub(///(www)?.yoursite.com/, ‘//m.yoursite.com’);

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

7

I am behind you guys as far as making responsive websites. I had been
thinking about how I would approach it with Freeway Pro – by duplicating
pages and stylesheets, setting the duplicate pages to smaller width,
dumping all the css into the external files, then using something like @
thing to load the right css for whatever width needed. I think it could
work.

–
Ernie Simpson

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

8

Thanks all.

I’ve gone for the simple solution… redirect using Rich’s help.

“From the Page menu in FW select HTML Markup paste your code there and from the drop down menu select, before ”

I did have to do a Redirect All from “mobile.html” as my mobile site resides on a sub domain and I couldn’t work out how to direct traffic straight there from the code I had!!

Thanks all… really appreciated.

Oh… and my mobile site is responsive, just so horizontal works as well as vertical viewing, but I wanted my main site to be more complex. I’m suer there probably is a way to have my cake and eat it, but not with my current skills there isn’t!

Thanks again.

James

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

9

Hi all,

Can you believe, I’m still working on this!!

The…

…works ok, but my HTC slips though the net if I open the site in landscape.

Are there any further clauses I can add that would be specific to mobiles?.. I’ve seen actual makes mentioned in scripts “iPhone|iPad|HTC” etc but I don’t know how to add this to my script?

I’m sure it’s simple, but seeing as my coding is limited to copy/past I don’t know where to start!

Thanks all.

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

10

You could add a similar clause for screen.height, right?

Walter

On Jan 30, 2013, at 4:27 AM, James I wrote:

Hi all,

Can you believe, I’m still working on this!!

The…

…works ok, but my HTC slips though the net if I open the site in landscape.

Are there any further clauses I can add that would be specific to mobiles?.. I’ve seen actual makes mentioned in scripts “iPhone|iPad|HTC” etc but I don’t know how to add this to my script?

I’m sure it’s simple, but seeing as my coding is limited to copy/past I don’t know where to start!

Thanks all.

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

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

11

Walt, you read my mind… just tied that but couldn’t work out how to do multiple clauses!!

Have just found this though…

<?php if(checkmobile()) header("Location:http://mobile.bghs.co.uk/"); function checkmobile(){ if(preg_match("/iphone/i",$_SERVER["HTTP_USER_AGENT"])) return false; if(preg_match("/Trident/i",$_SERVER["HTTP_USER_AGENT"])) return false; if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true; if(preg_match("/wap.|.wap/i",$_SERVER["HTTP_ACCEPT"])) return true; if(isset($_SERVER["HTTP_USER_AGENT"])){ if(preg_match("/Creative AutoUpdate/i",$_SERVER["HTTP_USER_AGENT"])) return false; if(preg_match("/MSIE/i",$_SERVER["HTTP_USER_AGENT"])) return false; $uamatches = array("midp", "j2me", "avantg", "docomo", "novarra", "palmos", "palmsource", "240x320", "opwv", "chtml", "pda", "windows ce", "mmp/", "blackberry", "mib/", "symbian", "wireless", "nokia", "hand", "mobi", "phone", "cdm", "up.b", "audio", "SIE-", "SEC-", "samsung", "HTC", "mot-", "mitsu", "sagem", "sony", "alcatel", "lg", "erics", "vx", "NEC", "philips", "mmm", "xx", "panasonic", "sharp", "wap", "sch", "rover", "pocket", "benq", "java", "pt", "pg", "vox", "amoi", "bird", "compal", "kg", "voda", "sany", "kdd", "dbt", "sendo", "sgh", "gradi", "jb", "dddi", "moto"); foreach($uamatches as $uastring){ if(preg_match("/".$uastring."/i",$_SERVER["HTTP_USER_AGENT"])) return true; } } return false; } ?>

Seems to do the job nicely!!

P.S. already have it as php so that’s ok.

Cheers all.

James

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

12

Just so you know, it’s like this:

<script type="text/javascript">
<!--
if (screen.width <= 699 || screen.height <= 699) {
	document.location = "mobile.html"; 
 }
//-->
</script>

Walter

On Jan 30, 2013, at 8:24 AM, James I wrote:

Walt, you read my mind… just tied that but couldn’t work out how to do multiple clauses!!

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

13

You mean to tell me there is no query for device orientation like with css?

–
Ernie Simpson

On Wed, Jan 30, 2013 at 8:30 AM, Walter Lee Davis email@hiddenwrote:

Just so you know, it’s like this:

    <script type="text/javascript">
    <!--
    if (screen.width <= 699 || screen.height <= 699) {
            document.location = "mobile.html";
     }
    //-->
    </script>

Walter

On Jan 30, 2013, at 8:24 AM, James I wrote:

Walt, you read my mind… just tied that but couldn’t work out how to do
multiple clauses!!

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

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

14

There might be, but I don’t know what it is. If you really want to restrict the mobile device site to phones, you’ll probably have to go further than this, maybe check for a height AND width in either orientation, like this

if(screen.height <= 699 && screen.width <= 319 || 
	screen.width <= 699 && screen.height <= 319){
	...
}

That’s assuming that there isn’t some clever way to sniff orientation from the browser in JavaScript.

Walter

On Jan 30, 2013, at 9:20 AM, Ernie Simpson wrote:

You mean to tell me there is no query for device orientation like with css?

–
Ernie Simpson

On Wed, Jan 30, 2013 at 8:30 AM, Walter Lee Davis email@hiddenwrote:

Just so you know, it’s like this:

   <script type="text/javascript">
   <!--
   if (screen.width <= 699 || screen.height <= 699) {
           document.location = "mobile.html";
    }
   //-->
   </script>

Walter

On Jan 30, 2013, at 8:24 AM, James I wrote:

Walt, you read my mind… just tied that but couldn’t work out how to do
multiple clauses!!

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

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

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

15

May I go back to this 2013-question. I have a different mobile site with a different offer. How can I send desktops to their desktop site? Many thanks for help!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

16

In this day and age, there should be one site, with one set of CSS, containing viewport-specific media queries to adjust the layout to suit the device. Freeway 7 lets you build that sort of site without a calculator, and without having to build two pages for every one.

Now if you want to let someone choose to go to the desktop site, you can add a link to the page labeled Full Site, and link it to the apposite page in the original site. Or if you didn’t want to wire all of those up by hand (and you had a rigorous naming scheme for your mobile and desktop pages) then you could do this with some script, so you could add the link to the master page and never have to update it. But without seeing the way you have organized your site, it’s hard to say what that would look like.

Walter

On Feb 28, 2016, at 8:39 AM, GTPeter email@hidden wrote:

May I go back to this 2013-question. I have a different mobile site with a different offer. How can I send desktops to their desktop site? Many thanks for help!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
Information for existing FreewayTalk / Groups.io users - Site Feedback - Softpress Talk

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options