​What Is Responsive Design, Really?

Share this:

​What Is Responsive Design, Really?

Welcome to a developer’s look at what responsive design really is. Let’s take a look behind the curtains and discuss how the magic really works, shall we?

What is responsive design?

In short, responsive design can be described as building a site, accounting for the varying screen sizes and resolutions that are commonly found on consumer devices in both mobile and desktop browsing. In function, images and columns of content will adjust to account for the different screen real estate, even hiding or showing different sections of content to mobile or desktop users, who regularly access different types. Think of it as intuitive consistency for a website across devices; it’s a must in modern web design.

Before this new technology existed, the only way to display mobile-specific content for those users was to create an entirely new style just for mobile, and employ a JavaScript function to read the browser size and send the user to the proper destination. In other words, a separate site with its own calculations being made, apart from the main site and requiring additional hours of design and upkeep. A nightmare for web developers.

Fast forward to modern web development, and you only need one site to accommodate all of the different platforms, hardware, and screen sizes. There may still be a need for mobile apps built from the ground up to achieve specific service functions, but responsive design has established mobile browsing as a viable alternative to housing your entire platform in a dedicated app.

Take a look at the image above. Placement of the navigation and the ‘Join our Company Today’ call to action changes adaptively to the hardware, and though the hero of the image (the truck) is omitted in the mobile version, the visual and functional elements remain intact.

In order to keep responsive designs intuitive across devices, developers assess how platform-specific users adapt their habits while visiting a site. For example, mobile users are more likely to seek out event listings, basic information, visual cues, and points of interest that require minimal input interactions. Alternatively, desktop users will fill out larger forms and engage with a broader array of input types. Think of these groups not as two separate types of users with different interests, but as a collective, whose hardware will determine what they’re capable of while they’re visiting. Responsive design ensures that these visitors aren’t subject to browsing expectations that complicate their experience.

OK, but how does it work?

So, you want to dig a little deeper? When your responsive website is loading the CSS (cascading style sheet) it has access to the browser size and uses media queries, or listeners, to acknowledge that size and apply the appropriate filters. All of this is done through CSS, and has very little to do with the markup HTML, as CSS manages the colours and positioning of design assets.

When a website is being built and the CSS coded, the items and styles that apply to all sizes of a responsive build are coded first, and then through media queries styles are applied based on browser size. There are two ways of achieving this: originally, front end developers would style the site for larger views, and use media queries to make adjustments as the browser decreased in size. However, as mobile use exponentially increased in popularity, developers adopted the opposite approach - building for mobile first so that adjustments occurred as a browser increased in size. This provides a faster, more fluid experience for the user. Only the basics are loaded at first, with larger images being added in as the screen dimensions call for them. In the end, expansion has trumped compression.

Is there anything else I should know?

There are two noteworthy methods for developing a responsive design: fluid and adaptive. A fluid design uses percentages to adjust a responsive site, shrinking each pixel as the browser size changes. Alternatively, adaptive relies on set style sizes that have no break points in between. For instance, the 1400px iteration of a site has one layout, 1024px has another, and in between these sizes nothing changes, until the break point is reached and the site snaps to a new layout size. It’s best to employ and keep up to date on both; different sites may require a different responsive approach.

Ricky Ferris has been a front end developer/designer for 10 years, and has been building responsive websites since the technology debuted. You can find him at @rickyferris, and as usual, check out Headspace on Twitter, Facebook, and Google+ or subscribe to the our newsletter in the field below - it’s pretty great.