Responsive Web Design

responsive-web-design

Responsive web design has been a rapidly growing tread since 2010. Smartphones and tablets are on the rise and every year there are new devices to configure your website for. How can we make a website look beautiful across thousands of different devices? The solution is Responsive web design.

If you don’t feel like reading you can also watch a video I made about responsive design below.

They key to responsive web design is making all of your HTML fluid. Basing all of your main containers off of percentages and using breakpoints in CSS3 is with really where you see responsive design shine. Below I’m showing an example of my personal site Kickass Humor. On the left is what my website looks like on a desktop computer and on the right is what it looks like on your smartphone.

kickass-responsive

Why choose Mobile Responsive Design?

  1. Responsive design is better for SEO
    Google says, “A single URL for the content helps Google’s algorithms assign the indexing properties for the content.” Having a separate mobile site with a different URL is just inconvenient.
  2. Responsive design is easier to maintain
    A separate mobile site means you have to manage two different pages or possibly two different designs.
  3. Responsive design delivers a better reading experience
    Responsive sites adapt to whatever device your on for an awesome viewing experience. They also don’t have a “Continue reading on the full site” link because your already on the full site.

How does responsive design work?

Responsive webdesign is incredibly easy to implement into your website. If you know how to write some CSS then you know how to make your website fully responsive. Lets dig into some code shall we?

@media screen and (min-width: 731px) and (max-width: 950px) {
	/* Most Tablets */
	#wrapper {
		width: 730px;
	}
	/* place the rest of your css here */
}

@media screen and (min-width: 480px) and (max-width: 730px) {
	/* Most smartphones in landscape mode (Holding a smartphone on its side) */
	#wrapper {
		width: 480px;
	}
	/* place the rest of your css here */
}

@media screen and (min-width: 300px) and (max-width: 479px) {
	/* Most smartphones is portait mode (Holding phone up and down) */
	#wrapper {
		width: 300px;
	}
	/* place the rest of your css here */
}

These are the three media queries that I use on Kickass Humor. Check out the site and resize your browser to demonstrate these three breakpoints work. If you know how to write basic CSS, that’s all we are really doing here. We are placing CSS in these different breakpoints. From 731px – 950px I want to use this CSS. From 480px – 730px I want to use this CSS… etc. You don’t have to give your media queries a range of pixels, but I find it better if you do. This way the mobile media query does not inherit and styles from the tablet media query. You don’t have to base your queries off of mine. Test your own queries on our own devices and see how they stack up.

Use percentages instead of pixels

This is where you see responsive design really shine. There are thousands of devices out there and basing your widths, margins and paddings off of percentages will be a lot more accurate on all these devices.

@media screen and (min-width: 731px) and (max-width: 950px) {
	/* Most Tablets */
	#wrapper {
		width: 96%;
	}
}

Dealing with images

It’s best to base your images off of percentages also. If there simply is no room for them on the mobile version of your site then we can simply add this CSS in your mobile media query. This way hide the image if the device is a smartphone.

#yourdiv img {
	display: none;
}

When the image gets too distorted or pixelated then lets limit the size so it always looks good.

#yourdiv img {
	max-width: 100%;
}

Responsive Navigation

Most likely on different devices you will want to change the look how your navigation so it is most usable for your users. Check out the demo on my funny joke website. Resize your browsers width really small and you will see a select navigation instead of the main navigation used for the desktop. Here is the HTML to accomplish this.

<div id="main-navigation">
	<ul>
		<li><a href="/home">Home</a></li>
		<li><a href="/about">About</a></li>
		<li><a href="/work">Work</a></li>
		<li><a href="/contact">Contact</a></li>
	</ul>
</div>

<div id="mobile-navigation">
	<select>
		<option value="/home">Home</option>
		<option value="/about">About</option>
		<option value="/work">Work</option>
		<option value="/contact">Contact</option>
	</select>
</div>

Now we have two menus. We can show the normal menu if the user is on a desktop, but if the user is on a mobile device then we can hide the normal nav and display the mobile version using this CSS below.

@media screen and (min-width: 300px) and (max-width: 479px) {
	/* Most smartphones is portait mode (Holding phone up and down) */
	#mobile-navigation { /* show the mobile nav */
		display: block;
	}
	#main-navigation { /* hide the main nav */
		display: none;
	}
}

Now that we are showing the mobile nav in a select list. We need a little jQuery to make the select list actually work.

$(function(){
	$("#mobile-navigation select").change(function() {
		window.location = $(this).find("option:selected").val();
	});
});

There are many different solutions when designing for mobile devices. Try some of the above and see if you can make your website fully responsive. You can find more great examples of awesome responsive design at http://mediaqueri.es/ If media queries are not for you then try out jQuery Mobile.