Why You Must Implement Mobile First Responsive Web Design?
Last Updated -
Mobile now accounts for the largest traffic share, which has put pressure on companies to offer rich user experiences across devices. A good user experience is multidimensional, encompassing user interface, navigation and performance.
Each of these areas can be broken into almost infinite sub-areas providing developers and designers with many opportunities for creativity and optimizations. To be honest I find this to be the fun part of my career.
Responsive web design is about providing the optimal user experience irrespective of whether they use a desktop computer, a smartphone, a tablet or a smart-TV.
According to Mashable, more than 60 percent of people use at least two different technological devices per day to access the internet. More than 40 percent use at least three. Imagine all of the different devices currently being used to access your sites and business applications.
Amongst the people that use 2 or more different devices in a day, more than 50 percent of them say that they begin a task on one device and finish it on another.
Corporate IT Cannot Control Work Personal Computing Any Longer
The days of just having a desktop computer or a laptop are kind of a long time ago now, and the rise of the smartphone and tablet mean more and more people having more and more devices.
The days of the IT department specifying a finite set of computers for employees is over. Consumer facing sites cannot assume there are 1 or 2 primary screen resolutions used to access their sites. You must be able to handle everyone on their terms, not yours.
According to Forrester 62% of US online adults expect a mobile-friendly website and 23% expect their mobile experience to change based on location. This may make you think about limiting your mobile experience, making it differ from the desktop experience. This is a common mistake. Device does not directly imply location or intent, therefor you cannot limit capabilities.
Pew Research Center's study of U.S. smartphone use in 2015 found that 99% of smartphone owners use their phone at home, 82% use their phones while in transit, and 69% use their phone at work each week. People don't want a stripped down set of content. Instead, they want quick and easy access to the materials they need on whatever device they happen to be using. Do not box in your customers, you need to give them the freedom to be successful, to spend money or engage with your company.
"We've been focused on a relatively small portion of the Web: a few desktops & laptops. Five years ago, our view of the Web was much more limited. We were overly concerned about a few fixed width views of our layouts…The three main ingredients of a responsive design: fluid grid, flexible images, and media queries. This is an attempt to embrace the fluidity of the Web and design across device boundaries." - Ethan Marcotte 2016 Webstock
6-7 years ago I saw this trend emerging as the popularity of the iPhone and iPad were rising. I observed more and more ‘normal' people as well as office workers using these devices for routine and business activities. Like most developers my first reaction was to create a mobile specific web site and separate the two experiences. After a few projects I realized this was a bad idea.
Meanwhile Ethan Marcotte released his book, Responsive Web Design and published the landmark article of the same name. In these publications he defined the term and the responsive design methodology popular today.
Mobile is a Way of Life
Mobile is a way of life today and often our customer's first choice. In fact please stop using the terms mobile and mobile first and just change our mindset to accept it as part of the user experience landscape. In fact mobile class devices have overtaken traditional PCs in both traffic generated as well as device sales. Just to prove my point lets look at some statistics.
It shocks me to still get plans for pages that are designed for desktop. Designing for desktop now is like shoving an 8-track into your iPhone’s headphone jack (too soon?). Both are obsolete just like desktop.
According to Smart Insights mobile overtook desktop sometime in the summer of 2014. There are numerous other surveys and public traffic announcements that back this statement up. If you are not seeing this reflected in your traffic then you will. More than likely your traffic trends are growing heavier towards mobile everyday. This means the need to account for mobile is urgent for most companies.
- If Not True For You Today it Will Be Soon
- Enterprise Users Are Mobile, Even If You Deny It
Why is mobile usage trending so high? Well obviously people like their personal mobile devices. This is reflected in hardware sales. Today mobile devices sales far outpace traditional PC sales:
Enterprises are not saving the dying PC market. More and more as I interact with different enterprises I encounter employees are adopting mobile and their personal laptop, not the corporate issued device.
Personal Observations
When I am in airports I like to observe what people are doing, in particular with their computing devices. By far phones and tablets dominate, but something I am noticing is the lack of traditional Windows PCs. Instead I see a majority of MacBooks.
Sometimes I talk to some of these people and ask why the MacBook and did their company issue that device to them. The answer to the later is no, they figured out how to get the Mac on the corporate network to do their work. Their work tends to revolve around e-mail, documents and line of business web applications. This is consumerization of IT in practice.
Making False Assumption
The consumerization of IT or BYOD means we as enterprise developers can no longer assume the screen and device our customer will use to interact with our application. This means we need a flexible user interface solution that works well on screens of all sizes.
Jason Grigsby has one of my favorite quotes on this topic:
"Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. Pause for a moment and the line blurs. Look away and it will be gone. Let’s take the absolute best case scenario. You’re building a web app for internal users for whom you get to specify what computer is purchased and used. You can specify the browser, the monitor size, keyboard, etc.How long do you think that hardware will be able to be found? Three years from now when a computer dies and has to be replaced, what are the chances that the new monitor will be a touchscreen? By making a decision to design solely for a “desktop UI”, you are creating technical debt and limiting the longevity of the app you’re building. You’re designing to a collective hallucination. You don’t have to have a crystal ball to see where things are headed. And once you start accepting the reality that the lines inside form factors are as blurry as the lines between them, then responsiveness becomes a necessity." - Jason Grigsby
You Cannot Predict Users Device or Intent
Let me finish with more supportive quotes. These will focus on breaking the natural habit of assuming too much about how a customer will use your applications.
"I think the key is not to assume anything. We don't really know what our users have come to look at. So, we can't say, "Oh, it's okay. This person is on a mobile, so we're going to cut out a load of the content so they can't reach it."
"The emergence of ideas like "responsive design" and "future-friendly thinking" are in part a response to the collective realization that designing products that solve one problem in one context at a time is no longer sustainable. By refocusing our process on systems that are explicitly designed to adapt to a changing environment, we have an opportunity to develop durable, long-lasting designs that renew their usefulness and value over time."
"When you optimize an experience for a device, you get a return….If you don't have a great mobile experience, people will just bounce off. … We are not designing for devices, we are designing for human beings" - LukeW
Summary
Let's review the main points:
- Mobile has overtaken traditional PCs
- The customer controls the experience, not the IT department
- You can't predict the future, but you can be more prepared
I hope this article has provided resources to embolden you to pull the trigger on responsive web design. This article does not have actionable code or techniques, but should be used as evidence to the importance of responsive web design. I realize many of you agree responsive is the way to go, but may be limited by your managers or stakeholders. Feel free to use this article as a resource to help you sell responsive design in your organization.