toggle

Ajustar el tamaño de texto según su contenedor

En mi último proyecto necesito ajustar el tamaño de texto según el tamaño de su contenedor. Inicialmente opte por usar el plugin FitText.js, que aunque funciona muy bien no era lo que necesitaba, ya que yo desconozco el tamaño de la cadena de texto, y con fitText  necesitas saberlo para proceder a ajustarlo.

Por eso, y gracias a mi compañera Nerea, voy a usar esta función, que encaja mejor con lo que busco:

ACTUALIZACIÓN (Nov-13): La función que usaba tenía serios problemas de rendimiento, y la he actualizado mejorando bastante su comportamiento y funcionalidad. A parte de mejorar el rendimiento, tambien he añadido 2 parametros. El primero «set_max_size» es para decirle al plugin si quieres limitar el redimensionado a un tamaño máximo (el dado por el tamaño del texto en el CSS) y si quieres un tamaño mínimo «min_size»

adjustTextSize

 

(más…)

Llego la hora del responsive design

Ya era hora. Tanto hablar de responsive design, de internet en el móvil, etc, etc… y luego en casa del herrero… diseño fijo no adaptado para móviles.

He retomado el diseño del nuevo responsive vissit, que podéis ver a tamaño completo aquí.

De momento doy el diseño por cerrado, aunque cualquier comentario que me hagáis será muy tenido en cuenta. Ahora el siguiente paso es comenzar con la maquetación, y después de varios test lo subiré a producción para que podaís jugar con él.

El principal cambio de esta nueva versión será lo fluido de su maquetación, pero también hay ligeros cambios en el diseño: nuevo logotipo, y tipografía de los titulares y botones. He optado por una imagen más redondeada, que creo encaja más con el resto del diseño. También añadiré un par de slider en la home, uno con mis últimas imágenes  subidas a Instagram y otro con el portfolio, así como acortar la parte a mostrar de los post en la home, y añadir una navegación para recorrer las diferentes paginas de posts (no se como no me había dado cuenta hasta ahora que no lo tenía).

¿Os gusta? Hablar ahora o callar para siempre 😉

Trucos para mejorar resolución de imágenes en móviles iPhone y Android

No sabíamos muy bien por que las imágenes de nuestras aplicaciones web no se veian 100% nitidas en nuestros terminales móviles, pero gracias al buen artículo publicado en thesedays.com hemos mejorado la resolución de las imágenes en móviles iPhone y Android.

Por defecto, iPhone 4 muestra las imágenes al 200% de su tamaño, ya que su resolución es mucho mayor que la de su hermano pequeño. La solución es duplicar las imágenes de la aplicación al doble de su tamaño y usar una media querie en nuestro CSS que haga referencia a dicha imagen para este tipo de dispositivos.

.myImage {
 height: 40px;
 width: 100px;
 -webkit-background-size: 100px 40px;
 background: url("images/myImage.jpg");
}

@media screen and(-webkit-device-pixel-ratio: 2) {
 .myImage {
 background: url("images/myImage@2x.jpg");
 }
}

Debemos de tener en cuenta dos lineas de este CSS:

  • -webkit-background-size: fuerza al navegador a mostrar la imagen de fondo al tamaño deseado. Aquí pondremos el tamaño de la copia «pequeña». Así la copia grande de la imagen se repesentará al tamaño de la pequeña
  • @media screen and (-webkit-device-pixel-ratio: 2):  Media querie para iPhone 4. Lo que esté desde de las llaves solo lo ejecutara iPhone 4 (o futuros terminaes que tengan un pixel ratio de 2)

¿Y que pasa con los móviles Android?

Vale, haciendo esto todo nos va a ir mucho mejor en iPhone 4, pero que pasa con los Android. Yo tengo un Samsung Galaxy S II, y tenía el mismo problema. También veía las imágenes poco nítidas.

Mi primera solución, ha sido el remplazar la media query del pixel ratio por otra para todos los navegadores webkit (practicamente todos los que se usan ahora en móviles y tablets):

@media screen and (-webkit-min-device-pixel-ratio:0) {
}

Con esto podremos hacer el «truquito» del redimensionado de imágenes en todos nos navegadores webkit.

El resto de navegadores seguirá viendo la imagen pequeña sin problemas.

Estoy empezando utilizar esta técnica, y puede que surjan muchos bugs. Si conocéis algún sistema mejor para resolver este problema contármelo, y lo publicaremos en la web.

Últimos consejos

Tampoco debemos de olvidarnos de otros trucos para mejorar nuestra maqueta en móviles como:

  • Usar la siguiente meta etiqueta:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  • Forzar al navegador a no redimensionar el texto con la rotación de la pantalla
body {
-webkit-text-size-adjust: none;
}
  • definir un ancho minimo de 320 pixels
min-width: 320px