WP desde cero (8): responsive design I

Cómo hacer un tema de WordPress siguiendo las técnicas de Responsive Design (primera parte).

Roy Lichtenstein

archivado en: WordPress / 9 diciembre, 2012 / taller:

Aún nos faltan muchos elementos por ver, más cosas del loop, el sidebar, la barra de navegación, a trocear archivos... en fin, una montonera de cosas, pero, al menos a mí me sucede, da cierta pereza estar trabajando sobre algo rematadamente feo, así que vamos a ir poniendo un poco de estilos. Apenas serán unos pocos, pues el objetivo de esta serie es crear un tema lo más limpio posible, de tal forma que luego sea más fácil adaptarlo a las necesidades particulares, pero no podemos seguir trabajando sin un miserable padding.  😆

Además, ya que vamos a aplicar un par de estilos, prepararemos el tema para que la portada sea del tipo magazine, como la de este blog, con imágenes destacadas de cada artículo y distribuidos por columnas en un layout o rejilla.

Pero, puestos en faena, no haremos un diseño normal, sino responsive, es decir, que se adapte a las distintas resoluciones que puede tener un dispositivo cliente, como una pantalla normal de ordenador, un tablet o un móvil (si no sabes qué es el responsive web design, por favor, échale un vistazo a esta entrada).

Conozcamos primero cuáles serán los cambios que haremos en los distintos puntos de inflexión, es decir, la página normal, un poco más pequeña, como la resolución de un tablet, y finalmente cuando sea la de un móvil.

En la página normal, la que enviaremos cuando el cliente se conecte desde un ordenador, de arriba abajo, tendremos:

  1. En la parte superior, la imagen de la cabecera flotada a la izquierda y el buscador flotado a la derecha.
  2. Sigue la barra de navegación, que no trataremos en esta entrada.
  3. Luego viene el cuerpo central del documento, que a la izquierda tendrá el layout, la parrilla, con las últimas entradas y a la derecha el sidebar.
  4. A continuación dos sidebar (áreas donde se pueden poner widgets) y cada uno abarcará aproximadamente el 50% del espacio (en realidad, un poco menos para dejar espacio para el margen).
  5. Y terminamos con el footer, el pie, al 100%.

[singlepic id=40  w=350 h=502 float=center]

Cuando el usuario se conecte con una resolución de 800 píxeles o menos, como la que tiene un tablet de gama media, pasaremos el sidebar a la parte a la inferior, cada artículo del layout ocupará el 50% y, además, nos cargaremos los sidebars inferiores. Esto último no es necesario, pero me interesa para explicar la detección de tablets con WordPress.

[singlepic id=41 w=350 h=502 float=center]

Y, cuando sea desde un móvil, desflotaremos la cabecera, dejando arriba el buscador y debajo la imagen, los artículos abarcarán el cien por cien y nos cargaremos el sidebar.

[singlepic id=39 w=350 h=502 float=center]

¿Estamos hasta aquí?

Identificando cositas

Entao, lo primero es poner los identificadores (id) y clases (class) que vayamos a necesitar. Ya he explicado cuáles es mi método para poner nombre a las cosas, las sitúo por contexto, pero que cada cual use el que le venga más cómodo (es probable que resulte más cómodo descargarse lo que sigue de git hub y luego seguir aquí la explicación).

En la cabecera, vamos preparando las dos columnas (dejo el texto sin comentar para que luego se vea qué estamos haciendo aunque aún no tengamos esos elementos preparados):

  1. ...
  2. <header id="cabecera_principal">
  3. <div id="cabecera_principal_col_izda">
  4. Aquí irá la imagen
  5. </div>
  6. <div id="cabecera_principal_col_dcha">
  7. Aquí irá el buscador
  8. </div>
  9. </header>

La barra de navegación

  1. <nav id="barra_navegacion">
  2. Aquí irá la barra de navegación
  3. </nav>

