Feliz Navidad 2011

El Mejor Regalo de Navidad es una sonrisa.. X eso Aqui esta la Mia !!!

Feliz Navidad para todos nuestros Fans, Amigos, Clientes y todos los seres que aman.

Que es diseño web Responsivo o adaptable

Oct 29, 2012   //   by Diseño Web Roger Soto   //   Programacion  //  7 Comments

Diseño Web Responsivo ó Diseño Web Adaptable (Responsive Web Design) es un concepto que combina CSS, CSS3 y JavaScript para crear diseños web fluidos y adaptables que se pueden ampliar, contraer, reorganizar o eliminar el contenido en función del tamaño de la pantalla del usuario.  (como ejemplo sirve este Blog, cambia si lo ves desde un celular, un tablet, o una pc)

Hoy en día los usuarios de nuestras páginas web o tiendas onlinepueden acceder a las mismas desde diferentes medios: un computadora de escritorio con pantalla panorámica, un móvil, un tablet, etc, Partiendo de la base de que el diseño de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseñador, en el programador o en el dueño de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo más placentera posible con independencia de qué medio esté usando para verla. Es por ello que últimamente tantos sitios webs están utilizando lo que se llama Responsive Web Design o Diseño Web adaptable.

En vez de desarrollar sitios web diferentes para los dispositivos con distintos tamaños de pantalla y capacidades, una web con un diseño Responsivo (adaptable) reacciona de manera flexible para ser visualizada de forma óptima en cualquier pantalla, desde un monitor de escritorio de 27 pulgadas hasta una pantalla de Black Berry de 320 x 240 píxeles .

Ventajas del Diseño Web Responsivo o adaptable

  • La principal ventaja es una sola web para todos, es decir se evita el trabajo de estar diseñando y manteniendo una web para cada dispositivo como se hacia antiguamente.
  • Mejora experiencia del usuario, al estar navegando en una web nativa para su dispositivo.
  • Mejora el costos de mantenimiento y desarrollo, ya que no se tiene que hacer una web para cada tipo de dispositivo.
  • Mejora la optimización de motores de búsqueda, sólo aparecería una URL en los resultados de búsqueda.

Desventajas del Diseño Web Responsivo o adaptable

  • Tiempo de carga lento en dispositivos moviles, ya que diseñamos imagenes de tamaño grande para una pantalla de gran resolucion y luego esa misma images es enviada aun dispositivo movil que muestra imagenes mas pequeñas
  • Uso intensivo del procesador del movil, ya que enviamos las imagenes en tamaño completo, son los moviles los que se encargan de escalar las imagens a tamaños pequeños y generalmente esto estresa al procesador del movil.

Como todo trabajo bien hecho el Diseño Web Responsivo demanda un esfuerzo adicional a la hora de desarrollar un sitio web. Pero el trabajo se capitaliza al no tener que realizar una web para cada dispocitivo.

Si quieres aprender a hacer un pagina Web Responsivo o adaptable, no te pierdas el proximo tutorial que estamos desarrollando, si lo que necesitas es una web responsiva pero no quieres liarte con codigos y cosas que parecen magia china, no te preocupes solo ponte en contacto con nostros y en menos tiempo de lo que imaginas tendras tu Diseño Web Responsivo o adaptable.

7 Comentarios

  • Genial!, has probado twitter bootstrap? es un framework de twitter que ya viene por defecto con diseño responsive

  • Si las imagenes se tardan un poco en cargar, pero se contrapesa en otros detalles como el CSS, y además de qu epuede tener funcionalidades muy agradeables e impresionantes en navegadores como Chrome..muy buenas

  • Buenos días deseo saber como crear un sitio web responsivo, si ustedes tienen un tutorial donde me explique como diseñar web responsivos, me lo pueden proporcionar? y si fuera el caso que ustedes tienen forma de enseñarme o saben de algún curso donde yo pueda aprender me pueden decir?

    Saludos y quedo en espera de pronta respuesta.

  • Yo opino que la neta el bootstrap es una maravilla de cómo hace el calculo para distribuir los elementos pero es inexacto, el problema de hacer diseño responsivo es que caes en basicamente en una plantilla, solo vean la mayoría de los sitios responsivos comparten la misma estructura: 1) encabezado 2) contenido 3) menu lateral (por lo general de lado izquierdo) y 4) pie lo que al final resulta semejante a un blog, entonces en front ya te limitas a una estructura estilo plantilla, el responsivo no te deja desarrollar! no mas te deja programar. Saludos

    • Hola Fernando, comparto hasta cierto punto tu opinión, los framework son eso, marcos de trabajo, y no nos podemos salir del marco, pero lo que los frameworks nos limitan es el diseño y no la de la programación, ya que el diseño siempre debe mantener la misma estructura para todas la paginas, cabecera y pie de pagina, además nos permite manejar cómodamente los sidebar, pero esta es nosotros usarlos y donde usarlos, además podemos disfrazarlos un poco con un buen diseño. Pero el limite no está en el diseño responsivo sino en el diseño usando el framework. El diseño responsivo lo puedes realizar sin utilizar un framework.

  • Es cierto que hay muchas ventajas y solo algunas desventajas de tener el diseño responsivo, todo depende del tipo de pagina y los plugins que tengas, me gustaría complementar las ventajas que tiene este tipo de diseño. http://isopixel.net/2016/05/09/ventajas-del-diseno-responsivo/

  • De acuerdo las páginas responsivas aumentan la posibilidad de visibilidad en la web, gracias por el artículo muy bueno. http://www.pixel-gd.net

Que opinas de esto?