5 powerful techniques for responsive web design

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>

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>

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:


    <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> 
    <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> 


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…

		<th>First Name</th>
		<th>Last Name</th>
		<th>Job Title</th>
		<td>Chief Sandwich Eater</td>
		<td>Crimefighter Sorta</td>

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.

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

  • 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! šŸ˜‰

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

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

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

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

  • 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.

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

  • 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!

  • 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.


  • Wow!! Nice post. Google

  • 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
    enables easy integration; as it runs on any platform.


    AIMIT web solution in Chennai providing so many
    services like website design and development, ecommerce
    development ,CMS development with good quality on time .Let we see why
    development is so important, a website designer or a web developer
    mostly uses Content Management System (CMS) while developing a small or a big
    website. The main advantage is once it is handed over to client the routine
    maintenance and regular updates can be managed by client himself.AIMIT web
    solution in Chennai providing s
    many payment mode option for customer convenience like PAYPAL, AMERICAL EXPRESS


  • It’s all very useful. Just wondering if someone could help me to put it into practice!

    Installation London

  • Mark Smith

    Use of images, videos, youtube videos and navigations menu makes a website more effective and compatible to a user. In this advanced world we have to use these techniques for make a website better and advanced. Thanks for sharing precious information.
    Web Marketing

  • Michael Clarke

    With the multiplication of devices used to access the internet, you have to make sure that your website will look good on every device possible. You can know more about useful techniques for a better, more responsive site or web app. https://www.mindstick.com/Articles/12181/why-responsive-web-designing-is-important-for-your-online-business-today