Effective Mobile Hyperlinks
Mobile visitors are using small screens and are often on the move. It's easy for them to get lost on a badly laid out website with no clues as to where they are. Navigation needs to be clear, simple to follow and easy to get to.
Navigation doesn't just mean the actual menu. It also includes Home and Back To The Top buttons, breadcrumbs and button links to replace text hyperlinks.
The main navigation needs to be compact and really doesn't need to be on every page. Some mobile designs place the navigation at the bottom of the page on the assumption that the visitor will look at all the content before moving on.
If there is a back to the top button at the bottom of every page and a home button at the top, the menu only needs to be on the home page.
While anchors are a convenience on long pages of a conventional website they are essential for mobile ones to prevent the visitor from having to scroll too much.
The downward pointing arrow to the right is a hyperlink which, when clicked or finger tapped, will jump to an anchor point which has been placed in the footer of this page. An anchor can be placed at any point on the page and several of them can be used on very long pages.
The basics about anchors are covered on THIS page. The only difference here is that the hyperlink is a button which is big enough for finger stabbing and has zero file size since it is created using CSS rather than using an image.
The Email button is designed in the same way as the Home button using the CSS pseudo element to create the required shapes.
An email button is just a hyperlink which will open the visitor's mail client and insert the email address and the subject line if required...
<a href="mailto:firstname.lastname@example.org?subject=Email Subject">Email Me</a>
The phone button is also created using CSS and HTML rather than use an image.
The HTML for a phone link is shown below...
<a href="tel:9595551212">CALL ME on 959-555-1212</a>
... and the button shown to the right places a link like this into a styled div.
Text links are obviously far better than using images but they aren't as easy to tap unless the font size is kind of large.
16px is the absolute minimum for text link font size and bigger is better. The target area can be increased by adding some padding to the styles.
The text hyperlink show below uses this code...
<a style="font:16px verdana;color:#0000FF;text-decoration:none;padding:10px" href="page-name.html">Next Page</a>
The font size is 16px and the padding is 10px so the total height of the "live" area is 36px. Test this with the cursor. Note how the cursor pointer shows over a bigger area than a normal hyperlink.
Use the Arrange menu to bring these links to the front.
The Mobi Links widget has seven variations which include previous and next buttons. These directional arrows can be seen in the footer of this page.
Mobile Button Widgets
A set of widgets is available for creating mobile buttons using HTML and CSS rather than images. The buttons can be seen in action on THIS page.
Click the Easy button to get the Mobile Widgets.
Like all buttons on a mobile website, the home button needs to be easy to find and a large enough target for a fingertip.
This design uses CSS to create the little home icon inside a circle with a border. The button is 32px in diameter which makes it easy to find and press.
The house is built from two rectangles and a triangle which are positioned absolutely inside the container div.
Back To The Top Button
The back to the top button shown to the right is also styled using CSS and consists of a rectangle and a triangle inside a round div with a border. It demonstrates smooth scrolling.
A simple button only requires the hash sign in place of a URL like this...
<a href="#">Back To The Top</a>