Diseños web adaptativos (responsive)

Publicado por & archivado en CSS.

pantallas mobil tablet ordenador

Imagen de imperavi.com/kube/

En algunos post que hemos publicado últimamente ya hemos hablado de la importancia de que los diseños web se vean correctamente en todos los dispositivos con tamaños pantalla diversos (ordenadores de mesa PC y Mac, dispositivos móviles como teléfonos y tabletas iOS, Android,…).

Básicamente, existen dos métodos para hacer un sitio web se vea correctamente en diferentes dispositivos:

  • El primer método es crear un sitio web específico para móvil con sus propias URLs y sus propios contenidos.
  • El segundo método es adaptar el sitio web existente para que se vean bien en ordenadores y en dispositivos móviles.

¿Cuál es la opción recomendada por Google a día de hoy? Pues la segunda, los diseños web adaptativos. ¿Por qué? Sólo tendrás una URL canónica para tus contenidos, evitas redirecciones difíciles, a la hora de compartir contenido será más fácil y además mantener dos sitios siempre es más tedioso que mantener uno.

¿Pero como se adapta un sitio? Pues con diseños web adaptativos (también conocidos como diseños responsive o líquidos). Es decir, se requiere de una programación HTML y CSS muy avanzada y bastante más complicada la cual irá adaptando y moviendo elementos de tu sitio web para que se vea distinto según la pantalla.

Pero para facilitaros la vida un poco, hemos hecho una pequeña selección de frameworks adaptativos para que no empieces desde cero. Es decir, código CSS que te ayuda a crear cuadrículas que se adaptan a los distintos tamaños de pantalla.

Los frameworks que recomendamos desde Artimedia son:

Bootstrap

diseno web adaptativo bootstrap

Captura web twitter.github.io/bootstrap/

Este framework se ha creado desde twitter y es muy sencillo, intuitivo y elegante que permite desarrollar sitios web adaptativos de manera muy sencilla y rápida. El framework solo se basa en tres carpetas. La carpeta con los archivos CSS, una carpeta con un par de imágenes y una carpeta con archivos js (JavaScript). A partir de aquí, solo deberás llamar a estos ficheros desde tu HTML y podrás crear infinidad de cuadrículas (http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem).

Este framework tiene licencia creative commons y puede ser usado para fines comerciales de manera gratuita.

Foundation 4

diseno web adaptativo foundation 4

Captura web foundation.zurb.com

Foundation es también un framework que te permite realizar (maquetar) sitios web adaptativos de manera rápida y con garantías de que sea compatible con el mayor número de plataformas (tipos de dispositivos y navegadores). Otra de las grandes ventajas de este frameowrk es que cuenta con una buena documentación. Está en inglés, pero es muy fácil de leer y seguir y tiene una gran cantidad de ejemplos de HTML. Otro aspecto que nos da garantías de que estamos usando un buen código CSS es que grandes lo están utilizando, como por ejemplo PIXAR y National Geographic.

Aquí te dejo algunas opciones más:

Espero que te sean de ayuda. Si conoces alguno más no dudes en compartirlo aquí. 😉

Un Comentario para “Diseños web adaptativos (responsive)”

  1. Diseño Web

    Ya que muchas personas empiezan a tener smartphone o tablet, se recomienda usar el responsive para mejorar la compatibilidad de las páginas con las pantallas de los dispositivos. De la misma forma pueden crear diferentes versiones de páginas para adaptarla según la resolucion de usuario.

    Responder

Deja un comentario

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

Utilizamos cookies de terceros para recoger información sobre sus visitas y su uso de nuestra web. En caso de continuar navegando por esta web entenderemos que acepta el uso de estos dispositivos. Más información: Política de Cookies .

ACEPTAR
Aviso de cookies
Artimedia