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/');
}
?>
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?
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.
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.
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.
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.
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!
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'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);
}
}
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.
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.