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 comments

Add Yours
  1. Izetta

    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!

Responder

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. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s