Mobile-First Web Design
Mobile-first web design is a philosophy all about beginning the website design process with the smallest devices in mind first, usually smartphones. This philosophy forces the web developer to focus on the core elements of the page and find a way to display this content clearly and effectively on small screens. Then, in turn, the mindset of presenting the most essential content in a simple design helps form elegant website layouts for larger devices too. Using these techniques to hone in on the essential core of your website and products and give it centerstage is the key to pleasant user experiences and a successful site.
The question, “Why is mobile-first design important?” can be answered in several ways. First, we’ll explore the changing internet environment and habits of users that make mobile-first design necessary to reach today’s people. Then, we’ll turn to how mobile-first design principles create a better user experience for the majority of people who access the internet with their phones.
Everywhere, All of the Time
Even ten years ago, smartphones seemed to be everywhere and constantly increasing in importance. Today, they have only continued to become ever more present and will certainly continue to grow into tomorrow. Smartphones are always in our pockets and bags or next to us on the couch. It’s become instinct for us to pick them up and quickly make a Google search or browse products in the empty moments of our day. Tablets, too, are more common and close at hand. And since mobile devices keep getting more flashy, impressive, and fun to use, it’s no wonder they’ve exploded into becoming the dominant way people access the internet in the last decade.
Today, nearly two billion people only use their smartphones to access the internet. That number could rise as high as 3.7 billion by 2025. That means that over 70% of internet users will only use smartphones to get online in just three years’ time. Additionally, more money is now spent on mobile advertising than television advertising. Business owners around the world are turning to the mobile ecosystem to find sales. https://xd.adobe.com/ideas/process/ui-design/what-is-mobile-first-design/
Website analytic programs, like Google Analytics, let you find these kinds of numbers for your own website. Every industry is different, and some might not attract quite as much mobile traffic as others. But what is increasingly indisputable is that mobile device trends are affecting every market sector more and more. When these internet users visit your website, what kind of experience will they find there? Having a good answer to that question is more important for every small business owner than ever before.
Not only is mobile-first design necessary to give visitors a satisfying experience on your website, but it’s also increasingly becoming necessary just to get your site seen by mobile viewers. This is because Google prioritizes mobile-friendly websites in search results and deemphasizes websites that aren’t. Mobile-first design overlaps with SEO. It’s unclear precisely how much impact Google’s mobile-friendly metrics have in making your website easy to find, but it is clear that a mobile-friendly website is more likely to show up where you want it to: at the top of the search engine results page.
Graceful Degradation or Progressive Advancement
Approach: Graceful degradation (desktop-first) and Progressive Advancement (mobile-first)
Saying more about what mobile-first design is will show us another reason why it’s so important. There are generally two approaches to designing websites with different devices in mind. The first has been called Graceful Degradation, the desktop-first approach. For a majority of the internet’s history, desktop devices have been the most common way of accessing the internet. Because of that fact, designers got into the habit of thinking of these devices first when building a website. As smartphones came onto the scene, mobile adaptability, if considered at all, was often an afterthought and executed poorly.
When designing for desktop first, every feature in mind for the webpage is incorporated into the design from the very beginning, and then pieces are removed until the content fits a smaller screen. Instead of identifying and focusing on core content before adding additional features, the designer places essential and additional features next to each other on the same page blended together. Without the mindset of identifying the essential elements of content first and designing a core layout around them, these essential elements are distributed throughout the page alongside inessential elements. Then, when unnecessary content is removed for smaller devices, the core elements can be removed with them. The first thought has not been the core of the webpage and presenting it well on any device. This oversight often forces the web developer or business owner into a redesign of their webpages just to make them functional for mobile users, which can easily become a tedious and time consuming task.
Web developers needed a new philosophy to build modern websites that wouldn’t just accommodate mobile devices but prioritize them. This new approach, Progressive Advancement or mobile-first design, was advocated by Eric Schmidt and Luke Wroblewski in 2010. Following a philosophy of Progressive Advancement, the designer first establishes the essential, high-priority content and creates a design that presents it clearly on mobile screens. This design will make sure the information or services users have come to see is easy to find and use. That way, any common task like looking for information, buying a product, or making dinner reservations is a smooth process just a few taps away. Then, when moving to larger devices, the web developer will add additional elements and features to take advantage of the increased space and capabilities.
Note that this approach is called mobile-first, not mobile-only. Your mobile design still has to be translated effectively on a desktop in a way that best fits that context. As Nielson Norman Group writes, “if a design technique is intended to span platforms X and Y, then an uncompromising X-first approach will make Y an afterthought and harm users on Y. To design for X and Y, you need to consider the strengths and needs of both and adapt the two versions of the website accordingly.” This is the strength of progressive advancement: by honing in on the essential idea and content of your webpage for mobile screens, you equip yourself to build on that foundation when you “progress” to more powerful devices. The same process and principles that create effective mobile websites also set you up for success on desktop.
Whether you’re a web developer building websites for a client or a small business owner doing the work yourself, these are the principles of progressive advancement that animate a modern website. Follow them, and you will have a site that’s not only pleasant to use but wins over customers on mobile devices and desktops too.
Since content comes first, mobile-first design is especially reliant upon design features that lead a viewer gracefully through the content. Breaking up text and using typography, color, and contrast to create a visual hierarchy gives mobile users a more pleasant experience navigating your pages.
Content is dependent upon context. So, different devices may have different needs for website content. Mobile-first design prioritizes the content necessary for mobile screens, then looks to content for larger contexts. But just because a particular feature isn’t necessary on a mobile design doesn’t mean it’s not a necessary or helpful feature on desktop designs.
Mobile devices like smartphones are more restricted in size, bandwidth, and processing power compared to most desktops. These factors force mobile designs to focus only on the essentials and remove extraneous elements that slow down the loading speed of a webpage. For example, desktop designs are more likely to use large images, high-res videos, additional information, or other kinds of files that may be difficult to interact with on a phone. Meanwhile, mobile designs will be more likely to use elements like collapsible menus and have less white space. Also, people using smartphones to get online often have different goals than they do when using a desktop. Think of the needs mobile users will have when visiting your site and make sure your design meets them. Give mobile users what they’re looking for, present it right away, and remove what they’re not interested in. Then, think of any additional needs desktop visitors may require or appreciate. This thought leads to the next principle of mobile-first design.
If mobile-first design is content-first design, the developer has to think like a user to figure out what content the user needs the most. Most people who regularly use the internet can feel the difference between a website that’s designed for them versus a website that coerces them into sales. They’ll act accordingly.
If content doesn’t add value or create a better user experience, cut it out. Don’t force actions on a visitor unless it’s an action they want to take. Users won’t give you what you want, like sales or subscriptions, unless you give them what they want too. If you center your website around users’ needs and not your own, they’ll be more likely to meet your needs in return.
Good user interface design involves finding common painpoints and fixing them. Painpoints in web development are any aspect of a design, like confusing navigation or hard-to-find features, that give users frustration. Take a look at your competitors’ mobile websites. If you can find painpoints in their design or processes and solve them on your own, you may just convince their customers to become your customers.
Intuitive and Easy Navigation
Mobile contexts usually require more compact navigation to fit the constraints of smaller screens. But mobile website navigation still needs to be accessible and intuitive. Using a hamburger menu for mobile navigation is the most common way to meet these needs, but with some drawbacks. When navigation is hidden inside a hamburger menu, users are less likely to use it and find other pages on your website. In one study, the Nielson Norman Group showed that hidden navigation accounts for a more than 20% drop in discoverability on your website. Not only that, but users consistently report that hidden navigation makes for a slower and less pleasant experience. The same study shows the value of “Combo Navigation,” in which a hamburger menu is supported by links or buttons directing visitors directly to your most important pages.
The limitations of mobile devices can force designers into creative solutions to design challenges. But clever thinking in your mobile layout will set your site apart from the rest and provide pleasant user experiences.
Fast and Accessible
Mobile-first web design is fast and accessible. Smartphones have less processing power and real estate to work with compared to desktops. Your web pages will gain an advantage on mobile devices if they are lean and intuitive. A webpage loaded with full-screen images and video may look amazing and load just fine on a desktop computer. But if you only access your page with a desktop, you may not realize how painful an experience it can be to get it to load on a smartphone. Optimizing your content for mobile loading speeds will fix that problem and make your website smoother across the board. Faster websites also get an SEO boost. Win-win.
The principles that ground mobile-first design, prioritizing your most important content, focusing on the user, simplicity, speed, and intuitive design, also promote accessible websites. Build a website that’s hospitable for anyone who visits it and you’ll be far more likely to win their support. You’ll also win their appreciation and be known as a business that cares for its customers.
Simplicity is a principle that underlies all of the other concepts mentioned here. Identifying your most important content, focusing on the user, creating intuitive navigation, and a quick site are all about creating a simple and effortless user experience. No desktop website should be busy either, but a crucial step in mobile-first web design is cutting out the clutter. Smartphones, with their lesser processing power, are more likely to be weighed down by any extraneous content. So keep your web pages free from bulky extras as well as any distracting or intrusive content. Many websites are all too ready to spring popups on visitors on their way to the content they need, but this is a universally frustrating experience. In fact, it’s an experience Google is trying to crack down on, especially on mobile devices.
Simplicity should carry through in every stage of designing your webpage. Create a clear and intuitive layout that showcases the most important content and streamlines your user’s path to their goal. Don’t create a website that gets in their way.
If you’re a business owner, imagine what would happen if you blocked or placed obstacles at every entrance to your parking so that no one could get their car close to your business. You probably wouldn’t be too surprised if many people just stopped coming. The same thing will happen if you give visitors to your website a painful or completely nonfunctional experience using the most common tool to access the internet. If any of your competitors offer a better mobile website, your customers will turn to them instead. This risk isn’t just hypothetical. It’s already the reality and will only become more prevalent as mobile devices continue their ascendancy.
This risk doesn’t have to hang over your business, however. Remember mobile-first design and keep these principles in mind when designing your website or hiring someone to do that for you, and your business will remain part of the future of e-commerce.