Design | June 27, 2012

A Responsive Web Design Tutorial for Beginners

A Responsive Web Design Tutorial for Beginners

This is the second post in a series about Responsive Web Design, described in plain language from a front end designer.

In our last post I wrote about three reasons responsive web design is something you should know about. We discussed the problems associated with the traditional method of designing a desktop and mobile version of a website.

Essentially, there are just too many mobile devices hitting the market to tailor our websites to view well on them all. Nearly every device released has a different screen size and resolution than it’s predecessor. It simply doesn’t make sense for companies big and small to spend the time and money to create a bespoke web experience for each device in the ever expanding line-up.

The thing I like about problems or challenges is that–if we let them–they make us better people and create space for innovation and solutions that may otherwise never be discovered.

Designer and developer Ethan Marcotte was instrumental in solving this problem of device compatibility. He introduced the term, ‘Responsive Web Design’, in his 2010 article in A List Apart. If you haven’t read it yet, you need to… Right after you read this article, of course!

In actuality, the problem is still being solved and responsive web design methods, tools and standards are still being developed and refined. But in a nutshell, here’s how responsive web design works.

25 Best Responsive Web Design (2015)
25 Best Responsive Web Design (2015)
Spanning travel, design, and business sectors, we hope these great examples will be an inspiration for your next web project. Check it out!

Name*

Email*

Company

Are you interested in working with social driver?




Please leave this field empty.

 

Media Queries

Responsive design uses a CSS3 feature called media queries. Media queries inspect the characteristics of the device and adjusts specific website styles accordingly. E.g. A media query may ask if the horizontal resolution of the device is equal to or less than 480px. If the answer is yes, the CSS may adjust the layout into a single column.

Here’s a few things we can do using media queries:

  • discover if someone is holding their phone in portrait or landscape orientation
  • hide or show certain content depending on what size device a person is using
  • move and resize content for optimal viewing on a variety of device sizes

In essence responsive web design “responds” to our devices and adapts to create an enjoyable user experience. And this happens in real time as you turn your device or resize your browser window.

Break Points

A Responsive Web Design Tutorial for Beginners

When programming a responsive website, developers set ranges of media query values to target specific device classes (i.e. smartphone, tablet, desktop/laptop, high res desktop/laptop). Each range of values activates a unique set of CSS code to construct the web page to view optimally on the target device. A breakpoint is the transition between media query values.

Here’s a simple example: If the available browser width is at least 780px the website may display menu bar that spreads across the top of the page. However, if the available width is less than 780px the css may restructure the menu bar into two rows or move the links into a drop down menu. When you resize you browser window below 780px wide you’ll see the menu adjust. This transition is a breakpoint.

To see this in action, check out this site we created for the Capital Area Food Bank. As you resize your browser window you’ll see the menu, slider and other elements adjust as you reach these break points.

Currently there are no widely adopted best practices for defining break points. In my opinion break points should loosely reflect device classes and be led by the design of the website. The goal is to create a site that looks good on any device and sticking to predefined break points won’t always accomplish this.

The Fluid Grid

A Responsive Web Design Tutorial for Beginners

Designers have used grids for decades when designing layouts for print and this is true of good web designers as well. Traditionally we think of grids in terms of columns and rows with fixed widths, heights and gutter sizes. We may build a website using a 960px grid divided into 12 columns measuring 40px wide with 20px gutters. This works well for fixed width sites where the content is always the same width.

When we are designing a responsive website, we must think of column and gutter widths as a percentage of a maximum available width. This means the grid measurements expand and contract as needed, as does the content within them. See the difference between a fixed and fluid 960 grid on this site by selecting “Fluid 12-column” and then “Fixed 12-column” from the menu bar.

This Changes Everything

As web designers, we must change the way we think about web design. We’ve already learned that our print design skills are valuable, but not totally adequate, when it comes to web application. However, many of us design fixed width sites with a white knuckled hold on every graphic nuance. This is the control we were used to with print.

To create responsively designed websites we need to loosen our grip and accept the fact that we no longer have pixel perfect control over every element of the design that we’ve so painstakingly created. This doesn’t mean we compromise design quality. When we adjust our approach and thoughtfully consider how our designs will adapt across a wide variety of devices, responsive design means we can craft sites that look beautiful and function well no matter what devices our audience may prefer.

Okay, that’s as deep as we’ll dive for now. Stay tuned for our final post in this series, where we’ll share our 20 favorite responsive websites.

Social Sharing

Options: Facbeook, Twitter, Linkedin, Pinterest...

AUTHOR DETAILS

Options: Headshot, Bio Excerpt, Link to page with more details

Casey
By: Casey DenBleyker
Creative Director
Casey oversees the creative direction for clients at Social Driver. He has supported the development of over 100 websites, with a keen focus on responsive design.