Contempo: Me pasé a Responsive Design

Me pasé a Responsive Design

Oh si, esos tiempos de la versión móvil de Blogger ya no van más. Ahora adapté el blog para que sea completamente Responsive Design.

Blogger no tiene Responsive Design


Blogger no sabe que es Responsive Design, y ni idea cuando Google hará lo correcto y eliminará eso de "versión móvil". La Web ahora se ve a través de dispositivos, ya no es escritorio y móvil, es una sola para todo. Además Blogger utiliza plantillas XML, que mezcla el código HTML + CSS + JavaScript en una gigante y larga hoja, transformandose en algo muy engorroso de usar.

Lo que adapté


Primero. Deshabilité la versión móvil de Blogger, pasé el tamaño de las fuentes a mediciones em y rem en algunos casos (relativas), e incluso los altos de linea, y saqué los px (absolutas) de las letras, ya que px no sirve mucho en móviles, y el 99% del blog son letras (cabecera, titulares, letras del cuerpo, citados).

Las pocas imágenes que hay en algunos artículos los pasé a porcentajes % con ancho máximo limitado (max-width), para que no quedarán fuera del borde.

Gracias a los media queries de CSS3, pasé el ancho de los artículos a porcentaje % más un max-width en escritorio (con mucho borde a los lados), y que luego ese porcentaje aumentara al llegar a los 768px del ancho de la pantalla del dispositivo, y finalmente que aumentara otra vez el porcentaje de ancho de artículo al bajar a 480px de ancho de pantalla.

Al pasar a los 480px de ancho de pantalla, se modifican también el tamaño de las letras automáticamente. Prueben redimensionando horizontalmente la ventana del navegador para ver como se cambian los anchos del artículo y tamaño de letras.

En resumen, responsive utiliza porcentajes para anchos, imágenes e incluso letras, em y rem para sobreescribir la fuente del body (otras mediciones relativas), y limitadores de ancho de pantalla para ajustar esos anchos y tamaños.

También agregué un tono oscuro a la barra de Chrome/Safari o navegadores móviles que soporten color con theme-color.

Y no usé Flexbox, porque la mayoría del blog es vertical, y es más practico con sitios con elementos horizontales mezclado con verticales.

Ah, y ahora el blog soporta HTTPS.