Crear una web responsive

Crear una web responsive

Antes de entrar en materia aclararemos antes el concepto clave del tema que tratamos.

¿Qué es el Responsive Design o qué es una web responsive?

El responsive design es la técnica que se usa para que una sola web se adapte sola a las distintas resoluciones de los dispositivos (sobremesa, portátil, tablet, smartphone…) desde que se accede a ella.

Consiste en varios archivos CSS3, que usando el atributo mediaquery transforman una web normal en una web adaptable en vez de hacer distintos diseños de la misma web “optimizados” para ciertas resoluciones. Conseguiríamos con una sola web hacerla visible a la perfección en cualquier pantalla.

Si aún así no estás convencido de por qué deberías hacer tu web responsive aquí van unas cuantas ventajas…

  • Mejor experiencia de usuario. Eso repercute en la opinión que los usuarios tienen de tu sitio web y el uso que le darán a ella. Mejorará tanto tu imagen de marca como el tiempo de permanencia en la web y aumentará la tasa de rebote entre páginas de tu web.
  • Se acabaron los contenidos duplicados o desfasados. Si usabas una versión móvil para que los usuarios que accedían a tu web vieran el contenido adaptado al dispositivo, era perjudicial para tu SEO, ya que eso creaba contenido duplicado y por lo tanto Google penalizaba a tu web. Un diseño Responsive evita este problema ya que es el mismo contenido que se organiza de manera distinta según el dispositivo en el que se vea. Sin olvidar que una web “repetida” para distintas resoluciones es un infierno mantenerla ya que para un simple cambio debes de modificar muchísimos archivos.
  • Aumenta la viralidad. Un reciente estudio certifica que el 70% de los accesos a las redes sociales se hacen a través de dispositivos móviles, eso significa que si un usuario accede a nuestra web a través de un Smartphone, seguramente tenga las aplicaciones sociales abiertas y si quiere compartir algo, es mucho más rápido y natural.

Pero como no regalan nada en esta vida una web responsive tiene sus inconvenientes, es una web mucho más compleja de programar lo cual encarece desde un principio su precio final y el tiempo en el que puede estar preparada. Además también hace la carga de imágenes más lenta ya que las imágenes son de un tamaño mucho mayor al de las webs con diseños fijos.

Siempre podemos agilizar un poco el diseño y ayudarnos de plantillas o “diseños tipo” y no tener que escribir todo desde 0, para empezar a crear una web responsive os dejo unas sencillas herramientas que os facilitarán la vida muchísimo.

Herramientas responsive

 

responsive-image

Imágenes responsive

 

 

 

 

 

 

 

 

 

responsive-sketch-sheets

Plantilla de diseño responsive

 

 

 

 

 

Responsive-Widths-3-Layouts_0

Diagrama de dispositivos para planificar un diseño responsive

 

 

 

 

skeleton

Skeleton

 

 

 

 

 

 

slabtext

Titulares Responsive

 

 

 

 

 

 

yoko-wordpress-theme

Yoko – Plantilla css3

 

 

 

 

 

 

 

 

 

 

 

 

adaptjs

Adapt.js

 

 

 

 

 

 

 

 

 

flexslider

Responsive Slider

 

 

 

 

 

 

 

 

 

 

orig

Tablas de datos responsive

 

 

Javier Hernández

Related Posts
Leave a reply