Since the beginning of the web just over two decades ago, there has been a bit of an incremental technical arms race going on. Early on, internet connections were slow, screens were small and browsers were fairly archaic. As a result, sites were designed with those limitations in mind; they were narrow, used simple (if any graphics) and text was laid out in a very page-like static grid. As the years went by screens got bigger, internet speeds increased, and browsers became more compliant to evolving standards. Within a decade or so, it became possible to show video, host dynamic content, and design sites to be much wider.
Designers had it pretty easy. All we had to do was keep up with a few simple technical trends and design for those. As HTML and CSS standards changed, we added new native features. As the average screen size increased, we made sites wider. As broadband became ubiquitous, we added rich media content. We could design with a fairly comfortable assumption that our sites were going to be viewed by a user sitting at a desk or on a laptop using maybe three different browsers.
Then, in the early 2000s things began to change.
It was about that time that the very first internet-enabled phones came onto the market. While the web experience on a 2” 128px screen was abysmal to say the least, it provided a kind of spark. Suddenly, the idea of the internet existing only when seated in front of a glowing CRT seemed a little silly. Fast forward past about a decade of developments in cellular internet technology, the introduction of the iPhone and explosion of Android devices, and the rapid adoption of tablets and you’re in a world that would have been hard to imagine in 1994.
This rapid increase in the number of mobile users didn’t go unnoticed by designers and devs who started designing mobile versions of sites. Often these were narrow, stripped down versions of sites that were meant to be viewed with a mobile device. While they did (and still do) get the job done, they are a woefully inadequate solution to an increasingly complex problem.
The fact is as designers, we’re faced with a number of variables that we never could have imagined even five years ago. We have to contend with screen sizes that go from 320px wide to well over 2000px (including screen sizes that can change by rotating the device 90º!) We have a dozen mobile and desktop operating systems in hundreds of various versions and states of updates running any number of browsers. We have internet speeds that range from 1Gbps Google Fiber all the way down to 2G mobile internet in an low-reception suburban basement. These are problems that can’t be solved by designing a skinny, button-laden version of the site you’re already designing. Plus, who wants to potentially generate parallel content for two sites?
But there’s an even bigger issue: desktop use just ain’t what it used to be.
Especially for those of us who have lived in a world without the internet, we still have this tendency to think about the desktop as the “primary” experience and everything else to come a distant second. Let’s be honest with ourselves here: what comp do you show a client first? I’m willing to bet it’s the desktop view. However, this is changing. Rapidly.
According to Pew, 2/3 of Americans use their phones to go online via a browser (as opposed to apps.) That’s 40% of the total population accessing the internet via a mobile device. This isn’t even including tablets. But here’s the real shocker: one third of cell internet users go online MOSTLY using their phone. That means that nearly 20% of the people in the United States will never see that gorgeous desktop site you just designed. One out of five!
Yeah, but that 20% is just 20-something urban hipsters, right? Actually, no. Smartphone use is nearly identical across sexes, levels of education, races, salary ranges and community types. The only real difference comes with age, but even then use among 18-29 year olds is only 10% more than people aged 50-64 (98% vs. 88%.) Heck, 75% of people over 65 use a cell phone.
So what does this mean for designers? It means two things:
First, as backed up by research, “mobile-first” design can’t just be this little mantra that gets repeated to clients in pitch meetings and in About sections of sites. It really needs to be happening and needs to be the primary consideration in the design of a site. The functionality found in a desktop site needs to be present in a mobile view of the site. No more stripping away features just because there’s nowhere to put them. You’re a designer. FIGURE IT OUT!
This leads to the second point: It means the end of chasing constantly shifting standards. We no longer need to lock a design into a specific screen width with certain functions that only work on a desktop with a 5mbps connection. It means being able to cater to a user whether they’re on a MacPro with a retina display and a gigabit connection or on a 5″ off-brand tablet running an outdated version of Android connecting via a rural mesh network halfway around the globe.
“Mobile-first” can’t just be a little mantra that gets repeated to clients and in “About” sections.
It means responsive design is the new web design. In a way, responsive design could be seen as the “ultimate” form of web design. Since it works across devices, screen sizes, and operating systems, It’s essentially future-proof. Now, this isn’t to say that future revs to HTML, CSS, updates to CMS and even unforeseen technologies and standards won’t change things going forward, but the underlying backbone of design that isn’t based on a common use-case should remain relevant even two decades from now.