Few weeks back I received an email from Google’s Webmaster Tools regarding mobile usability issue in this blog.

Since today I have the time to actually look into it. This blog used to be non-mobile-friendly. As you can see, it is now displayed wonderfully on any mobile devices. Please read on if you wish to convert your non-mobile-friendly WordPress blog into a mobile-friendly one.

So according to Google, there are four issues with this blog pertaining mobile usability:

1. Viewport not configured
2. Small font size
3. Touch element too close
4. Flash usage

Alright, let’s tackle them one-by-one.

Set the Viewport

Without defining the viewport, mobile browsers will have difficulty in controlling the page dimension and scaling. Here the summary from Google’s guide:

1. Use meta viewport tag to control the width and scaling of the browsers viewport.
2. Include width=device-width to match the screen’s width in device independent pixels.
3. Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device independent pixels.
4. Ensure your page is accessible by not disabling user scaling.

In short, add the following line at the page’s header section:

<meta 
    name="viewport" 
    content="width=device-width, initial-scale=1"
>

Small font size

By default, this blog content is using 13px font-size. As Google said, the recommended font-size for the main-content is 16px. Below is how implement it in this blog.

div#main div.post div.entry {
	font-size: 16px;
	overflow: hidden;
	padding: 10px 20px 0;
}

By setting viewport and have a larger font, it will automatically also resolve issue no 3. Bigger font means wider space between each characters. So hyperlinks which previously shown very narrowly spaced, it will now shown with proper spacing.

Flash Usage

Unfortunately, I can’t do much for this. In this blog, I used Flash only in two pages. So I on that two pages, I just put a suggestion to Android and Apple users to download Dolphin Browser. Dolphin browser is the only browser I know which supports Flash and available in many platforms.

Make the Blog Layout Responsive

Responsive layout means the layout will change to accommodate the device screen accordingly. To make a responsive layout, we must add the media selector in CSS.
In this blog, I made the changes so the layout able to cater devices with:

• Screen width maximum 680 pixels (compromise between 600 pixels and 768 pixels)
• Screen width maximum 959 pixels (the maximum width of this blog)
• Screen width 960 pixels and beyond

Here’s how they get implemented in CSS:

/* Default style: Any screen with screen width 960 pixels and beyond */

/*
 .... Blah
 .... Blah
 .... Blah
*/

@media all and (max-width: 959px) {
	/*
	 .... style changes to cater device
	 .... which has screen width at 
	 .... most 959 pixels
	*/
}

@media all and (max-width: 680px) {
	/*
	 .... style changes to cater device
	 .... which has screen width at 
	 .... most 680 pixels
	*/
}

With these amendments, I managed to make this blog mobile-friendly. Hopefully, you can too. Drop comments if these steps are still unable to help you 😀

Incoming Search

css, mobile, responsive