Fuente: http://ramasilveyra.com.ar/blog/mi-sitio-web-y-el-responsive-web-design Hace tiempo termine el nuevo re diseño de mi sitio web, que no fue mas que para probar nuevas cosas y seguir aprendiendo. Creo que es mi primer sitio web con un diseño bueno o pasable. Utilice mi pobre conocimiento sobre Photoshop para realizar los iconos de las redes sociales y los titulares de las secciones con letra gigante. HTML5 y CSS3 para el maqueteado y diseño, Javascript/jQuery para darle efectos y mas dinamismo al sitio y para hacer cross-browser (se ve bien en Google Chrome 5.0+, Opera 10.0+, Safari 3.1+, Firefox 3.5+, Internet Explorer 7+), y AJAX para enviar el formulario sin recargar la pagina. También utilice la técnica de Diseño web adaptable (Responsive Web Design), que detallo en el próximo párrafo. Incursionando en algo nuevo La cantidad de dispositivos con diferentes resoluciones que pueden pasar por nuestro sitio web es tan abrumadora que hacer un diseño fijo significa resignarse a que gran cantidad de personas vean bien tu sitio web. Mi sitio web se adapta a cualquier dispositivo moderno con acceso a internet, desde celulares con un ancho de 320px hasta monitores de más de 1920px, a esto se le llama Diseño web adaptable y es una nueva técnica de diseño web utilizando los nuevos media queries que ofrece CSS3; para seleccionar los estilos a cargar dependiendo del tamaño de pantalla, imágenes y vídeos flexibles: para mantener la proporción con respecto al diseño, combinada con la ya conocida técnica de diseño fluido; para que el diseño se adapte a cualquier dispositivo. La diferencia entre diseño fluido y Diseño web adaptable puede causarnos confusión al principio pero podemos visitar cualquiera de estos sitios webs o el mio y empezar a redimensionar el tamaño de la ventana de nuestro navegador para darnos cuenta de la diferencia y asombrarnos por la magia de esta técnica. Las ventajas de esto es que no es necesario crear dos webs diferentes, una para computadoras de escritorios y otra para celulares, con lo cual se ahorra en esfuerzo, trabajo, dinero y tiempo. Los pasos para lograr un diseño web adaptable son sencillos para cualquier diseñador web con conocimientos intermedios (asumo que ya conoces las ventajas y desventajas del diseño fluido y fijo, y conoces las medidas en porcentajes y em): Diseño fluido: definir medidas relativas como los porcentajes para los tamaños de los contenedores y em para la tipografía, aunque si definimos una medida en px para el tamaño de la tipografía en la etiqueta body es medio absurdo utilizar luego em o porcentajes para definir el tamaño de letra. Imágenes y vídeos flexibles: lo ideal seria hacer imágenes de gran tamaño y aplicar la siguiente regla CSS: img, embed, object, video { max-width: 100%; } Y en el archivo HTML todos las etiquetas img, embed, object y video deben estar dentro de un div contenedor con un ancho definido, ejemplo: CSS: div { width:90%; } HTML: 
Con esto lo que se logra es que las imágenes al igual que cualquier archivo .swf ocupe el 100% del ancho del div contenedor, ya que la medida de este div es relativa va a cambiar según la resolución de pantalla y la imagen o flash que este adentro siempre ocupara todo el ancho disponible. Genial, no? Por supuesto esto genera problemas con navegadores muy viejos como IE 6 o Firefox 2 que ya nadie usa, así que no hay que hacerse mucho drama. Más información aquí. CSS3 media-queries: Utilizar media queries para corregir los desperfectos que se originan al ver tu diseño en pantallas muy pequeñas o muy grandes, también para ir modificando el diseño de tu sitio según el tamaño de pantalla. Los media queries existen desde CSS 2.1, los primeros servían para definir una hoja de estilos para la impresión y otra para la pantalla, con la llegada de CSS3 existen media queries para detectar el tamaño de pantalla y cargar estilos dependiendo de los límites expresados. Los anchos que use para mi sitio web y que recomiendo son los siguientes: @media only screen and (min-width: 1600px) { } @media only screen and (min-width: 992px) and (max-width: 1599px) { } @media only screen and (min-width: 768px) and (max-width: 991px) { } @media only screen and (max-width: 767px) { } @media only screen and (max-width: 479px) { } El primer media querie abarca pantallas con un mínimo de ancho de 1600px y no posee un limite de máximo, el segundo y tercero tienen los limites de mínimo y máximo definidos, el cuarto y quinto no poseen mínimo por lo cual abarcan desde los 0px de ancho hasta el máximo de 479px en el ultimo y 767px en el ante ultimo. El ante ultimo al no tener mínimo hereda sus estilos al ultimo, pero los estilos definidos en el ultimo media querie siempre van a ser mas importantes que los heredaros. Cross-browser media queries: agregar librerías como css3-mediaqueries.js para hacer compatible las media queries con cualquier navegador, como IE 5+, Firefox 1+, Opera 7+ y Safari 2, Chrome soporta las media queries desde su primera versión. Meta tag e icono para iPads y iPhones: por ultimo es necesario añadir un meta tag, lo que hace es para que en algunos móviles se anule la escala automática: Más información aquí. También es necesario agregar un favicon de 129px * 129px en formato png para que cuando alguien accede a tu sitio desde un dispositivo Apple aparezca un icono: Todas estas técnicas, que se están imponiendo como tendencia en diseño web fueron "descubiertas" por Ethan Marcotte, todo esto existía desde hace tiempo pero el se encargo de combinarlas y crear lo que llamamos Diseño web adaptable. Todo esto fue publicado en su libro Responsive Web Design, que si saben ingles es de obligatoria lectura si el diseño o programación web es lo suyo. Allí explica el origen del Diseño web adaptable y como aplicarlo. El lado oscuro Pero hay algo en lo que el Diseño web adaptable hace agujeros y es que se envía la misma cantidad de imágenes, archivos html, hojas de estilo, scripts e información que recibe una computadora de escritorio a un celular. Mi sitio web en mi PC de escritorio con una conexión de banda ancha de 1mb tarda en cargar menos de 2 segundos, una velocidad de carga aceptable, pero en un celular conectado a internet por 3G tarda 20 segundos en cargarse! Y ni se imaginan cuanto tarda con una conexión GPRS o WAP casi dos minutos! Si dos minutos!!! Ustedes conocen alguna persona que sea capaz de resistir la espera de dos minutos para la carga de un sitio web, sin cerrar el navegador o pestaña e irse a otro lado? Creo que todos conocemos o nos imaginamos la respuesta. Un estudio realizado por KISSmetrics revela que cada segundo de retardo en la carga de tu web puede suponer 2.5 millones de dólares de perdidas al año. Por lo cual la idea de tener un sitio web exclusivo para las pequeñas pantallas de un celular vuelve a nosotros con mucha fuerza. Y la verdad creo que es la mejor solución hasta ahora. Lo ideal y la única solución más perfecta existente hasta el momento seria basar nuestros diseños en el Diseño web adaptable para que nuestro sitio web sea perfectamente funcional en cualquier computadora de escritorio o tableta (ya que es sabido que la mayoría de ellos poseen una conexión buena a internet) y disponer de una versión reducida para móviles, para celulares (conexiones con una velocidad pobre a internet) o hacer una aplicación nativa para cada sistema operativo móvil. Por supuesto la solución para que los celulares se conecten a internet a una buena velocidad si existe y se llama Wi-Fi, pero no es algo del que todos disfruten o puedan acceder desde cualquier lado. dijo: Esta obra está bajo una licencia Creative Commons Atribución 3.0 Unported. El arte de tu escritorio es una comunidad dedicada exclusivamente a la personalización de tu sistema operativo. No hay restricciones en cuanto a sistema operativo ni nada por el estilo simplemente queremos conocer tu desktop. Sacale una captura a tu escritorio para enseñarle a la comunidad cómo se ve nuestro entorno de trabajo en el día a día. También encontraras todo lo necesario para que hagas de el una obra de arte. Vivir Paraná será la comunidad referencia para habitantes y viajeros, porque desde aquí cubriremos la oferta cultural de la ciudad, los rincones que no aparecen en ninguna guía, las mejores recomendaciones de restaurantes, alojamientos, cursos, paseos y todos lo que hay para hacer.