With the proliferation of mobile devices growing ever larger, it's become necessary to consider not just what content to put on your website, but how it will be viewed, and from where. Assuming your website is only going to be viewed on a computer monitor is about as outdated as an eight-track tape deck.
Today's Internet enthusiast is just as likely (some evidence would say more likely) to look at your website from their smartphone. But here's the problem—that awesome website you just paid big bucks for only looks awesome when viewed on a great, big LCD monitor. Try to bring it up on your phone and you'll spend more time scrolling up and down, and left and right, to read it than you'll want to spend.
Then there's the problem of functionality. Just because your website does lots of groovy things on a laptop doesn't mean it'll behave the same way on an iPhone or a Razr. So before you get started, you'll want to figure out just how accessible you want to be. The answer, of course, is that you'll want to be as accessible as possible, to as many potential customers as possible.
So, now that you've answered that question, the next big question is how. And that's where the whole concept of web strategy comes into play.
There are as many different ways to answer this "how" question as there are mobile devices. While Apple's mobile products have a single platform, and thus are fairly simple to plan for, mobile devices using Android or Microsoft operating systems are different breeds altogether. Since Android's platform is considered to be "open source," there are as many screen sizes and resolution levels as there are Android devices. And since Android has 61 percent of the mobile market, that's a lot of variation in display size to consider. How are you going to cover the cost of designing something to display your awesomeness for each different platform and screen size available?
The two most effective and cost-efficient ways to do this are by designing either a mobile compatible website to go with your main website, or by using responsive web design tools to design one website that works smoothly on a variety of mobile displays. Either way, you now have some additional choices to make.
Because tablets and mobile phones are smaller (sometimes much smaller) than a full-sized computer screen, not everything on your website will fit correctly (unless you want to do that scroll-and-scroll-and-scroll thing.) Therefore, you've got to decide what's essential viewing and what's not. Your web designing hotshots can't do that for you.
Once you've prioritized your website's content, your next decision is which approach—mobile-compatible or responsive design—to use. Each has its pros and cons, so a quick look at both may be useful.
Door number one, Monty . . .
With mobile-compatible web design you're not reinventing the wheel. It's the most basic and so least expensive option: just do what's needed to get the website to function on mobile devices. The word "function" is a bit subjective here, mind you, but the idea is to get your website to display and work properly on most mobile devices. It's the best of all worlds, with a feeling pretty close to a desktop experience. With newer mobile devices offering good CSS support and zooming functionality, visitors should at least be able to access the information they need.
While quick to implement, the mobile-compatibility option does have its drawbacks: your mobile users could suffer sub-par experiences like excessive slowness in loading, due to downloading styles and large assets. Or visitors might find the site's content and navigation paths are poorly optimized for mobile viewing. So, while quick and affordable, this may or may not be the solution for you.
No, wait, door number two . . .
Responsive web design is a newer approach, letting a website adapt to a viewer's device based on platform, screen size and orientation. When the user switches from his or her laptop to an iPad or smartphone, the website automatically changes to accommodate resolution, image size and layout. This pretty much eliminates the need for a separate web solution for every new mobile device on the market.
Understandably, people are pretty excited about this. Because your programmers are covering all the design parameters at the start of your project, this approach can be fast and fairly cheap since minimal changes will be needed later. Best of all, responsive design creates improved readability and a more seamless experience for mobile visitors. Pretty cool, right?
Though responsive web design may be the best thing to happen to mobile devices since the microchip, there are a few small drawbacks. Older versions of mobile and desktop browsers, like Internet Explorer 8, for example, do not natively support some of the tools used in responsive design. Viewers may also face a little learning curve if the adapted website looks or acts too different from the full-sized version. And rendering may be a bit slower sometimes, as images and non-critical content are being downloaded.
But these are pretty small problems, especially compared to the expanded visibility and overall user-experience gained by using this approach.
So which strategy is the right one for you? That depends on you and your goals. But really, for my money, it's hard to beat all the features responsive design offers.