Where Mobile-First Design Came From and Why It’s Time to Change
The pace of technological development today is still accelerating, but it still happens in an organic fashion. One idea inspires the next, new technology is built on the foundations of technology that has come before. When websites first got started, most designs were made of pure HTML and CSS. Layouts were spacious, blocky, and made of big bold squares, rectangles and stripes. Images were also incredibly expensive in terms of resources. Over time, web development got faster, smoother, and more interactive. Web portals and applications were built on the HTML basics. Specific web programming languages surfaced and then nearly code-less web platforms to the lead.
Mobile and Web Technology
But the progress of web technology isn’t just about how we build web pages. Mobile phones have been accessing the web since about the time they became widely popular. Texting turned to checking email, checking email grew into browsing the web and from there, web and mobile design have never been truly separate. When the first flip-phones and blackberries accessed the web, businesses who realized the value of mobile access realized that their wide-page designs simply weren’t going to fly on those tiny screens. With the advent of full-screen smartphones and tablets not long after, there were simply too many smaller screen sizes and shapes for old-school web design to serve effective content.
At the same time, the increasing popularity of mobile phones and devices was making it necessary for competitive companies with an online presence to innovate for mobile designs. This was initially done with infrastructure that would detect the screen size and present separately designed layouts for the page content. From there we developed modular design that adapts to the borders of the screen and dynamically arranges content modules. But this also had its weaknesses.
The Growth of Mobile
Mobile has grown progressively more important to everyday life in the last 15 years. First ‘car phones’ were heavy objects that only a few select traveling professionals used. By the late 00s, every teen and professional had a phone capable of calls, texting, and playing MP3s. Blackberries and iPhones introduced more work-capable functionalities and soon it could be assumed that everyone could be called at home, at work, or on their cell. And we all know where that went. Now, home landlines are practically unheard of because every single adult and many of the children each have their own personal phones.
1) Personal Phones
From there, phones become extensions of ourselves. The rise of smartphones and app stores meant that every phone could be uniquely personalized. your background, your screen lock, your phone case, and your personal collection of apps. The introduction of tablets only accelerated this process, as those who needed larger workspaces or to replace notebooks and paperwork with a digital solution were also brought into the new mobile culture. So it’s no surprise to reveal that there has also been a massive increase in web activity from mobile devices.
2) Mobile Web Overtakes Desktop Usage
In fact, people are now accessing web pages more often from their phones and tablets than they are from desktop computers. This makes sense when you consider the relative available times. PC browsing can only happen when someone is set up at home, school, work, or with an unpacked laptop. Mobile browsing, however, can happen in seconds simply by flipping out your phone while waiting for the bus, in line for lunch, or before a meeting starts.
Transitioning to Mobile-First Design
Mobile-first is the phrase chosen to represent a new approach to website and web resource development. In the past, there has been an assumption that the central web design was the one that appeared on the large desktop screens and mobile access was a convenient afterthought. However, as mobile has taken a greater and greater predominance in our lives, so too has the importance of mobile development. It has gotten to the point where having a smooth perfected mobile version of your website draws more traffic and wins more new customers than features incorporated into the PC design.
For foward-thinking businesses, renewed focus on mobile design is the obvious answer. But rather than trying to adapt a monitor-sized web down to comfortable browsing on a phone screen, many realized that the best approach was a complete overhaul of how we think about websites. Mobile-first is the process of building your web designs from the mobile version as the core layout and feature set and working your way out from there.
At the heart of the mobile-first design strategy is the “progressive advancement” approach. With this, the basic concepts and design elements are based on what the most limited potential browser can achieve and builds on from there. Naturally, this means building your web page design based on what a small-screened and not-very-powerful phone can render comfortably and enjoyably. While this might sound a bit limiting, it ensures that even customers with low-end devices will always be able to access and interact with your site design in a way that most websites don’t cater to.
After the core design is established, more features, functionality, and UI can be developed for each more capable setting. Smartphones browse better than simple cell phones and tablets browse slightly better than smartphones due to the larger screens and processors. Laptops take the odd middle-stance with a fairly wide variety of screen sizes and capabilities, finally followed by the traditional desktop PC workstation. This will lead to websites that are designed more like apps but are consistent in service and design from the smallest phone to the widest monitor.
Of course, if you’re not looking to revamp your website from scratch in order to work from the ground up, the compromise method is known as “graceful degradation”. While this sounds like a fancy way to say “back-handed compliment”, graceful degradation, in fact, is the practice of down-scaling a full-sized website or web application into each progressively smaller device design infrastructure. This is what the vast majority of companies adapting to mobile-first will do but is more likely to result in mobile pages or apps with incomplete feature sets.
Mobile-first web design is undeniably the current wave. As of early 2019 about 2/3 of the web is browsed on mobile devices. Our phones are becoming more and more an extension of our personalities and lifestyles with everything from our to-do lists to our work collaboration apps stored inside, we can only expect to see further shifts of marketing, media, and business into the mobile world. By adapting your web content to the mobile-first design strategy, you can stay up to date and make sure your mobile customers are getting the quality of service they’ve come to expect. For more information about the mobile-first trend and how to adapt your website to fit this new approach, contact us today!