Responsive Web design techniques

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:

Then, add this to your CSS file:

Here you go, your YouTube videos are now responsive!

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

Source:

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

And here is the CSS. Nothing complicated here: We hide the 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 { } }

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…

First Name	Last Name	Job Title
James	Matman	Chief Sandwich Eater
The	Tick	Crimefighter Sorta

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; 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"; } }