Mobile web development and design

By / October 05, 2012

How many people around you are using their mobile device?
Take a look around you on your next commute. Chances are that you will see a handful of people who have their eyes and fingers glued to their mobile device. Many of us are obssessed with this little device because it is highly portable, usually within arms-reach, and allows us to do many things on the go.

Mobile devices may be emerging as next mass media tool: not only are they phones, but they may also be music players, movie players, radio players, book readers, and they also provide access to the internet. Mobile devices keep us busy during idle time, productive on business trips, and more.

As a company that is always looking towards innovation, Bridgeable sent me to explore the mobile space to see what’s up, and how we might use technology in future projects to enhance user experience.

ToRCHI invited Luke Wroblewski to do a workshop on Mobile Web Design in February. Luke has an impressive background, having worked with popular sites such as ebay/yahoo, and authoring books focused on web design and mobile development. Luke’s workshop was engaging and interesting.

In many ways, designing for mobile first mirrors how Bridgeable approaches a lot projects. Find out what the user’s needs, goals, and tasks are, and design in such a way that it facilitate the user’s process of achieving the task. Designing for mobile first forces you to focus on a user’s core task, and trim out the material that is unnecessary at the point of access. It is worth it for companies to begin looking at how people are using mobile web, because it is a growing market, and thus presents an opportunity for real business.

Designing for mobile first means that you design a web application or website to fit the mobile experience before the PC experience. So why should we even consider designing for the mobile audience before the PC/desktop audience anyway? Luke provides three compelling reasons:
  1. The mobile market is exploding. A growth in the market represents an opportunity for real business.
  2. Mobile devices have limited realty space. The dimensions constrain the amount of buttons and content that can appear on the screen. This means that you can’t just dump everything onto the mobile site. You must focus on the most important content and tasks, which leads to better content and design for the end-user.
  3. Mobile devices have innovative capabilities that modern web browsers may not have. Capabilities such as GPS, digital compasses, multi-touch input, accelerometer, and more. Depending on the type of service your business hopes to offer, you may be able to take advantage of these new capabilities and provide a better user experience.

There are also new internet users emerging. Some individuals do not own PCs, and only access the internet through a mobile device. So a PC-first design would be experienced very differently by these types of internet users.

Now that we know the advantages of designing for mobile first,  how do developers choose between native applications and web application?

Native applications are written and developed specifically for the device’s operating system (OS). For example, Apple mobile products run on iOS, while some other mobile devices use Android, BlackBerry OS, Nokia OS, etc.

A web application requires that a part or all of the software is downloaded and run from the web/internet each time it is run. It can usually be run from most modern web browsers with web-capabale mobile devices.

To describe the ups and down of mobile web and native applications, we watched the Mobile Dev Rap Battle: Native Code vs. Web Apps.

When should you choose to create a native mobile app?

  • If you need deeper hardware access (ex. GPS, camera)
  • If you need to run in the background (multi- tasking)
  • If if you want to make money (through the app stores)
  • If you want integrated placement of the app icon on your home screens

Considerations for mobile native apps

  • Developing on one OS, such as iOS, will not work on a different OS like Android without significant re-coding
  • Apps need to be maintained and updated as new OS versions and changes are implemented. Some people do not update their apps.

Things to keep in mind about native applications

When to choose mobile web?

  • If you need access across all platforms with a tight budget
  • If you need instant updates, fixes, and testing
  • Can be integrated within native app code

Parts of mobile web can also be integrated within native applications. For example, changing your login information may simply be a link in the native app that launches a  website on your mobile browser.

You do not have to limit yourself to mobile web or native apps. Think cross-platform or multi-platform. Often times, native apps will draw on information that requires web access. Walgreens is an example of a company that uses multiple-platforms to make prescription management and refilling more convenient.

So what are some practical tips for designing for mobile?

According to Luke, we need to know the audience and know their task. There are four main categories of user tasks on mobile devices:

  1. Look-up / find: You are hungry and in a new city. You pull out your mobile device to use the GPS to orient yourself, and search for nearby restaurants.
  2. Explore / play: You are waiting in line at the bus stop. You begin playing a puzzle game on your mobile device to kill time.
  3. Check-in / status: You are on the way to the airport, and want to check in while you’re in the taxi.
  4. Edit / create: Your boss sends you an important task that must be done before the end of the day, but there are no computers nearby.

 

Most people are using mobile devices sporadically in short intermittent periods. Many people are not paying full attention to their mobile device for extended periods of time. Therefore, partial attention requires focused design, which means creating mobile web designs that can be accessed and used quickly even if the user is distracted.

One eyeball one thumb means that whatever you are designing should be easy to use if you are only looking at the screen with one eye, and interacting with the screen with one thumb.

When designing mobile first, embracing constraints is a good thing. Focus on what task the user wants to accomplish. Have hard discussions with your team about what you need to cut out, and find out what needs to go and what must stay. Once you cut out extraneous details, you can maximize screen space for the content that the user wants the most.

Design for speed. Use CSS3 instead of images whenever possible. Reduce requests and file size by eliminating redirects and minifying your code (for example, consolidate CSS and Javascript code into a single file). Take advantage of application caching and consider lazy loading content into the page as it is needed (new content is loaded in only when you scroll down to its location- Bridgeable’s The Bridge does this!).

[color_box]

“Mobile experiences fill the gaps while we wait. Nobody wants to wait while they wait”

Mike Kreiger (Co-founder of Instagram)

[/color_box]

In most cases, use minimal navigation, and maximize space for the content for immediate value on launch. Be conscious of the ratio of screen space that is occupied by each element. Less navigation items tends to be better because we have large fingers. Be aware of how close together touch targets are, otherwise you can mis-click. “Hide” secondary navigation items if required.

So that’s a quick taste of some of the insights from Luke’s workshop. Luke puts a wealth of advice and information on his website (including his presentation slides). If you are interested in this space, check it out!