Making Your Website Mobile - Part 2

By Michael Rohde

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.

For examples, Here's the mobile site I made for my content site and here's the mobile site I made for a consulting firm.

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.

Another option is to use a redirect. A redirect should be able to detect if your visitor is using a mobile browser, and if so, they should be sent to the mobile version of your site. This is different from a media query in that you're not using the same content but with a different CSS. Instead, you're simply redirecting the user from your main site to your separate mobile site; and that redirect occurs based on the visitor's browser. Again, just like the media query, this is easier to implement if your main site was built with HTML. But for something like a Joomla! site, again, things become more complicated. Here is a code snippet that shows how to use a redirect based on the visitor's browser (taken from CSS-Tricks http://css-tricks.com/snippets/javascript/redirect-mobile-devices/):

And some code specifically for iOS:

If you scroll through the comments, you'll see lots of people stating that it "Works Great" and so forth. But as you scroll further, people start asking about how to make it work for mobile devices that don't support JavaScript and what happens if you want the visitor to be able to visit the main site if they so choose. The answer to the JavaScript question is to use PHP and someone even provided a code example:

function mobileDevice()

{

$type = $_SERVER['HTTP_USER_AGENT'];

if(strpos((string)$type, "Windows Phone") != false || strpos((string)$type, "iPhone") != false || strpos((string)$type, "Android") != false)

return true;

else

return false;

}

if(mobileDevice() == true)

header('Location: http://www.m-tek.biz/mobile.html');

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.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date