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 😀

Last night match was brilliant. United is continuing its winning ways. After deposing Tottenham and Liverpool, they beat Aston Villa courtesy of goals from Ander Herrera and Wayne Rooney.

United started the game immediately in high gear. They pressed forward searching for opening goal. Five minutes after kick-off, Wayne Rooney was brought down inside the box when he was clear. Unfortunately, referee Roger East was not impressed. It was really unfair because Rooney was clear, ready to pull the trigger and there was a touch from Ciaran Clark. It should have been penalty and straight red card.

United came close at minute 25. Marcus Rojo unleashed a 35-yard powerful shot. But Brad Guzan brilliantly tipped the ball for corner.

Finally United break the duck 2 minutes before the break. Ander Herrera put an accurate low strike past Brad Guzan, Old Trafford erupted with joy. Daley Blind is credited with the assist.

Three minutes after the break, Aston Villa almost equalised. Christian Benteke was clear inside the box, but he got his footwork all wrong. He scooped the ball over the bar.

Angel Di Maria entered the pitch on minute 70, replacing the ever-dangerous Ashley Young. Eight minutes later, his cross found Rooney, which brilliantly control the ball on the air, before unleashed a powerful shot to top left corner. Goalll!!! United 2, Aston Villa 0. What a magnificent skill shown by Wayne Rooney.

With the whole Old Trafford still in awe after Rooney’s magnificent goal, Aston Villa managed to pull one back. The corner-kick found Christian Benteke, which then slowly slotted it in between David De Gea’s legs. De Gea must be cursing himself for allowing such sloppy mistake.

It’s game over for Aston Villa. At minute 91, Ander Herrera strikes again. A low, straight shot, within a blink of eye left Brad Guzan stunned.

I was looking for F# book Bedok National Library, but couldn’t find it. So I borrowed this book instead.

After finishing it, I can’t say I like it. Maybe because the book is aimed towards Java programmers (the functional part is done in Groovy/Scala). But at least I was not totally wasted my time. I picked up few things, mostly on the concept of functional programming. Here’s what I learned from this book.

Why Functional Programming?

Should we learn Functional Programming (FP)? Apparently yes. Here’s why:

1. We can closely model the solution exactly like how we would solve it in our brain
2. FP allows us to closely mirrors the mathematical function which in turn allows us to design stronger algorithm

Feature of Functional Programming

1. First class function: function which takes function as parameter, or returns a function.
2. Pure function: function that has no side effects
3. Recursion: function which calls itself
4. Immutable variables: variables which once set, the value can’t be changed
5. Non-strict (lazy-loading) evaluation: only produce the result when the the result is consummated
6. Pattern matching: match the variable’s value to a pattern.
7. Anonymous function: function which don’t need to give name. E.g. Lambda function.
8. Closures: a type of anonymous function which is used as a function factory. Using closure, we can easily build functions then pass them to other functions while referring to local variables

The book was quite thin for a programming book standard 😀 I found the book quite easy to follow. Maybe because I have accidentally familiar with functional concepts used in jQuery.