Category Archives: Sin categoría

Perlas III. Trucos básicos del Responsive Web Design

Hola, seguimos con el fascículo III, y esta vez toca unos trucos básicos para llevar a cabo un diseño adaptable con fundamento. Sé que estais esperando  dos temas cruciales que todavía no he tocado: las imágenes y la navegación, pero me he acordado de lo que nos decía el profesor de bertsolaritza cuando nos daba clase, “dejad el mejor punto para el final”, y yo que soy una alumna aplicada, le hago caso. Paciencia, todo llegará.

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.

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 otra 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.

Y como lo prometido es deuda, las perlas IV y V se ocuparán de  las imágenes en responsive y veremos los patrones de navegación más interesantes.

Bloga zetarako

Bloga zetarako? Zabaltzen doten hirugarren bloga da eta azkan bijjak ez dabe bape arrakastarik eukin, ez inok ez dabezelako irakurri, kasurik be ez dotsatelako egin baino. Ia hirugarren saiakera honek emaitza ezberdina ematen dosten.

Azkan sei hilabetietan gauza asko pasa diraz, eta ijja danak onak. Ikasten hasi naz, gabari orduak ostuten eta nire lanari bultzada edar bat emoteko erabakijja hartun dot. Ez dot nahi nire lan profesionala inertziz doian zeozer ixatia: nik be zer esana, edo zer egina daukat honek hartzen daben bidian. Ez daukat nire eguneroko 8 lan ordu, 104km eta 2,7 urteko txikitino batetik aparte denpora askorik, baina ez dot nahi hori eskusa bat ixatia. Nahi ixanez gero, lortzen dalako, eta konbentziduta nago honetaz.

Beraz, zera erabaki dot, internetian dagozen blog eta artikulo piluari, neure aportaziñoia be gehitzia, “por si no hay ya bastante”. Atentziñoia joten dosten kontzeptuari buruz idatzikot, diseinatzaile web baten ikuspegitik beti be.

Ala, ba hor doia nire “hola mundo” partikularra. Disfruta eta onak ixan nigaz! jajajaj