Safety zones

​Remember the safety zones for touch screens!


  • The minimum height for the clickable area of links is 24px
  • All links have 5px padding on top and bottom
  • In addition the links in the link list elements span over all available horizontal space
  • When possible, the links also have at least 5px margin around them (e.g. pagination links, link lists)
  • Example (on the right - clickable area surrounded by blue border, margins indicated with orange)


RadioButtonsCheckboxes.jpgRadio buttons and checkboxes:

  • All radio buttons and checkboxes have labels linked to them
  • Labels  can be used to toggle radio buttons and checkboxes
  • Labels 10px padding on top and bottom, and 5px padding on left and right
  • Example (on the right - clickable area surrounded by blue line)