The 3 Options for Mobile-Friendly Web Design
Is your website mobile-friendly? Smartphones and tablets have smaller screens than traditional desktop computers. A typical desktop computer renders in 1024 x 768 resolution, whereas a mobile device renders in 320 x 480 resolution. To compensate for this difference, webmasters must use a special mobile-friendly design configuration; otherwise, mobile visitors may encounter disproportionate graphics, links, text and other design flaws that hinder their experience.
Is Mobile That Important?
According to a recent comScore report, mobile accounts for 65% of all digital media time — a number that analysts expect will grow even higher in the following years. After all, smartphones now perform many of the same functions as desktop computers, allowing users to watch videos and movies, play games, send and receive email, and browse the web. But it’s usually easier and more convenient to fire up and use a smartphone than a desktop computer.
Furthermore, mobile compatibility is a ranking signal used by all of the major search engines. This means you’ll have an easier time climbing the search rankings for your target keywords if your website is mobile friendly. Google even announced last year that it was strengthening the value of mobile compatibility as a ranking signal.
Option #1) Separate Mobile Domain
You’ve probably seen this mobile-friendly configuration before: a company has a website for standard desktop traffic and another website for mobile traffic. Perhaps their main website is www.mybusiness.com, while their mobile website is www.mybusiness.mobi or www.mobile.mybusiness.com. Search engines treat the latter as an entirely different website, even if the content is the same. You’ll need to set up a bi-directional annotation, however, to direct visitors to the appropriate domain.
Although effective at providing a mobile-friendly experience, there are a few problems associated with using a separate mobile domain. First and foremost, it requires double the maintenance work. Whenever you add new content or update existing content, you must perform this task on both the desktop and mobile. A separate mobile domain may also confuse search engines as they try to determine which version to index.
Option #2) Dynamically Serve HTML and CSS
A second option is to dynamically serve HTML and CSS to visitors based on user agent. You’ll still have a single domain, but your website will serve visitors different HTML and CSS, depending on visitors’ device. When someone using a desktop computer visits your website, they’ll see the desktop-friendly HTML and CSS. But when someone using a smartphone visits your website, they’ll see the mobile-friendly HTML and CSS.
To learn more about dynamically serving HTML and CSS based on user agent, check out this Google help article. It walks you through the steps of setting up the Vary HTTP header so visitors see the correct code.
Option #3) Responsive Web Design
Of the three most common mobile-friendly options, however, Responsive Web Design is the preferred choice among most seasoned web designers and developers. Responsive websites serve the same HTML and CSS on the same domain. However, they adjust the display according to the visitor’s device, ensuring a positive experience on all devices.
Responsive websites are easier to set up and maintain than using a separate mobile domain or dynamically serving HTML/CSS.
Head’s Up: Google Recommends Responsive
As explained here, Google recommends webmasters use a Responsive Web Design. It helps users share and link to content; assists Google’s search ranking algorithm; easier to maintain; loads more quickly; and it minimizes resources consumed by Googlebot as it crawls your site.
The bottom line is that you should stick with a Responsive Web Design when creating a mobile-friendly website.
To learn more about mobile-friendly web design, contact us today. Crash Creative is Tennessee’s premier web development and digital marketing company.