Cada vez más usuarios utilizan el móvil para navegar por Internet y visitar sus páginas favoritas. Si bien es un dispositivo con el que suelen realizarse "visitas de paso", tiene gran importancia de cara a la opinión y "estatus" que sobre la imagen de una página se puede hacer un usuario.
Las búsquedas en móvil también tienen posicionamiento y es importante para tus contenidos y su presencia en Internet que adaptes tu Blog a este tipo de presentación.
Veamos algunas claves para poder mejorar la presentación de datos en esta clase de dispositivos.
¿Diseño Responsive o diseño ad-hoc?:
El diseño adaptativo es aquel que cuenta con la capacidad de adaptar su presentación a cualquier dispositivo sea cual sea su tamaño y resolución. Para entender mejor el concepto puedes leer esta guía que despejará todas tus dudas: Qué es responsive Design.
El diseño ad-hoc o "a medida", ha sido utilizado durante los primeros años de vida de los smartphones para pasar posteriormente a decantarse por el adaptativo.
Con la aparición de nuevas formas de programar páginas web, los diseñadores consiguieron darle un aspecto mucho más creativo a sus páginas utilizando el mismo código fuente.
En el diseño adaptativo la página adapta sus estilos al dispositivo en el que se va a dibujar, en el diseño ad-hoc se hacen redirecciones a páginas diseñadas expresamente para móviles donde se modifican los estilos para presentarse de una manera uniforme.
En Blogger por ejemplo dispones de un diseño estándar con la plantilla para móviles que está desarrollado de una manera prefijada para todos los blogs. En la redirección a la plantilla para móviles, se aplica una presentación uniforme donde más o menos pueden cambiar los colores pero en escasa medida el diseño completo.Visualiza tu página en distintos dispositivos:
Vamos a utilizar una magnífica herramienta online llamada MobileTestme que ofrece la posibilidad de probar tu página en algunos de los principales dispositivos móviles más populares del momento: desde un IPhone 5 pasando por un Nexus7 hasta un Galaxy Y.
1) Conéctate a http://mobiletest.me/ y verás una pantalla como la que te muestro a continuación:
2) Haz clic sobre el modelo de móvil sobre el que deseas ver cómo queda tu página (por ejemplo en la pantalla inferior selecciono el Iphone 5):
3) Me aparece la pantalla para introducir la dirección de mi sitio web y visualizar cómo queda en el móvil seleccionado. Introduzco la dirección de mi web en la caja donde pone "Tyoe a website address and hit go" y pulso sobre el botón verde donde pone "Go":
4) Veo cómo queda la presentación en el móvil:
Adicionalmente puedes cambiar entre la visualización en vertical o en horizontal. Pulsa en "Options" y selecciona "Portrait" (orientación vertical) o "Landscape" (en horizontal).
Cómo mejorar tu presentación para móviles:
Aplicar mejoras en la parte móvil puede ser complejo si no se tienen suficientes conocimientos técnicos. No obstante existen infinidad de plantillas en Internet que puedes aprovechar para rediseñar tu Blog y aplicarle un buen diseño adaptable.
Te dejo algunas guías que pueden ayudarte a conseguirlo:
En esta guía aprenderás a realizar las personalizaciones básicas de tu plantilla en Blogger.
Te explico paso a paso cómo realizar un rediseño básico de tu Blog y qué claves y datos a tener en cuenta debes contemplar para poder hacerlo. Podrás aprender cómo modificar la plantilla y aplicar la que desees que se encuentre en el mercado y tenga un diseño adaptable (responsive design).
Esta otra guía va a ayudarte a conocer todas las claves de la creación de plantillas para móviles en Blogger. En ella revisarás las opciones para un diseño ad-hoc y contarás con los comandos existentes en Blogger para seleccionar distintos estilos que puedan hacer adaptable (responsive) el diseño de tu plantilla. Te servirá tanto para el diseño ad-hoc como para combinarlo con una utilización de estilo responsive.
Si quieres adentrarte un poco más en la programación de plantillas responsive esta es tu guía.
Aprenderás cómo funciona el diseño adaptable y te familiarizarás con el "mundo de las media queries" para ver cómo se aplican las distintas hojas de estilo en función de la resolución del dispositivo donde se muestra tu web.
Y para cualquier duda o sugerencia como siempre me tienes a tu servicio en los comentarios.
Fuente: este post proviene de Diarios de la nube, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Modificado:
