Arnaud Gilbert 
Today , With the use of science we can imagine such things which are very forward to our thinking capacity. Science made this world small for us by the evolutionary invention that is mobile devices. Mobile devices are used globally at a rapid rate. Using these mobile technologies, people are exploring various things. They are able to surf websites, apps, much more.
For easy access to desktop websites by mobile devices there must be a mobile friendly design of the website. So website owners continuously try to figure out the best website version for their users which will be comfortable as well as attractive.
If you’re a website owner then you must have to give the best website design to your users on mobile devices. Are you looking to build this kind of convenient web design for your website?? This article is profitable for you.
For creating a mobile friendly website there are two options in front of you.
- Making separate websites for desktop and mobile devices in PHP
- Responsive design for website work in both forms.
Let’s discuss these two concepts in detail.
-
Making separate websites for desktop and mobile devices in PHP.
In this method we create separate two websites one for desktop users and other for only mobile users . These separate modes allow owners to control website features better. You can add features separately for mobile as well as desktop users. You can also add or withdraw some features in this separate mode. Compared to desktop websites mobile websites consume less internet connection this will be a positive point in this.
Demerits:
Website maintenance is harder.
Changes in website occurring twice separately so it may be time consuming.
Creating websites by these separate modes.
Get to know How to create separate modes of websites for desktop as well as mobile in PHP?
Consider , your website is live. For mobile users now create subdomains. Avoid duplication of databases . On this subdomain copy all files of the main website.
Now the mobile website is ready but it seems the same as the desktop so you have to modify it. There are two steps in modification, one is removal of some features as well as unnecessary files and second is creating a design which is mobile friendly. In this first step removal of unnecessary files causes a lighter mobile website with a smaller image layout. Also all these things we are doing for fast website working.
In second step will produce totally new design and this design usually as wide as 320px
Now we see customized websites for mobile but users cannot see this so that you have to use PHP. Using PHP we are able to understand which devices the user is using . Using PHP mobile detection you are now moving forward towards the PHP coding for mobile interface. This PHP coding is as follows.
Coding is :-
<?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);
}
}
?>
Now the current url function will be this
Coding 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 php code detects the user device and redirects him to the mobile version of the website using the same url. This code also allows your user to visit the full site by button ” go to full website “. For this you just have to put this link : http:/www.yourdomain website.com/? desktop=1.
-
Responsive design of websites that will work for both forms.
Responsive design of websites is the second method for you. As this name suggests in this you only have to change design.i.e the CSS files. You can perform good seo and maintenance using this design. Google also suggests this design as this is the best solution in creation of a mobile friendly website.
Demerits:
You are unable to remove unnecessary files, scripts,. This may affect your mobile design and it’s performance.
Creating a website by responsive design.
Get to know How to create responsive design for your website in PHP?
In this method of responsive design we have a variety of screen sizes with a variety of styles. These screen sizes use CSS, CSS3 for using media.
This php coding is as follows.
Coding is :-
/* 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 */
}
By using this php coding you can add or remove some of the queries depending on your needs. By deciding size now you have to decide the look of design with removing elements, resizing. After that you have to create CSS styles and apply them for every mobile view. Now add meta tag in your HTML code which is given below.
Meta tag is :-
<meta name=”viewport” content=”width=device-width, initial-scale=1,
Mind it this meta tag sometimes causes guts with iPad . That’s why the design does not seem good, so just remove this tag.
Conclusion:
Mobile interface for every website is necessary nowadays so that every website owner must have to design it for better results. Those above-mentioned two methods are really good for you. There are no good or bad aspects on these . Use any method that is convenient to you.
Website owners , give your website a mobile friendly look and get success in your business.
