Introducción a RWD – Responsive Web Design

En primer lugar antes de empezar con este post me gustaría aclarar que no soy un profesional en Diseño Web Adaptable, si buscas a alguien más especializado en el tema habla con el Sr.@Wakkos o con el Sr.@midesweb, ellos te informarán sobre los seminarios tan interesantes que imparten acerca de Responsive Web Design, yo simplemente soy un usuario muy interesado en el tema, y conforme vaya avanzando en mi aprendizaje y cuando el tiempo me lo permita iré publicando todo lo aprendido hasta el momento ya que pienso que el compartir la información es un bien para todos, así que si tú también estás empezando o ya eres un gurú en el tema pero quieres ayudar a los demás, este es tu sitio.

Dicho esto entraremos un poco en materia. En la web, ha sido, es y será indispensable que la experiencia final del usuario sea lo más agradable y atractiva posible con independencia del medio que esté utilizando, pero actualmente dado el gran número de dispositvos existentes no sería posible crear solo un único sitio web para cada uno de ellos, aquí es donde entra en juego Responsive y ejerce su función haciendo que el código sea único y se adapte de un modo fluido al dispositivo en el que está siendo visualizado.

Este entre otros, es el principal motivo por el cuál últimamente tantos sitios web están utilizando Responsive Web Design. Como ya dije en el artículo anterior, ¿quién no desea que su blog personal o la propia web de su empresa se adapte a todas las resoluciones y funcione en todos los dispositivos de una forma fluida?

Responsive-Web-Design1

Por lo que he visto hasta ahora (que no es mucho, pero si bueno y muy interesante, hasta para hacer un curso vamos), a mi parecer Responsive podría dividirse a groso modo en cuatro conceptos:

  1. Diseño Fluido o Adaptable:
    En esto se basa Responsive, donde se abandonan los anchos fijos pasando a los fluidos, dándoles términos proporcionales para que la web se adapte a la pantalla sea en el medio que sea.
    • En este primer concepto, empezaremos viendo como se comportan los diferentes elementos de un sitio web Responsive, englobaremos los siguientes:
    • Las cajas.
    • Las fuentes
  2. Imágenes flexibles:
    Se adaptan a los anchos de sus contenedores dependiendo de la resolución del dispositivo.
    • Imágenes en navegadores standars.
    • Imágenes en IE6 y IE7.

  3. Los Media Queries (Forman parte de CSS3):
    Inspeccionan las características físicas del dispositivo donde va a mostrarse el sitio web.
  4. Un diseño para todas las resoluciones:
    Diferentes tipos de resoluciones para pantallas de ordenador y resoluciones de diferentes dispositivos como Smartphones y Tablets, tanto en modo portrait (vertical), como en landscape (horizontal), todo en el mismo código.

Responsive Web Design

David Martín Surroca

Anuncios

3 pensamientos en “Introducción a RWD – Responsive Web Design

  1. Pingback: Cocktail de cambios en La nostálgica Coctelera (I) – La nostálgica Coctelera

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s