Technical Advice for Mobile-Friendly Website


Technical Advice for Mobile-Friendly Website

Google has officially announced that they are going to make few modifications their search algorithm to push the mobile friendly website up in the search index.

 

Since the growing market of smartphones, the chances of your website being browsed with a mobile phone has dramatically increased. But Google just didn’t leave you alone in all this, they have developed tools to test your site for its mobile friendliness. It can suggest possible solutions you should take to improve overall visual experience in mobile phone screens. The new algorithm is going to take place April 21.

 

You can also check if your site is mobile friendly for mobile devices. A label saying “Mobile-friendlywill appear with your site in search results.

Mobile friendly

 

Websites with having support of mobile phones are supposed to get slightly higher ranking in compare to sites those are not mobile friendly.

 

Here are some tips and tricks you can use to improve visibility and readability of your site in mobile devices.

 

Testing tool

You can use Firefox’s Responsive Design View or Chrome Device Emulation Mode to test your website inside your desktop browser. I personally prefer Firefox for this, it is simple, fast and easy to use. Where Chrome’s Device Emulation Mode offers added functionality by spoofing User-Agent string etc.

 

Viewport

Viewport is a meta tag which can be used to set level of scaling on mobile device. You can set the default zoom level by specifying the device width and you can also set if a page is user scalable or not. Please visit W3C standards specification page for viewport meta tag for complete details.

 

Don’t use <font>

Most of the latest browsers still support HTML <font> element but it has been discontinued ages ago. You can replace it by using <span> element and then apply appropriate CSS for styling the text the way you want.

 

Never use fixed sizing and absolute position

You elements should be adaptable in its container. So never use fixed with styling which will make your elements not adopting in different sized containers. Never use absolution position like 30px from top and 300px pixel from left. It makes your elements somewhat like stuck on a specific position which may often require user to scroll horizontally.

 

Minimize horizontal scrolling

It is best to always keep your website vertically scrollable, not horizontally. If there are certain elements those are requires extra width then apply ‘overflow: scroll’ CSS in their parent container and keep the container width equals to the device’s actual width. Using ‘overflow: hidden’ will make the container scrollable if any of its child doesn’t fit in the container. This trick is often used with tables having so many columns.

 

Never use tables for layout

If this question ever come to your mind that “should I use table for layout?” then know it, the answer is a clear “No”. You should never use tables for layout because you can never align columns of a table in different positions. Here is an old discussion on the stackoverflow titled “Why not use tables for layout in HTML?”

 

Always set overflow to auto with <pre> tag

<pre> tag is used to represent codes which preserves multiple white spaces and new line which is ignored in the HTML. Always apply ‘overflow: auto’ with <pre> elements for codes.

 

DOCTYPE declaration

Add DOCTYPE declaration for users using old desktop browsers, such as Internet Explorer 8. Without a correct DOCTYPE at the top of HTML, some desktop browsers enter “Quirks mode” and render in a non-standard way. Using a DOCTYPE declaration makes them follow the standard, so you’re less likely to get strange rendering in old browsers.

 

Avoid flash as much as possible

Try not to use flash wherever possible unless you really need it. With CSS3, even most complex animation can be performed inside the box. There may be case where flash plugin is not supported or installed in the user’s mobile browser.

 

Common mistakes you can avoid

Google has published a very useful article where you can learn to “Avoid common mistakes”. These common mistakes are as below.