El cuerpo central

  1. <div id="main">
  2. <div id="primary">
  3. <?php while (have_posts()) : the_post(); ?> <!-- principio del loop -->
  4. <article class="layout_contenedor">
  5. <?php if ( wp_is_mobile() ) {
  6. if ( has_post_thumbnail() ) {
  7. the_post_thumbnail('medium', array('class' => 'imagenes_elasticas' ));
  8. } else { ?>
  9. <img src="<?php echo get_template_directory_uri(); ?>/images/sin_imagenes.jpg" class="imagenes_elasticas"/>
  10. <?php }
  11. } else {
  12. if ( has_post_thumbnail() ) {
  13. the_post_thumbnail('full', array('class' => 'imagenes_elasticas' ));
  14. } else { ?>
  15. <img src="<?php echo get_template_directory_uri(); ?>/images/sin_imagenes.jpg" class="imagenes_elasticas" />
  16. <?php }
  17. } ?>
  18. <header class="layout_titular">
  19. <h3><a href="<?php the_permalink( ); ?>"> <?php the_title() ; ?> </a></h3>
  20. </header>
  21. <div class="layout_sumario"><?php the_excerpt() ; ?></div>
  22. <aside class="layout_metadatos">
  23. <p><?php _e('Clasificado en: ','mmfilesi-bones'); ?>
  24. <?php the_category(', '); ?></p>
  25. <p><?php the_tags(); ?></p>
  26. <?php _e('Escrito el: ','mmfilesi-bones'); ?>
  27. <?php the_time('j/m/Y'); ?></p>
  28. </aside>
  29. </article>
  30. <?php endwhile; ?> <!-- final del loop -->
  31. </div> <!-- #primary -->

El sidebar

  1. <aside id="secondary">
  2. Aquí irá la columna secundaria o sidebar
  3. </aside> <!-- #secondary -->

El sidebar inferior

  1. </div> <!-- #main -->
  2. <aside id="sibebar_inferior">
  3. Aquí irá el sidebar inferior
  4. </aside>

Y el pie

  1. <footer id="pie">
  2. Aquí irá el pie
  3. </footer>

CSS

Lo primero es fijar un ancho máximo, para que la página no se distorsiones en los monitores enormes. Así, en el contenedor general, #wrap, podemos indicar un ancho máximo de 1140 píxeles, tal y como recomienda Andy Taylor de grid1140, que se ajusta bien para los de 1200px de resolución. (Momentáneamente, a medida que añadimos los estilos, podemos ir poniendo border: 1px solid #000; para ir entendiendo qué estamos haciendo con cada elemento).

  • #wrap {
  • max-width: 1140px;
  • margin: 0 auto;
  • }

En el contenedor de la cabecera vamos a incluir la propiedad overflow:hidden, que forzará al contenedor a extenderse junto al contenido aún cuando esté flotado, un truco que necesita además que especifiquemos un ancho para que funcione en la tostadora el Explorer. (Ver explicación del problema en www.quirksmode.org).

  • #cabecera_principal {
  • overflow: hidden;
  • width: 100%;
  • }

A continuación flotamos cada elemento de la cabecera a un lado y especificamos los anchos: por ejemplo, 70% para la imagen y el 25% para el buscador, lo cual deja un margen del 5% entre ambos para que la página respire un poco.

  • #cabecera_principal_col_izda {
  • float:left;
  • width: 70%;
  • }
  • #cabecera_principal_col_dcha {
  • float:right;
  • width: 25%;
  • }

La barra de navegación la dejamos para otro momento, ya que es un problema muy complicado, pero de momento podemos ir dejando algo de margen arriba y abajo.

  • #barra_navegacion {
  • margin: 2em 0em;
  • }

Con el contenedor del cuerpo central tenemos que hacer lo mismo que con el de la cabecera, especificar un ancho y la propiedad overflow:hidden.

  • #main {
  • overflow: hidden;
  • width: 100%;
  • }

El contenedor del layout lo flotamos a la izquierda y el sidebar a la derecha. Para los anchos respectivos, no queda mal dejar los mismos de la cabecera.

  • #primary {
  • overflow: hidden;
  • float:left;
  • width: 70%;
  • margin-right: 5%;
  • }
  • #secondary {
  • overflow: hidden;
  • float:right;
  • width: 25%;
  • }

disgresión: Dado que la estructura de la cabecera y el sidebar se repiten, alguien podría pensar que es mejor unificarlas, ya sea usando clases en vez de id, ya sea uniendo selectores:

  • #cabecera_principal_col_izda, #primary {
  • float:left;
  • width: 70%;
  • margin-right: 5%;
  • }
  • #cabecera_principal_col_dcha, #secondary {
  • float:right;
  • width: 25%;
  • }

Este es un asunto complejo que desarrollaré en una entrada específica (selectores id vs OOCSS), pero, como estamos haciendo un tema didáctico, para este caso me parece mucho más claro así, separando los estilos de cada selector, aunque sean los mismos.

