Small screens, bandwidth constraints, accessibility etc. are some constraints faced by developers while designing for mobile web. This post gives a brief summary on how a developer can work around the constraints.

Small screens

  • Prioritize features and content
  • Reduce hierarchy levels for content
  • Workflows

Users usually want only certain key features in their mobile. It is essential to give priority to the top content accessed by users.  The amount of content in a mobile web page should be reduced as much as possible avoiding graphical elements.  Example: Bank of America mobile banking page. The mobile home page has the top two features of sign in and locations. The home page on the web is different with varied offerings information.

Bank of America - Mobile Page

The number of clicks to access content is limited. Workflows are clearly communicated with ‘select’ options. Only limited content is displayed by default thereby reducing the need for scrolling continuously.

Providing input

Data entry on mobile devices can be time consuming and error prone. Selecting from list of options is easier than asking the user to type. When asking the user to type, typos or mismatch are the most common errors. When searching for a location in the Bank of America mobile page, there could be chances for multiple listings. Allowing the user to select the correct listing would be a better design than asking the user to type the exact name. Autocomplete is also a big help in mobile sites.

Form filling

Auto fill is a big help while filling forms. Allow the user to select information as default so that they can be pre-loaded the next time. Forms also need to be kept at minimum. Buttons need to be bigger and easier for users to select.

To summarize, simplicity is the key for usability.


~ Ramya