Where do I put mobile detections php script


(tina ye) #1

Hi there,

 

We are working on a mobile site and would really appreciate if someone could answer the question below. PHP is the preferred method compared to JS method, as it will cause the redirect to happen before the page loads (more light weight/less to download on a mobile helping it load much quicker).

 

Where do I put the following php script, supposingly in our site header so it is picked up by every hit to our normal site. We are using Matrix 4.4.2

 

<?php
include 'Mobile_Detect.php'; // the file we downloaded from google.
$detect = new Mobile_Detect();
if ($detect->isMobile()) {
    header('Location: http://mobile.site.com/');
}
?>

 

 


(Marcus Fong) #2

Hi, Tina.

Matrix doesn’t allow the insertion of executable PHP code in pages it serves, as it’s a potential security issue:

http://forums.squizsuite.net/index.php?showtopic=10007


(Nic Hubbard) #3

Why not just make your website responsive and then you don't have to create a whole other mobile website?


(Anthony Barnes) #4

Why not just make your website responsive and then you don't have to create a whole other mobile website?

 

^ Definitely this.

 

The mobile device market is moving quite rapidly and I think you'll definitely find responsive design a much longer term solution.


(tina ye) #5

Thanks guys for your replies. We are also looking into responsive design for our mobile site but this is an interim solution. So we could only go with the Javascript method for the time being?


(Nic Hubbard) #6

Thanks guys for your replies. We are also looking into responsive design for our mobile site but this is an interim solution. So we could only go with the Javascript method for the time being?

 

I would use Modernizr and test for touch events. This is a very good way of detecting mobile.

 

http://modernizr.com

http://stackoverflow.com/questions/7928200/using-modernizr-to-test-for-tablet-and-mobile-opinions-wanted


(Tbaatar) #7

The problem with responsive web design is that there is no way to opt-out, or at least most websites don't consider this option.

You can write JavaScript code to switch CSS Stylesheet and save to the cookie, but this is bit hacky!


(Nic Hubbard) #8

The problem with responsive web design is that there is no way to opt-out, or at least most websites don't consider this option.

You can write JavaScript code to switch CSS Stylesheet and save to the cookie, but this is bit hacky!

 

While I sort of see your point, I think the positives for going with responsive design largely out weigh the negatives.


(Anthony Barnes) #9

The problem with responsive web design is that there is no way to opt-out, or at least most websites don't consider this option.

You can write JavaScript code to switch CSS Stylesheet and save to the cookie, but this is bit hacky!

 

There is also the idea that you display the same information on the lower resolution devices as the higher ones, don't give into the temptation to hide anything away from the user. The lower resolution media queries should simply re-arrange the design into an optimal format. If you find something that's too difficult to display on mobile then you might need to question it's value on a desktop. If you do that then the mobile user isn't missing anything and (theoretically) shouldn't need the option to opt-out.


(Nic Hubbard) #10

There is also the idea that you display the same information on the lower resolution devices as the higher ones, don't give into the temptation to hide anything away from the user. The lower resolution media queries should simply re-arrange the design into an optimal format. If you find something that's too difficult to display on mobile then you might need to question it's value on a desktop. If you do that then the mobile user isn't missing anything and (theoretically) shouldn't need the option to opt-out.

 

Well said!


(Tbaatar) #11

There is also the idea that you display the same information on the lower resolution devices as the higher ones, don't give into the temptation to hide anything away from the user. The lower resolution media queries should simply re-arrange the design into an optimal format. If you find something that's too difficult to display on mobile then you might need to question it's value on a desktop. If you do that then the mobile user isn't missing anything and (theoretically) shouldn't need the option to opt-out.

 

Totally agree, and its funny you mentioned this because last year when we attend Squiz conference we couldn't find the information about the conference and address on a mobile because of the responsive design was either hiding the information or we just couldn't navigate to the right page, and there was no way to switch to the full site.


(Anthony Barnes) #12

Totally agree, and its funny you mentioned this because last year when we attend Squiz conference we couldn't find the information about the conference and address on a mobile because of the responsive design was either hiding the information or we just couldn't navigate to the right page, and there was no way to switch to the full site.

 

That's definitely the issue with dedicated mobile sites. Ideally if there is a need for dedicated mobile you may use it complimentary to responsive and also provide the user with the option to opt-out. Like the rest of the web development community, responsive has been a learning process for us too!


(Tbaatar) #13

I was playing around with EES implementation, and figured the MySource Area for if/else statement could possibly be used to target mobile and serve necessary CSS/JS files?

 

I wonder if anyone else is using this method?


(Pomster09) #14

I'd have to agree with other posters on this thread, why would you need to do this when responsive is the way to go. There are a few ways you could offer the user to view the full site, you could use a select box with the options which would to change the css. Use a cookie to remember the user choice. Cookies can be set using JavaScript as below using a select option, but you could easily modify to just be a simple link and use a listener to do the same thing with only one choice:

 

<script>
function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, “”);
if (x == c_name) {
return unescape(y);
}
}
}

function cssSelected() {
var cssSelected = $(’#myList’)[0].value;
if (cssSelected !== “select”) {
setCookie(“selectedCSS”, cssSelected, 3);
}
}

$(document).ready(function() {
$(’#myList’)[0].value = getCookie(“selectedCSS”);
})
</script>
<select id=“myList” onchange=“cssSelected();”>
<option value=“select”>–Select–</option>
<option value=“style-1.css”>CSS1</option>
<option value=“style-2.css”>CSS2</option>
<option value=“style-3.css”>CSS3</option>
<option value=“style-4.css”>CSS4</option>
</select>


(Tbaatar) #15

Responsive is cool but when it comes to images you have to create 2-3 different dimensions and extra css.

 

For text heavy sites like Gov.UK is perfect but for product / ecommerce websites, dedicated mobile version is a must.


(Nic Hubbard) #16

Responsive is cool but when it comes to images you have to create 2-3 different dimensions and extra css.

 

This isn't true about the image sizes.

 

If you use a simple framework like Bootstrap (which I highly recommend) all the image scaling is done automatically with no additional images needed, and all the CSS for the responsive layouts is done for you. You just have to make sure to follow their column divs layouts and you are done.

 

Seriously, I think it is easier than you think.


(Tbaatar) #17

I meant using the <picture></picture> tag, and serving the correct size depending on the resolution, and not having to download unnecessarily large size images on mobile device.

 

I would much rather have streamlined mobile version for the core site, and create responsive layer for the rest, so if visitor visits the section of the site that isn't mobile at least they will get responsive version instead.