With the explosion in mobile and tablet usage, a website that works well on any devices isn’t a “nice to have” its a “must have.” However, you must have the proper strategy if you hope to make the most out of your visitors’ experience on your website.

In the past website attempted to address mobile by creating separate mobile sites with their own content, navigation, and site options. These mobile sites typically were expensive to maintain, updated less frequently, and didn’t have the same level of functionality as the regular website. This left the mobile visitor feeling like a second class citizen and frustrated by the experience.

Building a responsive website

The modern approach to supporting variable devices is to use a single website with CSS that adapts the look and feel of the website based on the browsers dimensions. This allows you to control the users experience for each device type all from a single source. I obviously glossing over some of the details, but the basic appraoch is as follows:

Determine the best layout for each device class

There are hundreds of devices out there, luckily you don’t have to create a design for each device. Instead you can classify most devices into 6 major classes:

• Mobile Portrait (320 x 480)
• Mobile landscape (480 x 320)
• Small tablet portrait (600×800)
• Small tablet landscape (800×600)
• Tablet portrait (768×1024)
• Tablet/ desktop landscape (1024×768)

Depending on your visitor type, you may want to include a 7th class for larger screens.

For each class you need to determine the best layout to maximize the customer experience. This might seem like a lot of work, but remember, once you’ve worked this out all of your content will seamlessly scale to your visitors devices.

CSS format for handling various dimension classes

The css code for handling screen dimensions is pretty straight forward. For example, the way to specify styles for Mobile device in portrait mode, looks like this.

/* Max width of 480 pixels */
@media screen and (max-width: 480px) {
//Your CSS styles specific to this device
}


Iterate this process for each device class and your site is ready to provide your visitors with the best user experience regardless of their device.

Even if you use a responsive framework, like Twitter’s Bootstrap, its good to know how to customize the appearance using CSS in order to ensure that your visitors have the best possible experience.