Mobilize your UI
Tips for making your application’s user interface mobile-friendly
Users don’t have the same precision with fingertips that they do with mouse pointers. So make your buttons big. In fact, make anything a user has to tap on much bigger than you would on a regular web app. This means checkboxes, icons, drop down lists, etc.�
If you’re creating a hybrid application and are trying to imitate a native look and feel, you’re going to need to indicate to the user that something is going on after they tap and perform an action. Web apps aren’t as responsive as native apps, but as long as the user doesn’t think he’s stuck, that’s okay. Indicate that the app is doing something with a spinner icon in the middle of the screen.�
Mobile device resolutions are constantly increasing, but most of them still haven’t reached the same size as PC monitors. That, coupled with the bigger buttons you made (see section one) means you have less screen real estate. We can improve that situation with responsive design (see the next section), but it doesn’t eliminate the problem completely.
The typical paradigm for a web page or application is three columns: a column along the left side for navigation or ads, a wide middle column for your content, and a right column for related links, ads or whatever.
Those three columns get reduced to just one column in a typical mobile app layout. Navigation is usually on the top, and related links and ads are at the bottom of the app. Additionally, that one column is much more compact than the typical wide middle column of a PC web app. This is alleviated by using list views. Something that would be in a tabular or grid layout in a traditional web app should turn into a list view (think of a Twitter style list, with a lot of information arranged in a row, with multiple rows stacked together). �
Wide screens on PCs are the norm nowadays. Phones, though, are tall and narrow when in normal use. That limits us to the one column layouts discussed before.
However, when using a tablet such as an iPad or Asus Transformer, you can rotate the screen into landscape mode, giving you a resolution that is a much closer match to a PC. Using media queries in your CSS and a few if conditions in your JS (for hybrid apps) or setting up the landscape screen (for native apps) gains you a few extra pixels and another column. Those list views mentioned before can now be put into a column on the left, with each item’s underlying content on the right. This allows users to see their selection and the selected result at the same time.
Menus, tooltips, and links are often implemented with rollovers on the desktop. Touch devices lose this functionality, and by extension, you lose all of your functionality that relies on it.
So don’t use them. Turn your rollovers into clicks. That’s easier said than done when you have different functionality on hovering vs. clicking. If that’s the case, consider keeping your click (tap) functionality the same, and moving the hovering functionality to a secondary button or icon.