Due to the current surge in the use of mobile and portable devices to access the internet and its inevitable growth, it is necessary for developers and bloggers to look for alternatives to make the web page display correctly not only in desktops and laptops but also in Smartphones and tablets and it gives a birth to new technology we call it responsive design. In responsive design we try to create a mobile compatible website.

Increasingly, those who access internet using sophisticated devices that support the latest specifications of HTML, CSS and Javascript, the only major limitation is its small screen which in most cases may be only 320 pixels.

more mobiel customers

Since it is new, most of the CMS are properly updated to ensure that generated pages are compatible with mobile devices.

The big problem we all face is not only to create new content that is compatible with mobile or tablet, but also to adapt previously created pages that are not properly displayed in these devices.
create adaptive design
If we as a website owner don’t take any substantial action, we would be loosing more visitors to the extent that a greater proportion of traffic is from mobile.
create mobile compatible website
There are several alternative tricks I have covered in this article. Choose the one that suits your situation.

Types of mobile devices used to access the Internet

There are several ways to differentiate portable devices, but for new bloggers, the most suitable can be sorted out by the resources available:

Traditional cell phones allow access to the network with limited resources. All these media usually have the following limitations:
old javascript disabled mobile
• They are only compatible with pages made in cHTML (iMode), WML and WAP
• They are not able to read the script, so employed JavaScript is blocked.
• No table tag is allowed.
• They render pages that use UTF-8

Portable devices such as Smartphone or modern tablets have quite similar functionality to the desktop browser.
Examples are Apple devices, Windows Phone, Blackberry, Android, Tablets and all eBook readers.
• Usually less support HTML5 or less.
• Perfect work with JavaScript pages.

Luckily majority of user leverage these devices to surf internet with modern browsers installed.

Options to create mobile compatible and desktop compatible webpages

• Create versions of pages optimized for cell phones. Generally, these devices detect by themselves and manage those pages.

• Create versions of pages optimized for single cell and place a link on top of the regular pages, so that the user can manually the page.

• Continue using the same standard pages, but use a script that detects the phones and then upload a specific style just for them.

• Use mobile optimized pages, but use a script to detect the desktop browser and use an appropriate style for them.

• Finally, using responsive design, the method recommended by Google.
create responsive website
Responsive web design merely serves all kinds of devices, the HTML content is the same, but use CSS3 to define how it is represented, according to the size of the screen. The CSS commands use to determine that: “@ media handheld” and “@ media screen”.

How to use the @media handheld to create responsive design

In the following example, the browser will load main.css file for all the devices. Later it reads the inline style that modifies the width and font size specified in the previous file for portable devices.

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="another.css" />
<![endif]-->

How to use the @ media screen

The @ Media screen is similar to @media handheld, the only difference is that a certain style is applied only when the screen size of the device changes.
The following example is used to change the font size of the page and hide the sidebar. It activates this behavior when the browser width is less than 800px.

@media screen and (min-width:280px) and (max-width:800px) {
body{font-size:0.7em;}
sidebar{display:none;}
}

How to use CCS3 to auto fit image size

One of the basic rules to create good experience webpage on mobile devices, is to avoid the horizontal bar which is uncomfortable and almost makes it impossible to scroll the page.

You can create a page with an image that automatically reduces with device screen size to prevent the horizontal scroll bar. Try the following code to achieve this.

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Tips for Google Bot to crawl pages correctly

To make Google identify all pages correctly and understand that our pages use the adaptive design, it is necessary to check that we do not block the robots.txt file to crawl CSS style-sheets.

How to detect mobile devices to offer adaptive design

Obviously you can not use Javascript for this purpose, because most of these devices does not support JavaScript, the solution could be using dynamic languages such as PHP or ASP to detect devices by their user agent. Using JavaScript in the HTML knowingly, stops most of the old phones rendering your page correctly.

PHP Script to detect mobile devices and redirect to the specific directory

The following script in PHP language, inserted at the beginning of an index.php page, re-direct the visitor to the page created and optimized specifically for mobile devices. Just make sure you specify the user agents.

The example code shows the demo for three user agents (iPhone, iPad and kindle), but you can specify several if you need.

The biggest disadvantage of using user agent and redirecting visitors to a mobile optimized page is that we have a large amount of devices with different user agents and each day the number is growing

<!--?php 
$user_agent = (isset($_SERVER['HTTP_USER_AGENT'])) ? strtolower($_SERVER['HTTP_USER_AGENT']):'';
if(
stristr($user_agent, "iphone")or
stristr($user_agent, "ipad")or
stristr($user_agent, "kindle")
) 
{
header("Location: Mobile-device/index.html");
}
?-->
Your content

