Important things to consider when developing for Mobile Devices

In this podcast, Cesar Keller shares his expert insights about developing websites for mobile and tablet devices.

Listen to the interview:

Simply click the play button below to stream the interview in your browser:


Or download the podcast in .mp3 format for offline listening.

tribevita.com "My client needs a mobile presence, but where do I start?"… "How can we tweak our site to be mobile-friendly?"… "Everything is going mobile, what solutions do you have?"

We’ve been approached with these questions for months, but commonly with as much hesitation as genuine interest. It’s well understood in the market that mobile is a very powerful avenue for an online presence, but many Business Owners and designers alike feel mobile may be too daunting or technical to tackle.  To “get on board” or even sell a strategy like Mobile, you have to have the confidence and full understanding of what mobile sites entail, how consumers utilize mobile, and the best practices of this on-the-go technology. This information will clearly help recommend or create a mobile strategy, especially on a familiar CMS platform like Adobe Business Catalyst.

Business Catalyst Introduces Mobile Support


In early June, there was a huge strategic step in the BC Community with the release of tablet and phone support, allowing for a pure Business Catalyst approach to multiscreen requests. The key is that a mobile experience is now easier to manage and deploy through the Adobe BC platform (reinstating the reason we all love BC in the first place). No longer does the mobile detection have to happen on the client side of the site, but the detection can now happen on the server side, which creates a better user experience.

This server detection will identify the device class; either desktop, tablet or phone. There are two different options for creating such an experience. The first is device-specific styling in general. The second is redirecting to a device-specific version of the site. The UI and UX are different for the different classes of device. Understanding these types of devices, reasons for use and behavior patterns provide excellent insight when considering the design or development for any online presence.

Devices

The most common Internet and web surfing device experience since the 90’s is on the traditional desktop or laptop. It provides the most real estate due to large flat screens and the continued improvement of resolutions and screen sizes on laptops. However, lugging around a laptop or waiting to get to a desktop for valuable knowledge or specific content is a thing of the past. Most people have smart phones with web connectivity and/or a tablet device, which is easier to carry around. This “on demand” access has surpassed luxury, and people are expecting on-the-go availability.

Mobile phones have become the ultimate on-the-go gadget with endless potential, especially those mobile phones with full browser experiences. For quick and convenient searches, use of applications, and the ease of retrieving content of interest through these small devices, our life and online experience have changed forever. Though extremely useful for finding high-level content for entertainment, business, or casual review, mobile phones have the smallest screen sizes and resolutions, which is important to note and consider when creating a mobile experience.

Tablet devices fill a common sense gap between phones and traditional desktop experiences, allowing for quick searches and app use just like phones, but with a mid sized screen and better typing mechanisms built in. These tablet devices create a very friendly and intimate experience compared to the traditional PC from checking email to casual browsing of Internet. Think about some of the apps you deal with daily, whether for work or pleasure. The ease of use on your tablet for tweeting or playing games or even messing around with the multimedia capabilities of audio and video. These tablet devices have also become extremely popular for a larger screen, longer committing usage in place of a laptop for basic management, updates and organization. People are not using tablets for design and programming, extensive typing and production of documents, or robust high-level application use. These behaviors remain solely for the traditional desktop or laptop.

Mobile for Every site?

Now that we understand how consumers use these different devices, there is an appropriate question to pose: Is Mobile something your client wants or needs? Just because it is available, doesn’t mean it is the best strategy. This compatibility is not something that every website needs. There are three initial considerations before engaging a mobile website:

1) Who is the target audience and could they benefit from a mobile experience?

2) What are the device types used within this group, what is acceptable?

3) What is the content and context; does a mobile experience make sense?

After successfully deciding and moving past these initial considerations, it is even more critical to understand the high-level design usability best practices for a mobile experience, whether that is on the phone or tablet device.

Mobile Usability

Content is King.

The context for your mobile content is the most important consideration and should be the key focus as to what and how much content can be consumed. The functions, tools and option for how the content will be displayed and processed is a secondary priority, leaving aesthetics for the interface as the least important. Remember back to the reasoning for mobile usage, and provide the users exactly what they need or want in its simplest form. Make sure that the content is extremely legible and carefully consider specific screen resolutions as you design the environment for the mobile experience.

Device Flexibility.

There are many different kinds of devices available with Internet access, including feature phones, smart phones, PDAs and tablets. They each come with different software that runs on different platforms with different specifications and browser standards. Understanding these differences, who uses what in relation to your target audience, and what the technical specifications are for these different types will help create that overall successful mobile experience.

New Behaviors.

Many of these new devices bring new functionality or behaviors to the mix. This requires new thinking to traditional design guidelines. For example, think about the physical actions of tap and swipe and how they differ from using a mouse. Similarly, mobile challenges designers to think of better ways to present navigation and flow or new ways to organize and deliver content. The traditional column structures and tables may not apply where they did before. An overall understanding of the power of video and graphic visuals on these devices is often undermined. Most importantly, legible content is still key in overall design. As we continue to make strides in this new virtual world, we must think fresh about new behaviors and technologies, as the traditional thinking will get you “stuck”.

K.I.S.S.

A tried and true practice of keeping the mobile experience “stupid simple” has paid off for many. We’ve all heard it: Less is more, so why clutter? With limited space on the screen, use it wisely. If an element doesn’t bring any inherent value to  the content, presentation or functions, remove it. It is the same popular style of web 2.0 and minimal design. Be extremely smart about how you use color or graphics, as these kinds of visuals can improve use by providing direction, error recovery, and memorability.

Single Column.

In keeping with the best practice of simple, it makes sense that the single column design works best for a mobile experience. Some quick recommendations would be to consider the best list view layout as a base style, then allow for organization of navigation, headings, content, and visuals, carefully considering and picking highly readable and legible fonts. When choosing font sizes and styles for content, remember what is optimal for the user to consume on their particular mobile device.

Minimize Text Entry.

Be kind to the user and the experience when requesting them to provide information, like form fields or comments. Limit the need for large amounts of entry and remember the use of small keyboards and the time it takes to enter the information.

In Summary

Mobile is the next thing.

Studies have shown that mobile and tablet type device usage is an increasing trend.  Internet speed and connectivity is bound to grow exponentially on these devices as technology continues to get better.  Failing to consider the online presence for your customers without a strategy is a mistake.  Mobile strategy is not a problem to solve in the future; it’s a reality that requires consideration today.  

Every successful project and business initiative is dependent on goals that can be measured.  Asking the right questions and formulating a solution specific to your customer’s needs for a mobile website can be a win-win.


Look out for a follow-up article, featuring Jason Tinnin, who'll step us through some of the technical considerations when building your clients site for mobile and tablet support.

In the mean time, check out some of the awesome Business Catalyst resources that Cesar and Jason provide at: http://kiyuco.com/ and http://tribevita.com/ .


Trackbacks (0) | Permalink