Debido a la multiplicación de dispositivos que tienen acceso a Internet, es decir, ordenadores, tablets, smartphones... hay que asegurarse de que tu sitio web se vea bien en todos los dispositivos posibles. En este artículo he compilado 5 técnica muy útiles para una mejor web o aplicación responsive. ¡Allá vamos!
Imágenes responsive
Las imágenes fluidas son un componente central de un diseño responsive. Por suerte, hacer que tus imágenes sean fluidas es bastante sencillo de implementar. El código de CSS que verás a continuación hará que tus imágenes se muestren tan grandes como sea posible. Por ejemplo, si la imagen se muestra en un contenedor que tenga 600px de ancho, la imagen se mostrará a 600px de ancho. Si, por ejemplo, cambiásemos el ancho de ese contenedor a 350px, la imagen se ajustaría automáticamente a la anchura máxima disponible de su contenedor, en este caso 350px.
img {
max-width: 100%;
}
Vídeos de HTML5 responsive
Poco a poco vamos viendo como este nuevo elemento de HTML5 se incopora a la web tal y como la conocemos. Este nuevo tag te permite insertar un vídeo de manera sencilla en tu página web, ¿por qué no utilizarlo? Hacer que el vídeo se vea correctamente en toda clase de dispositivos es pan comido. Solo tienes que añadir el siguiente snippet en tu código CSS y el vídeo se ajustará al ancho de su contenedor, de igual manera que hemos hecho antes con las imágenes.
video {
max-width: 100%;
height: auto;
}
Vídeos de YouTube responsive
Como te acabo de demostrar, no es para nada complicado hacer que los vídeos y las imágenes de tu web sean responsive pero, ¿qué pasa con los vídeos embebidos de sitios de terceros? Como sabes hay muchas plataformas para almacenar vídeos. Quizás, la más popular de todas ellas sea YouTube y, es más que posible, que tengas algún vídeo embebido de YouTube en tu web. Pero claro, cuando copiamos el código de un vídeo desde la plataforma, copiamos también parametros como la anchura y la altura con la que queremos mostrarlo en nuestra página web. ¿Cómo hacer que se muestre correctamente en otros dispositivos? Vamos por el principio, lo primero que tienes que hacer, como siempre, es copiar el código del vídeo.
<iframe width="560" height="315" src="https://www.youtube.com/embed/dKrVegVI0Us" frameborder="0" allowfullscreen></iframe>
A continuación, añade esto en tu archivo CSS
.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%;
}
Y ya está, con esto, los vídeos embebidos de YouTube en tu web serán responsive.
Pero esto no solo funciona para vídeos de YouTube, también puedes hacer lo mismo en vídeos de Vimeo que tengas embebidos también en tu web, tal que así:
<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>
Menú de navegación responsive
Los menús de navegación son la vía más simple que tienen tus visitantes de encontrar el contenido que andan buscando en tu web. Pero cuando acceden a tu sitio web desde, por ejemplo, un dispositivo móvil, los menús de navegación, si tu web no es responsive, se convierten en un verdadero tormento haciendo imposible su uso. De hecho, para pantallas pequeñas, la mejor manera de utilizar un menú de navegación es transformarlo en un select en vez de mostrar el típico menú horizontal de la zona superior de la web.
Aquí tienes una técnica muy sencilla que puedes aplicar en cualquier web. Vamos a empezar con el HTML. En él verás que hemos creado dos menús: un menú estándar ul para cuando lo mostramos en ordenadores y dispositivos con pantallas grandes, y otro de un select para dispositivos móviles.
<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>
Y aquí tienes el CSS. Como ves, nada complicado: escondemos el select por defecto, y solo lo mostramos si el ancho del documento es más pequeño que 960px.
nav select {
display: none;
}
@media (max-width: 960px) {
nav ul { display: none; }
nav select { display: inline-block; }
}
Tablas de datos responsive
Las tablas y el diseño responsive, generalmente, no se suelen llevar muy bien. Pero aquí tienes una técnica realmente útil creada por el talentoso desarrollador Chris Coyier para ayudarte a transformar tus tablas en tablas responsive.
Primero vamos a crear una tabla básica. Aquí tienes el 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>
Y el 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;
}
Ahora que tenemos una tabla básica con un estilo básico, vamos a hacer nuestra tabla responsive. Lo que vamos a hacer es obligar a la tabla a no comportarse como una tabla definiendo cada elemento que está relacionado con tablas a estar a nivel de bloque. A continuación, mantenemos el estilo de cebra que originalmente hemos añadido. Con este código es como si cada fila de la tabla se convirtiera en una tabla en si misma, pero siendo tan ancha como la propia pantalla.
@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"; }
}