Script to detect mobile devices and use proper CSS style sheet

The following script uses JavaScript, serve visitors a different CSS style sheet, who do not use the standard browser such as Internet Explorer, Chrome or Firefox.

<script>// <![CDATA[
if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Googlebot/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) {""} else {
document.write('<style type="text/css" media="screen">
#sidebar,#menu{
display:none;
}
#page{
width:99%;
}
#content
{width:99%;
}
</style>');}
// ]]></script>

The above scripts create the style sheet for the browsers mentioned in the script to hide the sidebar and show only page and content.

Script to detect specific web browsers, and serving proper style sheet

We just saw how to serve specific CSS after detecting a mobile device. The following javascript code detects the browser and server specified css style sheet for the user.

<script>// <![CDATA[
if((navigator.userAgent.match(/MSIE/i)) || (navigator.userAgent.match(/Chrome/i)) || (navigator.userAgent.match(/Firefox/i))) {
document.write('<style type="text/css" media="screen">
#header{
font-family:Verdana;
font-size:16px;
width:90%;
}</style>');    
}
// ]]></script>

PHP code for Browser Detection

<!--?php 
 
function browser_detection( $which_test ) {
 
    // initialize the variables
    $browser = '';
    $dom_browser = '';
 
    // set to lower case to avoid errors, check to see if http_user_agent is set
    $navigator_user_agent = ( isset( $_SERVER['HTTP_USER_AGENT'] ) ) ? strtolower( $_SERVER['HTTP_USER_AGENT'] ) : '';
 
    // run through the main browser possibilities, assign them to the main $browser variable
    if (stristr($navigator_user_agent, "opera")) 
    {
        $browser = 'opera';
        $dom_browser = true;
    }
 
    elseif (stristr($navigator_user_agent, "msie 4")) 
    {
        $browser = 'msie4'; 
        $dom_browser = false;
    }
 
    elseif (stristr($navigator_user_agent, "msie")) 
    {
        $browser = 'msie'; 
        $dom_browser = true;
    }
 
    elseif ((stristr($navigator_user_agent, "konqueror")) || (stristr($navigator_user_agent, "safari"))) 
    {
        $browser = 'safari'; 
        $dom_browser = true;
    }
 
    elseif (stristr($navigator_user_agent, "gecko")) 
    {
        $browser = 'mozilla';
        $dom_browser = true;
    }
 
    elseif (stristr($navigator_user_agent, "mozilla/4")) 
    {
        $browser = 'ns4';
        $dom_browser = false;
    }
 
    else 
    {
        $dom_browser = false;
        $browser = false;
    }
 
    // return the test result you want
    if ( $which_test == 'browser' )
    {
        return $browser;
    }
    elseif ( $which_test == 'dom' )
    {
        return $dom_browser;
        //  note: $dom_browser is a boolean value, true/false, so you can just test if
        // it's true or not.
    }
}
?-->

You could Call this function like this:

$user_browser = browser_detection('browser');
if ( $user_browser == 'opera' )
{
    do something;
}
 
or like this:
 
if ( browser_detection('dom') )
{
    execute the code for dom browsers
}
else
{
    execute the code for non DOM browsers
}

Reference

JavaScript code for browser detection

var d, dom, ie, ie4, ie5x, moz, mac, win, lin, old, ie5mac, ie5xwin, op;
 
d = document;
n = navigator;
na = n.appVersion;
nua = n.userAgent;
win = ( na.indexOf( 'Win' ) != -1 );
mac = ( na.indexOf( 'Mac' ) != -1 );
lin = ( nua.indexOf( 'Linux' ) != -1 );
 
if ( !d.layers ){
    dom = ( d.getElementById );
    op = ( nua.indexOf( 'Opera' ) != -1 );
    konq = ( nua.indexOf( 'Konqueror' ) != -1 );
    saf = ( nua.indexOf( 'Safari' ) != -1 );
    moz = ( nua.indexOf( 'Gecko' ) != -1 &amp;&amp; !saf &amp;&amp; !konq);
    ie = ( d.all &amp;&amp; !op );
    ie4 = ( ie &amp;&amp; !dom );
 
    /*
    ie5x tests only for functionality. ( dom||ie5x ) would be default settings. 
    Opera will register true in this test if set to identify as IE 5
    */
 
    ie5x = ( d.all &amp;&amp; dom );
    ie5mac = ( mac &amp;&amp; ie5x );
    ie5xwin = ( win &amp;&amp; ie5x );
}

mobile website code

Reference

How to test your website for different browsers and mobile devices

