BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Mis primeros pasos en el Responsive Web Design

06/JUN/2012 10.247 visitas Ver comentarios
Mis primeros pasos en el Responsive Web Design

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

En esto del desarrollo web como en la vida, siempre toca evolucionar. Y evolucionar, en términos de informática, quiere decir incorporar nuevas prácticas, nuevos conocimientos y técnicas para optimizar el flujo de trabajo, consiguiendo un producto final de mejor calidad en el menor tiempo posible.

Esta vez, le ha tocado el turno al Responsive Web Design, o diseño web responsivo... o, en cristiano, el diseño web que se adapta a todos los dispositivos, según tamaño de pantalla u orientación, sin tener distintas versiones de tu web... Qué quiere decir ésto? Que partiendo de la base de un sólo código, es decir una única página web, mediante algunos .JS y muchas líneas de CSS, obtendrás la versión adecuada para el tamaño de la pantalla de tu visitante.

Qué ganamos con ésto...
Pues que tu página web se vea correctamente, al tamaño adecuado, sin hacer zoom, sin tener desplazamiento horizontal y sin fastidiar al usuario, dándole los contenidos que viene a ver en un tamaño acorde al aparatito que está usando.

Qué perdemos con ésto...
Pues sobre todo, tiempo. Piensa en hacer una web para escritorio, al típico 960px o 980px de ancho y luego empezar a retocar el CSS para empezar a reducir el dispositivo, pasando por un tablet apaisado, luego si lo rotamos a modo retrato... y luego, como somos más tecnofrikies que nadie, nos pasamos al móvil y también jugamos a ponerlo en modo retrato o paisaje. Pues bien, el CSS para todos esos dispositivos no se escribirá solo (lamentablemente).

Un caso real...
Pues bien, hace unas semanas me volqué a crear mi primera web con maquetación responsiva. Si bien es cierto que es una web sencilla, sin gestor de contenidos y sin mucha imagen dando vueltas, solo iconos que se adaptan mucho mejor que las imágenes (para lo cual estoy de acuerdo con mi amigo Marcos, quien dice que aún le falta al tema del responsive con la optimización de imágenes).

En mi caso, he partido de la base del framework Skeleton, que te descarga unos .JS para versiones de Explorer y un CSS ya pre-escrito con las media queries ya definidas a las que sólo tienes que agregar tu propio css personalizado por versión.

Debes tener en cuenta...
Necesitarás usar a la fuerza algún método para detectar las resoluciones, ya sea CSS3 o algún plugin en Javascript, y las alternativas para versiones 8 y anteriores de Internet Explorer. Te aconsejo cualquiera de los frameworks.

Debes saber...
Aquellos navegadores que no soportan css3 -léase IE8 y anteriores-, mostrarán siempre el CSS definido por defecto, ya que no harán caso de las media queries que tengas en tu hoja CSS.

Frameworks...
Te dejo una lista de Frameworks con los que te puedes descargar la base para tener por donde empezar y los .JS o media queries ya escritos en css3.

Lecturas recomendadas...
Te dejo unos enlaces de lecturas recomendadas o tutoriales para meterte de lleno en el mundo del Responsive Web Design.

Lectura recomendada...
Todos los libros que venden en A Book Apart están más que recomendados para el desarrollo web Responsive, para uso de HTML5 y css3.

Pendiente...
Pasar esta web a Responsive y hacer uso de HTML5.

Me gustaría que si ya utilizas algún framework, html5, css3 y hagas maquetaciones responsive, me dejes tu experiencia o comentarios. Serán muy bien recibidas ;)

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018