Rabu, 28 November 2012

Meet the 'One Size Fits All' Website

You could drive yourself crazy trying to build different versions of your website to fit every screen. Or you could try this strategy.

Flickr photo courtesy of Jeremy Keith

Websites no longer live on the desktop. Your customers are on their tablets and smartphones browsing the Web, seeking information, often with a transactional intent--serving their mobile needs has become paramount.

The trouble comes, however, when you start thinking about how best to build your mobile website. Which devices will you design for? The full-size iPad or the iPad mini? The iPhone 5 or the massive Samsung GS III? It's easy to see how this can become a never-ending problem. Just try opening up your website on multiple devices and see how easy it is to use.

You could go crazy building multiple versions of your website to try to fit every possible screen size--but chances are, your site still won't look quite right on every device. Or you could use what's called responsive Web design, which is a technique that allows your website to adapt, dynamically, to various screen sizes.

What is a responsive website?

It's one website that adapts to every device size, thus eliminating the need to create a mobile-only website. As screen sizes become smaller, a responsive website reprioritizes content and modifies its design on the fly to meet the needs of users on any given device.

The Fork CMS website adapts to varying screen widths from a desktop computer monitor to the screen of an iPhone 3G. 

starbucks responsive website

The Starbucks website can handle every screen size.

starbucks responsive website

What's different here is that most websites cannot adapt to all screen sizes. They either appear in full size on mobile devices or redirect users to a website built specifically for mobile devices. The problem is that between desktops and smartphones, a huge range of device sizes is neglected. Responsive design ensures that every device displays your content in a usable and visually appealing way, without the need to create multiple versions of your site.

Why does it matter if I have a website that adapts to various devices?

You could be thinking that because your website looks just fine on an iPad that you have nothing to worry about. Think again. Tablet users are not using a mouse to browse your website. Instead, they've got only clumsy, inaccurate thumbs and index fingers at their disposal. If you have a list of links with fewer than 40 pixels of space around them, then users are likely to make mistakes when tapping a link. Are you asking users to fill out a lengthy Web form? Forget about it. No one likes typing an essay on an iPad.

Smartphone users have even more needs. Not only are they using their thumbs, but they are also very goal oriented. If a smartphone user is on your website, it's most likely because he or she wants to call you, find you, or quickly get an idea for what it is you do. That means providing those actions explicitly, with large buttons, and having a website that loads quickly.

Finally, responsive Web design has been recommended by Google as ideal for mobile search-engine optimization. It eliminates the need for multiple URLs and better meets the needs of all types of mobile users.

Who is responsive design for?

It can be used for any type of website that is seeing a substantial amount of traffic coming in through mobile devices. Mobile users are as important to your marketing efforts as desktop users are and may be even more valuable in some cases. It's important to give them a positive impression.

If you are planning to redesign your website any time in the next year, I recommend waiting to go responsive until then. Unfortunately, rewiring your existing website to become responsive can be as expensive as getting a new website. It is much more cost effective to make a new website responsive from the get-go.

If you're on a budget and simply need a mobile website immediately, then do things the old way: Create a separate mobile website. Wait until you can overhaul the whole shebang before you make the move to responsive.





0 komentar:

Posting Komentar