Navigation layout for touch-based browsing

Accessibility
1

I’m looking to create a simple webpage that consists of mostly hyperlinks (about 50-60) for the purpose of being used in a vehicle-mounted Toughpad laptop. The users will mostly use the touchscreen to navigate, and normal text-style links are hard to use in their experience. The computers themselves are not the quickest and have pretty slow cellular internet connections, so whatever I create, I need to keep the code lightweight and fast-loading.

Googling hasn’t yielded many examples of this type of design, and I’m in desperate for some inspiration here. Any ideas as to what would work well for this type of application? Any help would be appreciated!

2

What you can do to make it easier is to enlarge the text size, and add extra padding within the links and extra spacing between the lines. That will give a bigger area for people to hit, and less chance of them hitting the wrong link.

3

In addition, I would suggest that you ensure good contrast with a background colour. Style the links as buttons, for example, and give a distinct change of style on :active to improve the feel of touching the link/button. You can also make any button-like element appear to respond to a click/press by applying top and bottom margin values and swapping them on :active.

4

Great ideas, thanks!!