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