Seguimos con nuestro diseño, Vamos ya con el layout. Se podría hacer con tres contenedores flotados a la izquierda, que es la manera más limpia, pero esto nos plantearía un problema. Como las alturas pueden variar, si los flotamos corremos el riesgo de que se monten los contenedores inferiores en cuanto encuentren un hueco.

Para solucionar eso, habría que especificar una altura en los contenedores, pero, como estamos haciendo el diseño responsive, con medidas fluidas, corremos el riesgo de que la rejilla se descuarinjinge en cuanto se redimensione un poco el navegador o aparezcan barras de scroll en los contenedores... en fin, un lío.

Todo se simplifica si, en vez de flotar los elementos, les indicamos que se comporten como si estuvieran en una línea, como sucede con los párrafos, mediante la propiedad display:inline-block. Esta solución plantea dos problemas: uno que genera una especie de margen a los lados, pero que en este caso no nos afecta, ya que las tres columnas no deben estar pegadas; y, dos, hay que hacer un par de apaños para que funcione con el Explorer.

El primer problema que tenemos con el Explorer es que las versiones anteriores al 9 no interpretan bien la propiedad, como sucede con otro tipo de elementos en los que no reconoce que tengan una característica llamada layout. En teoría debería bastar con añadir esto:

  • *display: inline;
  • zoom: 1;

Al menos en las pruebas que realizo con la versión para desarrolladores del IE 9, funciona.

El segundo problema es que, al redondear en píxeles los tantos por ciento, la tercera columna se cae, es decir, se pasa a la fila inferior, aún cuando tenga espacio suficiente. Para solucionar esto, como explican en pmob.co.uk, en el margin-right hay que poner un valor negativo de 1 píxel.  Hay otras soluciones más complejas, aunque quizás más precisas, pero ya haré una entrada específica sobre rejillas otro día.

Y ya para terminar con este elemento, especificamos un vertical-align:top para que se alineen los contenedores en la parte superior y los declaramos como box-sizing, para que el padding y los posibles bordes no afecten a la rejilla.

El resultado debería ser algo así:

  • .layout_contenedor {
  • margin-left:1%;
  • margin-right:-1px;
  • margin-bottom: 0.5em;
  • display:inline-block;
  • vertical-align: top;
  • width:32%;
  • -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  • -moz-box-sizing: border-box; /* Firefox, other Gecko */
  • box-sizing: border-box; /* Opera/IE 8+ */
  • *display: inline; /* IE8-*/
  • zoom: 1; /* IE8-*/
  • }

Además, para darle un mínimo de coherencia tipográfica a este esqueleto, definimos un tamaño decreciente para la fuente de los tres elementos del contenedor (titular, sumario y metadatos).

  • .layout_titular {
  • font-size: 0.9em;
  • }
  • .layout_sumario {
  • font-size: 0.8em;
  • }

Con el sidebar inferior tenemos un problema similar al del layout. Como los widget pueden tener cada uno una altura, si flotamos los contenedores el resultado puede ser un desastre si no especificamos una altura fija, por lo que usaremos también display:inline-block, pero no lo vamos a ver ahora, sino más adelante, cuando sepamos cómo funcionan los sidebar y los widgets. De momento, basta con que especifiquemos un ancho y un margen superior e inferior. Además, añadimos un clear:both; para despejar las flotaciones anteriores.

  • #sibebar_inferior {
  • clear: both;
  • margin: 2em 0em;
  • width: 100%;
  • }

El pie de momento no lo tocamos apenas.

  • #pie {
  • width: 100%;
  • }

Bueno, pues ya tenemos nuestra plantilla para resoluciones grandes, como la de los ordenadores, la cual  debería tener este aspecto más o menos:

[singlepic id=42 w=350 h=420 float=center]

En la segunda parte de esta entrada veremos ya cómo aplicar algunas técnicas de responsive design.

|| Tags: , ,

valoración de los lectores sobre WP desde cero (8): responsive design I

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.9 sobre 5 (13 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “WP desde cero (8): responsive design I

  1. Hola estan muy buenos tus tutoriales, pero tengo un problema pongo las entradas y se me montas una sobre la otra. Sabes como arreglarlo? gracia!

  2. Donny Sosa el dijo:

    Se que tiene mucho tiempo este post, pero aun asi por si acaso el usuario le llegan en automatico.

    Bueno mira las % a lo mejor no lo estas haciendo como dice el tutorial.

    Buen tutorial, realmente educativo para ver algunas tecnicas y tambien mejorar uno mismo haciedo mejores tecnicas.

    Gracias!