It sure sucks when your favorite site is not optimized for mobile devices. Imagine having to scroll horizontally because the entire site doesn’t fit into your phone’s width. When it does, the content is so tiny you have to use your fingers to zoom in. And when you zoom in, you are forced to scroll horizontally again to view other parts of the site. Then you have to pinch to zoom out because you have no idea where, on the website, you are. And the vicious cycle of zooming, pinching and scrolling continues until you become disgruntled. The User Interface (UI) is dreadful because you are viewing a desktop site from a phone. The User Experience (UX) is nonexistent because you are more preoccupied with pinching, zooming and scrolling when you are supposed to be enjoying the site’s content
Mobile Web UI/UX Design 101:
Slash Away Content and Images. Only show the most essential subject matter from your desktop web. Reduce the amount of images or eliminate them entirely if they are not necessary. Wired.com’s mobile web only features one top story – the story title and one image – above the fold. The rest of the mobile website consist of a common header incorporating a small Wired logo, a search icon that slides down to reveal a search textbox, and a menu icon that also slithers down to the bottom to expose the site’s various navigation links. In contrast, Wired’s desktop site has a much bigger logo, four to five top stories above the fold, ads and navigation links that are constantly visible.
Wired.com’s mobile vs. desktop web
Enlarge Them Buttons. And make sure those tappable areas on today’s touch-based smartphones are big enough coz some of us have really fat fingers and thumbs. The rule of thumb (no pun intended) is to design the buttons and tappable areas at 44 x 44 pixels at the very least. This UI enhancement will make it cozy enough for the thumb and the rest of your fingers to tap on without missing its target. Check out University of Alabama’s mobile homepage. It contains big and well-labeled links to various segments of the university’s content.
A Conspicuous Search Box on the Homepage. You need to reduce the amount of content published on your mobile web. You will also need to reduce the number of links that, on the desktop website, help your users navigate the site. To compensate for the reduced navigation links and retain the user experience (UX), a search box is crucial in a mobile website. And this search box should sit in a prominent location on the mobile web’s homepage. Agoda.com’s mobile site allows its users to search for hotels based on destinations – be it country (America), city (Georgetown), airport (Heathrow), area (Sukhumvit Bangkok) or landmark (Great Wall). That’s it. Whereas, Agoda’s desktop site, in addition to having a search, has a full set of navigational links to help users easily browse and sort through various hotels via destination, price, star rating, facilities and etc.
White Space, White Space, White Space. White space is NOT wasted space. It is a significant design consideration on both mobile and desktop websites because it helps an element in the site stand out from the next. It makes it easy for the user to differentiate a piece of content from another. And if used correctly, white space creates elegance in the site. CNN.com is very good in using white space to separate its content-rich desktop and mobile websites. Content, links and advertisements are clearly and nicely separated and easily distinguishable.
CNN.com’s mobile vs. desktop web
Color Contrast for Crystal Clear Visuals. Foreground and background colors must have good contrast with each other so users can view your content without needing to squint their eyes. Of course both colors must complement each other. Use your favorite online color contrast checker to see if your colors provide enough contrast when seen by a person with color deficiencies. I love the color contrast shown in ProductiveDreams.com’s mobile web. The white text on dark brown background offers a very clear visual of the content. Their social media buttons are bordered by the same dark brown hue before being plugged into an orange background, while the white search textbox on the same orange background provides a solid-enough color contrast.
ProductiveDreams.com’s mobile vs. desktop web
High-Speed Page Loading. Let’s face it; users want their mobile sites to load fast. The majority is on a limited data plan, so your mobile web app had better load fast and not drain their limited and precious bytes. The culprit behind slow and large page loads is images. If diminishes the UX. If you can’t get rid of all the images, at least limit it to the homepage and headers only. A great example is VirginAustralia’s mobile web. The homepage contains only a series of eye-catching images in a slider, as well as their logo in the header. The rest of the pages are just relevant text-only content that are beautifully laid out and does not contain a single image.
VirginAustralia.com’s mobile vs. desktop web
Minimize Text Entries If You Can. Again, the problem with fat fingers. Typos that lead to frustrations, and the eventual fear of using the mobile website. Minimizing text entries doesn’t only apply to mobile sites. Desktop web apps also benefit from a good UI design that minimizes the amount of typing. Look at VirginAustralia.com’s mobile and desktop booking sites that use dropdowns, checkboxes and number spinners – a no brainer but you still see a lot of designers overlooking this design criterion.
Minimizing text entries does not apply to every site. If you are designing a salesforce app, no matter what you do, somebody’s got to key in a new customer profile and that’s really a pain in the neck to perform with a smartphone. These kinds of text-entry-intensive apps will do a lot better on tablets or phablets with a bigger screen.
Device Orientation Matters. Design your mobile app for portrait mode. Otherwise, users will have a hard time holding on to the phone. You wouldn’t want them to drop the phone into the toilet bowl while trying to surf your landscape-oriented site, would you? But of course, no web designer worth their salt is senseless enough to design a portrait-based mobile web, unless it’s a game.
Test on Different Platforms and Screen Sizes. Test your mobile web design on major mobile platforms, brands and screen sizes. Test your mobile website on iOS, Android, Windows Phone and Blackberry 10. For iOS, test your design on the iPhone and iPad. For Android, get at least two different brands of Android smartphones, one Android phablet and one Android tablet. And for each phone, phablet and tablet, test the design on different browsers – Chrome, Firefox, Opera – in addition to testing on the native browser that comes with the phone platform. You will be surprised to find your mobile web not showing well or breaking on some browsers simply because each browser brand has a different level of HTML5 support as of today.
Sources for this article: