Top 5 Objectives for Investing in Mobile Web – Appear InnovativeMarch 1st, 2012 by Trilibis Blogging Team
Let’s face it, the average mobile user is becoming more and more technologically savvy than ever. With lines for new iDevices stretching down blocks and around corners, many of today’s consumers are becoming first adopters of the latest and greatest tech. And even those willing to wait a couple of months until the price of their favorite gadget drops are curious and aware of the technology and innovation that surrounds them.
Let’s walk through a few things that can make your site both visually and functionally exceptional in the eyes of your mobile user:
Rich mobile-optimized media
Last week, we discussed how important rich media and graphics were to satisfying the mobile user. When innovation is the goal, stunning visuals are equally important. Examples like high-res images that span the width of the screen and mobile-optimized videos that play natively or within the browser (as opposed to just linking out to YouTube) are great starts to appearing innovative. For an added touch, have your video player detect network speed and serve the best quality video for the available bandwidth.
Now that you’ve got the high-res images and beautiful looking visuals covered, why not make them a bit more interactive? When displaying multiple images at the same time, say a gallery of movie posters (think Fandango) or images of an luxury hotel (below), let your mobile user touch and swipe back and forth to view more. This simple dynamic element can give your mobile page an interactive edge.
We’ve covered offline storage in the past, but it’s always good to review. With the advent of HTML5, offline caching in the web environment has become a reality. Storing content in the background is innovative for two reasons—it gives your pages quicker load times and allows content to be viewed even when data connectivity is limited or lost.
If your mobile site has very dynamic content that changes by the minute, or by the second (think status feed), utilizing a built-in in-page refresh is going to help the user-experience a lot. The mobile user won’t have to reload the entire page every time they want to see the latest content — instead, it will be seamlessly updated within the UI framework of your site. Twitter takes things a step further with their mobile site by allowing the option to swipe down to refresh their feed.
By now, you should know how important it is to get the right content and features on your mobile site, as well as making them easily accessible. Sometimes, this content might be too much for the limited mobile screen. An expandable menu can give your users access to more content without overloading their screen with info. Additionally, it allows easy access to other areas of the site in only a couple taps of the finger.
A fixed toolbar is a header or footer navigation bar that stays stationary while still allowing the rest of the page to scroll. Now you’re thinking – wait a minute, I thought these were exclusive to apps. Not anymore. Android 2.2 and above and iOS5 browsers now support these fixed app-like menus, too. While fixed toolbars are not a great match for every use-case, when used properly, they provide a tremendous advantage to your website’s UX.
Another unique functionality component is the overlaid box. Think of it as a simple popup that loads on top of the current page and disappears when not used. Overlaid boxes are helpful in situations where content is only temporarily needed. Typical use-cases include menus and navigational options, as well as a login window or signup screen.
These examples are only a few of the numerous ‘next-generation’, HTML5 type of enhancements that will make your mobile site appear fresh and cutting edge. Just remember that looks aren’t everything – your site needs to look and function in a cohesive fashion. If your site is constantly breaking or doesn’t provide optimized content, the beautiful first impression is not going to last very long.
How do you keep up with the latest innovations in mobile web development? Got any cool examples of great mobile design? Let us know in the comments or keep the conversation going on Twitter and Facebook.
Stay tuned as we keep on rolling through the Top 5 Objectives for Investing in Mobile Web and cover building loyalty and generating sales.