Mobile Web Design: Should I Use a Responsive Design or a Dedicated Mobile Website?

Immediately following the development of the modern internet, most web traffic came from desktop and laptop computers. But we recently hit the tipping point with increased usage of personal devices – tablets and phones. 2016 marked the first time in history that mobile traffic surpassed desktop and laptop traffic. Since then, mobile devices have become an increasingly popular gateway to the internet, allowing users to browse their favorite websites wherever they are.

With mobile devices now accounting for more than 52 percent of all internet traffic, using a mobile-friendly web design is no longer optional. To reach the ever-growing pool of mobile device users with your website, you must use a mobile-friendly design. Only then can your visitors have full access while using their smartphone or tablet. There are two main options to get your website ready for all devices: building a dedicated mobile website or making a responsive website.

A dedicated mobile website is a website designed specifically for mobile traffic. They are typically used in conjunction with a traditional website but found on a separate top-level domain (TLD) or subdomain, such as mobi.example.com or example.mobi.com. In essence, you have two websites – each for a different type of traffic. Because of this, search engines treat them like entirely separate websites, allowing dedicated mobile websites to rank in the mobile search results of Google and Bing.

When compared to desktop counterparts, dedicated mobile websites are designed to be more basic. They contain fewer scripts and styling elements to reduce the risk of user experience (UX) problems when viewed on a mobile device.

Bandwidth-hungry images and videos may also be stripped away from a dedicated mobile website. Since mobile users have less computing power and a possibly limited amount of internet data per month, large image and video files are removed to ensure quick load times.

Dedicated mobile websites have been around for over a decade, so you can rest assured knowing it's an effective solution for building a mobile-friendly website. In fact, a consortium of the world's top tech companies, including Google, Microsoft and Samsung, helped develop the .mobi TLD in the mid-2000s specifically for dedicated mobile websites.

Depending on the size of your website, it may be easier to build a dedicated mobile website than adopt a responsive design. However, you need to consider how much upkeep this route will require and how you are managing the content and data for both experiences holistically. If you have a great website already, and simply need a better experience for your mobile users, you can build a dedicated mobile website from scratch, transferring only essential content and elements to it from your existing desktop website.

Another way to build a mobile-friendly website is to use a responsive design, which contains Cascading Style Sheets (CSS) to automatically adjust the size of on-page elements based on the user's device. While CSS is used in the development of a dedicated mobile website it really shines when applied to a responsive design. In a responsive website, CSS allows designers and developers to target specific screen widths to adjust styles – ensuring that the design adapts to accommodate the visual limits of the screen.

With a responsive design, visual elements are given a structure so that the layout of the page naturally “breaks down” differently based on the screen width of the device being used. Whether a visitor is accessing the page on a desktop computer, laptop computer or mobile device, they will have access to all of the content on the site. Using a responsive design means that the site’s layout has been carefully considered across many different types of devices.

Using a responsive design for your website also means that your existing SEO and marketing efforts will translate across all devices. There’s no need to duplicate content in multiple places and modify each version individually.

The major benefit of creating a website with a responsive design is that there aren't any UX nuances between desktop and mobile viewing. Unlike dedicated mobile websites, responsive sites serve the same HTML to all users. Regardless of the user's device, he or she will have the same experience as everyone else who visits your responsive website.

Search engines will have an easier time indexing your website if it uses a responsive design. If you launch a dedicated mobile website, Google and Bing must first find it before they can add to their search results. To overcome this technical challenge, you can use the rel="canonical" tag to point to the alternate mobile or desktop page. On the homepage of your desktop website, for instance, you can direct search engines to the homepage of your dedicated mobile website using the rel="canonical" tag. But even then, search engines will discover the same or similar content published on both pages, which could result in only one page being indexed.

Not all mobile visitors to your website use the same device. Some may use smartphones with a small 4- or 5-inch display, whereas others may use larger tablets with a 9- or 10-inch display. The good news is your responsive website will render and function properly to all users. Responsive designs are carefully considered for many sizes of devices.

If you look at Google's help page on mobile search engine optimization (SEO) you'll see they support several methods for building a mobile-friendly website, including a responsive design, dedicated mobile website (separate URLs) and dynamically serving HTML based on device. Of those methods, the only one Google recommends is a responsive design.

If your website uses WordPress or another CMS, you can easily implement a responsive design by starting with a responsive theme. Responsive themes, such as WordPress's Twenty Nineteen, are designed to adjust automatically depending on the device on which they are viewed. You can take this one step further and engage with a company to examine UX, design and build your responsive website, providing a well thought out, custom solution for your specific needs.

Another benefit is that it's easier to maintain a responsive website than a dedicated mobile website. If you use a dedicated mobile website, you'll have twice the work to perform when adding or updating content. If you publish a new page on your desktop website, you'll probably want to publish the same content on your dedicated mobile website. With a responsive website, you don't have to juggle multiple websites. Instead, you only have a single website to maintain.

You can build a website that renders and functions properly on mobile devices using either of these strategies, but there's a reason Google recommends a responsive design. It offers a higher level of cross-compatibility across all devices, prevents indexing and ranking problems associated with duplicate content and is easier to maintain than using a dedicated website.