Slider en diseño web ADAPTABLE

Tu slider adaptable en tu web

12-12-2016 webforever.es

Muchos dicen que los sliders están en vías de extinción y que no son aconsejables, debido a que no son muy apropiados para el diseño web adaptable y van a “su bola” al moverse solos sin mediación del usuario. Cosa que debes cuidar en estos tiempos en que el usuario y la usabilidad, mandan.

Y es cierto, los sliders están quedando en desuso y sí es cierto que cuesta enmarcarlos en un diseño web adaptable. Pero eso no quiere decir que no sea posible. Se trata de reutilizarlos y darles un nuevo uso más eficiente para los tipos de pantalla que hay hoy en día.

Os voy a resumir con dos imágenes del porqué del problema del diseño adaptable y los sliders. Aquí tenemos un slider clásico:

Muy típico en páginas web de hace no mucho tiempo y que en Webforever.es también hacíamos uso. Pero ¿Qué ocurría si veíamos la web en móvil? Pues dependiendo de la web tres cosas:

Uno: Si la web adaptaba el slider para que se viese entero sin deformarlo, este se hacía prácticamente ilegible, ya que el texto podía llegar a ser demasiado pequeño.

Dos: Si la web adaptaba al 100% de alto para no deformarlo, ocurre que el sobrante de la imagen a izquierda y derecha no se verá según qué pantalla, para verse el usuario tendría que poner el móvil o tableta en horizontal. Cosa, imprevisible.

Y tres: Cosa que rara vez he visto. La Web ajusta al 100% de ancho y alto la imagen. Por lo tanto la deformaría, pudiendo quedar, aparte de feo, ilegible también.

Estas son las tres principales razones por las cual los desarrolladores decimos que para diseño web adaptable (responsive web design) los sliders deberían de desaparecer.

Además, para conexiones lentas si el slider se componía de varias imágenes rotando, tardaba en cargar provocando problemas de SEO, de abandonos (porcentaje de rebote alto) y otros factores negativos.

¡Pero! Todo se puede adaptar al medio y las cosas evolucionan. ¿Qué hacemos?

Primero: Usa imágenes conceptuales sobre lo que quieres hablar, que el concepto esté en el centro y no a los lados. Los sliders modernos procesarán la imagen siempre de la segunda manera, si nos fijamos en la imagen anterior:

Con la de la izquierda, la vía del tren siempre se verá, independientemente de que el móvil esté en vertical u horizontal. En la de la derecha, si lo que quieres es que se vea es el móvil, sólo lo conseguirás en apaisado. Con el móvil vertical sólo se verá el hombro de la chica o una “mancha marrón” que el usuario no entenderá:

Esto por un lado, el otro e igual importante: No escribas texto en las imágenes. A parte de que Google no lo lea, puede quedar fuera. Webforever.es te permite añadir un texto flotante y uno o varios botones con lo que puedes jugar con ello. Sé explícito y ten cuidado de que las letras sean legibles a la hora se moverse por la foto:

Aquí tienes un ejemplo de como se ve un slider en un móvil y en un sobremesa o Tablet. Como verás se adapta y la información sigue siendo útil:

Se trata de probarlo todo bien y ver cómo queda en todos los dispositivos. Los navegadores de escritorio tienen opciones para ver la web en formato móvil. Y con Webforever.es y sus páginas de diseño web adaptable (responsive web design) será hacer cuatros clics y listo.

Webforever is a content manager (CMS) developed in Spain and offered as a monthly payment without permanence service (SAAS). With it, you can elaborate a website with many modules to grow your business.

It also has a online store module complete (e-commerce) distributed with the name Shopforever.es and which is integrated in the same tool.

It also has online billing software called Gestiónforever.es and it is also integrated into the CMS, all from the same tool, all linked.

Do you need a website, online store, or collect invoices or estimates through the mobile? Speak with us. Monthly payment without permanence.

Leave your valuation please!

There are no messages yet !, you can use the form and write the first one.

More content

Nuevo proceso de compra

22-06-2022 Webforever.es

Regístrese e inicie sesión en su sitio web con su cuenta de Google

09-03-2022 Webforever.es

Changes in the use of cookies. Complies with regulations

19-01-2021 Webforever.es

Limitador de acceso a la web bajo responsabilidad.

19-01-2021 Webforever.es

Calendario de entrega en formas de envío.

27-11-2020 Webforever.es

Cupones descuento para tienda online. Parte 2.

06-11-2020 Webforever.es

Cupones descuento para tienda online.

24-09-2020 Webforever.es

Valoraciones para tienda online

19-08-2020 Webforever.es

Webforever.es incluye la pasarela de pago MyPos

24-04-2020 Webforever.es

Cómo configurar tu cuenta de correo en Gmail con SSL

07-11-2018 Manu Burrero Sánchez

Financiación online Pagantis : Paga Más Tarde

05-11-2018 Webforever.es

Posicionamiento SEO: Cómo captar clientes potenciales

22-06-2018 webforever.es

SEO: ¿Cómo buscar palabras clave (keywords)?

15-06-2018 webforever.es

Configurar cuenta Paypal para vender en tu tienda online.

20-02-2018 webforever.es

¿Cómo el Zero Moment Of Truth afecta a la experiencia de usuario?

30-11-2017 iebschool.com

Suscríbase a nuestro boletín
Le mantendremos informado de nuestras últimas novedades ¡¡no lo pase por alto!!.

Política de Cookies Privacy Policy

We use cookies

We use cookies. We may use them to analyze our visitor data, to improve our website, display personalized content, and provide you with a great website experience. To find out more about the cookies we use, open the settings.