Adaptar el tamaño de una web a pantallas grandes con un simple zoom vía CSS

Mirad, lo que os voy a contar no es la más optima de las soluciones, pero sí es un recurso que en algún momento os puede ahorrar trabajo para salir del paso.

Hoy por hoy, todo es optimización para dispositivos móviles, de hecho la web va camino de tener que orientarse casi exclusivamente para ese tipo de pantallas, dejando las de sobremesa en un segundo lugar, ¿os suena eso del «mobile first«? Pero siempre está ese cliente puñetero o ese usuario final exigente al que le da por ver vuestro trabajo en su televisor HD y os dice con su voz más odiosa: «Pues en mi pantalla se ve todo muy pequeño y con mucho fondo por los lados…» ¿¡En serio!? ¿Quién ve las webs de artículos de lectura en sus televisores? La gente. La gente ve cualquier cosa en cualquier tipo de dispositivo porque para eso somos muchos, con demasiado tiempo y con multitud de formas de enfrentarnos a la misma sencilla y pequeña página web.

Lo ideal, en estos casos, sería ponerse a diseñar una nueva disposición para que nuestra web encajara también en pantallas «enormes» al igual que ya lo hace en las de las tabletas y las de los móviles… o, por qué no, contar con una ordenación de parrilla o cuadrícula al más puro estilo Pinterest, de manera que los elementos se agrupen de uno en uno, dos, tres o veinte dependiendo de cada pantalla. Pero muchas veces este tipo de presentación no es compatible con lo que necesitamos o con lo que nos han pedido y, si somos un poco rastreros, a ese usuario de antes le hubiéramos contestado: «¿Es que no sabes usar el zoom de tu navegador?» ¡Eureka!, ¿y si obligamos a la página a hacer zoom aunque el inútil de turno no sepa? Pues dicho y hecho.

Imagen que compara la vista entre la web sin zoom y con zoom
Continuar leyendo «Adaptar el tamaño de una web a pantallas grandes con un simple zoom vía CSS»

Trabajando con CSS: Considera evitar el uso de @import

Hace unos meses explicaba por este mismo blog cómo organizar la apariencia de una web con hojas de estilo en cascada y, aunque aparentemente, la organización que comentaba quedaba ideal de la muerte (así como todo muy clarito y bien ordenado) al final resulta que es una solución de la muerte, para nada ideal.

El problema está en que, en aquella ocasión, yo hacía hincapié en que era mucho más práctico tener una única llamada a la hoja de estilo en la cabecera de la web cargando los demás CSS dentro de otro y abusando de las posibilidades que brinda @import  como solución limpia y ordenada. Pero en la práctica este caso penaliza el rendimiento de la web y, por lo tanto, se desaconseja su uso.

Captura web de los resultados obtenidos con la propiedad import
Resultados de velocidad de carga obtenidos con la versión que emplea @import

Depurando código

Rehago pues la plantilla web creada para explicar aquello y compongo una nueva llamando a una única hoja de estilo desde la cabecera de la página web. Podéis husmear en sus entresijos, que para eso está: DEMO en vivo y DESCARGA de los archivos.

Como podéis ver en las capturas de pantalla que ilustran esta entrada, la versión que utiliza el recurso @import obtiene peores resultados en el test que Google pone a disposición de los desarrolladores (y cualquiera con interés) que esta nueva versión que no lo usa. Esto se debe al tiempo que tardan los exploradores en interpretar las distintas llamadas: aquellas hechas mediante @import se leen una a una, mientras que las integradas en el <head> de la web pueden ser descargadas a la vez. Google lo explica mejor, pero en inglés.

Captura web de los resultados obtenidos con PageSpeed sin import
Resultados de velocidad de carga obtenidos con la versión que NO emplea @import

Continuar leyendo «Trabajando con CSS: Considera evitar el uso de @import»

Ampliando conocimientos sobre HTML5: etiqueta <main>

Etiqueta main de HTML5

Como no es la primera vez que os doy la vara con el tema, quizá convendría que os dierais un garbeo por las entradas de cómo estructurar adecuadamente una web en HTML5 si no recordáis bien las bases que voy a mencionar por aquí.

Cuando comencé con aquellas publicaciones, os comentaba que una página web bien estructurada en HTML5, ha de constar de las siguientes partes, únicas pero repetibles:

Cabecera <header>
Pie <footer>
Dirección <address>
Navegación <nav>
Sección <section>
Artículo <article>
Apartado <aside>
Grupo de encabezados <hgroup>

Esto quería decir que es conveniente englobar correctamente cada apartado del contenido de nuestra web con esas etiquetas, pero que lejos de sólo poder usarlas una vez y en un orden, son flexibles: una sección puede contener artículos que a su vez contengan otras secciones (subsecciones); una página web puede emplear la etiqueta <header> en la cabecera de la web, pero también en las cabeceras de sus secciones y de sus artículos.

A esta lista de indispensables, es conveniente por mi parte ir añadiendo otras etiquetas, como por ejemplo, la que hoy nos ocupa: <main>

Etiqueta main de HTML5

Continuar leyendo «Ampliando conocimientos sobre HTML5: etiqueta <main>»