Revolution Slider – Capitulo 03 – Sliders en el movil

Ya estamos aquí de nuevo con nuestro curso avanzado de Revolution Slider gratis. En el capitulo anterior aprendimos como crear nuestro primer Slider con tres imágenes y un sencillo texto animado utilizando para ello un “fade In” (que viene a ser que aparece de la nada) combinado con un desplazamiento vertical del texto, lo que producía un efecto bastante chulo.

Seguramente los que seguís el curso, habréis probado otros efectos, pero en este capítulo nos vamos a centrar en otra cosa, mucho más importante ahora mismo. Colocar de manera correcta Sliders en el móvil.

De mano, si no hacemos nada, Slider Revolution se adapta de manera automática al móvil, pero lo que produce es un churro que mejor ni verlo. Simplemente adapta lo que vemos en pantalla del PC a la pantalla del móvil. Esto significa que aparece un pequeño Slider en la parte superior de la versión móvil de la página web, y evidentemente, como también adapta el texto, resulta prácticamente ilegible. Y lo peor de todo, es que como haya algún botón colado por el Slider, eso no lo adapta y aparece de tamaño enorme… Realmente un churro.

Slider Revolution en móviles

Lo primero, es recordar, que debemos haber configurado nuestro Slider eligiendo un tamaño personalizado para el móvil. Aquí no hay una regla fija, pues es algo personal que depende del diseñador que llevéis dentro. Podéis intentar crear un Slider que ocupe la totalidad de la pantalla, pero debéis tener en cuenta que siempre quedara un poco de espacio en la parte superior para el menú…

Por otro lado, si disponéis de la posibilidad de, si vuestro tema lo permite, o bien porque os habéis bajado algún plug-in de personalización de menú, cambiar el menú por uno de hamburguesa flotante, os lo recomiendo, pues quedan mucho más elegante. Pero como dije anteriormente, todo esto depende de vuestro “arte” a la hora de crear… La creación de Sliders atractivos corresponde mas al diseñador que al programador, pero ya sabéis que hay que saber hacer un poco de todo.

Si nos fijamos el backend del Revolution Slider, la parte donde aparece ya nuestra primera diapositiva terminada, veremos que tenemos dos iconos, uno con forma de pantalla de PC y al lado, uno con forma de Móvil. Esos iconos nos permiten alternar entre el dispositivo para el que queramos personalizar el slider… pero ojo, las capas, tanto de texto, como de imágenes, de botones, lo que sea… tienen que ser las mismas. Por ejemplo, no vale crear una frase y luego para que nos entre bien en el móvil dividirla en dos. Si lo queremos así, tendremos que crear dos capas en ambos formatos. Traducido al castellano, los elementos que caponen el slider deben ser los mismos en la versión móvil y en la de pantalla PC.

En cuanto tocamos ese botón, se nos va todo a la m… ¿Por qué? Tranquilos que no pasa nada… Simplemente la herramienta ha adaptado como mejor ha podido lo que ya teníamos a la versión móvil… Podéis ver ahora, que las líneas azules que delimitan el ancho del área visible se han estrechado un montón y la altura del slider se ha ampliado. Debido mayormente a que el 99,9% de la gente utiliza el móvil de manera vertical.

Nota importante: Si no aparece el botón, es porque no habéis definido tamaño de pantalla móvil en la configuración del Slider. Revisar el capitulo 01.

Tamaño del texto en móviles

Vamos a centrar las capas de texto, para que queden exactamente en el medio, quedando los mismos espacios por ambos lados. Hecho esto, procedemos a cambiar los tamaños del texto. Lo vamos a dejar en 20px para la frase y 40px para el nombre de la empresa. En principio deberían entrar de sobra. Los efectos de Fade-in y desplazamiento se mantienen y no debemos tocarlos, puesto que funcionan perfectamente.

Con la imagen sí que tenemos que jugar más. ¿Por qué? Porque normalmente sacamos las imágenes de bancos, donde suelen estar pensadas para mostrase en la pantalla de un PC, y no para el móvil. En el ejemplo de “Seguridad Manolo”, la imagen del chico delante de los monitores, si no la centramos “a mano”, pueden pasar dos cosas… o que solo se ven monitores, o que se solo se ve al chico… Lo ideas, es que se vean ambas cosas, aunque sea de manera vertical. Con las siguientes imágenes, tendremos que jugar bastante también, para que igualmente queden bien colocadas y se aprecien los detalles que más nos interese.

Colocar el texto en su posición ideal.

Igualmente que a veces queremos resaltar una parte de la imagen al poner Sliders en el movil, tampoco queremos el texto por ahí de cualquier manera. Podemos optar por colocarlo arriba, abajo o en el centro… Dependerá un poco de si el slider lleva incluido un botón o no.

¿Sliders en móvil? ¿Sí o no?

Existen varias corrientes “filosóficas” al respecto… De hecho, hay gente que opina que ni siquiera deberían ponerse slider al inicio de las webs… y puede que tengan razón, pero si ves Revolution Slider como un simple plug-in para crear cabeceros, házmelo saber en los comentarios, pues creando un mal curso.
Los Sliders que vamos a crear aquí, los podremos colocar en cualquier sección de la web, con infinidad de posibilidades. Los podremos usar para el pie de página, para la barra lateral derecha (o izquierda) o como contenido de la propia web. De hecho, no hace poco creamos desde nuestra agencia, un catalogo de puertas para una carpintera usando Revolution Slider y el resultado fue genial, además muy bien optimizado para una carga rápida y sin ralentizaciones.

Resultado final:

Vamos a ver como ha quedado nuestro Slider despues de todos los cambios que le hemos aplicado.

Como podéis ver, el resultado aun esta lejos de ser aceptable… Si viésemos esto en nuestro dispositivo móvil, nos daríamos cuenta de que las letras de «alarmas conectadas… » son demasiado pequeñas, apenas se pueden leer y lo mismo con el nombre de la empresa. Pero no os vamos a contar nada mas de momento y vamos a poner el siguiente reto.

Lo primero acordaros de que como os dije antes… Las mismas capas que tenemos en la versión de PC, deberemos tenerlas en la versión de Móvil, o sea que si queremos introducir letras mas grandes y tenemos que saltar de párrafo, no podremos hacerlo. Debemos partir la frase en dos capas… Una con la mitad y la otra con la otra mitad. Lo que significa que en la versión de PC, tendremos esa misma frase partida y tendremos que adaptarlo todo de nuevo para que queden bien.

Recomendación: Cuando vayáis a crear algo, antes de empezar, realizar unos bocetos y una buena planificación de lo que quieres hacer, para que luego no haya sorpresas.

Como podéis ver ahora, la cosa ya va quedando mas profesional… Intentad jugar vosotros con la imagen, con los textos y probar hasta conseguir un slider aceptable, que se pueda ver perfectamente desde cualquier dispositivo móvil.

 

Co-fundandor de la Agencia de Marketing Wolabu. Ingenioso, creativo y siempre de buen humor.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *