Trucos básicos del Responsive Web Design II

Esta vez toca unos trucos básicos para llevar a cabo un diseño adaptable con fundamento.

0.- Things aren´t always #000000 and #FFFFFF

Esto no es una ciencia, se acerca más a un arte, por lo que no hay una manera fija de hacer las cosas. Y ¿cuándo tengas dudas? Usa el sentido común.

Y aunque no sea una ciencia como tal, tenemos mil reglas, unidades,  excepciones,… y por supuesto trucos que nos facilitan la vida.

1.-Otra de unidades #emPower

Se puede o mejor dicho de debe trabajar con em en los media queries.

Queda algo como:

@media all and (min-width: 41em)

Aquí os dejo un artículo que habla del tema.

2.-¿62,5% dónde lo he visto antes?

Supongo que conocéis el truco de poner esta línea de código para que 1em equivalga a 10px, ¿verdad?

body{font-size:62,5%;}

Es útil si no queremos estar dividiendo cada unidad en 16 para hacer la conversión de unidades.

Pero aquí viene el PERO: con los media queries no funciona esta regla del 62,5%, ya que esta hace referencia a la fuente del navegador, y no a la etiqueta html. Por lo que sacad la “calcu” y acostumbraros a hacer la siguiente división. 1px/16em.

Consejo de la abuela: /*poned el comentario con el equivalente en px*/

Os dejo el link de un conversor: riddle.pl/emcalc/

3.-Houston tenemos un problema

Si en cada 10px-50px-100px tenemos que saltar a otra media query, seguramente habrá que replantear esa parte del diseño. Intentemos optimizar y utilizar el sentido común.

4.-Una de cal y una de arena

Dicho por un profesional del responsive: ¿Crear una media query sólo por una línea de código? ¿Por qué no? No se pagan al peso, si el diseño lo pide, se pone.

Es decir, con estos dos puntos anteriores os doy argumentos para que hagais con los @media lo que os venga en gana, y cuando cuestionen vuestro código, y sabeis: “estoy optimizando” o “el diseño lo pide”. ;)

5.-Redimensión de fuentes

Aunque nos guste ser puristas y utilizar sólo css para nuestros proyectos responsive, es evidente que hay partes que se quedan cojas y tenemos que pedir rescate a javascript. Por ejemplo, ¿qué pasa si queremos que una fuente se adecue al viewport? Todavía las unidades vw no se soportan en los navegadores. Para esto tenemos este sencillo js: fittextjs.com. Para utilizarlo en títulos o encabezados viene de cine, ni se os ocurra plantearlo en párrafos…o los de FitText te echarán la bronca.

Ejemplo de uso:

$(“h1″).fitText(1.4,{minFontSize:’38px’});

El número que está en amarillo es el número “mágico” que hay que ir modificando a “ojo de buen cubero”, ya que es distinto según la fuente.

6.-Redimensión de vídeos

Para redimensionar un vídeo externo que tenemos en un iframe, tenemos este JS que nos ayudará: fitvidsjs.com

7.- Explorer sí tiene remedio

Si alguien te quiere convencer de que el responsive no tiene soporte en ie, no le creas. respond.js viene a echarte una mano, y hará que en ie funcionen tus media queries rápido y bien.

El último punto es el mejor, siempre, si has llegado hasta el final te llevas de regalo: el respond.js, que es un must en responsive.

Anuncios

Un Comentario

  1. sandro

    hola amigo gracias acabo de leer todo espero me sirva mucho ya que yo recien empiezo en este mundo saludos y gracias otra vez te tengo en favoritos para ver otros articulos que vayas sacando

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s