responsiveblogimg
Crear un theme Responsive

¿Qué es un theme responsive?

Como propietarios de un sitio web, tenemos la obligación de mejorar la visibilidad de nuestro contenido y velar por nuestros lectores, facilitando que nuestra web sea visible y legible en cualquier dispositivo. Es una realidad que el uso de tablets y móviles suponen una gran fuente de visitas en la actualidad y por eso, nuestra página web tiene que estar adapatada para poder ofrecer la mejor experiencia posible en nuestro sitio web y evitar el rebote y por consecuente la perdida de visitas o ventas. Hasta ahora sólo se pensaba en una app cuando queríamos ver nuestra web en el móvil. Ahora sabemos que existe otra forma de poder adaptar nuestro contenido de una manera más cómoda, creando un CSS especifico para cada pantalla. Todo ello gracias a las media queries .

¿Qué ventajas tiene un theme responsive sobre una app?

Según he podido leer, la media de apps instaladas en un dispositivo móvil es de 12, y sólo el 50% son abiertas diariamente. Es decir, es poco probable que sea la nuestra la elegida. Además el gran inconveniente es el desarrollo de una APP, el coste de ésta puede ser elevado, más de lo que una mediana o pequeña empresa puede costearse. También podemos pensar ¿Qué sucede si el usuario está navegando y mediante un link entra en nuestra web? Pues que no la vera adaptada. Mientras que con un diseño responsive, mucho más económico nos aseguramos que sí o sí, todas las visitas que entren a nuestra web, verán la página adaptada.

Mi web es antigua, ¿Es posible actualizarla?

Cualquier página web se puede adaptar tanto a la visualización en iPads como en Tables o móvles. Sin duda es un cambio que todos deberíamos plantearnos ya que no sólo mejoramos la experiencia del usuario y nos aseguramos que nuestro contenido sea legible, sino que entraremos en un sector que cada vez está más en alza y garantizamos tener más puntos con el señor Google, que valora y de forma muy positiva los sitios webs sensibles a los dispositivos móviles.

¿Cómo diseñar en Responsive?

Para realizar un diseño responsive en nuestro sitio web sólo tenemos que tener en cuenta algunos detalles: Crear un media querie diferente para cada dispositivo al que queramos realizar la adaptación, utilizar % en lugar de px para posicionar los elementos. Recuerda rediseñar los tamaños de las imagenes en width %. Utiliza JQuery para mostrar un menú navegable por los dispositivos móviles, a poder ser de los que quedan ocultos en el lateral de la web y al pulsar se muestran. Sidr es uno de mis preferidos, por su simple instalación y manejo.

[box type=”note” align=”aligncenter” class=”code” ]

/*>Monitores:*/
@media screen and (min-width: 980px) { }

/* Tablet horizontales:*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }

/* Tablet verticales:*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }

/*Tablet horizontales:*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }

/* Móvil Horizontal:*/
@media only screen and (max-width: 767px) and (orientation : landscape) { }

/*Móvil vertical:*/
@media only screen and (max-width: 767px) and (orientation : portrait) { }

[/box]