There is no doubt that everything is going mobile. It is rather interesting to see how the mobile industry grew in the last 3 or 4 years. The competition between device manufacturers and between service providers has been absolutely relentless. Competition is good, however, as it yields better devices and services in general. And so with the constant and increasing improvements in mobile devices, software and network, it is no surprise that a considerable number of users actually use their mobile devices as the primary computer in many cases. It would be (almost) disastrous to ignore this crowd when starting a new web development effort.

But, regardless of your mobile web development approach (which is another topic of its own), as a developer, you WILL face certain limitations that will influence your design. These limitations are imposed due to four primary differences between mobile devices and desktops/laptops. Below is a summary of the differences and limitations along with some tips to provide a solid design for mobile and deliver a good user experience:

Display Size:

Mobile devices have a much smaller screen size and resolution when compared to standard desktop/laptop browsers. This requires web developers to rethink the design of their application so it can fit nicely without horizontal scrolling, which can cause aggravation and, consequently, deliver a poor user experience. Basically, your application has to be optimized to run on mobile devices. Rethinking the design, however, can take on many forms. So, here are some ideas:

• Highlight the actionable items. I don’t necessarily mean highlight as in color (although that may be appropriate in some cases). I mean expose the most important items or actionable items (the components that the user is likely to interact with often).
• Eliminate non-crucial components to gain screen real estate.
• Restructure components to fit vertically, rather than horizontally.
• Simplify navigation and page flow.

Remember, a mobile user has different expectations than a desktop user. Mobile users tend to have a clear and concise path drawn out when working with applications. They expect to take quick actions and most likely, they will have a shorter attention span. So, design your application around the primary business functions and eliminate the secondary functions (if possible) or anything that could act as a distraction to the user.

Orientation:

Does your desktop or laptop screen orientation change? I don’t think so. It does so in mobile devices, however. So, obviously, you need to account for that in your design. The most important point to ask yourself here is: How fluid is my design? Does it look good in a landscape orientation but doesn’t resize when switching to portrait to fit the screen (or vice versa). Whether it’s a tablet or smartphone device, your design will have to be fluid and flexible. CSS media queries can provide this capability. (Again, this is another topic of its own).

Input Device:

Unlike desktop environments, the mobile crowd use their fingertip as the main input device; from tapping on the screen, to swiping, sliding, and clicking, etc. The human’s finger is not as precise as the mouse as an input device. On a smaller screen, the human’s fingertip will be quite clumsy actually. And zooming in on the application to click on a particular item doesn’t really provide a stellar user experience, does it? So, redesigning input controls and clickable items to easily allow for touch is inevitable. Generally speaking, buttons and most actionable items need to be between 32 to 46 pixels high and, at least, equally as wide. Actually, Apple recommends 44 x 44 pixels for clickable items. But there are no fast and hard rules here. Apple actually deviates from this when it makes sense. So, if you do need to go smaller, make sure you provide enough margins or padding between components to avoid having the user mistakenly click on other items on the screen. Also, try not to go smaller than 32 x 32 pixels. Smaller than that, the user experience starts to degrade.

Network Speed:

This may not be so relevant in the very near future with network speeds improving dramatically as we speak (4G is insanely fast). But for now, you can’t afford to load a bunch of unnecessary images on mobile devices and bog down the primary use of your application. Users will take responsiveness over a heavy fancy design that slows things down. Google can attest to that. There is nothing simpler than Google’s homepage design or even their results page. But don’t get confused by the word “simple.” Simple doesn’t mean that your design should be plain and boring. You can still use images for branding purposes but, try to get rid of what you can get rid of.

So, the point to take away here is probably simplistic designs.

Did I miss something? I’d like to hear your thoughts …

CodeProject