What is “Responsive Design”

by | Apr 7, 2015 | Traditional Marketing | 0 comments

Traditionally, websites were designed and coded to take advantage of as much screen real-estate of the smallest, but still widely used, screen sizes. If there were enough users using a desktop or laptop with a screen resolution of 800 pixels wide, then a website was typically built to display at 750 pixels wide, for example. That width was static for all screens regardless of size. The website would look the same on a 13” laptop and a 19” desktop monitor, often leaving large amounts of unused space in the margins to the left and right of the site on larger screens.

That has changed dramatically in recent years and, today, good web design is responsive design.

As screens sizes began to vary more greatly, developers started to use Javascript to detect the screen size used by the visitor and to utilize a different “stylesheet” based on that size. This allowed websites to have different widths and image and font sizes for larger screen sizes, better utilizing the space available. However, the sites still remained fixed and only targeted specific screen sizes, leaving those who might have a lesser-used screen resolution with a site that might not be optimized for him/her. Plus, this method didn’t account for user preferences and browser window sizes.

The advent of web-enabled mobile devices created more challenges. Developers could continue to use Javascript to detect devices and operating systems to serve up different stylesheets or they could create a “mobile” version of the site that was often scaled back in functionality and resided at a subdomain such as

Advances in HTML and CSS allowed developers to move away from tables to structure their sites, and eventually allowed them to create sites that automatically responded to the device screen size. This is what has become known as responsive design.

Responsive design allows developers and designers to address an infinite number of screen sizes with relatively little coding and no need for multiple style sheets (Adaptive design) or subdomains. The method uses a mix of flexible grids and layouts images and CSS media queries to allow the site to adjust or respond to the user’s device and preferences, including switching easily from portrait to landscape orientations, and working with keyboards or touchscreens.

From Wikipedia: Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

Why is this important?

  • Google wants your site to be mobile-friendly. If it isn’t, your site might not show up on Search Engine Results Pages (SERPs) when a user searches on a mobile device.

  • Because one URL is used a responsive design, instead of subdomains, it is easier for Google to crawl and index, improving your SEO “juice.” Google is actually including “Mobile-friendly” on the search results on a mobile search to alert users as to whether they should expect a good experience on the website result.

  • Responsive design provides a better user experience. As more and more people own and use smartphones and tablets for web browsing, the more critical it is to provide them with an user friendly and easily navigable site. According to Pew Research Center, as of October 2014, 64% of American adults owned a smartphone, 32% owned an e-reader and 42% owned a tablet computer. As of May 2013, 63% of adult, cell phone owners used their phones to go online. If your website isn’t easy to use, visitors will bounce off of  your site without reading what you have to say. Plus, according to Huffington Post, an individual will be 67% more likely to buy a product or service if he/she has had a positive experience on your website.

  • It’s easier to manage. Rather than having to update content on separate mobile and desktop websites, content can be updated in one place, saving time and money. It’s also faster because you are using one codebase that is streamlined to deliver the optimal experience so the time it takes to load your website on a screen (which Google is also looking for) is reduced.

Ignoring mobile users ignores a large – and growing – group of customers and potential customers. If your website isn’t already responsive, it’s time to consider an update.

Related Posts

Share This

Share this post with your friends!