Website designers know that people aren’t going to spend much time on a website that’s difficult to use. Good designers, in fact, pay attention to the ways their sites are typically viewed and adjust their work accordingly. In earlier days of the web, this meant restricting a site’s width so that people with smaller monitors wouldn’t have to scroll sideways to see everything, and avoiding the use of effects that were only available to users of a single browser (for example, Netscape Navigator was one of the only browsers available in the 1990s that supported blinking text).
Beginning in the 2000s with the introduction of large, flat-panel monitors and stable CSS, designers could breathe easy. Sites grew by leaps and bounds, and were able to do some amazing things, and a single, static website could serve desktop and notebook computers equally well—as had been the case for years. The rise of mobile browsing, however, has once again changed everything. Today, as much as 40% of all internet traffic takes place on mobile devices [Source: Marketing Land], and that number is only going to increase with each passing year.
If you’ve ever tried to access a desktop-focused site on a mobile device (especially on a smartphone, where screen real estate comes at a premium), you know that it’s not exactly easy. Simple sites are, at best, difficult to read, and complex sites are an absolute nightmare. Some things that we take for granted on the web (such as mouse hover, which powers dropdown menus, button effects, and image zoom in many online stores) don’t even exist in a world where your only method of control is a fingertip pressed against glass. The result: people get frustrated, and will leave your website in favor of one that is easier to use on their devices (and believe me, nowadays, there are plenty).
The fact is, mobile browsing is a fundamentally different activity from desktop browsing—and that’s why mobile-friendly design is a must-have in today’s web. But what exactly does it mean for a site to be “mobile-friendly?” A lot of things. Here are a few:
Responsive sites adjust to whatever size the user’s screen is. Sure, people can zoom in on your site and move it around to read everything—but do they want to? A good mobile site makes it easy to read and access your content.
Mobile sites load quickly. Data is expensive, and cellular connections often aren’t nearly as speedy as broadband. Because of that, it’s important to keep all graphics, styles, and rich media optimized.
Mobile sites only show visitors what they need. This can mean disabling in-depth content that simply isn’t suitable for reading on a smaller device, removing links to applications that can’t be installed on mobile devices, or hiding functional elements that just don’t work in the mobile realm (remember what I said earlier about mouse hover?).
There are several ways to present your existing website content to mobile users. Some companies create dedicated apps that must be installed to draw data from the full site. Other websites detect when someone is using a mobile device and send the user to a separate, mobile-only site. Finally, some companies create responsive websites—sites that adapt to any device (including desktop and notebook computers, tablets, and smartphones). All are equally valid ways of approaching the issue, and each has its strengths and weaknesses. The important thing is that mobile browsing has a completely different set of requirements from regular desktop (or notebook) browsing—and your website needs to reflect that.