Web Development Approach Shift to Mobile Approach
Today, a majority of internet users are browsing the web not from their computers, but from a mobile device. According to a 2018 study by Oberlo, 52.2% of global web traffic came from mobile phones, up from just 0.7% in 2009. In the United States, that number is even higher, with 58% of total web visits coming from mobile devices.
Traditionally, web development-focused first on designing a great desktop experience and then formatting sites for other screen sizes. But with the decline of desktop browsing and the rise of mobile browsing, doesn’t it make sense to do things the other way around? This is where mobile-first development, a trend that has been gaining popularity over the years, comes in.
Mobile-first development is exactly what it sounds like: it is the practice of designing web experiences specifically for mobile, then branching out to other device formats after. Mobile-first shouldn’t be confused with responsive design, which is another approach for ensuring good user experiences on mobile.
RELATED CONTENT: Web development company in Lahore Pakistan: So many choices to get the right fit Are Progressive Web Apps a silver bullet? 10 books every web developer should read to increase their software IQ
Software development company Chetu’s assistant vice president of operations Pravin Vazirani explained that these two design processes are the two main schools of thought when it comes to web design. “Websites that are designed responsively adapt to whichever device the site is being viewed on,” said Vazirani. “These sites are usually desktop-focused that have been responsively redesigned to accommodate the mobile user. Mobile-first web development, however, places a priority on mobile design while making responsiveness to other device types secondary.”
According to Bob Bentz, president of digital marketing agency Purplegator, many people think that responsive design equals mobile-first development. “Mobile-first should be considered a design strategy first,” Bentz siad. “In other words, responsive design has made it easy for a website to look good on both desktop and mobile. What makes mobile-first different, however, is that the web designer considers its mobile users first and then desktop users.”
Murphy O’Rourke, senior UX designer at digital tech consultancy SPR, added that there is a layer in between responsive and mobile-first called adaptive design, which is where there are completely different layouts depending on the device. “Maybe you cater some features specifically to phone or maybe even specifically to desktop and you hide things on tablet and so on because maybe they’re not going to be used,” he said.
Mobile-first has an advantage over responsive design, Vazirani explained. This is because responsive sites tend to be slower, which just doesn’t cut it for users. “Sites that are forced to respond to each new device are naturally slower and more data-intensive – which is a no-go for modern, mobile users – and since mobile design often looks great on desktop devices anyway, it’s leading many to question why focusing on responsive design is beneficial at all. There’s no stopping the mobile-first web development trend now, and no one has shown any signs of wanting to stop it anyway,” said Vazirani.
According to Brittany Stackhouse, head of development at digital marketing agency Exposure Ninja, mobile-first forces developers to think about mobile user experience at the beginning of a project. Now, developers have to think early about questions such as “how long will the site take to load on a mobile device?”
According to O’Rourke, there are several things to consider when doing mobile-first development, such as what features people use on their phone, what context they’re in while browsing, and how to make information easily digestible. For example, many people are in a different mindset when on their phone versus when they’re at a computer. This makes it crucial to figure out the proper workflow and determine what information needs to be shown first. “Your messaging should be concise, so that it not only fits on the screen but also it’s easy to digest in short increments,” said O’Rourke. “And so I guess starting there, you’re really just kind of refining the information, you’re refining what you want the user to do, you’re presenting them tasks. You’re aiming to be easily digestible, small chunks of information and workflows. So instead of a huge form, you might break it up into a couple different parts.”
In addition, mobile-first developers can utilize the features of a phone that aren’t present on the desktop. “Using your native features, you can automatically input things based on your location, or using your camera, [etc],” said O’Rourke.
Developers must also consider network access. “Almost everyone in the world has a mobile device these days, which is part of the reason mobile browsing currently dominates,” said Vazirani. “At the same time, network access is limited in many countries and regions, which makes it hard to load data-rich desktop websites.” Because of this, mobile sites need to be lightweight and snappy.
Another thing to consider is the fact that mobile is tap-oriented, not click-oriented. Certain things that work well on desktop don’t work well on mobile, such as dropdown menus, Vazirani explained.
The actual process of developing mobile-first also differs from traditional desktop development. The process of mobile-first development is less trapped by archaic and inefficient development practices than desktop design, Vazirani explained. These practices arose because desktop design began in the early days of the internet. Compare that to mobile design, which rose with the smartphone. “Mobile design … [is] perfectly designed for the current era of human technological and social growth. While desktop web development remains rooted in established procedures, mobile development is more of a ‘Wild West’ economy with many developers figuring out best-practices as they go along.”
This “Wild West” economy isn’t perfect, though. Because developers are figuring things out as they go, it’s easier to make mistakes, he explained. But he believes it also offers developers more opportunities for user engagement.
Mobile web development also benefits from new developer tools that make development more streamlined and intuitive, though Vazirani added that in a lot of instances, the same toolkits are used across the development of both mobile and desktop sites.
MobilegeddonAdopting a mobile-first development approach benefits not just your users, but your site performance as well.
In 2015, Mobilegeddon hit. Mobilegeddon is the name given to Google’s search engine algorithm update in April 2015 that gave priority to websites that perform well on mobile devices. This update made it so that websites “where the text is readable without tapping or zooming, tap targets are spaced appropriately, and the page avoids unplayable content or horizontal scrolling” were given a rank boost.
Then in 2018, Google started migrating to mobile-first indexing. Google’s index is used to determine a site’s position in Google search rankings. Previously, the index was based on the desktop version of an app, which led to problems for mobile searchers. By indexing the mobile version of a site, Google is ensuring that users searching for information on mobile devices find what they’re looking for.
Google clarified that this does not mean there will be two separate indexes. Instead, it will increasingly index mobile versions of context, which will be added to the main index.
Google also provides a mobile version of the tool Test My Site, which shows how sites rank for mobile site speed and functionality, Vazirani explained. “Google is more aware than anyone that cyberspace is going mobile fast, which is why this Silicon Valley giant has provided tools like the mobile version of Test My Site,” he said.
Desktop design won’t ever go away completely while mobile will certainly remain a major focus going forward, don’t expect the desktop design to go away. “The push for mobile-first development is really just to have an assurance that websites are working for mobile devices as well as desktops. Both are important since each can make up more [than] around half of all site traffic,” said Alexander Kehoe, co-founder, and operations director at web design agency Cavani Digital.
The desktop will likely always be a focus, especially in business contexts. “Nobody is going to be running reports and doing data synthesis on their phones,” said O’Rourke. “It would take way too long. And that’s not really the context of what these people expect to do. When they’re at work, they’re on a computer.”
Exposure Ninja’s Stackhouse also emphasized that mobile-first development practices don’t mean that the desktop experience gets ignored. “Instead, we’re creating responsively designed websites that work for both desktop and mobile users… So while mobile users may enjoy a faster, simpler version of a website, desktop users can enjoy an intricate experience that’s optimized for their chosen device,” she said.
While desktop design will never truly go away, it won’t be primary much longer. “Desktop development certainly isn’t an afterthought, but it isn’t the main focus anymore,” said Vazirani. “I would say that we are at a point where mobile-first is the priority and desktop development is lower on the scale. However, I imagine in a few years that desktop will drift even further down the scale of priorities to the verge of afterthought status.”
Vazirani added that things other than mobile could have the potential to disrupt desktop even further. Advances in wearable technology and virtual and augmented reality could have this effect. “The truth of the matter is that desktop-design will only be relevant as long as desktops are relevant, so if we as consumers are moving away from that, then yes it could very well become a bygone concept,” said Vazirani. “Desktop web design, as it was a decade ago, is already obsolete, with responsive design considered the new minimum. Mobile design, and therefore mobile-first development, is a step toward the immersive world that cyberspace was always intended to be.”
Progressive Web AppsProgressive Web Apps (PWAs) are an important piece of the mobile-first puzzle. According to Cory Tanner, senior UX developer at digital agency DockYard, PWAs are responsive web applications that provide a website- and mobile-app-like experience. “With PWAs, companies can create a single digital property that takes full advantage of most modern device and browser types, eliminating the need to build and manage separate web apps and native mobile apps,” said Tanner.
Traditional websites, Tanner went on to explain, are built and designed for desktop web browsers, limiting their ability to adapt to different device types. In addition, websites are unable to leverage mobile capabilities like push notifications or the ability to be downloaded to the homescreen.
On the other side of the spectrum, mobile apps are applications designed to work on a specific operating system. They require developers to build different versions of the same app to work across both Android and Apple.
PWAs eliminate some of these pain points and combine the best of both, Tanner explained. “When compared to traditional digital formats, PWAs have brought more focus to how a user interacts with web apps on a mobile device. PWAs bring added functionality that empowers app designers to reach the user with notifications and calls to action in a more interactive, localized format.”
Many companies that understand the importance of mobile experiences view PWAs as a way to “deliver the convenience of mobile with the sophistication of desktop experiences,” he said.
There are several benefits of PWAs — both for users and development teams. For users, they provide a seamless experience that loads like a typical website while offering the use of capabilities of traditional mobile apps. For development teams, PWAs can provide simpler design, development and project management. Rather than managing different versions of the same app, teams can focus on building and maintaining one app. “By reducing the need to maintain multiple codebases, PWAs help to reduce overall cost and resource spend. Developers can spend less time on cross-platform compatibility updates and more time on creative innovations,” said Tanner.
And companies are seeing massive ROI on their PWAs. For example, according to Tanner, Pinterest saw a 40% increase in time spent on their site, a 60% increase in engagement, and a 44% increase in user-generated ad revenue after launching their PWAs.
Tanner expects PWAs to become more popular as companies start seeing the potential benefits. “Today, the majority of companies still tend to take the familiar, ‘safe’ route to digital product innovation by focusing on native mobile apps and website enhancements,” Tanner said. “In the coming years, more companies will realize the benefits of different mediums, like PWAs, for different use cases. PWAs will shift from an emerging approach to a core part of the digital product consideration set.”
Popular tools for mobile web developers according to Pravin Vazirani, assistant vice president of operations for Chetu, here are three tools that most mobile web developers will use on a daily basis.
Bootstrap is an open-source CSS framework for responsive, mobile-first development. It offers CSS and JavaScript design templates that are often used for creating interface components, such as forms, buttons, navigation, and typography, he explained.
CanIUse.com is a resource for developers looking to expand their web development knowledge. According to Vazirani, it offers insights into which technologies, terms, and scripts can be used in mobile application development.
Test My Site is a tool provided by Google that determines page speed and functionality of a mobile web site compared to other brands, he explained. “Google is more aware than anyone that cyberspace is going mobile fast, which is why this Silicon Valley giant has provided tools like the mobile version of Test My Site,” he said.
