5 powerful techniques for responsive web design

by Jean. 13 Comments -

With the multiplication of devices used to access the internet (computer, tablets, smartphones…) you have to make sure that your website will look good on every device possible. In this article, I have compiled 5 super useful techniques for a better, more responsive site or web app.

Responsive images

Fluid images are a central aspect of a responsive design. Happilly, making your images fluid is pretty easy to do. The CSS code below will make sure that images are as big as possible. For example, if the image is displayed within a 600px width container, the image will be 600px. Resize the container to 350px, and the image will be automatically resized to the maximum width available, in this case 350 pixels.

img {
     max-width: 100%;
}

Responsive HTML5 videos

As the HTML5 specification allow you to easily embed videos in your webpages, why not using it? Making HTML5 responsive videos is just too easy: Just add the following to your css file and you’re good to go!

video {
	max-width: 100%;
	height: auto;
}

Responsive YouTube videos

As I just shown you, there’s nothing complicated in making images or html5 videos responsive. But what about videos from popular sites? Indeed, YouTube is the most popular video host on the web, so chances are you’ll have to work with a YouTube video someday.

First, consider this HTML code:

<div class="video-container">
         <iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
</div>

Then, add this to your CSS file:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Here you go, your YouTube videos are now responsive!

Here is an example video, featuring french punk band Secular Plague:


This code also works well with Vimeo videos, as demonstrated below:

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

Source: http://avexdesigns.com/responsive-youtube-embed/

Responsive navigation menu

Navigation menus are the easiest way for visitors to quickly find what they’re looking for on your site. But when viewing a website on a mobile device, navigations menus are often unreadable or very hard to use. In fact, for smaller displays, it is way better to use a <select> dropdown menu instead of a traditional horizontal menu.

Here’s an easy technique you can implement on any site. Let’s start with the HTML, we’ll be creating two menus: a standard <ul> menu for standard displays, and a <select> dropdown menu for mobile devices:

<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">Select</option> 
    
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>

And here is the CSS. Nothing complicated here: We hide the <select> by default, and only show it if the document width is smaller than 960px.

nav select {
  display: none;
}

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

Source: http://css-tricks.com/convert-menu-to-dropdown

Responsive data tables

Tables and responsive design generally do not fit very well together. But here’s a really useful technique created by talented developer Chris Coyier to help you made responsive tables.

Let’s start by creating a basic table. Here’s the HTML…

<table>
	<thead>
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Job Title</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>James</td>
		<td>Matman</td>
		<td>Chief Sandwich Eater</td>
	</tr>
	<tr>
		<td>The</td>
		<td>Tick</td>
		<td>Crimefighter Sorta</td>
	</tr>
	</tbody>
</table>

And the CSS:

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

Now that we have a table and its basic styling, let’s make our table responsive. What we’re going to do is to force the table to not behave like a table by setting every table-related element to be block-level. Then by keeping the zebra striping we originally added, it’s kind of like each table row becomes a table in itself, but only as wide as the screen. No more horizontal scrolling! Then for each “cell”, we’ll use CSS generated content (:before) to apply the label, so we know what each bit of data means.

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Porn Name"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Source: http://css-tricks.com/responsive-data-tables

  • http://multilayerdesign.com/ KevJaques

    Better to use Lists instead of tables, they are quicker as tables are drawn twice (once for layout and again for content)
    There shouldn’t be any need for using tables nowadays! ;)

    • http://www.wprecipes.com Jean

      you’re right on some point, but semantically speaking, what about tabular data?

  • http://timothy-long.com Timothy Long

    I might suggest tossing a height: auto; on the responsive images snippet.

  • http://www.iedesign.co.uk/blog Josh

    I have had issues with Tables and mobile devices in the past thanks for the article.

  • http://www.codegeekz.com Gavin

    Nice list been using some grid frameworks for making responsive web designs.

  • http://web3.com.au Joseph

    As I was reading each technique I was surprised at just how many of these techniques I use almost daily. Fantastic!
    I have however stopped using a dropdown for mobile menus as I feel it is duplicating the code a little. I now use either a slide-out menu or some other menu with a little bit of javascript.

  • http://www.esolz.net/ John Brown

    Thanks for this share. It provides very good information about web development.

  • http://www.handymanlondonplease.co.uk Anthony L

    Yeah. Finally a solutions for projects that don’t require responsive frameworks like Zurb and Bootstrap! Thank you very much! Making images and videos responsive is so simple and effective!

  • http://www.wiredtree.com Rachel Gillevet

    Hey Jean,
    This was a solid post. Responsive design is definitely all the rage these days, so it’s nice to see an article that offers a few actionable techniques to improve responsive design efforts. Anyway, I thought this would be a nice post for our readers, so I included your article in my roundup of March’s best web design/development, CMS, and security content. http://www.wiredtree.com/blog/marchs-best-web-development-cms-security-content/ Thanks again for the nice work.

    Rachel

  • http://www.google.com/ Hello Hi

    Wow!! Nice post. Google

  • http://www.codebox.in Yash Desai

    The
    techniques mentioned are minimum requirements for any firm who want to use web
    design effectively. Easily understandable to any newbie in web design. PHP
    development
    enables easy integration; as it runs on any platform.

  • http://freelancer-coder.com/ ajaniashish

    Useful information indeed, thank you for sharing.

  • Steeve Ave

    Thanks for Sharing Your Valuable Information….,

    Responsive Web Designing Services | Responsive Websites Services