Wednesday, 9 July 2014

Prepare for mobile

Always use a view port meta tag with device-width and an initial scale set to "1"
<meta name="viewport" content="width=device-width,initial-scale=1/>

Never disable zoom:
 "minumum-sacale,maximum-scale,user-scalable"

Make text readable:

  • minimum 16pt,
  • uncrease contrast

Limit the use of web fonts, because they are displayed only when they are fully downloaded


Touch sizes:
  • 7mm/48px minimum
  • 7mm padding if near other touchable areas

Use placeholders to guide users about the expected controller value

Use input controls of type that fits the content "input type='tel | date | time | email etcetera...'"

Use the "autocomplete" attribute on controls



No comments:

Post a Comment