Adaptar texto al tamaño de la pantalla | Wolabu.com

Adaptar texto al tamaño de la pantalla

Amigos, vimos en la era «movil friendly»… y sin embargo los desarrolladores siguen basando sus proyectos en la pantalla del PC, que salvo casos puntuales como tiendas online, es un grave error.

No desarrolles pensando en el PC

Pues a poco que entiendas un poco de este mundillo, podrás comprobar que el 80% de los usuarios navega por las webs utilizando un telefono movil

Llegados a este punto, se hace evidente que debemos desarrollar una web empezando primero por la versión que mas se va a ver, que es la del movil y luego adaptar esa version a la desktop. Curiosamente, repito, el 99% de los informaticos lo hace al reves.

Como seguramente, si estas leyendo este articulo, seas de ese 99% que crearon la web pensando en PC, te habrás encontrado con el problema de que los textos de tu web, al pasarlos a Movil se ven un poco «pequeñitos». Ahora deber conseguir adaptar texto al tamaño de la pantalla. De hecho, como uses wordpress y uno de sus maravillosos «themes», ya puedes prepararte para picar código CSS y poder arreglar un poco las cosas.

Deja de usar PX, el futuro es otro

Lo primero para adaptar texto al tamaño de la pantalla, es que te olvides de usar los archiconocidos «px» para definir los tamaños de las fuentes (si no sabes que son los «px», se trata del tamaño en «pixeles» de las fuentes de texto).

Normalmente estos tamaños vienen definidos en la hoja de cascada del estilos de tu plantilla, o de tu archivo style.css si creaste tu la web como un campeón y lo hiciste todo a mano.

Hay gente por ahí, que te va a recomendar que uses «em» como medida resposive para los textos, pero lo que realmente funciona es «vw». ¿Que no sabes que es? Don’t Worry, yo te lo explico.

Adaptar texto al tamaño de la pantalla

VW : El valor esta ahí

El valor » vw» asigna un valor de tamaño de la fuente dependiendo del valor que tiene la resolución del navegador (no del monitor como dicen en otros sitios… ). Esto es una pasada, porque permite crear Titulares o Subtitulares dinámicos que se adaptaran a los diferentes tamaños de manera increíble, mucho mejor que definir uno a uno los tamaños de la pantalla y el valor para cada tamaño.

Importante: Debemos tener en cuenta que a nivel resposive, aunque definamos los tamaños de las pantallas, cada dia salen mas dispositivos y cada uno con tamaños diferentes. Intentar, a la vieja usanza, que nuestra web se adapte a todos, es de locos… De hecho, lo suyo es centrase en las tres opciones mas comunes para adaptar texto al tamaño de la pantalla. PC (podriamos meter tambien portatil), Tablet y movil…

Usar px, hay que usarlo, pero con moderación

Volviendo a » vw«, lo que vamos a hacer, en un primer lugar, es definir los tamaños que queremos para los H1, H2, etc en la hoja de estilos, mediante los pixeles de toda la vida… y después simplemente asignaremos los valores, en vez de en pixeles, mediante » vw«, donde el valor 1, por ejemplo.

Mediante HMTL facilmente podéis crear una sencilla web con tres contenedores de diferentes anchos, por ejemplo 50%, 40% y 30% cada uno (si vais a tocar el tema responsive, debéis empezar a definir los tamaños por porcentajes y pasar de los «px») y poner la misma palabra dentro de ellos. Entonces, una vez asignados los valores VW al texto, podréis ver como los contenedores decrecen y con ellos el texto para adaptarse a los tamaños.

Esto puede parecer una chorrada, pero es super util para evitar los desbordamientos de texto dentro de los DIV… Imaginad por ejemplo, que queréis un contenedor con una foto de una vivienda y la palabra «vendido» en su interior… A esa palabra, le ponemos un borde rojo, le redondeamos los cantos y le damos un poco de formato extra por CSS (30 grados de inclinación) y nos queda un sello estampado super guapo. ¿Que pasa al bajar de tamaño? Que desborda y se sale de la foto, pero si el tamaño del texto lo definimos por «VW» ira menguando en tamaño a la vez que la foto también lo hace para adaptarse a móviles o tablets…

Parece magia… pero no lo es 😉

Ojito con los saltos de formato

A veces parece que hable en chino y la verdad, os entiendo… los saltos de formato, son esos puntos de rotura, donde hemos definido que la web va a dejar de verse en un PC y se verá en una tablet, normalmente a los 199px de ancho, o menos… y el siguiente punto de rotura, suele ser a los 699px, donde pegamos el salto al móvil…

En ese sentido, debemos tener en cuenta muchas veces que los display:flex deben convertirse en display:block, lo que significa que el tamaño de nuestros contenedores cambiara… Se hará mas grande, y por lo tanto, los tamaños definidos por «vw» no servirán… deberemos concertarlos para cada ruptura. Basta con añadir los tamaños para cada resolución a través del archivo CSS.

Espero que esta breve introducción al «vw» os sirva.

Co-fundandor de la Agencia de Marketing Wolabu. Ingenioso, creativo y siempre de buen humor.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *