Written by on

A Primer on Responsive Web Design

As the usage of mobile devices grows, the need for a site that works with desktop and mobile browsers is something most people cannot avoid. Thankfully, with today’s modern browsers, designing for mobile devices is not as difficult as it once was.

What is Responsive Design?

Responsive Design is a technique of using fluid grids, flexible images and CSS media queries to respond to the user’s behavior and environment based on screen size, platform and orientation.

Why design for mobile and why use Responsive Design?

Over the past four years, mobile usage has nearly doubled each year (StatCounter, 2012). If these rates continue we could see mobile usage grow to 20% or higher within the next two years. This means there is a possibility that 20% of your site’s visitors may be using a mobile browser. If your site does not work on mobile devices, then these visitors may never return.

Many discussions have risen about whether one should design a separate mobile site or use Responsive Design techniques and I feel that a separate site is simply not the answer. In fact, I have run into many problems with having a separate mobile site:

  • Shared links are sometimes wonky.
    • Redirect to mobile home pages (this happens to me more times than I can count).
    • Pushes desktop users to mobile sites.
  • Who decides what mobile users get?
    • Stripped down content with content audit.
    • Missing videos, ads, promotions, etc.
  • What is considered mobile?
    • iPhone designed site on an iPad.
  • Two sites to manage (biggest problem).

There is no doubt that this method only creates more problems than it solves. This is why Responsive Design is the solution.

How can we use Responsive Design?

As stated above, Responsive Design is a technique of using fluid grids, flexible images and CSS media queries. I’ll explain these three basic parts below.

Fluid Grids

In a nutshell, fluid grids enable a user to make up a flexible content structure. It consists of using percentages for widths instead of pixels (or ems). For example, let’s say I have a container on a web page that I want to be 960px wide. Inside this container I want a content area 620px wide, a sidebar 320px wide and a 20px margin between the two. In the past, this was accomplished simply by creating a container and elements with respective widths and margins in between.

Nothing difficult here, just some simple HTML:

<div class="container clearfix">
	<div class="content">
		<!-- content here -->
	</div>
	<div class="sidebar">
		<!-- sidebar -->
	</div>
</div>

Paired with old style CSS for the elements:

.container {
	width: 960px;
}
.content,
.sidebar {
	float: left;
}
.content {
	width: 620px;
	margin-right: 20px;
}
.sidebar {
	width: 320px;
}

By setting the widths for the elements, we are limiting the ability of the browsers to adjust the size of the boxes. Thus, instead of using pixel widths we can now use percentage widths. In order to calculate these percentage widths we can use this handy little equation: target ÷ context = result.

In the case of the content element, our equation is: content ÷ container = result or 640 ÷ 960 = .645833333. We then convert this result to a percentage: 64.5833333% and we have our new percentage width. Rinse and repeat this for the margin and sidebar and here is the new CSS:

.container {
	width: 100%;
	max-width: 960px;
}
.content,
.sidebar {
	float: left;
}
.content {
	width: 64.5833333%;
	margin-right: 2.0833333%;
}
.sidebar {
	width: 33.3333333%;
}

Creating fluid grids is easy and you can read more about them here if you like.

Flexible Images

Flexible images are much easier to achieve. I know that many of you have run into an issue of an image overflowing its container. This can be resolved by adding max-width: 100%; to the images.

img {
	max-width: 100%;
}

This keeps the images from overflowing its container by not allowing that image to grow any wider than the width of the container. You can learn more about flexible images here.

Beware when using the WordPress media insert method as it defines a width and height of the image. By adding this width and height, the image will not resize properly.

In Builder (4+) we compensated for this problem by overriding the width and height attributes of the images, in addition we provided the same support for other types of media. Here is the code we used to accomplish this:

img,
video,
.wp-caption {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	max-width: 100%;
	height: auto !important;
}

I know that I have always said not to use !important in your CSS (still feel this way), but sometimes you have to undo what someone else (not naming any names) has done. The alternative would be to strip the width and height out of the img elements style attributes. Obviously we could not do that effectively; thus, we are using height: auto !important; instead.

The great thing about the above code is it can be used even when you choose not to use the responsive features of Builder (don’t know why you would do that). This will enable your media to never overflow the container.

Media Queries

CSS media queries have been around for a while now and are very useful for fixing certain areas of your site that breaks at certain widths. Not to be confused with the use of media above, media queries are actually a way to target different media types (screen, print) and functions (width, height).

Going back to our simple example above, we can see that once the width of the device gets to about 500px our sidebar is going to become quite small (about 167px wide). In addition, as the device gets smaller, the sidebar and content keep squishing together and reducing the amount of space for each element. A way around this is to create a breakpoint using a media query. Here is an example:

@media only screen and ( max-width:500px ) {
	.content,
	.sidebar {
		float: none;
		width: 100%;
		margin: 0;
	}
}

Now any device with a width smaller than 500px will make those two elements stack on top of each other and be 100% width of the container. This makes the design work on devices with a width smaller than 500px. You can use more than one media query to define different breakpoints.

With Builder (4+), the heavy lifting is handled by its layout engine and auto generated media queries. In addition, there are a couple stylesheets you can add to your template to target various media functions, but more on that later.

Wrapping it up.

Responsive Design is the future. It allows you to create a design that will work on many different devices and be sure that your sites are ready for any devices that exist now and will exist later.

You can check out the slides for my presentation on Responsive Design for WordCampKC this past June.

Want to know more about Responsive Design? Check out Ethan Marcotte’s book Responsive Design. It is a must read for any designer today.

Comments

  1. With the growth of using mobile is increasing, the use of responsive design will definitely grow. We use Responsive Design techniques because same web design can run efficiently on both mobile browsers and desktop browsers.

Respond

×

Sale Ends Today! Save 35% OFF BackupBuddy with coupon code BACKUPWP35