Mobile Design Strategy: Mobile is the future, so let’s approach it right

As of 2017, there are over 3 billion people using the internet, and it’s largely thanks to an increase in mobile technology. 3 billion people. That’s nearly half of Earth’s human population. Millions of people live where basic infrastructure to deliver fixed broadband was lacking or too expensive, but now these massive 3G and 4G networks are bringing the Internet to wherever a phone can grab a signal.

Even where Internet usage was already widespread, like here in the US, the trends are revealing: mobile is creeping on desktop. Already, 40% of Internet use happens on mobile devices, and it’s growing in correlation with smartphone ownership.

So what does this mean for the small businesses and large corporations Whiting House works with? It means we advocate for a mobile design strategy.

 

You mean mobile-first design?

Nope. Mobile-first is exactly what it sounds like. You start designing the mobile version of the application or website first, to the possible detriment of tablet or desktop versions. When we talk about mobile design strategy, we mean that we need to be dynamic with the content, but also with our process.

The subject of this article serves as a wonderful metaphor to understand what we’re talking about. A website today needs to be fluid. It must adapt to screen sizes while maintaining design elements and a consistent user experience. Much like the fluidity of a website, the process of designing must also be fluid. Our process must bend to the characteristics of each individual project.

You’d be right to suggest that we’re talking about agile process. But even within an agile process, you find rigidity in some sub processes. For example, what if you were to contract a company whose work structure is agile, but whose design process is cemented in mobile-first ideology? If your business depends on desktop but the company pushes for mobile-first, it’s a quagmire.

 

Mobile design strategy is the way to go

Mobile design strategy, on the other hand, recognizes the importance of mobile while remaining malleable to the priorities of a given project. If the client needs to focus on mobile, we’ll adapt a mobile-first approach. If their desired user actions require purchasing, we’ll defer to a study that indicates most online shopping in the US happens on computers, and will start by designing for desktop. Both approaches will result in a final product that works on all screen and browser sizes.

 

Mobil design strategy for web design agile processes

Fixed vs. Fluid vs. Responsive vs. Adaptive

Regardless of whether a project prioritizes mobile or desktop, websites need to be designed to work across devices. There are 4 main classifications for websites in terms of mobile design.

Fixed

A fixed website is designed not to move when the browser is resized. Typically, fixed websites are optimized for desktop, and appear tiny on a mobile display, often breaching the screen’s boundaries. Example of a fixed website. (Some fixed websites you view on desktop are actually adaptive websites. See below.).

Fluid

Fluid websites retain proportions of elements as you decrease the browser size. They do this using media queries and dimensions that are described using percentages. Content available on the desktop version will adapt to appear on the mobile version. Here is an example of a fluid website.

Responsive

Responsive websites also use media queries, but do not use proportional resizing. Instead, elements change as you decrease the browser size. They might change position, content, dimension, or they might disappear entirely. This website uses responsive design.

Adaptive

Adaptive websites deliver dedicated versions of itself based on the device you’re using. When you navigate to an adaptive website, it detects your device and delivers the associated code. Facebook is an adaptive website: when you resize the browser window it appears to be a fixed site, but when you load it on your smartphone, you’re served a mobile version.

Smart mobile design strategy is open to any of these solutions. They each have advantages and disadvantages depending on client, market, goals, and investment.

 

Responsive, fluid, adaptive web design

Why is this important?

This article is meant to demonstrate that our own design-oriented openness is a prerequisite for any project we take on. Mobile is not the future; it’s right now. Though we cannot allow ourselves to be swept up in peppy “mobile-first” evangelism, we are evangelists when it comes to accepting data-proven truths as portents of what’s to come.

By | 2017-06-02T21:26:12+00:00 May 17th, 2017|App Development, Articles|

Authored by:

The Whiting House team works together to craft articles for this blog, which ensures that our content is informed by multidisciplinary backgrounds and wide-ranging experience.