jueves, 5 de julio de 2012

Diseño web responsable css + html

En esto dias decidír empezar a trabajar de manera mas responsable adoptando lo que se llama Diseño web responsable o Responsive Web Design es decir proporcionar un producto que luzca perfecto tanto en monitor, tablet y  móvil.


El diseño tiene que ser ajustada automáticamente para adaptarse a todas las resoluciones de pantalla y los dispositivos. Este tutorial te mostrará cómo crear un diseño cross-browser sensible con HTML5 y CSS3 preguntas de los medios.Para ayudarle a comenzar a trabajar rápidamente con el diseño de respuesta, he creado un tutorial rápido. Le prometo que usted puede aprender acerca de la lógica básica del diseño de respuesta y las consultas de los medios de comunicación en 3 pasos (suponiendo que tiene el conocimiento básico de CSS).

Estructura HTML


CSS3
El siguiente conjunto de normas entrarán en vigor si el ancho de ventana es 980px o menos. Básicamente, me puse todo el ancho del contenedor del valor de píxel de valor de porcentaje para que los contenedores se convertirá en líquido.

*980px o menos (monitor)


*700px o menos (tablet)

*480px o menos (movil)

Resultado

Código fuente

Lo ultimo que faltaría de realizar es hacer un bonito diseño, (logo, menú, slider, etc) por lo que les agrego unos ejemplos de diseño.



3 comentarios:

  1. Responsive no quiere decir responsable quiere decir diseño sensible o líquido

    ResponderEliminar
  2. Hola :)
    Me llamo Ana María y soy administradora de un sitio web. Tengo que decir que me gusto mucho su pagina y le felicito por hacer un buen trabajo.

    Le cuento que me encuentro construyendo alianzas con webs amigas para así mejorar nuestros posicionamientos en Google. Por ello, me encantaría contar con tu sitio en mis sitios amigos, consiguiendo que mejoren nuestras ubicaciones en el buscador.

    Mis sitios amigos son http://www.aeurus.cl/sitios-amigos/
    Tenemos un Page Rank de 4, que es un buen nivel para Google.

    Me gustaría un enlace en cualquier página de su sitio, si no dispone de una sección especial.

    Espero que podamos realizar esta alianza.

    Saludos.
    Ana Maria

    ResponderEliminar