Mobile website or responsive design?

You know your company website doesn’t look good on your smartphone: that annoying pinching-to-zoom, long wait times and frustrating navigation. Your marketing department says, “we need a new website,” and you know your web visitors are way down and you’re losing potential customers. Where do you start in the ever-changing world of web development and mobile optimization?

With the rise of technology and the evolution of mobile devices, design, development and content strategy are at the forefront of any online presence. Moreover, recent studies indicate mobile browsing is expected to outpace desktop-based access within three to five years.

So how are we to proceed with website design given the alarming outlook for the method by which users will be accessing their data?

Ethan Marcotte, a popular web designer and developer among the web community, poses the argument that we should not “quarantine content” into “device specific experiences,” but that we should utilize media queries (a set of style sheets that customize the size and placement of graphics depending on the user’s device) to function within different viewports (screen dimensions).

When redoing your website, keep three crucial points in mind:

1. Unless you are working on a specific campaign to target users that only use a mobile phone, don’t go down the path of creating various versions of your website for individual devices, i.e., the “smartphone website.” Individual websites that cater to smartphones and tablets would be ideal if the mobile site focused around a retail campaign, where the user is expected to play a game in order to receive discounts. However, depending on the strategy, this process gives way to many disadvantages, such as managing the design on the multitude of devices, to attempting to predict users’ behaviors and actions.

2. Utilize a responsive design (defined as flexible images, fluid grid layouts and media queries). Marcotte states, we “not only linearize content, but optimize presentation across multiple screens” when using a responsive design.

3. Focus on media queries that allow us to target certain screen sizes. This will allow us to take your content and rearrange its derivative of a targeted device. By using a responsive style sheet, changes to the typography such as size and leading are possible. Advantages to responsive design are immense;  by focusing on fundamental media query principles (targeted styles for a device), we are able to adapt to the wide variety of expanding devices from smartphones to game controllers, T9 and touch interfaces, which allow us to stay ahead of the game.

Unfortunately, responsive design could be limited due to the lack of  support for older browsers (IE 8 and earlier) and while support JQuery plugins and JavaScript available, they only help to an extent.

In summary, make sure you are not wasting your time with creating multiple sites – focus on a responsive design solution.