Despite most websites having neglected mobile support, mobile is not only the platform of tomorrow, but it is also the platform of today. With well over 10% of the worlds web traffic going to mobile devices, it’s time to give your mobile audience some much needed attention.

While the term “mobile friendly” may be subjective, there’s no denying that there is legit and ever-increasing value in making your web-based products and services friendly to your mobile audience. Whether you’re looking to make users happy or increase revenue, mobilizing your website can be an easy win. The first step in providing your users an improved mobile experience begins with asking the right questions.

Step 1. Web Design Strategy – Who is your target audience?

A big part of determining your design strategy is understanding who your desired target audience is. It’s easy to say “everyone.” However, that answer may be overkill and could end up being more costly than is necessary, ultimately wasting valuable resources. You wouldn’t use a sledge hammer to fix a leaky toilet? Right? Statistics show that, while most mobile phones today are still “basic” (low resolution, poor performance, low bandwidth), over half of newly-purchased phones are smartphones with ever-increasing resolutions, pixel densities, screen sizes, performance, and capabilities. More importantly, usage indicates most real mobile activity is coming from smartphones. The bottom line is that mobile devices are quickly merging with your laptop and desktop capabilities, both in system and visual performance, negating much of the need for very device-specific mobile designs.

Below are some common web design strategies, each with their own risks and rewards. Understanding each of them is critical to selecting the right strategy for your needs.

Mobile Ready

With a mobile-ready site, the focus is on a minimal Fixed Layout design. If your site is already using a Fixed Layout, there’s a good chance few changes will be required to achieve basic mobile support.

Even though GoDaddy.com has its own mobile site (m.godaddy.com), the above picture demonstrates how good the desktop version of a website can look on modern mobile devices. While not necessarily the ideal mobile experience (zooming in may be necessary for some actions), it works well for modern-device users who want the full site experience.

Fixed Layout – One or more fixed dimension columns in pixels (px) unit type. This look is simple and effective, though not always the best experience.

If you’re looking for an “easy win,” going with a Fixed Layout, mobile-ready site might be your best bet.

Pros:

• Simple to design and maintain
• Easy to test
• Consistent across devices
• Supports older browsers
• Easily made to look good on most smartphones

Cons:

• Not tailored to device
• Less than optimal usability
• Generally unusable on “basic” mobile devices

Adaptive Web Design

With an Adaptive Design, your website leverages multiple sets of Fixed Layout styles (defined using CSS Media Queries), allowing for more device-friendly views with less wasted screen real estate. You can think of Adaptive Design as the evolution of the Fixed Layout.

If you’re willing to go the extra mile, beyond a single Fixed Layout, using an Adaptive Design is well worth the effort.

Pros:

• Feels tailored to device
• Easy to test (though more involved than Fixed Layout
• Easy to upgrade from Fixed Layout

Cons:

• More screen resolutions to design and maintain against (typically 2 or 3)

Responsive Web Design

Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones). – Source

Responsive Design, much like Adaptive Design, leverages CSS Media Queries to provide device or resolution-specific styles. The primary difference is that, while Adaptive is based on Fixed Layouts, Responsive is based on Fluid Layouts. It is not uncommon to even use a hybrid of the two, leveraging Adaptive Fixed Layouts for higher-resolution displays and Responsive Fluid Layouts for lower-resolution displays where every pixel matters. The end result can provide a great experience for all users, but at the cost of a more involved design.

Fluid Layout – One or more variably sized columns leveraging percentage (%) unit type. Fluid Layouts can appear more device-specific, but can also be more time-consuming to design, maintain, and test against. CSSGrid is a good example of Fluid Layouts.

Elastic Layout – One or more variably sized columns leveraging the “em” unit type. Layout scales based on the users chosen typography settings (font and size). While cool in theory, some believe elastic to be unnecessary.

Responsive Design is awesome, providing some of the best experiences across all devices out there. However, it comes with a bigger commitment. The more complex your product or service, the more complex your Responsive Design may become. So, keep this in mind before diving in.

Pros:

• Looks great across all devices if done right
• Easy to upgrade from Fluid Layouts

