2

Diseo web Vigo / Blog / Responsive web design: que es y como usarlo

El responsive web design (RWD) o diseo sensible es el reto para los diseadores en este ao 2012. El trfico web va mviles y tablets crece de forma exponencial, actualmente est en torno a un 10% y se prevee que llegue al 30% para el ao que viene. Entoces la pregunta es, tus pginas son navegables en una tablet o mvil? la mayora no estn adaptadas y ah es donde el responsive design entra en juego. El concepto del diseo sensible es que la web se visualice acorde al tamao de pantalla que tiene el usuario. En la imagen inicial podemos observar un ejemplo de como una misma web se visualiza de tres formas diferentes segn el dispositivo que se use: PC, Tablet y Smartphone. El principal concepto a tener en cuenta en esto son los CSS Media Queries.Una herramienta que nos permite activar y desactivar partes del CSS de nuestro diseo segn el tamao de la pantalla:

1 2 3 4 5 6 7 8 9

@media screen and (max-width: 980px) {

/* CSS ventanas de menos de 980px */

} @media screen and (max-width: 650px) {

/* CSS ventanas de menos de 650px */

} @media screen and (max-width: 480px) {

/* CSS ventanas de menos de 480px */

Mediante la etiqueta @import podemos cargar archivos de CSS externos:

1 2

<style> @import url(tablet.css) screen and (min-width: 650px); </style>

3
CSS Media Queries funciona con todos los navegadores modernos, vease que los de la vieja escuela que aun tienen IE7 instalado en su XP pues igual ven un churro. Otro de los pilares bsicos responsive design es trabajar con porcentajes en vez de con pixels. Los grids de tu plantilla deben ser flexibles y poder adaptarse. La herramienta jQuery tambin puede ayudar de forma notable a los diseos sensibles explora su infinidad de opciones.

Una buena herramienta para testear nuestros diseos es resizeMyBrowser oMattKersley,y es que no todo el mundo tiene dinero para comprarse todos los cachibaches del mercado verdad? Dos plantillas interesantes con las que empezar a trastear:

Skeleton Amazium Wiredframed

Herramientas que te pueden ayudar:

Fit Text: plugin jQuery para adaptar el tamao de tu letra Calculadora de Grids Imagenes flexibles

Finalmente tambien vale la pena darse una vuelta por el proyecto Bootstrapque est desarrollado por los ingenieros de Twitter y que se encuentra totalmente disponible en GitHub

http://www.webvigo.com/blog/responsive-web-design-que-es-y-como-usarlo/

Responsive design: avanzando hacia el concepto de one web (I)

El concepto de one web hace referencia a una web para todos, accesible desde cualquier tipo de dispositivo, que cobra mayor importancia con la proliferacin de las nuevas generaciones de dispositivos electrnicos y su uso generalizado. El diseo web adaptativo (en ingls responsive web design), tambin conocido como diseo adaptable o sensible, es un paso definitivo hacia la consolidacin del concepto de one web porque permite optimizar un sitio para todos los dispositivos o, lo que es lo mismo, hace que todas las web puedan ser vistas por todos los usuarios en todos los dispositivos. El cliente ya no demanda una website que sea atractiva visualmente y cumpla los requisitos ptimos de usabilidad. Busca adaptabilidad, dinamismo, universalidad y, sobre todo, accesibilidad. Es decir, que la informacin de su sitio sea 100% accesible desde cualquier dispositivo y que la experiencia de navegacin resulte plenamente satisfactoria, sin importar si la web se visualiza desde un ordenador, desde un telfono mvil o desde una tablet. Para las empresas de diseo y desarrollo web, el responsive design ya no es una opcin, sino un concepto que deben implementar en su rutina de trabajo de manera inmediata si quieren ser competitivas y ofrecer a sus clientes un servicio de calidad. Adems, a nivel de costes, el diseo web adaptativo supone un importante ahorro en creacin y mantenimiento, porque evita tener que desarrollar aplicaciones ad-hoc para versiones mviles. En el prximo post explicaremos ms detalladamente en qu consiste el responsive design y compartiremos algunas recomendaciones que circulan por la red para disear y desarrollar sitios con una estructura flexible, que se adapte a los distintos dispositivos disponibles en el mercado. Mientras tanto, os dejamos con unaintroduccin al diseo sensible publicada en el blog xacobe.net.

http://blog.optimizaclick.com/responsive-design/

Qu es el Responsive Web Design

Publicado por Mado Abad en Google, Seo el 30 mayo, 2013 8:00 / 0 comentarios

Seguro que ya has escuchado hablar del Responsive Design o, como se conoce en Espaa, del Diseo web adaptable. Desde que los dispositivos mviles se han convertido en el medio principal para millones de personas, el diseo web exige adptabilidad a los nuevos entornos de los usuarios. El Responsive Web Design trabaja bajo el concepto One Web, es decir, una web para todos que sea accesible y navegable desde cualquier tipo de dispositivo, ya sean dispositivos mobiles, tablets, pantallas wide o las diferentes resoluciones en los computadores. De este modo, con una sola versin de HTML y CSS se reducen costes tanto de creacin como de mantenimiento. Una solo diseo es vlido para cualquier formato. Adems, desde el punto de vista SEO, no se duplica el contenido y se evitan las redirecciones, ya que se muestra una sla URL en los buscadores. Los principales conceptos que se deben tener en cuenta a la hora de realizar un responsive design son: - CSS Media Queries. Permiten activar y desactivar partes del CSS del diseo segn el tamao de la pantalla. - Trabajar con porcentajes. En lugar de trabajar con pixeles, mejor trabajar con porcetajes para ganar la flexibilidad y adaptabilidad. - Imgenes flexibles: Las imgenes no deben tener anchos fijos sino un mximo, para que las imgenes ajusten a todas las pantallas o resoluciones de navegador.

Las ventajas que obtenemos usando un diseo adaptable son muchas pero sobre todo destacara estas dos. 1. Accesibilidad. Desde el punto de vista del marketing la accesibilidad es una de las ventajas ms relevantes del Responsive design, porque permite la visibilidad desde cualquier dispositivo y eso se traduce en leads y ventas. 2. Experiencia de usuario. Mayor visibilidad y mejor experiencia de usuario.

http://www.solomarketing.es/que-es-el-responsive-web-design/

Diseo Web Adaptable o Responsive Web Design. Teatron

ene

29de jbravomontero

Hoy en da los usuarios de nuestras pginas web pueden acceder a las mismas desde diferentes pantallas y medios: un ordenador, una tablet, un mvil, la pantalla del televisor, etc. es decir, desde mltiples pantallas con diferentes medidas y orientaciones.

Partiendo de la base de que el diseo de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseador, en el programador o en el dueo de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo ms placentera posible con independencia de qu medio est usando para verla. Que es el Responsive Web Design? Para ello, la opcin ms habitual hasta ahora era crear diferentes versiones para cada medio/pantalla. Esta opcin supone duplicar el desarrollo y mantenimiento por cada dispositivo en el que queramos mostrar la Web. Otra opcin (y el objeto de este artculo) que se esta poniendo muy de moda y que muchos sitios estn utilizando es lo que se llama Responsive Web Design o Diseo Web adaptable. Son una serie de tcnicas que permiten a nuestra pgina web adaptarse al medio a travs del cual un usuario est accediendo a la misma. Los tamaos de pantalla cambian segn el medio con el que se accede y lo que propone el diseo Web adaptable es adaptar nuestra Web a la pantalla utilizando los elementos que el HTML, CSS3, JavaScritp, etc nos proporcionan. Estas tcnicas se basan en: En el diseo fluido Es decir, en abandonar los anchos fijos de nuestra web. El diseo fluido est pensado en trminos de proporciones: para los anchos de los elementos, de las fuentes, de las imagenes.

En los medias querys Al comprimir mucho el tamao de la pantalla, por mucho que los anchos sean fluidos, puede acabar todo en un caos. Hasta ahora, si necesitbamos conocer el tamao actual de la ventana del navegador, debamos usar JavaScript para recolectar datos de ese tipo desde el navegador y despus darle un uso a esos datos a travs de la modificacin del DOM a travs de mtodos programados en JavaScript. Aunque dicho mtodo es vlido, no es realmente ptimo ni intuitivo. CSS3 nos aporta las media queries que nos proveen de una forma de conocer bastantes propiedades comunes de los dispositivos que nos visitan que podemos utilizar en nuestros archivos de estilo para construir entornos dependiendo de los mismos sin ayuda de JavaScript.

Polmica alrededor del Responsive Web Design Aunque debemos reconocer que Responsive Web Design no esta exento de polmica. Resulta difcil definir en que consiste, ya que en cada pgina o sitio de referencia me encuentro con una definicin distinta. En algunos sitios hablan de conjunto de tcnicas y herramientas, en otros hablan de filosofa, en otros de simple tendencia Estn los detractores que piensan que solo es una tendencia y que va a terminar muriendo, y para otros es el santo grial y la solucin a todos los problemas. El problema, como en todo, rdica en posicionarse en un extremo o en otro, ni es la panacea ni es que no solucione ningn problema. Supongo que la mejor alternativa consiste en un hibrido entre ambas opciones: una versin concreta para cada rango de dispositivos, utilizando el Responsive Web Design dentro de cada rango para ajustar la Web a las posibles diferencias. No tiene sentido por ejemplo que a un movil se le envie la misma cantidad de contenido (aunque este oculto) que a una web que se visualiza desde

un ordenador. Pero dentro de los rangos de moviles existen diferencias como por ejemplo verlo en horizonal y vertical que podemos solucionar con el diseo fluido y los media querys. Teatron y Responsive Web Desgin Para Teatron hemos realizado un nuevo diseo y hemos aprovechado el cambio para utilizar las tcnicas antes descritas. Esto nos ha permitido por fin mostrar una Web que se pueda ver con mucha ms comodidad en todo tipo de pantallas. De esta manera a partir de este lunes, 30 de Enero del 2012, os resultara ms sencillo disfrutar de Teatron desde vuestros mviles o ipad. Queda trabajo por hacer, ya que no es una tcnica sencilla, pero esperamos que los resultados os gusten.

Todo esto ha sido posible gracias a Emanuele Rodriguez nuestro diseador Web del cual parti la idea inicial de implementarlo de esta manera. Referencias [1] http://www.emenia.es/diseno-web-adaptable-o-responsive-webdesign/ [2] http://www.getfinch.com/2011/08/its-not-responsive-web-building-

its-responsive-web-design/ [3] http://mediaqueri.es/ [4] http://coding.smashingmagazine.com/2011/01/12/guidelines-forresponsive-web-design/ [5] http://indexante.com/post/responsive-web-es-un-tecnica-incompleta [6] http://noteandpoint.com/documents/pdf/hugomnlhpd.pdf [7] http://kevinjohngallagher.com/2010/06/responsive-design-isirresponsible/
http://jbravomontero.wordpress.com/2012/01/29/diseno-web-adaptable-o-responsive-webdesign-teatron/

Responsive Web Design

Prximas ediciones

Del 10/09/2013 al 12/09/2013:Donostia-San Sebastin (Gipuzkoa) Del 08/10/2013 al 10/10/2013:Donostia-San Sebastin (Gipuzkoa) Del 22/10/2013 al 24/10/2013:Vitoria-Gasteiz (Araba) Idioma de imparticin Espaol

Desde la irrupcin de los smartphones y tablets, el ordenador ha dejado de ser el nico modo de acceso a Internet. Sin embargo, nuestras pginas web estn diseadas pensadas para escritorio, por lo que cuando consultamos una web desde un dispositivo mvil no es nada cmodo. Gracias al Responsive Web Design podemos implementar una nica web que se adapte a cada dispositivo de la mejor forma posible.

Dirigido a
El curso/taller va dirigido a programadores, maquetadores y diseadores grficos con experiencia en maquetacin, por lo que es necesario tener conocimientos tcnicos. Se recomienda al alumno que asista al curso con un smartphone/tablet si posee alguno.

Objetivos
Dar a conocer el concepto de Responsive Web Design, sus tcnicas y ventajas, y aplicar los conocimientos adquiridos en prcticas basadas en casos reales.

Contenido
das 1 y 2: Conceptos tericos Introduccin: qu Pilares es el Responsive fundamentales Web del Layout Contenido (Imgenes Design (RWD) RWD: flexible. flexible: videos) Mens Tablas ...

Multimedia

Media Queries En cada uno de los apartados se darn a conocer y explicarn las diferentes libreras, frameworks, herramientas y otros recursos tiles que existen para cada uno de ellos, as como los problemas (y soluciones) que nos encontramos a la hora de implementarlos. Tambin se mostrarn ejemplos prcticos en pginas web actuales. da 3: Taller prctico El alumno aplicar los conocimientos adquiridos en diferentes prcticas propuestas, tomando como base una web de ejemplo pensada especficamente para ellas: Prototipado rpido pensando en varios tamaos (mvil, tablet, escritorio), orientaciones, etc. Implementacin de diferentes libreras para adaptacin de contenido flexible. Creacin y modificacin de Media Queries. etc. El alumno, si lo desea, podr realizar las prcticas sobre una web propia.

http://www.euskadinnova.net/es/enpresa-digitala/agenda/responsive-design/6885.aspx

Responsive Design
By Susana Gonzalez Pese a ser perfectamente conocido por los diseadores web, el concepto responsive (web) design no ha trascendido al gran pblico. No obstante, muchos de nosotros hemos hecho referencia a este concepto.

La gente suele hablar de l en estos trminos: que mi web se vea bien en el iPhone. En castellano podra traducirse como diseo sensible, pero este trmino no ha tenido mucho xito. As pues, continuar utilizando el original en ingls. Cuando aprend a disear pginas web, por all a finales del 2008, los principios que me ensearon fueron los siguientes: una pgina web consiste en una tabla con un ancho fijo, centrada en el lienzo, y compuesta por filas y columnas por donde se va distribuyendo el texto, los hipervnculos y las imgenes que conforman el contenido. Hasta entonces, los ordenadores de mesa haban sido la plataforma a travs de la cual la gente mayoritariamente navegaba por Internet. No obstante, con la creciente popularizacin de los mviles con acceso a Internet, se observ que, a travs de estos dispositivos de pequeo tamao, las pginas web quedaban deformadas o cortadas, resultando muy poco agradable desplazarse por ellas. La respuesta lgica por parte de los diseadores fue la de crear diferentes versiones del mismo sitio web. Sin embargo, esta opcin empez a ser poco prctica cuando, adems de los mviles, fue posible navegar por Internet a travs de pequeos ordenadores porttiles, tabletas, etc., con resoluciones diferentes en funcin de la marca. No era viable crear un diseo para cada uno de los dispositivos. Es en este punto cuando, en mayo de 2010, el diseador de pginas web Ethan Marcotte public un artculo, titulado Responsive Web Design. En su artculo, Marcotte haca referencia a la aparicin de una nueva disciplina dentro de la arquitectura, llamada responsive architecture. El

principio de esta disciplina era el diseo de espacios fsicos adaptables a contextos cambiantes. Ejemplos de arquitectura sensible son paredes que se pueden desplazar, climatizadores que se adaptan a la temperatura ambiente, cristales que se vuelven opacos con la exposicin directa de la luz solar, etc. Lo que Marcotte hizo fue tomar este concepto y aplicarlo al diseo de pginas web.

*Ethan Marcotte,Responsive Web Design, A List Apart (25 de mayo de 2010)

En qu consiste el responsive web design? El resposive web design supone la substitucin de la tabla fija por una cuadrcula fluida (fluid grid), un diseo flexible y adaptable al contexto. El responsive web design no se basa en medidas concretas, sino en proporciones que permiten que el diseo se modifique en funcin de las

dimensiones del dispositivo a travs del cual estamos viendo la pgina web. De este modo, los elementos de una pgina fluyen de manera dinmica para adaptarse al observador. Se trata, en definitiva, de un verdadero cambio de paradigma, como el paso de la fsica newtoniana a la fsica cuntica.

*Google Trends registra la primera bsqueda de las palabras responsive design a finales de abril de 2011. A partir de entonces, el
nmero de bsquedas ha ido en aumento.

La adaptabilidad que proporciona el responsive design atae a todos los elementos de la pgina web: imgenes, texto, columnas, mens, etc. Y la adaptacin puede conllevar desde el cambio de tamao o de posicin hasta la completa desaparicin de algunas secciones. Aqu os muestro un ejemplo de sitio web con responsive design visto a travs de diferentes resoluciones.

*Podis

ver

ms

ejemplos

en mediaqueri.es

*Si queris comprobar cmo se ve vuestro sitio web en diferentes dispositivos, os recomiendo visitar quirktools.com. Slo tenis que escribir vuestra URL y seleccionar el dispositivo.

Ms all de las tcnicas concretas sobre las que se fundamenta, el resposive design tiene una implicacin fundamental que sera bueno no pasar por alto. Se trata del concepto de cambio. El objetivo ltimo del responsive design es mantener la unidad de concepto modificando el diseo en funcin del contexto. En otras palabras, modificar los detalles para as conservar la identidad. Una de las batallas constantes que tienen los diseadores de todo tipo con sus clientes es la necesidad de cambiar el diseo de logos, textos, imgenes, presentaciones, sitios web, etc., en funcin del contexto. El cliente mantendr que su logo, su tipo de fuente, su lo-que-sea corporativo es uno en concreto y, por lo tanto, deber conservarse igual en todos los lugares en los que aparezca. Lo que el cliente no comprende es que al mantener el mismo diseo en contextos diferentes, ste adquiere un aspecto diferente y, en general, a peor. Es preferible, pues, modificarlo de manera que, pese a no tener la elegancia o sofisticacin del modelo original, parezca igualmente bueno.

En pintura, este principio es bien conocido. Por poner un ejemplo, observemos el siguiente cuadro.

*Edouard Leon Cortes, Place de la Madeleine (Rehs Galleries)

Como puede apreciarse, con unos pocos trazos irregulares, el pintor representa las hojas de los rboles. No ha sido necesario dibujar con todo detalle cada una de las hojas para que el aspecto sea similar a la realidad. De igual forma se han pintado las luces, ventanas, o los reflejos en el suelo mojado. En lo que referente a pginas web, un buen responsive design deber saber mantener aquellos elementos que permitan identificar la personalidad de la entidad o empresa a la que pertenece el sitio web,

destacar los elementos que permiten acceder a las diferentes secciones y eliminar todo aquello que sea superfluo. Como dice Daniel H. Pink, hoy en da, todos debemos ser diseadores. Evidentemente, el objetivo no es convertirnos todos en diseadores web. A travs de este artculo he querido mostrar cmo algo que parece tan extrao a los no iniciados como el diseo de pginas web, en el fondo se basa en principios bsicos aplicables a todos los mbitos. Es importante comprender que lo que entonces era el cliente ahora es el usuario. Y el usuario busca experiencias adems de servicios o productos. Es en este punto donde el diseo es esencial. El diseo puede marcar la diferencia. El diseo es, de hecho, la diferencia. Seamos, pues, diseadores.
http://sugoru.wordpress.com/2012/01/29/responsive-design/