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:
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).
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.
Hola, Me encanta tu blog tienes unas guías muy completas, me lo guardo en favoritos para hacerlo poco a poco porque no tengo ni idea :(
ResponderEliminarQuería preguntarte si me puedes ayudar a redireccionar mi blog de blogspot en su versión móvil a mi dominio www.suxana.es porque no puedo poner publi, no se ve bien... y en fin un lío que no se por dónde empezr. Te lo garadecería mucho.
Hola, para lo que necesitas pienso que podría ayudarte esta guía: http://www.diariosdelanube.com/2013/10/aprende-como-pasar-de-blogspot-un.html
EliminarUn saludo amiga!
Muchísimas gracias Miguel, te agradezco que me hayas contestado tan pronto!
EliminarNada, estoy aquí para ayudar. Pregunta lo que necesites. Un saludo!!!
Eliminarprueba de comentarios
EliminarHola otra vez. Ya he leído lo que me recomendaste pero eso ya lo he hecho. El tema es que en la versión móvil no se ven los anuncios de APdv que pongo, los de Ad Sense claro... pero esa es otra historia.
ResponderEliminarEncontré el lugar en blogger para cambiar la configuración y que se vean anuncios de terceros en versión móvil, pero sigue sin funcionar... no se que más hacer.
Por cierto, el simulador ese de cómo se ve la web en móvil está bien, pero sólo se ve la versión Web...
Cuando puedas eh? que es agosto jajaj
Hola,
Eliminarel simulador te muestra lo que tienes en tu web y cómo se verá en esos móviles, no te muestra la versión de escritorio. Si te está mostrando la versión de escritorio es porque quizás necesites configurar adecuadamente la configuración de presentación en móvil de Blogger: http://www.diariosdelanube.com/2013/11/personaliza-tu-plantilla-blogger-para.html Esa guía te explica cómo activar la plantilla para móviles y cómo se utiliza.
Un saludo.
Pero es que en el mío se ve la versión para movil perfectamente y por eso no quiero cambiar nada... además mis amigos tb la ven así
EliminarAh, ok, es a gusto del consumidor, por supuesto. en Pagespeed te miden también si el diseño para móvil es fácil de usar (usabilidad). Un saludo!
EliminarHola, buenas noches.
ResponderEliminarEstoy creando mi nuevo blog, me ha sido muy útil la guía para crear las diferentes secciones que tendrá, pero ahora y después de haber leído, releído y probado a etiquetar las entradas tal como indicas, no lo consigo.
Por favor una ayudita
Gracias por todo y enhorabuena por tu blog.
Hola Cristna, ¿en qué encuentras el problema?. Ponme un ejemplo concreto para que pueda ayudarte más fácilmente.
EliminarUn saludo.
Es algo que me viene genial para que todas las personas que puedan acceder a mi sitio web también sea les sea visible por móvil ya que muchas personas utilizan estos dispositivos para navegar, excepcional guía!
ResponderEliminarEs algo fundamental pero su implantación va poco a poco... Un saludo y gracias por tu comentario.
EliminarHola! fijate que tengo un problema y quizá me puedas ayudar. Usé la plantilla Max Mag en mi blog pero en mi móvil aparece la misma versión web. Se supone que es Responsive, pero se ve igual. me ayudas?
ResponderEliminarHola Stanley, es posible que sigas teniendo activada la opción de visualización móvil de tu plantilla dentro de Blogger. El "responsive", las mediaqueries que lo hacen posible, sólo funcionará si desactivas la visualización móvil dentro de Blogger (porque la visualización responsive de tu plantilla utiliza sus propias hojas de estilo, no las de Blogger).
EliminarAsí pues, prueba a desactivar la visualización móvil y deja que funcionen las hojas de estilo de tu plantilla, verás cómo te vuelve a funcionar.
Un saludo!
POR DIOS, no entendí nada jeje, ¿osea que para actualizar mi pagina a móvil debe estar esta subida en la red? tal vez tonta la pregunta pero igual no entendí eso, y por ultimo ¿este método funciona para otras paginas que no sean blogs? saludos desde la inexperiencia en paginas web jejeje
ResponderEliminarNo es necesario subir nada a ninguna red. Se puede cargar el código referente a las hojas de estilo para móviles en el propio bog. Tanto Blogger como Wordpress disponen de plantillas que automáticamente sirven para dibujarse en móviles, también puedes utilizar esa manera de presentarlo.
EliminarFíjate en las tres guías del final del artículo y ahí se te presentan diversas soluciones que puedes implementar.
Cualquier duda aquí estoy.
Un saludo.