In this day and age, the chance that your website’s mobile traffic is zero is zero. At least someone is viewing your website on a smartphone. Even if mobile traffic accounts for only 1% of your total website traffic, part of that 1% could be a busy executive with a huge budget ready to spend it on your product or your competitor’s product. If your mobile website experience is sub par, you risk potential customers.
So how do you get your site mobile-compatible in today’s competitive digital marketplace? If you don’t know the various ways a website can be optimized for viewing on a mobile device, read on.
Mobile Friendly: The Baseline Approach to Mobile Website Development
A mobile-friendly website is a site developed to display pretty much the exact same way on a desktop browser as it does on a mobile browser. The only difference is that smartphones have smaller screens, and mobile-friendly websites will appear smaller on those screens. A mobile user will have to zoom and pan around the web page in order to navigate and consume your content since everything has been minimized to fit on the tiny screen. Everything should still work as it does on a desktop browser but the experience is somewhat degraded overall. Basically, a mobile-friendly website is just a regular website with elements that make it pass as “usable” on a mobile device. Aside from a very few exceptions, no website should launch unless it has mobile-friendly elements.
Some tips for any website that will be viewed on a mobile device:
- Adobe Flash should be avoided since it won’t display on many mobile devices
- Hyperlink all email and phone numbers (copy/paste on mobile is tedious)
- Be wary of compact, complicated nested menu structures with lots of drop-downs – mobile devices don’t have a “mouse hover” action.
Responsive Website: The New Standard for Website Development
Where mobile-friendly is the bare minimum for a mobile website experience, a website using responsive design represents the new norm. A responsive website will respond to the width of the web browser; columns will collapse into their own rows, images will scale down, text size will increase, and menus will re-orient so that they’re readily workable with the touch of a finger. Click the “start animation” button to the left to see an example of how a website responds to the width of a user’s browser.
Much like mobile-friendly, responsive websites work as both a desktop website and a mobile website, though they’re just one website with the same content and code base. A responsive website takes the elements of mobile-friendly and expands them to make the user interface automatically adjust for small screens.
[See Also: Mobile vs. Responsive Design: Strategies to Keep your Site Relevant]
What’s the Best Route for a Mobile Website?
Responsive design has been around for a while, and there really isn’t any reason to not incorporate it into new website projects. Special cases that might not require responsive design would include browser-based desktop apps or websites that are mobile optimized (see below). Responsive design is so prevalent, it can actually be more difficult to build a site that isn’t responsive at this point in time than it is to include responsive design by default. For example, most WordPress themes and CSS libraries are now responsive by default.
A Note About Mobile-optimized Websites
Years ago, when smartphones were coming on the market and had rudimentary web browsers (like the Motorola Razr), companies with deep enough budgets utilized mobile-optimized websites. Unlike mobile-friendly or responsive websites, mobile-optimized websites were essentially stand-alone sites that ran alongside the corresponding desktop version. When a user on a mobile phone requested http://somewebsite.com/article/ , the web server would sniff the request to see if it was coming from a desktop or a mobile browser. If it came from a desktop, the desktop version of the web page would be sent back. For phones, the mobile version would be sent back. While very effective, this setup was usually more complex to implement, and often required maintenance of two sets of content and code.
Understanding how your site’s visitors access your website is the first step to establishing a plan of attack for your mobile deployment. Recently, Google implemented an algorithm update that encourages all site owners to really consider their mobile experience. If you would like to learn more about responsive web design, get in touch and we’ll be happy to walk you through your options.
