A typical website is comprised of a set of files (each web page—home page, about page, etc.—is an individual file). Each file contains HTML code and content (text and images). Web pages are styled with files called Cascading Style Sheets (CSS). For ease of explanation, let’s say that a standard (non-responsive) website has a set of files and a few CSS files that govern the look of the site. A responsive website applies an alternate set of CSS files depending on the device being used to access the site. The site looks and ‘responds’ differently based on the device.
For example, while someone viewing the site from a desktop device sees a horizontally aligned navigation menu, someone viewing the site from a mobile device gets a vertically aligned navigation menu with larger text that is easier to read on a smaller screen.
Why Responsive Design Is Important
There was a time when people only accessed websites from a desktop computer. The vast majority had the same size monitor. Websites were designed for the average visitor. Today, people access websites from a variety of different devices with screens ranging from a few inches all the way up to 27″ or more and expectations have changed. Consumers expect the website they’re visiting to know that they’re using a tablet vs. a PC. They expect the site to adjust to them—not the other way around.
Different devices also come with different expectations in terms of usability. For example, the Apple iPhone has “trained” people to expect to be able to swipe left/right/up/down. People visiting a website from a smartphone expect to be able to click a phone number and have their phone give them the option of auto-dialing that number. Similarly, they expect an address to have a “click for directions” option that uses their phone’s GPS.
A site that is responsive takes all of this into account and automatically adjust to provide visitors with the best possible user experience regardless of the device being used to access the site.
The Alternative to Responsive Designs
Practically speaking, there are two alternatives to having a responsive website:
Force All Users to View the Same Site
A lot of businesses have one version of their website. You’ve seen plenty of these—they’re the sites that you pull up on your smartphone and have to take out a pair of binoculars to find and read the phone number. Given the growth of mobile, this is a BAD idea (not to mention that Google has added mobile optimizations to their list of ranking factors—i.e. having a website that performs poorly on mobile devices can result in lower organic search visibility).
Create a Separate Mobile Site
Having one website for desktop users and a separate site for visitors using mobile or other devices is an alternative to having a responsive website. While Google has publicly stated that responsive design is their recommended configuration, they’ve also said that having a mobile-specific version of your website is an acceptable alternative (provided there’s a good reason for it).