Monday, February 15, 2016

Website compatible with mobile phones

How to make a website compatible with mobile phones and other mobile devices

Make web pages display properly on all browsers phones and other portable devices such as tablets and eBooks. Codes and scripts to identify the user's browser and load the CSS style that can display a web page properly.

How to make a website compatible with mobile phones and other mobile devices
Due to the current boom in the use of mobile and portable devices to access the internet and its inevitable growth, it is necessary for developers and all those who publish articles on the Internet, look for alternatives to ensure that web pages created are displayed correctly in any of these media and of course also on desktops and laptops. 
Increasingly, those who access our sites using sophisticated devices that support the latest specifications of HTML, CSS and Javascript, its major limitation is its small screen than some cases may be only 320 pixels. 
Since it is so recent this boom, the vast majority of CMS, that is software on the net that allow you to create web pages, none of them is 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, but also to adapt pages created before and is not properly shown on these devices. 
these pages without action immediate, lost more and more visitors to the extent that an increasing proportion of mobile traffic. 
it may not be necessary to adapt all, but the most sought in each case. 
There are several options or alternatives to achieve, on this page you will find several of them , choose the one that fits your situation.

Types used to access the Internet mobile devices, differences

There are several ways to differentiate portable devices, but for those who publish content at present, the most suitable can be sorted out by the resources available, thus can differentiate into only two groups:
Traditional cell phones that allow access to the network but with limited resources. All these media usually have the following limitations:
• They are only compatible with pages made. CHTML (iMode), WML and WAP
• not allowed or able to read the script, so employed Javascript be blocked.
• do not support tables.
• need of pages that use UTF-8
Portable devices such as Smartphone or modern tablets have a kind of desk, quite similar to desktop browser functionality.
Examples are the iDevice (iPhone, iTouch, iPad), Windows Phone 7, Blackberry, Android, and those using all TabletPC and eBook readers.
All of them:
• generally lower support HTML 5 or less.
• Pets are perfectly Javascript.
Fortunately are included most modern devices and account for the bulk of mobile internet navigation actually.
For measurement and resolution screens of phones and tablets are currently most used, look at the tables on the next page of our website: Measures of the screen and resolution of mobile phones and tablets

Options and alternatives to properly see the pages on mobile and desktop browsers

➔ Create versions of pages optimized for mobile, detect and manage these devices to them.

➔ Create versions of pages optimized for mobile phones and just put a link on top of the normal pages for the user to manually load.

➔ Continue to use the same standard pages but use a script that detects mobile and then load a specific style just for them.

➔ Use mobile-optimized pages but use a script to standard desktop browsers use an appropriate style for them.

➔ Finally the method recommended by Google, use Responsive web design . Something in Spanish as "responsible and responsive web design." 
Web Responsive design is merely serve all kinds of devices the same page or the same HTML content, but use CSS3 to define how it is represented, according . the size of the screen 
that can be used for the CSS commands: "media handheld" and "media screen". 

Examples of using media handheld

In the following example, the default browser will load file normal.css style, whether it is a portable device which loads the page, then read the inline style, which will modify the width and font size specified in the previous file

Use the commandmedia screen

media screen is something similar, the difference is that a certain style is applied only when the screen size of the device changes.
In the following example, it is used to change the font size of the page and hide the sidebar, it is activated when the browser width is less than 800px.
You can try on this page , by reducing the width of the browser window, even a desktop browser like Google Chrome.

CCS3 used to decrease the size of the images

One of the fundamental rules to ensure a good experience on mobile devices is to avoid the horizontal bar uncomfortable and almost impossible scroll the page to the user.
You can make images on a page, be reduced automatically the device's screen to prevent the horizontal scroll bar, try and use it appears as follows:

Practical example of using CSS to reduce and fit the images on a page
The following image measures exactly 1000 pixels wide, you can check by reducing the width of the browser window, and the image fits exactly, preventing scrollbars appear side. More information on the blog Googlewebmaster: Customisable Designs

Tips for Google
to make Google tracked correctly and understand that our pages use responsive design, you need to check for blocked in the robots.txt file, directory files CSS styles. 

How to detect mobile devices that accessed a website

