Cómo funciona el diseño responsive en Uptodown.com

Os quiero enseñar la solución modular y que se adapta a cualquier resolución que estamos utilizando en Uptodown. Nuestra idea era poder apilar sin límite bloques de contenido, imprimirlos a nivel de HTML por orden de importancia y utilizar el código intacto para todos los dispositivos, solo CSS. Redimensionando vuestra ventana de navegador hasta los 320px de ancho podéis ver en Uptodown.com cuál es el resultado.

En cualquier caso este es el «flujo de impresión» real HTML de una ficha de programa. Cuando el contenido encuentra espacio el efecto simula un diseño a dos columnas:

responsive_u2d_1

Y esto es lo que ocurre cuando empujamos los bloques limitando su espacio a lo ancho, donde se aprecia el orden correcto de impresión HTML.

responsive_u2d_2

Finalmente, permitimos que los bloques ordenados se sigan contrayendo hasta alcanzar el ancho mínimo de 320 píxeles. Este sería el resultando en un smartphone con la pantalla en vertical:

responsive_u2d_3