Llevo tiempo queriendo preparar un tutorial sobre el diseño web adaptable, o Responsive Web Design (en inglés), y creo que ya va siendo hora.

En las próximas entradas, que usarán el tag Responsive Web Design, iré detallando algunas de las propiedades de este tipo de diseño en la red, con sus peculiaridades, así como un acercamiento al HTML5 y CSS3. Dejaré de lado la programación pura y dura, quitando algún ejemplo ocasional, ya que entiendo que los que leáis esta guía tenéis nociones de HTML y CSS. Pero antes de nada, tendremos que entender de que va todo esto.

 

Qué es el Responsive Web Design

El Responsive Web Design es un modelo de arquitectura web enfocada a la optimización visual y de contenido de la página en diferentes medios (y por tanto diferentes pantallas). Por tanto, es totalmente comprensible que se trata de una arquitectura de vital importancia en la actualidad, con la entrada en el mercado de los smartphones y los tablets, y la división de plataformas existentes.

 

Porqué debo adaptar mi web a Responsive Web Design

Hay varios motivos claros, y otros que a nivel de desarrollo simplifican la vida:

  • Según el modelo de Responsive Web Design, las actualizaciones se hacen más o mucho más rápidas que en el diseño convencional. Esto es debido a que únicamente se diseña para todas las plataformas a la vez, y no para cada una por separado.
  • Otro aspecto a tener en cuenta, es la reducción de costos por mantenimiento (y de paso la facilidad para ello), y la presencia de la web en todas las plataformas, por lo que si procede, aumentarán los beneficios.
  • Al enfrentarte a los entresijos de diferentes plataformas, por lo general, el código está más estudiado, y funciona mejor que si únicamente has tenido en cuenta un explorador determinado. Esto hace que debas optimizarlo al máximo, con la consiguiente accesibilidad y conversión.
  • Una web que siempre se ve bien, atrae al cliente o lector. Los fallos, por diminutos que sean, alejan al visitante. Es por ello que lo nuevo, si bien hecho, atrae y llama la atención, y por tanto, genera más tráfico estable.

 

Cómo empezar a diseñar con Responsive Web Design

Aprovecho la ocasión para dejaros algunos enlaces (algunos en inglés) con tutoriales sobre cómo programar diseño web adaptable, aunque una búsqueda de unos segundos en internet os brindarán los mismos resultados:

 

En las siguientes entradas de Responsive Web Design iremos detallando diferentes aspectos del Responsive Web Design y cómo aplicarlo en nuestros proyectos.

 

Otros artículos relacionados