Obviously you can not use Javascript for this purpose, because most of these devices do not support this language, the solution can be server languages such as PHP, to detect devices by their user agent or use JavaScript in the HTML code knowingly many of the older phones can not access this page.

Script to detect mobile devices and redirect them to a directory

➔ The following script in PHP, inserted at the beginning of a index.php page, re-routed to mobile devices whose user agents are specified, a directory called in this example mobile , containing the versions optimized for these devices.
in this example only three user agents (iphone, ipad and kindle) are specified, but can be used more.
the standard browsers continue to read the rest of the original page.
the big disadvantage of its use is the large number of devices with agents of different users, even it grows with each passing day. In addition duplicate versions of each page would be required.

Script to detect mobile devices and serve a CSS style

➔ The following script that is used on some pages of this site uses Javascript to serve customers who do not use the standard Internet Explorer, Chrome or Firefox, CSS style different.

What does the script?
Just type the following style if the specified browsers, which hides the sidebar or sidebar and menu bar are used, also adjusts the width of the page.
<Style type = "text / css" media = "screen">
# Sidebar, # menu {display: none;}
#page {width: 99%;}
#content {width: 99%;}
</ Style

Script to detect specific web browsers and serve a CSS style

➔ The following script works in reverse, is used in pages created for mobile browsers Internet Explorer, Chrome or Firefox, you will taste the page with a different style.

Both have the advantage that can be inserted into existing pages and using HTML extension allows these pages display properly on smartphones and other modern devices assimilate Javascript.

How to check how webpages are on different devices

There are several options to see how any Web page into a portable device is either a cell phone or a tablet. 
These are:

• Using network services that works as simulators. 
• Use the adaptive design Firefox browser. 
• Install the "User Agent Switcher" Firefox extension. 
• Use the Google Chrome browser with different user agents.

Use the design customizable Firefox browser

The Firefox browser includes since version 15 in developer tools, a new utility called. "View of adaptable design" 
. Lets see how the page you are currently browsing, on the screens of the most popular portable devices is 
In the menu you can choose between the following resolutions:

320 x 480 - iPhone (3G - 3GS) 
360 x 640 
768 x 1024 - iPad 1 & 2 
800 x 1280 - Nexus 4 Nokia Lumia 
980 x 1280 Kindle Fire HD 7 
iPhone 5 1280 x 600 
1920 x 900 Microsoft Surface

To open the Vista design uses Adaptive Control + Shift + M.

Use Firefox extension "User Agent Switcher"

User Agent Switcher is an extension created by Chris Pederickallows Firefox to function as a perfect simulator. 
Unlike Vista adaptive design, no different screen sizes are used. 
The browser used with different user agents, ie is sends the request to the web server where the page is hosted by simulating different devices and browsers. 
the sites that deliver content according to the browser or device (Facebook, Twitter, Google+, etc.), will react differently. 
We may view a page in the same way, if the load using an iPhone, iPad, BlackBerry or other devices, including a desktop browser or spider a web browser.

Examples of using Firefox User Agent Switcher

Simulate how a page is displayed on an iPad using Firefox User Agent Switcher. Simulate how a page is displayed on an iPhone, using Firefox User Agent Switcher.
Simulate how a page is displayed on an iPad

Simulate how a page is displayed on an iPhone

How to install User Agent Switcher in Firefox?

Install User Agent Switcher in Firefox from the following . 
By default the extension includes only a few user agents, which should include an XML file that is a database with the vast majority of . the devices being used today 
can download the file from: Techpatterns
in fututo you must update it regularly to have available the user adentes new devices.

Using Google Chrome browser with different user agents

If you are using Google Chrome you can configure it to load pages using agents of different users. 
For that you only need to add a switch in the shortcut to the executable. 
The following example shows how to set up a shortcut to Google Chrome, for websites . in a similar way as if we were sailing with an iPad 
Do the following:

. • Give a right click on the shortcut to Google Chrome or create a new one on the desktop 
. • Open Properties 
• Destination path appears in the application: 
C: \ Users \ Username \ AppData \ Local \ Google \ Chrome \ Application \ chrome.exe 
• at the end of it leaves 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 " 
• Save changes.