ruk·si

🧑‍🎨 Design
📱 Mobile Web

Updated at 2022-07-29 04:48

Mobile web design is about planning interaction and visuals of basic websites for mobile browsers.

Responsive or mobile web site. Making a separate mobile site might make sense when website performance is more critical than development speed and maintainability. Always offer a way to return to the normal site if you provide separate mobile site. There is a separate note about responsive design and mobile design.

Never assume anything in mobile web design. There are over 35 browsers in use, you should not test your design on every single one. Western developers should aim to target Android/iOS. Opera Mini has some funky bandwidth saving features, try with it too.

Minimum tap target size is 44x44 px. Buttons that are smaller than that are hard to press.

Show appropriate keyboard layout. Telephone number has own layout, other numbers can use patter and email has custom layout on most mobile devices. Be consistent with these.

<input type="tel" />
<input type="text" pattern="\d*" novalidate />
<input type="email" />

Consider disabling auto-correction on data that has weak dictionary. Most of the time, auto-correction suggests wrong and sometimes people fail to notice the correction. Correction is good for comment text area, bad for address input.

<input type="text" autocorrect="off" />

Disable auto-capitalization on emails and usernames. Otherwise it will cause incorrect logins and funny looking emails.

<input type="text" autocapitalize="off" />
<input type="email" autocapitalize="off" />

Consider using touchstart and touchend events. These don't have a delay that makes the interaction appear slow.

Sources