Responsive Web Design.

He asistido a un Workshop relacionado con el Responsive Web Design (RWD), impartido por la empresa Swwweet y sus dos miembros, Javier y Marta. Desde aquí les mando un saludo.

Como algunos ya sabréis mi nuevo proyecto y motivación es la programación web por lo que el taller ha sido muy constructivo. El RWD se presenta como una solución al problema que se encuentran los desarrolladores web con las diferentes resoluciones y tamaños de los dispositivos que se conectan a la web a día de hoy; sobremesa, tablet, smartphone...

Significado del concepto/termino.

Por el momento no hay una palabra o frase traducida al castellano literalmente, ya sabemos como somos los españoles al traducir términos y aquí la traducción no es "responsable", en todo caso somos nosotros los responsables en decidir si hacemos el RWD o no.

En el taller se dieron muchas vueltas sobre este tema y la conclusión fue unánime, lo mejor es usar el término en inglés y esperar a que algún autor de renombre se moje y traduzca el término. Yo lo traduciría como "Diseño escalado de webs" y ahora veréis el porque.

Que es el RWD?

Ya lo he ido desgranando un poco y vendría a ser a grandes rasgos la creación de una sola web para que se visualice en diferentes dispositivos y resoluciones a través de unas ordenes específicas (media query) en la hoja de estilos (CSS). No solo sería para una correcta visualización en diferentes tamaños de pantallas sino también para cuando minimizamos nuestros navegadores (sobremesa) el contenido siempre se vea centrado y la web vaya ajustandose al tamaño de la ventana.

Nos recalcaron que hay que empezar a cambiar la mentalidad a la hora de diseñar una web. Tenemos que pensar en el "contenido" más importante y a partir de allí diseñar el resto. Tampoco hay que diseñar para modelos específicos de dispositivos (iPhone, iPad..) sino más bien para resoluciones/tamaños estándard y ya los dispositivos se adaptaran al estilo CSS que le pertoque.

Como hacerlo?

Uno tiene que dejar de usar las medidas absolutas y empezar a usar porcentajes y medidas relativas. Claro que seguiremos usando "píxeles" pero para los contenedores e imágenes usaremos el "%" y para la tipografía usaremos el "em". Al usar el "%" en los contenedores estos crecerán o disminuirán en función del tamaño de la ventana del navegador. Y hablando del "em" al ser unidades relativas al font-size de su padre, si cambiamos el font-size del body en una media query a partir de un tamaño determinado, todo lo que esté en ems cambiará de tamaño proporcionalmente. Calculadora pxtoem

 

También habría que tener en cuenta las imágenes y que cada día los dispositivos tienen más resolución por pantalla que antes. Sin ir más lejos el nuevo iPad posee más píxeles que un televisor HD. Nos han propuesto empezar a usar imágenes SVG, que serían gráficos vectoriales escalables. Consiste en crear imágenes con vectores para que no queden pixeladas. Tema complicado.Para los videos que son externos y se cargan a través de un iframe o mediante el plugin de flash tendríamos que usar el script fitvids..

Tal vez no os habré solucionado la vida pero espero haber sido lo más claro posible y que el RWD se entienda un poco más, encontraréis mucha información en Media Queries.

Para quien esté en la duda de si empezar o no con la programación web, desde aquí te motivo para que lo hagas. No es fácil pero no imposible, HTML y CSS son lenguajes descriptivos y prácticamente lo que piensas lo plasmas. Ya con los scripts sería otra cosa y ahora que estoy con el PHP la cosa se complica algo, pero con ganas se puede!!! Ya os contaré.

comments powered by Disqus