What Makes a Website “Responsive”?

In a nutshell, a responsive website is a website that fluidly scales itself from desktop screen size all the way down to smartphone screen size. It is not a mobile site, per se, since mobile sites are technically separate sites that are served to mobile users. Responsive sites are served to both mobile and desktop users with the site itself scaling itself to the smaller/bigger screen.

Responsive websites solve some very common, frustrating problems, in a very elegant way. First, since they are not a separate website, there is only one site to maintain. Gone are the days of having to remember which site has which page, or which one is the most up to date. Plus, users hate having to navigate two separate sites as well, since they are never as in-sync as anyone would like.

Additionally, responsive sites solve the problem of the same user viewing your site on both desktop and mobile. Since the site adapts itself to the viewing device, the user will find a familiar experience going from one type of device to another.

How Do They Do It?

Most of the time, responsiveness is achieved by designing a site in multiple, base columns. Each base columns is no wider than the smallest device you are targeting (e.g. smartphones). Then, programmatically, we tell the web site how many columns wide the site is, depending on the device. For example, if the website displays one column wide on a smartphone, it could then display two columns wide on a tablet, and three columns wide on a desktop. Simply put, the process of a site being responsive involves it restacking it’s content to fit (width-wise) into the container it is being displayed on.

Should I Be “Mobile First”?

When designing a mobile site, the designer has to decide which device size has the authority, the mobile size or the desktop size. That is, where is the site more likely to be viewed, and which device type will engage in the purpose of the site the most? By designing a site “mobile first” you design the smartphone/tablet view of the site first, then make it adapt to desktop size. For most sites, even though mobile is important (often 30%-40% of total traffic), the website is driven from a business perspective on the desktop side (lead generation, online ordering, contact form submissions, etc.). As such, most sites are designed the opposite way, with the desktop view being designed with mobile in mind, but not as the priority. Then, the design is adapted to figure out how to make it scale to mobile sizes. This leads to an experience optimized for the desktop but still quite good and usable on mobile devices.