1. Responsive, Mobile Friendly Web Design
2. Fast Loading Websites
3. Mobile Viewable Websites
4. Responsive Images
5. Touchable Web Design
6. Touch Event Handling in JavaScript
7. Actionable Web Design

One key aspect of creating responive, mobile friendly web design is to make buttons, links, menus etc. touchable. By "touchable" I mean "easy to touch with a finger".

Links in web pages are often just normal text size, or perhaps bold. While a text link is easy to hit with a mouse, it can be quite hard to hit with a finger. To compensate for that you can turn text links into button-like elements. What you do is to add background color, border, padding etc. to the <a> element to make it look like a button. Thus, a link that normally looks like this:

Java and Web Development Tutorials

gets to look like this:

That makes the link much easier to hit with a finger. The area you can touch is bigger, and you have the border around the link to guide your finger to see if you touch the link or not. The CSS needed to make links like this is:

.buttonLink {
    background-color  : #0000ff;
    border            : 2px solid  #000099;
    color             : #ffffff;
    font-weight       : bold;
    padding           : 10px;
}

Just add the buttonLink CSS class to any link you want displayed as a button.

Link Lists

Sometimes you have lists of text links listed vertically. For instance in a table of contents. Text links are already pretty hard to hit with a finger, but link lists are worse. When small text links are listed close to each other you can easily hit the wrong link with your finger, making the browser jump to the wrong page. This is really annoying for the user. Much more annoying than the link not activating because you didn't hit it (as would be the case with a single link listed by itself).

Here is an example of a link list:

Hitting a link in the middle of the list with a finger can be hard. The risk of hitting one of the other links is high.

Making the links in a list look like buttons make sometimes be a solution, but not always. Instead we can increase the space between them, and add borders in between to make it easier to see where your finger is located. Look at this list:

Notice how there is more space between the links, and how the horizontal lines guide your finger when trying to touch any of them.

The CSS to create this list is:

.listLink {
    display: inline-block;
    padding: 10px 0px 10px 0px;
    border-bottom: 1px solid #cccccc;
}
.listLinkFirstItem {
    border-top: 1px solid #cccccc;
}

Turning div Elements Into Links

Sometimes you may have lists of content sections with "read more" links at the end. For instance, a list of news. Each news story is 2-3 lines of text and a "read more" link at the end of it.

Since links are hard to touch with a finger, you can either make the link more button like as shown earlier, or you can simply turn the whole div element into a link. Thus, it doesn't matter where the user clicks on the text with the finger, it will take the user to the full story.

Thus, you go from this:

<div>The latest development in the blablablablablabla. <a href="theStoryUrl.html">Read more.</a></div>

To this:

<a href="theStoryUrl.html">
    <div>The latest development in the blablablablablabla. Click to read more.</div>
</a>