5 poderosas tecnicas para diseño web "responsive"

<p>Con la gran diversidad de productos que existen para conectarse a internet hoy en día ( computadoras, celulares,  tablets, etc ) debemos asegurarnos de que nuestro sitio web se verá bien en todos los dispositivos posibles. En este artículo describo 5 tecnicas básicas pero muy útiles para mantener un diseño web "responsive".</p>

<h2> </h2>

<h2>Imágenes responsive</h2>

<p>Un aspecto muy importante en el diseño responsive es que las imágenes puedan adaptarse correctamente al resto del contenido. Por suerte lograr esto es algo muy sencillo de hacer! Con este código en CSS nos aseguramos de que las imagenes serán tan grandes como sea posible. Esto quiere decir que la imagen se adaptará al elemento html que la contenga. Si el contenedor tiene 800px, la imagen también tendrá 800px. Y cuando el contenedor cambie de tamaño, la iamgen también lo hará!</p>

<pre class="prettyprint"> img { max-width: 100%; }</pre>

<h2> </h2>

<h2>Vídeos HTML5 responsive</h2>

<p>Este ejemplo es muy parecido al anterior. Con HTML5 es muy sencillo incrustar vídeos en nuestras páginas. Y podemos hacer que estos vídeos se adapten al tamaño adecuado utilizando el siguiente código:</p>

<pre class="prettyprint"> video { max-width: 100%; height: auto; }</pre>

<h2> </h2>

<h2>Vídeos de Youtube y Vimeo, responsive</h2>

<p>Así como las imágenes y los vídeos HTML5, también podemos darle estilo a los vídeos de populares sitios web como Youtube o Vimeo para que se ajusten al diseño de nuestro sitio. Primero veamos el código HTML:</p>

<pre class="prettyprint"> <!-- Vídeo de Youtube --> <div class="video-contenedor"> <iframe src="http://www.youtube.com/embed/xxx" frameborder="0" width="560" height="315"></iframe> </div>

<!-- Vídeo de Vimeo --> <div class="video-contenedor"> <iframe src="http://player.vimeo.com/video/xxx?title=0&amp;byline=0&amp;portrait=0" width="800" height="450" frameborder="0"></iframe> </div></pre>

<p>Y ahora veamos el estilo CSS:</p>

<pre class="prettyprint"> .video-contenedor { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; }

.video-contenedor iframe, .video-contenedor object, .video-contenedor embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</pre>

<h2> </h2>

<h2>Menu responsive</h2>

<p>A través de un menú los usuarios pueden encontrar lo que están buscando en nuestro sitio web de una manera muy sencilla. Pero cuando acceden desde un dispositivo móbil, los menús pueden verse mal o ser incómodos para navegar. Entonces para dispositivos pequeños se suele utilizar un <strong><select></strong> en lugar de un menú horizontal tradicional.</p>

<p>Esta es una técnica fácil que puede utilizarse en cualquier página. Primero creamos el código HTML para mostrar dos menús: el típico menú <strong><ul></strong> que se mostrará en los dispositivos comúnes, y el <strong><select></strong> para los móbiles:</p>

<pre class="prettyprint"> <nav>

<ul> <li><a href="/" class="active">Inicio</a></li> <li><a href="/peliculas">Películas</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/contacto">Contacto</a></li> <li><a href="/ayuda">Ayuda</a></li> </ul>

<select> <option value="" selected="selected">Seleccionar</option> <option value="/">Inicio</option> <option value="/peliculas">Películas</option> <option value="/blog">Blog</option> <option value="/contacto">Contacto</option> <option value="/ayuda">Ayuda</option> </select>

</nav></pre>

<p>Y este es el estilo CSS en el que por defecto ocultamos el <strong><select></strong>, y solo lo mostramos cuando el tamaño del documento es menor a 960 píxeles.</p>

<pre class="prettyprint"> nav select { display: none; }

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

<h2> </h2>

<h2>Tablas responsive</h2>

<p>Generalmente las tablas no se llevan muy bien con el diseño responsive. Pero aún así las necesitamos para múltiples propósitos en nuestras páginas. Por eso aquí hay una técnica muy buena para hacer que las tablas se vuelvan responsive.</p>

<p>Primero creamos una tabla básica con HTML:</p>

<pre class="prettyprint"> <table> <thead> <tr> <th>Nombre</th> <th>Apellido</th> <th>Edad</th> </tr> </thead> <tbody> <tr> <td>Cosme</td> <td>Fulanito</td> <td>39</td> </tr> <tr> <td>Ned</td> <td>Flanders</td> <td>37</td> </tr> </tbody> </table></pre>

<p>Y el estilo CSS sería:</p>

<pre class="prettyprint"> table { width: 100%; border-collapse: collapse; } / Esto es para el estilo zebra. Una fila gris, la siguiente blanca, luego gris, etc. / 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; }</pre>

<p>Ahora que tenemos la tabla y el estilo básica haremos que se vuelva responsive. Para ello forzaremos a la tabla a que no se vea como la tabla original, sino más bien como varias tablas de dos columnas mostrando "nombre del campo: valor del campo". Esto se logra con la propiedad :before de los campos de la tabla. De esta forma la cantidad de columnas no será un problema porque aparecerán una debajo de la otra y ya no habrá necesidad de que el usuario haga scroll horizontal.</p>

<pre class="prettyprint"> @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

/* Hacer que la tabla ya no se vea como una tabla */
table, thead, tbody, th, td, tr { 
    display: block; 
}

/* Se ocultan los títulos de las columnas ( nombre, apelllido y edad en este caso ) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
    /* hacer que los campos se comporten como filas */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    /* Se le agregan los títulos */
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/* Se ponen los nuevos titulares. En este caso solo serían: nombre, apellido y edad.
       Pero se le pueden agregar todos los necesarios */
td:nth-of-type(1):before { content: "Nombre"; }
td:nth-of-type(2):before { content: "Apellido"; }
td:nth-of-type(3):before { content: "Edad"; }

}</pre>

<p>Eso es todo. Espero que les haya gustado :D</p>

diseño web html css responsive