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»

Recopilación de enlaces varios sobre diseño gráfico y recursos web (IV)

Live Tools

Hacía más de un año que no recaía en este tipo de entrada, entre otras cosas porque -la verdad- no parece que os interese demasiado el tema. Es lo que pasa por tener un blog ecléctico. Pero, bueno, como a fin de cuentas a mí si me sirve como back-up y para repasar de vez en cuando las páginas que almaceno, aquí lo dejo: Para mi yo futura y para quién caiga despistado por aquí y se lleve una alegría al encontrarse con estos freebies.

Agilizando el trabajo con CSS

Live Tools

  • Live Tools de UIParade.com [eng]. UI Parade pone a nuestra disposición 4 herramientas de libre uso con las que podremos crear de forma intuitiva y visual botones, formularios, iconos y efectos de lazo (ribbon). Una vez toqueteados los mandos de creación, podremos obtener tanto el código CSS como el correspondiente HTML para su inserción en cualquier página web, a excepción de los iconos, caso en el que se generarán imágenes descargables.
  • 25 Fragmentos CSS para algunas de las tareas más comunes y frustrantes [esp]. Artículo del blog Webintenta que recopila pequeños fragmentos de código CSS de lo más habitual, por ejemplo: sombras, bordes redondeados, degradados, citas, estilos por tipo de enlace, fuentes y otros hacks.
  • Snippets de CSS-Tricks.com [eng]. En programación los snippets son pequeños fragmentos de código reutilizables. Esta web emplea este nombre para listar un buen puñado de ejemplos de código que podemos usar libremente en nuestros proyectos. Es un recurso similar al anterior, pero con otras variantes y algunos truquillos más no sólo de CSS.
  • Styleneat [eng]. Poco que ver con los enlaces previos ya que a esta web hay que llegar con el código escrito, pero tremendamente útil cuando se nos descontrola la estructura del CSS en el que trabajamos. Styleneat servirá para organizar nuestra hoja de estilos haciéndola inteligible para el ojo humano.
  • CSS compressor [eng]. Justamente lo contrario del punto previo. En esta ocasión, se trata de comprimir espacios, saltos de línea y demás posibles (que, por otra parte como decía, hacen legible un CSS para el desarrollador web) de manera que ocupe menos y ayude a cargar antes la web a la que estén asociados. Ayuda a la optimización web, no a nuestra comprensión lectora de código.

Continuar leyendo «Recopilación de enlaces varios sobre diseño gráfico y recursos web (IV)»