Mobile Optimization

Mobile Optimization

Emetec Payment Button is optimized for mobile browsers by default. However, if you are creating your own customized style for the payment form, here are some tips.

Enable responsive design in your HTML

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  ...
</html>

Start with "mobile first" CSS

Start "mobile first" and enhance your form with Media Queries, in order to build up your mobile styles for wider viewports (such as tablet devices) and high-resolution displays. It's recommended that you adapt these Media Queries based on the content of your site rather than mirroring the fixed dimensions of specific devices.

/* default value, applies to all devices */
.button {width: 100%}
@media (min-width: 480px) {
  /* this rule applies only to devices with a minimum screen width of 480px */
  .button {
    width: 50%;
  }
}

Use large input fields and buttons

Larger input fields and buttons make usage of your payment form much easier. Apple says that the average finger tap is about 44x44 pixels. Of course, almost all input fields and buttons are larger than 44px. In most cases you need to set only the height.

.input,
.button {
  height: 44px;
  width: 100%;
}

Test across systems devices

Mobile testing can be difficult and time intensive. With the variety of operating systems and screen sizes, prioritizing by market share and testing at multiple resolutions is important. Getting your hands on a phone for each OS is always best, but not always possible. Some desktop browser plugins, such as 'User Agent Switcher' for Firefox and Chrome, can be an invaluable time-saver for testing. You can simply jump between different OS experiences on your desktop.