El origen de responive web design<\/span>, para adaptar webs a tel\u00e9fonos m\u00f3viles principalmente, es un art\u00edculo aparecido en A List Apart<\/span> con el t\u00edtulo de tach\u00e1n… responsive web design<\/a>. La t\u00e9cnica consiste en usar:<\/p>\n En el fondo no hay nada nuevo: Media Query<\/span> es una potente evoluci\u00f3n de media types<\/a> presente en CSS<\/acronym>2, y el uso de rejilla e im\u00e1genes flexibles ya era conocido desde hace tiempo.<\/p>\n Parece sencillo traducir el t\u00e9rmino original responsive design<\/em> por dise\u00f1o responsivo. Pero consultando el diccionario de la RAE<\/acronym>, me ha costado encontrar uno buena traducci\u00f3n que respete el esp\u00edritu del t\u00e9rmino original. Gracias a la buena gente en twitter<\/span> encuentro buenas alternativas:<\/p>\n A m\u00ed personalmente me parece mejor la opci\u00f3n dise\u00f1o web adaptativo<\/strong>, si hacemos caso al diccionario (definici\u00f3n de adaptativo en la RAE<\/acronym>):<\/p>\n Esa capacidad de adaptaci\u00f3n es lo que me parece m\u00e1s apropiado. Pero bueno, cuesti\u00f3n de opiniones: todas las argumentadas son bienvenidas.<\/p>\n Tenemos una t\u00edpica web con su c\u00f3digo HTML<\/acronym>, CSS<\/acronym>, javascript<\/span> (imprescindible una librer\u00eda, como jquery<\/span> y sus correspondientes plugins<\/span>) y un buen pu\u00f1ado de im\u00e1genes. Todo ese c\u00f3digo es el que se env\u00eda al navegador y le toca al potente ordenador de sobremesa (o al no tan sobrado de potencia tel\u00e9fono m\u00f3vil) procesarlo. Lo cu\u00e1l equivale a descargarse todo, filtrar los estilos que le corresponden, ocultar los elementos invisibles (pero descargados) y mostrarlo en las pantallas de nuestros cacharros, ya sean grandes o peque\u00f1os, potentes o justitos. Siempre y cuando sepan interpretar el c\u00f3digo…<\/p>\n Ah\u00ed hay un problema: se conf\u00eda demasiado en el dispositivo de destino<\/strong> (velocidad de conexi\u00f3n y procesador, memoria, capacidad de comprender el c\u00f3digo), y en ocasiones se le env\u00eda demasiados recursos, aunque no los muestre (y es una p\u00e9rdida de tiempo y recursos que en ocasiones puede ser exagerado).<\/p>\n En palabras del que puso nombre a la t\u00e9cnica…<\/p>\n I think of responsive design as an alternative to mobile sites.<\/p><\/blockquote>\n Ethan Marcotte<\/cite> \u2014 Ethan Marcotte on responsive web design<\/a><\/p>\n Lo considera una alternativa al dise\u00f1o de una web espec\u00edfica para m\u00f3viles. Y yo a\u00f1ado que no es la mejor alternativa. Sigo pensando que un buen trabajo de desarrollo en el servidor, con detecci\u00f3n de dispositivos (mediante WURLF<\/acronym><\/a> por ejemplo) y env\u00edo de contenido optimizado para dicho dispositivo, obtiene resultados mucho mejores que la t\u00e9cnica de dise\u00f1o web adaptativo. Una muy buena explicaci\u00f3n, la puedes encontrar en la presentaci\u00f3n Why responsive design actually begins on the server<\/a> a partir de la p\u00e1gina 83.<\/p>\n \u00bfExisten ocasiones en las que el dise\u00f1o web adaptativo puede ser una alternativa razonable para ciertos proyectos web? Por supuesto, depende<\/strong> del tipo de web, de los recursos disponibles, del contenido que se muestra,… Una web ligera (no como esas de 5 megas), con pocos elementos multimedia, pocas im\u00e1genes, sobre todo texto, pocos recursos de tiempo y dinero, personal con conocimiento front<\/span> pero no de lenguajes de servidor… es un proyecto ideal para poner en pr\u00e1ctica la t\u00e9cnica de dise\u00f1o web adaptativo. Al menos es algo.<\/p>\n Pero seamos sinceros: el dise\u00f1o web adaptativo no deja de ser un truco de maquetadores con m\u00e1s o menos conocimiento de CSS<\/acronym> y HTML<\/acronym> para intentar que una web no se vea demasiado mal en ciertos tel\u00e9fonos m\u00f3viles. Es mejor que nada, pero dependiendo de la web, puede ser una chapuza o algo brillante.<\/p>\n Me permito recomendar dar un vistazo a la presentaci\u00f3n Pragmatic responsive design<\/a>. Me parece muy completa y un trabajo m\u00e1s que correcto. Un buen ejemplo a seguir.<\/p>\n Bueno, hablo en concreto de CSS<\/acronym>3 Media Query<\/a>.<\/p>\n\n
Hispanizando el t\u00e9rmino<\/h3>\n
\n
\n
\u00bfC\u00f3mo funciona?<\/h3>\n
\u00bfEs la mejor forma de crear una web m\u00f3vil?<\/h3>\n
Algunos consejos para dise\u00f1o web adaptativo<\/h3>\n
\n
handheld<\/code> o screen<\/code><\/strong>. Desde que el iPhone<\/span> dej\u00f3 de considerarse un dispisitivo handheld<\/code> desde el punto de vista del CSS<\/acronym>, ha sido el primero de una larga lista de dispositivos en considerarse similares a, por ejemplo, un iMac<\/span> de 27″. Y no es lo mismo una pantalla de 3,5″ que una de 27″.<\/li>\nEl contexto<\/h3>\n