What makes a mobile web app? Is it just a web app that you open on your phone, or is it something different altogether? I ask this question because I’ve noticed an interesting trend: Some software vendors are now offering “mobile apps” which are little more than re-sized web apps. What do I mean? Take a look at the image below:
Which one would you rather use on a smartphone? As you can see, changing a web app’s dimensions doesn’t make it a mobile app. Opening a web app on a smartphone doesn’t make it a mobile app. To make a mobile web app, the entire application layout must change. Many common web design elements don’t translate over to the mobile web.
So, what design elements should you avoid when building mobile web apps? I’ve already outlined the first 3 design elements to avoid in a previous blog post. If you’ve already read the first part, here are three more design flaws that kill mobile web apps:
A common mistake when building mobile web apps is assuming that the mobile app should mirror the desktop app in data quantity and layout. When you build a mobile app, two things must happen: First, you must only include data that is absolutely necessary. Second, you must reorganize the way the application displays data to account for the touch interface and small display. Here’s a great example for you. These links lead to the same app, but one is formatted for a PC and the other one is formatted for a smartphone. Notice the differences between the two layouts.
Generally speaking, web apps use a lot of images. There are background images, icons, pictures, and more. But, when designing a mobile web app, keep the images to a minimum. Why? Here are a few reasons:
- Smaller screen: With limited real estate, keep all non-essential elements out of a mobile web app. In general, while images enhance a basic web application, they can be removed in the mobile version without losing much function.
- Slower networks: Smartphones typically operate on wireless networks, which are slower than your average wired internet connection. Since images increase the overall size of your page, loading an image-heavy page on a slow network is frustrating and time consuming, to say the least.
- Slower devices: Smartphones are generally underpowered compared to modern PCs and laptops. As such, rendering image-heavy pages will take longer, regardless of network speed.
Designing web apps for use on mobile devices is far more involved than changing the application dimensions. If you want to create useable mobile web apps, certain web design elements should be avoided at all costs. To summarize both blog posts, those elements are:
- Small navigation elements
- Horizontal scrolling
- Data overload
- Image-heavy design
Of course, if you’d like to add anything to that list, feel free to share in the comments.