July 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Creating a Mobile-Friendly Website in PHP

  • May 8, 2013
  • By Vojislav Janjic
  • Send Email »
  • More Articles »

In the past few years, the number of mobile users (and mobile devices, of course) has been constantly increasing. This trend continues and according to a recent research, in 2015 there will be more mobile devices than people on Earth. Nowadays, people surf a lot using mobile technologies, which implies that the website owners need to make their websites mobile-friendly in order attract more visitors and web developers need to learn how to do that in order to make more money. Keep on reading to find out more about ways to create a mobile-friendly website, their advantages and how to apply them.

Solution 1 - Separate Websites for Desktop and Mobile

In this approach, we will actually create two websites - one for desktop users, and the other for mobile users. A complete separation of desktop and mobile websites allows you to have more control over the features i.e. it is easier to add a new feature for mobile users only or make some desktop features unavailable in the mobile website. Furthermore, recent research has shown that more than a half of the mobile users in the world have reasonably slow internet connections, which means that the mobile version must be much lighter that the desktop one in order to perform well - this is also easy to achieve using this approach. The disadvantage of this solution is that the changes to the website will have to be made twice, making the maintenance harder.

How to Create Separate Websites for Desktop and Mobile in PHP

Let’s assume that your website is already live. First, create a new subdomain for mobile users: e.g. m.yourdomain.com or mobile.yourdomain.com. Copy the main website’s files to that subdomain. Don’t duplicate the database.

At this moment, the mobile website is set up, but is still the same as the desktop one. It needs to be modified. The modification consists of two steps:  1) Remove unnecessary files and features and 2) Create a mobile-friendly design. During the first step, we make the mobile website lighter by removing unnecessary features, Javascript files, CSS, and making images smaller i.e. we are doing everything we can in order to make the website as fast as possible. The second step will produce new design. In most cases, a completely new design is made and is usually 320px wide.

Now, the mobile website is ready and customized, but the mobile users aren’t automatically redirected to the mobile version of the website. To solve this problem, we use a PHP MobileDetect class, which can detect whether a user is using a phone, a tablet or a desktop device to access a website. You can download this PHP class from here: https://code.google.com/p/php-mobile-detect/. Include the class in all PHP files and add the following code:

<?php
 
require_once 'include/Mobile_Detect.php';
 
$detect = new Mobile_Detect;
$device_type = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
$script_version = $detect->getScriptVersion();
 
$desktop = $_GET['desktop'];
 
// If “Go to full website” link is clicked, redirect mobile user to main website
if($desktop == 1) {
                $_SESSION['desktop'] = 1;
                header("Location:" . http://www.yourdomain.com);
}
 
// User is using a mobile phone, redirect him to mobile version of the website
if($device_type == 'phone' && $desktop != 1 && $_SESSION['desktop'] != 1) {
                $url = current_url();
                $mobile_url = str_replace('http://www','http://m',$url);
                
               // Redirect only if no form data submitted
                if (empty($_POST)) {
                                header("Location:".$mobile_url);
                }
}
 
?>
 

Where the current_url function is:

 
<?php
 
function current_url()  {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
 
?>
 

This code detects if a user is visiting your website via a mobile phone and redirects him to the mobile version of the same URL he wants to visit. Also, this PHP code allows you to have a “Go to full site” button for mobile users - just put the following link: http://www.yourdomain.com/?desktop=1.

Solution 2 - Responsive Design

The second solution for creating a mobile-friendly website is responsive web design. As the name says, in this approach only the design is changed, i.e. CSS files. This is very good in terms of maintenance and SEO. Google recommends responsive design as the best solution when creating a mobile website. On the other hand, not being able to remove unnecessary files and scripts can have a great impact on your mobile website’s performance.

How to Create a Responsive Web Design

In responsive web design, we have different styles for different screen sizes. The screen sizes are targeted using media CSS queries, which are available in CSS3. The standard device widths for phones and tablets are the following:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

You can, of course, remove some of the queries, depending on your needs. After deciding which sizes you will customize, you need to decide how the mobile device design should look, i.e. which elements will be removed and which ones will be resized. Then create CSS styles and apply them for each mobile view. Add the following meta tag in the head of your HTML code:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Keep in mind that the following meta tag may sometimes cause problems with iPad, so if the design doesn't look good on an iPad, just remove this tag.

Conclusion

Creating a separate mobile website and responsive design are two approaches in creating a mobile-friendly website. There is no right or wrong approach. Use the one that best suits your needs.


Tags: CSS, PHP, desktop, Mobile site development




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel