June 3, 2014 davinci314

What is Responsive Design?

What is Responsive Design?


In a nut shell it’s one single website that is able to detect the size of the screen being used and “respond” by switching the framework of the webpage to fit the device (desktop, tablet, mobile phone etc.). Before responsive web design was introduced, people would have multiple websites developed for each device and their screen size. This wouldn’t work so well due to the sheer number of various devices, as well as the clunky coding techniques involved back then.

When your website isn’t optimized for the many different mobile devices that consumers are using today, then you’re likely missing out on a significant amount of sales. In fact, mobile sales grew 63% compared to Black Friday in 2013. While providing consumers with more avenues to make purchases is a boon for retailers, it does present some drawbacks. If your website isn’t easy to use or fast-loading on a variety of devices, and doesn’t immediately present the information your customers are looking for, they are likely to give up and shop elsewhere. Instead of creating a separate website for mobile devices, a better solution is to use responsive design principles.

Responsive design is an approach aimed at crafting websites to provide the optimal viewing experience – no matter what device it’s viewed on. When viewed on mobile devices, websites that are not responsive often require scrolling, resizing and zooming. None of this makes the shopping experience easier for the consumer.

This approach adapts the site layout to fit the viewing environment, whether it be a desktop, a tablet or a smartphone. The layout is designed to accommodate different screen sizes through the use of media queries, fluid grids, and flexible images.

Do This Simple Test Now:

You can test out what Responsive Design does right now (assuming you’re on a desktop or laptop). Just take your pointer to the bottom right corner of the screen and click and drag to resize this screen (browser window). You will notice how my site “responds” and switches accordingly to the size differences.

Main Components of Responsive Design

  • Fluid, proportion-based grids use relative units, like percentages, (rather than absolute units) to size page elements.

  • >Flexible images are also sized in relative units, to prevent them from displaying outside of their containing element when that element is resized.

  • CSS3 media queries use the characteristics of the viewing device, such as screen widths, to determine which set of style rules is applied.

  • Server-side components, such as feature detection and device detection, work with client-side methods to decrease the site’s load time even more.

Consumers expect a lot of conveniences when it comes to online shopping and ease of use on their tablets or smartphones is one of them. With an increasing amount of advertising noise in today’s market it’s quite a feat to capture the consumers’ attention, which is almost always limited. When a website is slow or the consumer can’t easily find what they need, they leave. The transition to responsive design compels you to streamline your content to optimize the customer experience and, in the end, converts more of your visitors to sales.

Tagged: ,

Jamie Middleton