WP desde cero (9): responsive design II

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

Roy Lichtenstein

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

(Ver primera parte de esta entrada)

Reordenando elementos

Como ya expliqué, mediante las medias queries es posible reordenar los elementos de una página en función de la resolución del dispositivo cliente. Podemos preparar tantas medias queries como necesitemos: para tablets en vertical, en horizontal, para smart-phones grandes, para los pequeños... Todo depende de las ganas y/o del presupuesto  :lol:.

Y como el presupuesto de este tutorial es cero, vamos a preparar solo dos puntos de inflexión: para tablets y para móviles. Es decir, al final tendremos tres plantillas:

  1. Para resoluciones mayores de 800 píxeles, como la de los ordenadores y la de algunos tablets en horizontal.
  2. Entre 340 píxeles y 800, para todo lo que tenga esa resolución, como los tablets en vertical, los ipads...
  3. Menos de 340 píxeles, para los móviles.

(Daniel Martínez aka  @wakkos recomienda tratar las medias en em por una razón que veremos otro día, pero para esta serie nos vale con los píxeles, aunque no sean superprecisos, ya que son más manejables).

La primera plantilla ya la tenemos, vamos con la segunda.

Tablets

Cuando la resolución baje de 820 píxeles, desflotamos la barra lateral y el layout, que tendrá dos columnas en vez de columnas:

  • @media screen and (max-width:820px){ 
  • #primary {
  • float:none;
  • width: 100%;
  • }
  • #secondary {
  • float:none;
  • width: 100%;
  • }
  • .layout_contenedor {
  • width:45%;
  • }
  • }

Además, lo suyo sería quitar el sidebar inferior, ya que se supone tiene información secundaria y ya tendremos el sidebar lateral debajo del cuerpo centrar, pero esto plantea un problema o, mejor dicho, un dilema.

Podríamos hacer algo tan sencillo como ocultarlo mediante display:none.

  • #sibebar_inferior {
  • display: none;
  • }

Pero así solo lo ocultaríamos, es decir, la información seguiría llegando al dispositivo cliente y es una pena enviarle datos que no va a visualizar. Entonces, lo más apropiado es detectar desde el servidor qué dispositivo es y, en función de eso, cargarlo o no, pero la función nativa de WordPress para eso, wp_is_mobile(), es muy limitada.

  • function wp_is_mobile() {
  • static $is_mobile;
  • if ( isset($is_mobile) )
  • return $is_mobile;
  • if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
  • $is_mobile = false;
  • } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
  • || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
  • || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
  • || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
  • || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
  • || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
  • $is_mobile = true;
  • } else {
  • $is_mobile = false;
  • }
  • return $is_mobile;
  • }

Es decir, solo detecta si el navegador cliente es un android, un cacharro de Apple, una BlackBerry, un Kindle y poco más.

Una solución, que solo compensa si en el sidebar inferior se incluye material muy pesado y si realmente se quiere quitar, es usar la clase Mobile-Detect, que es mucho más potente. Para eso hay que hacer lo siguiente.

1. Subimos la clase Mobile_Detect.php a un directorio llamado inc, donde pondremos cualquier otro archivo de PHP no natural de WordPress que necesitemos incluir.

2. En el archivo functions.php añadimos estas líneas, que no es el momento de explicar en detalle:

  • add_action('init', 'mobile_detect');
  • function mobile_detect() {
  • require_once ('inc/Mobile_Detect.php');
  • $detect = new Mobile_Detect();
  • if ($detect->isMobile() == 1 OR $detect->isTablet()== 1) {
  • $check_mt = 1;
  • } else {
  • $check_mt = 0;
  • }
  • return $check_mt;
  • }

3. Y ya tenemos la función lista para detectar móviles y tablets. La función devuelve 0 si no es un móvil o un tablet y 1 en caso contrario, por lo que en nuestro caso podríamos hacer así con el sidebar inferior:

  • <?php if (mobile_detect()==0) { ?>
  • <aside id="sibebar_inferior">
  • Aquí irá el sidebar inferior
  • </aside>
  • <?php } ?>

De todas maneras, como es una opción que hay que adaptar en cada caso, en el archivo functions lo dejaré comentado y en el index no pondré la estructura condicional.

Móviles

