Versión móvil de tu web en 3 pasos con Mobify

Hola a todos, este es mi primer post espero guste.

Ya sabemos todos que la web móvil está ganando cada vez más terreno ya sea por tener una Tablet, Smartphone o cualquier otro dispositivo móvil existente y por existir, así que no debemos serle indiferente y si aún no hemos empezado a movilizar nuestras páginas por todo el trabajo que hay detrás, pues hoy les traigo una aplicación web que nos va a ayudar muchísimo para los que recién empezamos y queremos ir probando la experiencia móvil que podría dar nuestra web.

Mobify

Mobify es una aplicación web muy interesante que nos ayuda reestructurar nuestra web para hacerla compatible para móviles y es muy fácil de usar: solo tenemos que darnos de alta en la página luego iniciar sesión y ahí estaremos en un entorno así



Ahí vemos que yo ya tengo 3 dominios que ya he editado, entre ellos Cristalab (a ustedes les aparecerá cuando ya tengan los suyos lo más probable es que pasen a la siguiente imagen) no te preocupes @freddier se puede hacer con cualquier web en este caso yo usare la de Cristalab para la explicación y para que vean cuán potente es la herramienta.

PASO 1: configurar el sitio desde el panel

Luego de introducir la web a la queramos movilizar nos aparecerá este panel.
Este es el primero de los tres pasos a seguir: “elegir”, aquí debemos seleccionar todas las divisiones que queramos que aparezcan en nuestra versión móvil, todas las áreas rojas son las que aparecerán en la versión móvil



Luego presionamos el botón de siguiente que está en la parte superior derecha y así pasar al 2do paso: “el diseño”

PASO 2: el diseño

Aquí nos encontramos con la tarea principal que es un editor de css ya que nuestra página no los conservará por completo dependiendo de cómo hayan realizado su css. En este caso yo me encontré así la web que por cierto el html es impecable; las imágenes de por sí ya estaban adaptadas: (gracias equipo de Cristalab gente así me hace la vida más feliz ). Aquí sólo me dediqué a poner css así que manos a la obra! Go go go!!

Después de un rato en el que juntando habilidades ninja y averiguar clase por clase y colocar el respectivo css quedo lista la home de cristalab móvil, tratando de ser lo más fiel al diseño de la web de escritorio.

Aparte del css también le hice un pequeño banner para la cabecera lo más parecido a la web actual para que se vea aún mejor, esto lo hice con la opción de agregar html y sólo puse imagen que adapté desde Photoshop.



Luego que terminas de editar pasamos al tercer y último paso que es la “administración”

PASO 3: Administración

Aquí nos muestra las secciones que hayamos editado y las opciones para detección de dispositivos y personalizar el dominio



Así es, con un pequeño código que insertamos en el head de nuestra web detectaremos a todos los dispositivos móviles que se conecten a ella.

Código :

<script type="text/javascript" src="http://cristalab.mobify.com/mobify/redirect.js"></script>
<script type="text/javascript">try{_mobify("http://cristalab.mobify.com/");} catch(err) {};</script>

También podemos personalizar nuestro dominio como por ejemplo http://m.tuweb.com con una pequeña configuración de tu cpanel o servicio que tengas para la administración de tus páginas.

Esto es todo, espero les haya gustado y usen la herramienta si están en apuros por volver su web móvil.

Algunas observaciones

• yo hice varias de las vistas de Cristalab, pueden entrar desde sus dispositivos móviles o cualquier navegador adaptando el tamaño a http://cristalab.mobify.me/
  
  
• si incluyeran el script en la head de cristalab detectaría automáticamente los dispositivos
  

una fotos más del resultado:

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.