Making Your Website Mobile - Part 2
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
This is part two of a four-part series that covers how to transform your website into a mobile site. The first part of this series, "Making Your Website Mobile - Part 1" can be found here and I recommend that you start there before moving on to the more advanced features found in Part 2 of this series.
This article covers media queries and a Joomla! extension for mobile devices. Part three will cover incorporating Google AdSense and analytics along with a discussion of mobile fonts. And part four will finish up with the best practices for coding in HTML5 and CSS3 for mobile sites. The first part discussed how to get started.
Media Queries and Redirects
A media query allows you to create different design layouts for different screen sizes. There are pros and cons to this. This article won't go into the details on how media queries work as I've written about it before here: http://www.htmlgoodies.com/html5/tutorials/an-introduction-to-css3-media-queries.html#fbid=RD_urZ9Nz7i Using a media query would be most useful if your main site is a basic HTML or PHP site. That makes it easier to change the formatting of the content based on the visitor's browser. However, if you're using Joomla!, this makes things much more complicated and a media query becomes less of an option.
And some code specifically for iOS:
$type = $_SERVER['HTTP_USER_AGENT'];
if(strpos((string)$type, "Windows Phone") != false || strpos((string)$type, "iPhone") != false || strpos((string)$type, "Android") != false)
if(mobileDevice() == true)
There was no answer to the question about what if people want to visit the main site even if you have a forced redirect. So, that remains a problem and it might lead you to decide against using a redirect if you want your visitors to be able to visit the main site while on a mobile device.
I tried several different bits of redirect code and none of them worked my Joomla site. So, instead, I simply put a link on my main site that asks the visitor if they are on a mobile device, and if so, they can touch the link to be sent to the mobile version.
In a lot of ways using a link on the main site to your mobile site really is the best approach. You can find many articles that discuss using media queries and redirects in both a positive and negative light. In a best case scenario, the query or redirect works exactly as planned. In a worst case example, your visitor sees your mobile version while on a desktop and they see the main site while on a mobile, or they can't access the main site while on a mobile. Furthermore, there is no one easy answer on how to code the redirect and in my experience, they don't work (especially for Joomla sites). You might have different experiences; I'm just relating my own personal insight here. Plus, by noting on your main site that you can switch to a mobile site, that tells your audience that the mobile version is available if they choose to use it at a later date.
Joomla Extension for Mobile
If you have a Joomla site, there is a mobile extension that you can use. But I did not have good luck with it in the past. You can find it here. http://www.mobilejoomla.com/blog/95-mobile-joomla-10.html The first time I tried this extension was about a year ago and the configurations proved too much for me and I never got it to work. However, they are now claiming it's new and improved and they are calling it 1.0 Stable version. So, in all fairness, I might have been using some kind of alpha code they were still working on. If you have a Joomla site, then you might find it worthwhile to check out.