Para los móviles medianos y pequeños, desflotamos todos los elementos, incluida la cabecera y les damos un ancho al cien por cien.

  • @media screen and (max-width:360px){
  • #cabecera_principal_col_izda {
  • float:none;
  • width: 100%;
  • margin: 0 auto;
  • }
  • #cabecera_principal_col_dcha {
  • float:none;
  • width: 100%;
  • margin: 0 auto;
  • }
  • .layout_contenedor {
  • display:block;
  • width: 100%;
  • margin: 0 auto;
  • }
  • }

Finalmente, para quitar el sidebar lateral  habría que hacer lo mismo que con el inferior, pero aquí sí podríamos emplear la función wp_is_mobile(), por lo que en index.php bastaría con una estructura condicional.

  • <?php if ( wp_is_mobile() == false) { ?>
  • <aside id="secondary">
  • Aquí irá la columna secundaria o sidebar
  • </aside> <!-- #secondary -->
  • <?php } ?>

Otros elementos responsive

1. Imágenes

Para que las imágenes sean elásticas, normalmente basta con indicar width:100%; sin embargo, como estamos utilizando directamente la función the_post_thumbnail(), que especifica un ancho y un alto en la etiqueta<img />, tenemos que indicar también height:auto, pues de lo contrario se verán distorsionadas.

  • .imagenes_elasticas {
  • width: 100%;
  • height:auto
  • }

2. Palabras muy largas

Si vamos a usar palabras muy largas, como las URLs interminables de Google, para que no se salgan de las cajas hay que añadirlas una clase con la propiedad word-wrap:break-word.

  • .palabras_partidas {
  • word-wrap:break-word;
  • }

3. iframes

Para los iframes, el proceso es algo más complejo. Lo cuento a vuelapluma y otro día lo vemos en detalle a partir del artículo Creating Intrinsic Ratios for Video de Thierry Koblents.

a) El iframe que queramos hacer responsive lo metemos dentro de un div con una clase llamada contenedor_iframes_elasticos (o como sea y luego se cambia en lo que sigue)

  • <div class="contenedor_iframes_elasticos">
  • <iframe src="http://www.youtube.com/embed/OZ8F5Vpg6Zo" frameborder="0"></iframe>
  • </div>

b) Quitamos el ancho y el alto del iframe.

c) En las CSS ponemos esto:

  • .contenedor_iframes_elasticos {
  • position: relative;
  • padding-bottom: 56.25%; /* 16/9 ratio */
  • padding-top: 30px; /* IE6 workaround*/
  • height: 0;
  • overflow: hidden;
  • }
  • .contenedor_iframes_elasticos iframe,
  • .contenedor_iframes_elasticos object,
  • .contenedor_iframes_elasticos embed {
  • position: absolute;
  • top: 0;
  • left: 0;
  • width: 100%;
  • height: 100%;
  • }

4. Explorer

Aunque en teoría nos debería dar igual, pues las media queries están pensadas para los móviles, si queremos que también funcionen en las versiones antiguas del Explorer hay que añadir un script, que es mejor enlazar directamente desde Google por aquello de aprovechar la posible caché. Así que en el head podemos añadir otro hack para este navegador.

  • !-- Script Media Queries y semánticos-->
  • <!--[if lte IE 8]>
  • <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  • <script src="//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
  • <![endif]-->

5. viewport

Por último, para que se escale bien en los móviles, en el head, añadimos este código que ya explicaré otro día que por hoy ya está bien  :-):

  • <meta name="viewport" content="width=device-width">

Bueno, pues con esto ya tenemos una plantilla bastante potente. En próximas entradas seguiremos viendo más elementos responsive a medida que los vayamos necesitando.

Todos los archivos que hemos visto, se pueden descargar desde git hub.

Abrazos ++;

|| Tags: , ,

valoración de los lectores sobre WP desde cero (9): responsive design II

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 4.8 sobre 5 (12 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!

4 respuestas a “WP desde cero (9): responsive design II

  1. Genial el post y como lo explicás. Ahora la duda que tengo; ya que soy algo nuevón en esto (un año y medio más o menos) a qué archivo “functions.php” te referís? Al que está dentro de un theme (plantilla)? O al “functions.php” que está en dentro de la carpeta wp_includes?

  2. Hola Edgard, gracias.

    Al que está dentro del theme. Los demás archivos, los que están fuera del theme, no hay que tocarlos nunca.

    abrazos.

  3. Danivx el dijo:

    Muy buenos estos tutoriales “todo en uno”, fáciles de entender. Estoy aprendiendo mucho.

    Enhorabuena y gracias por compartir.