Hi everyone,
So the main homepage at http://www.alfraprog.lu is finally live. It is my first (trying to get it to look professional) stab at web development. It’s been a long struggle. I initially designed it only for the desktop, but then after talking to some friends, I realised that I should make it responsive, i.e. compatible with mobile and tablet devices.
Turns out, that I learnt some php as well, because I found a nice script that tells me if I’m on a mobile, on a tablet or on a desktop. It’s called Mobile Detect:
http://mobiledetect.net
What I finally came up with was to create the following php file, so that I have mobile, tablet and desktop support:
[code]
<?php include_once(“plugins/browserdetect/Mobile_Detect.php”) ?>
<meta name=”viewport” content=”width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
<?php
$detect = new Mobile_Detect;
$mobile = $detect->isMobile();
$tablet = $detect->isTablet();
if($tablet)
{
echo “<link rel=’stylesheet’ href=’css/background_tablet.css’ />”;
echo “<link rel=’stylesheet’ href=’css/theme_tablet.css’ />”;
}elseif($mobile)
{
echo “<link rel=’stylesheet’ href=’css/background_mobile.css’ />”;
echo “<link rel=’stylesheet’ href=’css/theme_mobile.css’ />”;
}
else
{
echo “<link rel=’stylesheet’ media=’screen and (max-width: 700px)’ href=’css/theme_mobile.css’ />”;
echo “<link rel=’stylesheet’ media=’screen and (min-width : 701px) and (max-width : 1024px)’ href=’css/theme_tablet.css’ />”;
echo “<link rel=’stylesheet’ media=’screen and (min-width: 1025px)’ href=’css/theme_desktop.css’ />”;
}
?>
[/code]
So this php script takes care of a number of things:
[code]
<?php include_once(“plugins/browserdetect/Mobile_Detect.php”) ?>
[/code]
We include the Mobile Detect script. I like to keep my plugins all together so I put it in plugins/browserdetect.
Next up we have:
[code]
<meta name=”viewport” content=”width=320, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
[/code]
We force our viewport to be 320 wide, and we disable all forms of scaling by giving it an initial scale of 1, maximum sale of 1 and disable user-scalable.
The rest of the php file will be an actual php script.
We want to use Mobile Detect to figure out if we are on a mobile, or on a tablet. We create a new object from the class Mobile_Detect and we use the provided methods to give us information about the device we are on:
[code]
$detect = new Mobile_Detect;
$mobile = $detect->isMobile();
$tablet = $detect->isTablet();
if($tablet)
{
echo “<link rel=’stylesheet’ href=’css/theme_tablet.css’ />”;
}elseif($mobile)
{
echo “<link rel=’stylesheet’ href=’css/theme_mobile.css’ />”;
}
[/code]
The last else deals with the desktop version. To reuse the same css on the desktop when resizing the window we say that everything below 700 pixels wide should be considered mobile. Above 700 and below 1025 we want the tablet version. And finally, from 1025 onwards we want the full-sized desktop version.
We use min-width and max-width for this:
[code]
echo “<link rel=’stylesheet’ media=’screen and (max-width: 700px)’ href=’css/theme_mobile.css’ />”;
echo “<link rel=’stylesheet’ media=’screen and (min-width : 701px) and (max-width : 1024px)’ href=’css/theme_tablet.css’ />”;
echo “<link rel=’stylesheet’ media=’screen and (min-width: 1025px)’ href=’css/theme_desktop.css’ />”;
[/code]
So I saved this file under dynamicStylesheets.php and in my index.php (Note that you HAVE to use .php now, because it won’t work otherwise) will look like this now:
[code]
<html lang=”en”>
<head>
<meta charset=”utf-8″>
include_once(“dynamicStylesheets.php”) ?>
</head>
</body>
</html>
[/code]
Also for this to work, we need to serve the page dynamically since we are using php. I used the wonderful XAMPP. For XAMPP I saved my page here: /XAMPP/xamppfiles/htdocs/mywebpage and then access it on http://localhost/mywebpage. Note that the apache server has to be running for this to work.
Why did I not rely exclusively on the css properties? Because not all vendors of smartphones and tablets are the same. My goal was to have a much simpler script that does the job for me.
By using php I can just copy-paste my include of dynamicstylesheets.php into my different pages. It’s just one extra line in the header. Everything is in it’s little place this way, and I don’t have to worry about my setup anymore. We have to rely on php now, so all pages that use this technique will have to be served by the web server dynamically.
I really liked this link on css-tricks.com that gave me a good starting point:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can take a look at http://www.alfraprog.lu and resize the window on your desktop to see what all the fuss is about or you can browse to the site from a phone or a tablet.
I hope you will find this useful.
If there is something completely wrong with this approach, or if you like it, or if you have a suggestion, please let me know.
Stay tuned,
Alex G.
