Spindustry Blog

Understanding Responsive Design

Posted by Jeremy Winter on March 26, 2014

So you’ve started putting together a plan for your new corporate website. Congrats onwater glass graphic thinking about this important marketing component of your business. Chances are though, the last time you had this conversation was three or more years ago and many things have changed in technology. Do you know the right questions to ask or what’s most pressing to consider?

In today’s world of different sized devices (desktop, tablet, mobile), we know that 15% of all Internet traffic comes from a mobile device. Just a few years ago that number was closer to 5%. This meant two distinct options were acceptable for mobile:

1) provide a separate, scarce mobile version of your experience (think address and phone number)
2) let the phone render your entire site within its relatively tiny screen so users could surf at their zooming and scrolling inconvenience

With either solution, you had to consider making a wish list of supported devices that would allow the site to even be remotely functional in the simplistic mobile browser. You probably found yourself battling an internal struggle to support Blackberry Storm (your CFO owned one) or the Nokio Maemo 6 (your beta-testing uncle had one). Supporting every device that was screaming onto the market would blow the budget wide open.

Those days are behind us. You’ve probably heard of the phrase responsive design. When done right, responsive design solves the issues that you likely struggled with in your last website redesign. Why pick and choose devices when a more comprehensive “all of the above” solution exists?

I want to shed some light on what responsive design is since we tend to hear some confusion. Responsive design, as the name alludes to, is a website structure that “responds” to the screen size of the design that is viewing it. The code within the website detects how much space it has to utilize to display the content and efficiently “fits” itself to maximize that space. This goes far beyond simply shrinking the website to display on the screen. The website transforms itself; think flexes, does yoga poses, bends or reshapes itself to fit. In most cases, even the nature of the content changes. Data that isn’t as useful or important to mobile users is sometimes removed. In some cases, content that is more relevant to a mobile user is added. Responsive design has one purpose: to provide the best possible experience of your web presence customized to the user’s browsing device.

There are two aspects that need to be satisfied for responsive technology to function: the content and the structure. Here I am referring to content as everything placed within the site that makes up the appearance, including text, images, buttons, forms, videos, navigation and logos. Content, when entered into the site, is like water that flows outward until something makes it stop.

That something is what we refer to as the structure. The structure is what tells the fluid content to stop at the sides of the site, to wrap certain parts of the layout and where it is allowed to live comfortably. If the structure is built to stop content at 200 pixels wide, you would have a website that is the onscreen size of the width of your mouse. A common size is around 1000 pixels wide, but again, that means it is set to 1000 pixels wide. To make a complicated process simpler, we now create websites where the structure is tied to the size of the device screen with percentages instead of pixel-based measurements. The smaller the screen, the more narrow the site. The bigger the screen, the wider the website.

The list of advantages for responsive sites is long and would fill several additional blog posts. However, it does come with its own challenges. Responsive structures require greater effort in the engineering of how your fluid structure will shift itself based on screen size, which can add to the development cost and timeline. The assurance of a seamless user experience from device to device is worth it for many organizations.

If you’re ready to explore your options and understand what will work best for your needs, contact Spindustry Digital. Every new project is constructed taking into consideration these ideas, whether the site structure is responsive or not. The good news is that you don’t have to take all this information we just shared and try to make a quick decision on your own without additional information. We’re eager for the opportunity to guide you through the process when you are ready.

Help me determine if responsive design is right for my needs!

Did you know Google rolled out a big algorithm change on 4/21/15 that will decrease your site's ranking if it's not compatible with mobile devices? Read how the changes will affect your website and what Google thinks about responsive design.

Topics: responsive design, mobile marketing, website design