Cons:

• Intermediate to advanced design
• Increased design and maintenance costs
• Can get tricky for more complex websites

Custom Mobile

Sometimes your audience really is “everyone,” and in these cases, providing a Custom Mobile solution can make a lot of sense. Custom Mobile is the process in which the User Agent is intercepted, allowing for device-specific renderings. Typically, this is done either by a single website that is designed to respond with device-specific themes and styles, or proxy (redirect) mobile requests to a separate application that is tailored to mobile devices. The proxy (redirect) solution is especially handy in the case of third-party mobile integrations, such as Duda Mobile.

Custom Mobile solutions are not Layout-specific and, in reality, behave much like CSS Media Queries do for Adaptive and Responsive designs. But instead, determined server-side at the time of request. Typically, what you’ll find is that, for high-resolution devices (laptop/desktop, etc), you’ll receive Fixed or Adaptive Layouts and Block Design (layout-less) for low-resolution devices (basic and smartphones). The two-device set approach can keep costs down while still providing a good experience for your mobile users.

Block Design – A single full-width (100%) column. The absence of a Layout of any kind is effectively a Block Design. This approach is typically reserved for extreme mobile rendering, where every pixel matters. Block Design does not, however, necessitate the absence of margin or padding, as that decision is ultimately up to the designer to provide the desired experience for their users.

Lastly, in extreme cases, WML (wireless markup language) is rendered to select devices which support it. Unless you have very high volume traffic, chances are you won’t notice any difference from not supporting WML.

Pros:

• Optimal user experience
• Very flexible
• Can leverage appropriate design patterns for the given device
• Can optionally leverage third-party for mobile experience

Cons:

• Can be costly to build and maintain
• More prone to bugs due to device variances and evolutionary hardware changes
• Catered more to the needs of an ever-decreasing set of users

Step 2. Optimal Resources – Is your website fast enough?

One of the most fundamental requirements when providing an optimal experience for your mobile users is sending resources optimized for their device. This means:

Fewer Resources – Consolidate resources whenever possible. Additional requests can often be more damaging than fewer large requests of equal total size. The most common resources that can be consolidated are script (js) files, style (css) sheets, and images (sprites).

Smaller Resources – Regardless of whether or not you want to show your desktop users a 5 mega-pixel image on your pages, it generally makes no sense to send the same resource to smaller-resolution devices. Leveraging CSS Media Queries for your images can net some great gains, allowing you to send only appropriately sized resources to your users. In cases of dynamic content, leveraging JavaScript to request the proper sized image may sometimes make more sense.

Closer to Users – Serving up static content from your web servers not only takes up precious bandwidth/performance from your servers, but also is unnecessarily distant from your users. This may result in higher latencies, leading to a potentially huge negative impact on your users, and increasing their chance of session abandonment. Do everyone a favor and move your static content to a Content Delivery Network. This is a small expense for big gains.

A content delivery network (CDN) is a large distributed system of servers deployed in multiple data centers in the Internet. The goal of a CDN is to serve content to end-users with high availability and high performance. CDNs serve a large fraction of the Internet content today, including web objects (text, graphics, URLs and scripts), downloadable objects (media files, software, documents), applications (e-commerce, portals), live streaming media, on-demand streaming media, and social networks. – Source

Asynchronous Design – When it comes to mobile, every ounce of performance matters. An often overlooked performance benefit is replacing many of your synchronous (blocking) script includes with asynchronous (non-blocking) resource loaders. I’ve written an article to demonstrate this technique, Non-Blocking Pages: Optimal User Experience.

There are plenty of great tools out there to help you analyze and achieve the goals listed above. YSlow and PageSpeed are a couple of options that I highly recommend.

Step 3. Navigation – Can I find what I’m looking for?

If your users cannot find what they’re looking for in a reasonable amount of time, they are more likely to abandon their session. Navigation includes any method from which a user is to find what they’re looking for. Typical navigation includes menus, page links, and Search boxes, in addition to Search Engine Optimization.

