Responsive web design (RWD for short) is a clever design technique that uses a single HTML code base for all platforms. That is, all viewing devices read from the same code on the same URL.  The content resizes itself to fit the screen being used, based on pre-defined breakpoints and fluid grids.

RWD requires solid up-front planning. Costs can be high at first, but once the device-specific strategy is set, maintenance can be less resource-intensive.

Pros:

• One URL for all content. Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content. It’s also easier for search engines to discover and index your content.
• A streamlined user experience. Presentation of all content is customized, and device-specific features can still be used.
• Flexible orientation. RWD naturally allows for landscape or portrait device orientation changes by users.
• No redirects. Load time is reduced and performance increased.

Cons:

• Careful planning required. Since all HTML is shared here, careful planning is a must to develop a truly custom and robust experience with optimal performance for each device and user.

Common mistakes to avoid:

• Data bloat. Don’t let mobile users download full-size images meant for big screens and fast speeds. Try to reduce HTTP requests and minimize CSS and JavaScript. Load visible content first and defer everything else.

Who it’s for:

Businesses that are focused on offering a consistent experience and can plan holistically for all devices with a single web team. (Starbucks.com, BostonGlobe.com and Time.com all use this approach.) RWD can be expanded to fit new devices as they emerge, and the single URL is good for linking and sharing articles without confusion or redirects.

In this method, the web server detects the type of device a visitor is using, then presents a custom page designed just for that device. Custom pages can be designed for any device type, from mobile phones and tablets to smart TVs.

Pros:

• A custom user experience. Each user gets content and layout created just for their device.
• Easier changes. Adjust content or layout for one screen size without having to touch other versions.
• Faster loading. Your team can streamline content for optimal load times on each device.
• Single URL. As with Responsive Design, Dynamic Serving keeps all your users on a single URL.

Cons:

• Content forking. Multiple custom pages mean multiple sets of the same content. Unless you have a sophisticated CMS in place, keeping content up to date on all device-specific pages can be challenging.

Common mistakes:

• Faulty device detection. Your servers will need to run scripts to recognize all available devices. This step prevents problems like the server sending a mobile-optimized site to tablet users. Your webmaster will need to keep the directory up-to-date and running smoothly to avoid bad detection or gaps in service. Another common mistake is that the server assumes a device orientation, most commonly portrait, but the user may be holding the device in a different orientation (ie landscape).
• Changing experiences: Users will be confused if you have multiple sites and they appear radically different. While it’s important to customize for each screen size, your brand look and feel should be recognizable in all formats.

Who it’s for:

Dynamic serving is a resource-intensive solution for companies that make frequent changes to their website, and who often need to adjust display for one device, such as tweaking only their mobile site. A capable IT staff (or vendor) is a must to manage the different and possibly complex sets of website code required.

A third option is to simply create a mobile site that’s separate from your original desktop site. Your system detects mobile visitors and redirects them to your mobile-optimized site (often using a sub-domain like m.yourname.com).

Only mobile users will see the separate mobile site. Users of tablets, Web-enabled TVs or other devices will still see your original desktop site.

Pros:

• A custom user experience. This gives you the most freedom to create a separate mobile site that is designed only for mobile users.
• Easier changes. Content or design changes can be limited to the mobile version of the site, with no effect on other devices.

Cons:

• Multiple URLs. Sharing a web page requires careful redirects and integration between your mobile and non-mobile sites. Redirects also lead to longer page load times.
• Content forking. Keeping two different sets of content can make data management more complex.

Common mistakes:

• Faulty redirects. When a mobile user lands on a deep desktop page, make sure they aren’t redirected to your generic mobile homepage. Also important: avoid smartphone-only errors, where a desktop URL redirects to a non-existent mobile URL.
• Missing annotations. The two-way (“bidirectional”) annotation helps Googlebot discover your content and helps our algorithms understand the relationship between your desktop and mobile pages and treat them correctly.
• Inconsistent user experience: People who look at your smartphone site should recognize it as the same business they see on your desktop site. This prevents confusion and a bad overall user experience.

Who it’s for:

Businesses that for any reason need to manage their mobile site independently. For instance, some businesses may want to use a different vendor for mobile, or may want a mobile structure that simply wouldn’t be possible with RWD. Since setup is relatively easy and can be quite cost-effective, a separate mobile site can be good for small businesses with more basic site needs.

• Be touch-friendly. For the human finger, 48 dp (density-independent pixels) is the minimum recommended touch target, with at least 8 dp between targets. Too-small targets, and the click mistakes that result, are a fast way to turn off a mobile user.
• Pick the right font. Your minimum font size should be 12 pixels; anything smaller and users will be squinting. Be sure to choose a typeface that is clean and easy to read. If possible, avoid use of image-based text.
• Set the right width. Most web users are used to scrolling vertically up and down a page, but being forced to scroll sideways makes for a bad user experience. Your users will think your site wasn’t built to help them on the smaller screen.
• Avoid mouse-overs. On a desktop screen, the mouse-over is a great way to uncover hidden content.  But mouseovers require a mouse. On touch screens like tablets or smartphones, users’ fingers can’t hover like a mouse. So avoid the mouse-overs. Instead, use buttons that users can tap to display deeper menus.
• Don’t use pop-ups. They’re irritating on desktop sites, and they’re just as irritating on mobile sites. And instead of using interstitials to drive app downloads, embed the prompt into your site.
• Do use descriptive buttons. Don’t make customers guess where a click will take them. Label your buttons clearly, then use bread crumbs and clear category names (such as "Step 2: Payment") to help them as they navigate.

• Don’t overload users. On mobile, more isn’t necessarily better. Avoid the urge to squeeze in every last bit of your desktop page, only smaller. But…
• Customize, don’t cut. Mobile and tablet users expect the same core functionality you offer desktop users, whether that means being able to watch videos or buy office supplies. Instead of cutting core content, restructure it to fit the mobile screen.
• Don’t hide key actions. Be sure to give users quick access to all the key functions they'll expect on your site. If you’re a retailer, that means things like product search and the shopping cart (and mobile-friendly tools like a store locator) should be front and center. Include a link to your full site for mobile users who simply prefer that experience.
• Double-check media files. Flash video, for instance, won’t play on many mobile devices. Make sure that the media files on your multi-screen sites will really work on the screens they’re meant for.
• Simplify checkout. It's hard to fill out lengthy forms on mobile, thumb-typing full addresses and other data over multiple steps. To increase your conversion rates, simplify the payment process however you can. Enable Google Wallet Instant Buy or other services that allow customers to check out quickly with payment and shipping details auto-generated from the cloud.

There’s really one thing to say here: speed it up. Optimizing your site speed is a sure way to improve user experience – especially on mobile, where users are on the go and data networks can be slow.  Speed typically boosts visitor engagement, retention and conversions. Not only is it a ranking signal for Google Search, but many businesses who invested in page speed improvements saw a positive effect directly on their bottom line.

Here are three common mistakes to avoid:

• Too many HTTP requests. While mobile users may try to do the same things as desktop users, their processing power is limited. Their bandwidth may be unreliable. To help them go faster, cut down the on-page elements that drive extra HTTP requests.
• Image overload. As smartphone displays get better, it’s tempting to serve the largest possible image and let the device downsize it to fit. Bad choice! This wastes time and processing power. Serve the right image sizes to each device.
• File overload. Consider if the JavaScript snippets and CSS styles are helpful for mobile users. Too much JavaScript or CSS may cause the page to slow down. Minify / compress your code where possible and consider reorganizing your CSS altogether. Make sure assets are being cached by the browser so that the visitors don’t have to re-fetch them on every page load.