There are several options to test your webpage, how it looks like on a portable device, either a cell phone or a tablet.

• Use mobile device simulators to test your website look and feel.

• Use the Adaptive design and test in Firefox browser tab.

mobile browser detection
The Firefox browser has 15 special tools for developers. They have a new utility called: “View of adaptable design”.
It allows to check the page looks in different environment.
From the menu you can choose between the following resolutions:
320 x 480 for iPhone 3GS and less
360 x 640
768 x 1024 for iPad
800 x 1280 for Nexus 4 Nokia Lumia
980 x 1280 for Kindle Fire HD 7
1280 x 600 for iPhone 5
1920 x 900 for Microsoft Surface
To open the view of adaptable design uses the keys Control + shift + M.

• Install the “User Agent Switcher” extension in Firefox.

ssiddique-user-agent
User Agent Switcher is an extension created by Chris Pederick, allows Firefox to run as a perfect Simulator.
Unlike Adaptive Design view, different screen sizes are not used but the browser is used with different user agents, i.e. it sends the request to the web server that hosts the page, simulating different browsers and devices.
Sites that deliver content according to the browser or device, will react differently in different environment.
You will see a page in the same way, as if we load it on an iPhone, iPad, BlackBerry or any other device, including a desktop browser or a web search engine spider.

• Use the Google Chrome browser with different user agents.

If you are using Google Chrome, you can set it to load pages using different user agents. The following example shows how to configure Google Chrome to view websites in a simulated environment.

• Create a shortcut of your Google Chrome on your desktop.
• Right click on the shortcut and open properties.
• Destination appears in the path to the application:
C:\Users\XXXXXX\AppData\Local\Google\Chrome\Application\chrome.exe
• At the end of the path leave a space and paste:
-user-agent = Mozilla/5.0(iPad;)” U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10 ”
• Saves the changes and you are done.

Important tags to consider while Creating a website for Apple devices

Set the icon using following code:

 < Link rel = "apple-icon" href = "/ apple-icon.png" />

With the advent of new apple devices, probably you have to change the icon size to 114×114 and 72×72 for iPhone and iPad respectively. In general, the size of the icons can be more, safari independently compress it to the desired resolution and adds “Fiberglass” icon.

< Link rel = "apple-icon-precomposed" href = "/ apple-icon-precomposed.png" />

How to enable full screen mode in Apple device
The default tab from the desktop launches website in normal mode. To open the website in full mode you can use following tag

< meta name = "apple-Mobile-Web-app-Capable" content = "Yes" />

How to hiding the status bar in iPhone and iPad
In order to change the status bar, use meta tag apple-mobile-web-app-status-bar-style

 < meta name = "apple-Mobile-Web-app-status-bar-style" content = "Default" />

How to disable zoom feature in iPhone and iPad
To control the zoom uses the meta tag viewport. Turning off the possibility of zooming the page:

 < meta name = "viewport" content = "User-scalable = no, width = device-width" />

How to change the CSS with change in screen orientation
Depending on the device screen orientation you might want to use different CSS. The simplest way to use such different CSS is:

< link rel= ”stylesheet” media= ”all and (orientation:portrait)” href= ”portrait.css”> 
 < link rel= ”stylesheet” media= ”all and (orientation:landscape)” href= ”landscape.css”>

You can also achieve this functionality using javascript

window.addEventListener ( 'orientationChange' , ChangeOrientation, false );
 
 function  ChangeOrientation () { 
  var orientation = Math.abs (window.orientation) === 90 ? 'landscape' : 'portrait' ;
  alert (orientation); // here you can change the css style sheet 
 }

How to get rid of the elastic scrolling in iPhone and iPad
Safari has a wonderful feature, elastic scrolling at the end and beginning of the page. You can disable this feature using JavaScript.

< script > 
 function  NoElasticScroll (e) {
  e.preventDefault (); }
 
< body OnTouchMove = "NoElasticScroll (Event);" >

5 tips to create a CSS compatible with all the browsers

• Avoid using absolute dimensions as the pixels on the main elements of the pages, use percent to fit on small screens.
• For the Apple devices such as iPhone, iPad, iTouch “viewport” meta-tag should be used in the area of the HEAD in the following way:

< meta name = "viewport" content = "initial-scale = 1.0, user-scalable = yes" >

• On some pages, it is recommended to hide the sidebar, allowing you to save space. You can achieve this using CSS display: none attribute.
• You can hide elements that exceed the dimensions on small screens. For that it is necessary to add an identifier to such elements, e.g. id = “image” and then in the CSS for mobile add #image(display:none;} )
• Always use images with maximum width of 280 pixels, works perfectly for all Smartphone.