How to convert a web to mobile friendly

The following article shows how to convert a web to mobile, for display a website correctly in Smartphones with integrated browsers.

The technique used to convert a web page to Mobile is the responsive design, the design of the website adapts to the width in pixels of the mobile browser, for better usability of the website visitors.

The usability in mobile web pages aims to offer visitors the ability to view the site without having to zoom to read text, without having to scroll horizontally to see the whole page and without problems with links or navigation buttons for being too close to each other.

In addition to usability for visitors of a website in the very near future will be a requirement to have a web adapted to mobile for this is available in the mobile search engines, especially considering the growing number of hits they have from (the average access from mobile devices in the pages that we manage to date mobile equipment is about 30% of total visits and growing).

In this sense and as an example for our article, Google sent us an alert two weeks ago that showed us that 100% of pages of a web site of our property was not adapted for display on mobile devices, and for the moment Google inform mobile users in the search engine results page that was not adapted for mobile.

Image alert Google Webmaster Tools on a web page is not optimized for mobile

Alert example searching for website not optimized for mobile

For now, Google only publishes an informational alert in the search engine results (which affect fewer access from mobile devices), but it is likely that this website in the near future simply disappear from search engine results for mobile, losing the increasing number of visits they generate.

Here is an image of Google mobile usability testing to this website, we call (before):

Google Image Test web page not converted to mobile

Below we show the actions needed to convert a web to mobile, are divided into 3 steps:

1- Review of the HTML source code of our website
First of all, we have to review HTML source code of our website, to convert a website to mobile, we need that container HTML tags of our website are "div" and not "table".

Container HTML tags "div" bring us more flexibility in the design of our website with CSS (cascade style sheets) and makes possible convert a website to mobile friendly.

If your website have "table" HTML tags, then you need a full redesign of the source code of your website for convert it to mobile friendly website.

2- Update CSS to convert the website to mobile adapted to browser width
Technically, the key point to achieve usability by responsive design is adapt css stylesheets on our website to visualize containers, fonts, links, buttons and other elements differently depending on browser width.

To this we must add the following code to the end of our css stylesheet, add the code to the end of the .css file is important because we want the styles being overwritten per default browser width.

It is also important to be defining styles in descending width to go implementing the design and conversion of the website to mobile progressively, so some changes you make to a width of 479px for iPhone mobile types are inherited to the next wide of 319px defined for phones with a smaller screen.

This will look better with a basic example of the structure of code that we use:

/* Start Responsive Design*/
/* Smaller than 960px (mobile, tablet and browsers) */

@media screen and (max-width: 960px) {
/* ipad browsers*/
/*define a width for the main container*/
#main{width: 708px;}
/*increase the font size globally*/
body, input, textarea { font-size: 110%; }
/*redefine structure to avoid the containers float and center position lateral block to better text content usability*/
#wrapper #sidebar { float: none; margin: 0;width: auto; }
/*content block to all available width*/
#content {margin: 0; width: 100%;background-color: #fff;}
/*hide search block*/
#search-box {display: none; }

@media screen and (max-width: 767px) {
/* 7px Tablet browsers*/
/*define a prefered width in the main container*/
/*increase the font size globally*/
body, input, textarea { font-size: 120%; }

@media screen and (max-width: 479px) {
/* iphone browsers*/

/*define a prefered width in the main container*/
/*increase the font size globally*/
body, input, textarea { font-size: 130%; }
/*decrease padding of header container, adapt to small smartphones */
#header {padding: 1px; }

@media screen and (max-width: 319px) {
/* small smartphone browsers*/
/*define a width of 100% beginning in before 320px*/

/* End Responsive */

The code is adapted to the container "div" we have defined in our website, and will have to adapt to your own containers. From this scheme only have to play with the code and try to achieve the desired result.

To test the result in a browser on a PC and not have to test directly the result in a mobile, simply fit the window to the desired width to see how styles change depending on the width of the window.

3- Include META tags necessary to alert browsers that our website is adapted to mobile
This is important to make everything work, because if the following is not changed many mobile browsers will ignore our modifications css, and will reorganize the page for display on mobile as before, ie adapt the page to the device size without using the classes that we have defined.

To solve this, we just have to add a "META" tag in the header of your HTML, ie between labels.

The META tag to add is the following:
<meta name=viewport content="width=device-width, initial-scale=1">

This meta tag tells the browser of the device should not make any scaling of content and should use the actual width of the device to display our website, in other words we tell the browser that our web site is optimized for mobile and we manage the display of the page on different devices.

To add a META tag in the header of the page simply touch the .html file in your website, but here depending on the type of programming language, content manager, templates, framework, or whatever you are using as a base for develop your website, you should know what resources modify to get the desired result.

Once the project to convert the web page to Mobile is complete, go back to the "Google Test optimization for mobile" page in the URL:

As you can see the result is totally different the image will call "after":

Image of Google test web converted to mobile

That's all, to convert a web to mobile friendly you only have to play with style sheets css, until you get the desired result.

Share now!