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

53 comentarios sobre “Cómo funciona el diseño responsive en Uptodown.com

  1. Greetings from Idaho! I’m bored to tears at work so I decided to browse your site on my iphone during lunch break.
    I really like the knowledge you provide here and can’t wait
    to take a look when I get home. I’m surprised at how fast your blog loaded on my phone ..

    I’m not even using WIFI, just 3G .. Anyways, wonderful site!

Deja una respuesta

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.