Diseño Web Responsive

Seguro que si recientemente te has interesado por el mundo del diseño web o el desarrollo web has oído hablar del diseño responsive (o lo que es lo mismo, pero llamado de forma distinta, diseño web responsable, adaptable o adaptativo)

El diseño web responsive es un término relativamente frecuente, que persigue un a estrategia de creación de webs en base a contenidos e imágenes fluidas. Seguro que recuerdas hace unos años, cuando tratábamos de acceder a una web y nos decía que para su correcta visualización era necesario cambiar nuestra resolución de pantalla. Pues esto se acabó. Ya no diseñamos más para resoluciones concretas. Nuestra web es capaz de adaptarse a todos los dispositivos y tamaños de pantalla, ¿Suena bien verdad?

Con esto conseguimos que sea cual sea el tamaño de la pantalla del portatil donde se visualiza, nuestra web va a ser capaz de adaptarse al tamaña del mismo, sin que esto afecte al contenido ni al diseño. Pero es que aún hay más: la misma web es capaz de mostrarse y adaptarse en tablets y móviles sin que el usuario tenga que hacer zoom. Doblemente genial.

Diseño web adaptativo

¿Qué otras ventajas tiene el diseño web responsive?

En SiloCreativo estamos convencidos de que una web responsive solo tiene hoy por hoy ventajas. Es más, una web responsive no sólo está preparada para el día de hoy, sino también para el de mañana, pues sea cual sea el próximo tamaño de pantalla o próximo smartphone, nuestra web estará preparada para adaptarse a él.

Estas son algunas de las ventajas de diseño web adaptativo:

Misma versión y contenidos en tablet, smartphone y ordenador: es decir, no hay que editar y subir tres tipos de contenidos, ni mantener tres tipos de web. Un contenido, una web…y muchos visitantes!

Estamos en movil! Seguro que si tienes una empresa o algún negocio te han sugerido más de una vez que lances una app, que estás perdiendo una gran cantidad de público y tal…Con una web responsive, vuelves a estar disponible a ese target sin la inversión que puede suponer lanzar una app.

Google y SEO. A Google le gusta el responsive, y a ti te gusta que tu web se posicione en Google. Pues no se hable más! Google en las últimas actualizaciones está comenzando a posicionar mejor las webs que cuentan con diseño responsive, sobre todo si la búsqueda proviene desde un dispositivo móvil. Y esto solo es una tendencia…

Preparados para el futuro. Cada día salen al mercado nuevos dispositivos, nuevos tamaños de pantalla, los televisores comienzan a tener acceso a internet y cuentan ya con navegadores, las videoconsola (como la Xbox) ofrecen también navegación web…¿Vas a estar pendiente de modificar tu web o lanzar una versión para cada dispositivo? Eso no es viable, adelántate a los acontecimientos y prepara tu web para el futuro

PD: como siempre, en casa del herrero, cuchara de palo. Aunque todos nuestros últimos trabajos de diseño web son responsive, nuestra web todavía está en proceso! Prometemos sacar un poco de tiempo para adaptarla…:D

Escrito por 

Hola! Mi nombre es Ricardo Prieto y trabajo (y escribo) sobre diseño web, maquetación y experiencia de usuario en SiloCreativo, desde donde ayudamos a personas a desarrollar sus proyectos con tutoriales, consejos y recursos.

4 Comentarios en “Diseño Web Responsive

  1. Esther

    Hola, tengo una duda a ver si me la puedes aclarar..
    Estoy haciendo un diseño con illustrator/photoshop para mandarlo por mail. Pero no es responsive. ¿Como hago para que se vea bien en todos los dispositivos?
    ¿Éxiste algún código estandar?
    Básicamente busco un camino que me permita hacerlo sin complicarme la vida.
    Gracias
    Un saludo

    1. Saludos Esther, gracias por comentar.

      Illustrator o Photoshop son herramientas de edición gráfica, pero por si mismas no crean un diseño responsive ya que son herramientas de composición estáticas.
      Lo que se suele hacer es diseñar las vistas de cada página para las diferentes resoluciones y después maquetar esto en CSS y HTML basando el diseño responsive en lo indicado por el diseñador en esos archivos o composiciones estáticas.

      Espero que te sirva la explicación. Suerte!

  2. damian

    Buenas tardes! estoy recientemente creando sitios web, tengo una duda sobre como hacer un bosquejo de como seria la pagina en distintos dispositivos.

    Por ejemplo. la imagen que tienes arriba donde se especifican las resoluciones de cada uno de los dispositivos
    en que plataforma puedo desarrollar

    Saludos!!

    1. Saludo Damian,

      el proceso de diseño web para responsive tiene varias formas de realizarse. Hay quien diseña directamente en el navegador y quien prefiere diseñar tres o más bocetos en diferentes resoluciones con Photoshop o Illustrator antes de comenzar a maquetar en HTML y CSS. Lo impontante es decidir si empiezas trabajando desde la resolución mas pequeña a la mayor (mobile first) o al contrario.

      Suerte!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *