Revamp PHP Websites to be Easily Accessible on Mobile Devices
- tech2blog.com
- Jul 23, 2016
- 5 min read
Web Access has become a very crucial these days; it is unbounded from where you are accessing or which device you are using. The convenience of your customer accessing your website matters the most. Nowadays, people use mobile devices more than they use desktops to access websites so developers need to build websites that are mobile friendly. Web sites were earlier also accessible using mobile browsers, but building Responsive Website is another thing.
Responsive Web Design is a design aimed to be flexible with every device the website is being accessed from. Even Google with its launch of Mobilegeddon Algorithm update in April 2015, penalizes the websites which are not responsive or are not easily adaptable to different devices.
How do Responsive Websites differ from Traditional Websites?
Traditional Websites are made to be accessible from traditional web browsers i.e. the desktop browsers. When these sites are accessed from mobile devices, the full functionality of these websites might not be resolved or some part that is only capable of loading only on web browsers won’t work. The layout of the website should be like water, taking the shape of any device it is accessed from. Websites with responsive design automatically detect visitor’s screen size and orientation and then change its layout accordingly.
Local Businesses like restaurants, schools, hotels, hospitals, grocery stores which are accessed in everyday routine.
The Ecommerce stores which will get a new peak in sale once turning up for Responsive Websites Online Information Providers – News Sites, Blogs, etc. to be easily accessible for everyone when in need.
Things to Note
A Flash-based design for your website, and if you don’t have its mobile version most probably more than half of your users are not seeing your complete website. These flash-based websites are not visible on IPhone Browsers.
Web sites using heavy graphics or multimedia will not perform well on the mobile devices.
How to Go For Mobile?
Working for your Mobile Friendly Website is not a difficult task. Popular Content Management System WordPress facilitates Ready Made Responsive Theme Templates. Some website owners focus on improving major areas of their websites by making them mobile-friendly.
By using PHP we have different methods available to revamp our traditional website into responsive websites. Below given are the explained approaches for creating mobile friendly web pages, their pros and how to code them –
1. Building an alternative Mobile-Friendly Website
This approach is used when we want to create a separate website for Mobile Device. To give the user a different experience when accessing from Mobile Devices it is recommended to use. Desktop and mobiles have different needs which can be fulfilled through this. As Internet connections are slow on mobiles a separate lighter version of mobile will easily load and run on these devices. However, building two separate sites is usually avoided by developers because of maintenance issues.
In this method, we assume the desktop website is already live. First, we create a new subdomain for the mobile version, which will be like m.yourdomain.com or mobile.yourdomain.com. Now we copy the main files of the website to the sub-domain but we will not duplicate the database.
Now the modification starts – remove the unnecessary features, JavaScript files, make the images smaller, so that the mobile friendly site loads easily. In the next step, we produce a new design which is usually 320px wide.
Recommended Article: How to Create Responsive Google Adsense Ads
Now we need to automatically redirect the visitor to the mobile friendly site when accessed from mobile devices. For this, we use PHP Mobile Detect Class, which identifies a user is using what device to access the website.
***** PHP CODE FOR MOBILE FRIENDLY WEBSITE ******
<?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;
}
?>
2. Responsive Designs
The second way is simply designing a website in Responsive Web Design. In this, we modify the CSS files. This is a popular method as it requires less maintenance and SEO. Like in the former case we would remove the unnecessary file; as such nothing is required here. Google highly appreciates responsive websites.
In responsive websites, we have different styles for the different screen size that different devices have – phones, tablets, desktops. Responsive websites are adaptable to every kind of mobile devices it is accessed from.
***** CODE FOR CSS RESPONSIVE ******
/* 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 */
}
Conclusion
The write up thoroughly covers solutions for enhancing distinct visibility on every device a website is accessed from. Responsive mobile design and Mobile Friendly version are different approaches which can be used for a website as required.
Author Bio:
Ankur Purohit is working with Baymediasoft – a renowned PHP development company. With Six years of experience working in the field of development and digital marketing, he has technical as well as marketing skills to deliver valuable web solutions
Comments