Menus – Even if the remainder of your website does not cater to mobile devices, it’s a good idea to at least provide very easy to see and interactive navigation. Even though some modern smartphones allow users to tap once to open nested UL/LIs css-based menus and a second tap to activate the intended location, the extra step can be avoided by using inline navigation. In addition, use appropriate padding to account for non-precise methods of interaction (namely, finger taps).

Page Links – Much like your Menu, make sure links are easy to see and interact with. In addition, use Context Aware links where appropriate.

Search Box – Despite your best mobile design efforts, navigating between pages can be cumbersome for user and can be circumvented with a readily available Search box. This allows many of your modern smartphone users to find what they’re looking for via text or voice.

SEO – While Search Engine Optimization is important regardless of mobile design, in case you’re using a Custom Mobile design, you’ll want to make sure that the corresponding page found in search engines redirects to the appropriate mobile page (mysite.com/about-us ⇒ mobile.mysite.com/about-us). It can be very frustrating for your users to find what they’re looking for in a search engine, only to be redirected to the root of your mobile site; or worse, to an error page.

Step 4. Context Aware – Is my website convenient?

Despite advances in mobile devices, input continues to be one of the big challenges, often relying on finger taps to get around. If it makes sense for particular content to be selectable from a mobile device (i.e., phone number or address), rather than forcing the user to write it down or copy it to the clipboard and then manually open their application to consume that content, you should provide a context-aware link.

Phone Number – Replace text phone numbers, such as “1-123-123-1234,” with “<a href=”tel:1-123-123-1234″>1-408-555-5555</a>,” to open the phone dialer, if available. See RFC2806 for more details.

Mailing Address – Replace your text addresses with context-aware links by using the applicable Google Maps address (i.e., maps.google.com/?q=123 MyPlace St, Phoenix AZ, 85024), which opens directly to the native Maps/Navigation application in most modern smartphones or will gracefully degrade to using the browser if it’s not supported.

Step 5. Touch Aware – Does my website feel tailored to mobile?

It’s easy to take for granted many interactions that are simple with a mouse, but can be difficult with touch-input. Hover-based behaviors such as tool tips, flyout menus, drag and drop, and right-clicks are among the interactions that can prove to be difficult. At the very least, you want to make actionable tasks (click, drag, etc) big enough to prevent mis-clicks from finger taps. While this topic is quite vast, and more usability specific than technical, the main takeaway is to keep all of your designs touch aware and stay away from designs that make touch tasks difficult when there is another solution that can achieve the desired result without device-centric code. There are a number of useful articles on this subject.

CSS Media Queries

Media Queries allow you to define device-specific styles, typically via min/max width/height, but also with other device identifiers such as aspect-ratio, orientation, and many more. It’s a good idea to have your default (non-media query) styles target your most common users (i.e., 1024px width) to avoid older browsers (<= IE7) from using non-optimal settings.

Here’s a basic example of CSS Media Queries in action, leveraging Adaptive Design:

#content
{ /* defaults */
width:960px; /* good for your target 1024px users or higher */
margin:0 auto; /* center */
}

@media all and (max-width:1000px)
{
#content
{
width:100%; /* lets use entire screen for small factor designs */
margin:0;
}
}

Simple enough, right? Not only have I applied Adaptive Design, but I’ve also leveraged Block Design for low resolution users. Here’s an example using three sets of styles:

#content
{ /* defaults */
width:960px; /* good for your target 1024px users or higher */
margin:0 auto; /* center */
}

@media all and (min-width: 480px) and (max-width:1000px)
{
#content
{
width:440px; /* Fixed Layout */
}
}

@media all and (max-width:479px)
{
#content
{
width:100%; /* lets use entire screen for small factor designs */
margin:0;
}
}

I could easily add additional rules to provide more style “sets” to better target various resolution ranges, but you get the idea.

Wrap-up

By now, you should be reasonably comfortable taking your website to mobile devices, and hopefully with minimal effort. Try not to look at the process of mobilizing your website as one big task, but rather a series of incremental improvements. A good mobile design is very subjective and should be catered to the needs of your audience; not simply a blanket set of rules. What are you waiting for? Save your mobile users from the clinches of your competitors!