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-friendly” will appear with your site in search results.
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.
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 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.
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.
- Unplayable content
- Faulty redirects
- Mobile-only 404s
- App download interstitials
- Irrelevant cross-links
- Slow mobile pages