Embracing the Constraints of Mobile Website Design

In my last post we briefly reviewed the mobile browsing market, the surge in smartphone adoption and the difference between mobile web solutions and native applications. In this article we will continue our theme of designing for mobile first by learning about the inherent constraints of designing for the mobile experience.
 

Smaller screen sizes, more focus

Mobile devices have only a fraction of the screen real estate that desktops do. This is forcing companies to consolidate their online experience and focus on what really matters to their customers. There isn’t room for anything else but the critical functions your product offers customers on a mobile device. And if the mobile version of your product can be simplified, so can the desktop version. Customers will often look for the desktop version to be just as easy to use as the mobile version.

Greater emphasis on performance

Mobile networks can be unreliable and coverage rather pricey depending upon your data plan. By managing both the size and number of files you are sending to a device, you can help speed things up and reduce carrier bills. One way designers and developers can reduce server load is by utilizing CSS3 properties such as rounded corners, text shadows, box shadows and gradients. This negates the need for images and in turn reduces server load. When your web experience has been optimized for mobile access your desktop users will also reap the benefits of faster loading times.

Distracted users, simplified designs

Designing for mobile means designing something that can be used anywhere at any time. Smartphones are used by people while shopping, during their commute, while waiting for an appointment and even at home. We can’t count on having someone’s full attention at any given time, and your mobile experience should be simplified to accommodate. I like Luke Wroblewski’s take on this:

“When reflecting on a lot of mobile usage patterns, I like to imagine people as “one eyeball and one thumb.” One thumb because they are likely holding their mobile in one hand and using a single thumb to control it; one eyeball because in many locations where mobile devices are used we only have people’s partial attention.”

In summary

Smaller screen sizes are forcing companies to focus on the core product offerings they provide for their customers. Create faster loading times by managing the size and number of files being sent to a device. People using smartphones are often distracted and your mobile experience should be simplified to accommodate this.

Articles in this series

Part 1: A Brief Introduction to the Mobile Market
Part 2: Embracing the Constraints of Mobile Website Design
Part 3: Capabilities of Designing for the Mobile Experience
Part 4: Organizing the Mobile Web Experience
Part 5: Designing Finger-Friendly Mobile Touch Interfaces
Part 6: Form Design on the Mobile Web Experience
Part 7: Designing Layouts for the Mobile Web Experience