Con el aumento de la variedad de dispositivos en los sitios web visualizados (portátiles, tabletas, netbooks, celulares, computadoras de escritorio con tela pequeña, iMacs con telas gigantes, segundo monitor, etc.), seria enlouquecedor desenhar múltiples versiones de un mesmo sitio que sorprende cada uno. Estas variaciones de tamaño de tela y cada una de las resoluciones de tela disponibles en el mercado.
oh Diseño web adaptable Es una de las soluciones técnicas para este problema: programar un sitio de forma que los elementos que componen. se adapta automáticamente La gran cantidad de tela del dispositivo no se está visualizando.
Un diseño responsivo incluye:
Adaptar el diseño de la página de acuerdo con la resolución en la que se está visualizando. Redimensionar las imágenes automáticamente para que caibam na tela y para que no sobrecarreguem a transferencia de datos en un celular, por ejemplo. Simplifique elementos de la tela para dispositivos móviles, onde El usuario normalmente tiene menos tiempo y menos atención durante la navegación. Ocultar elementos desnecesarios en los dispositivos menores. Adaptar tamaño de botões y enlaces para interfaces táctiles en el puente del mouse es sustituido por el dedo del usuario. Utilizar de forma inteligente recursos móviles como geolocalización y mudança na orientação do aparelho (horizontal o vertical).
Una variación del “Diseño web responsivo” y el “Diseño web adaptativo”, una versión poco simplificada de la primera. La diferencia, en el segundo caso, es que el diseño se adapta a tres o cuatro largas de tela específica, y no píxel a píxel, como no primer caso.
Estos días de cara con esta presentación que resume de forma muy simple el diseño web responsivo:
[slideshare id=8861248&doc=20110814-responsive-design-110815234405-phpapp02]
(Se você estiver lendo esta publicación por RSS y una presentación acima não abrir, veja-a no blog)
Está claro que esto es una explicación resumida de cómo funciona el Responsive Design: existen muchos otros “poréns” involucrados. Na dúvida, consulte o desenvolvedor mais próximo :)
Leia también: