Responsive Web Design en Joomla

El Responsive Web Design es una tecnología derivada de Html5 y CSS3. Gracias a las nuevas actualizaciones de estos lenguajes, podemos adaptar nuestra página web Joomla a cualquier dispositivo, independientemente de la resolución que este tenga.

RWD no es exclusivo de Joomla, pero se adapta perfectamente a este gestor de contenidos, permitiendonos llegar a cualquier cliente en cualquier lugar.

Joomla se basa en el patrón de diseño MVC (Modelo-Vista-Controllador). Esto quiere decir, que nuestras Vistas, se van a encargar únicamente de la correcta visualización de nuestra web. Así que Joomla es un entorno perfecto para poder realizar Responsive Web Design.

En realidad no debemos hacer nada especial para utilizar RWD en nuestra plantilla Joomla. Eso si, debemos tener un buen nivel de css, para tener controlado en todo momento el comportamiento de la misma.

Son varias las técnicas que podemos utilizar para realizar nuestro Responsive, pero yo recomiendo el uso de Progressive Enhancement.

Básicamente se trata de no realizar nuestra web para los navegadores más modernos he ir “degradandola” para poder ser vista en el resto de navegadores. Es la estrategía inversa. Realizamos nuestra web para ser vista en los navegadores o dispositivos con menos potencia y mejorandola, para que los navegadores más modernos puedan utilizar todo su potencial.

Tal vez el punto clave del Responsive web design en Joomla es el correcto uso de las Media Queries. Podeis ver un ejemplo de todo lo comentado aquí, funcionando en esta web: Portal de la eco-innovación transfronteriza. Si estás teniendo problemas al realizar Responsive en joomla, no dudes en ponerte en contacto conmigo, o comentar tus dudas en el post.

Esta entrada fue publicada en Plantillas. Guarda el enlace permanente.

17 respuestas a Responsive Web Design en Joomla

  1. epale dijo:

    Saludo,
    Necesito ayuda con mi plantilla web que he creado para joomla 2.5 hace un tiempo, quiero convertirla en Web Responsive Design (Auto ajustable para diferentes dispositivos).
    Si saben como y lo han hecho por favor indiquenme como se hace ya que en la web, encontrado poca información sobre este caso y la que he encontrado no me ha dado resultado. Gracias de antemano. Bendiciones.

  2. todojoomla dijo:

    Cuando ya tienes la plantilla completamente acabada es un poco mas dificil y costoso adaptarla. Al final lo que tienes que hacer es jugar con las media queries para que se apliquen unos css u otros dependiendo de la resolucion del dispositivo. Para probar puedes simplemente reducir la anchura de tu navegador.
    Yo suelo trabajar con tres saltos, y al primero (dispositivos pequeños) no les pongo ninguna anchura a mis divs para que se adapten a la del dispositivo.
    Espero haberte ayudado en algo para tu primer Responsive Web Design.

    • epale dijo:

      Gracias por responder,
      Pudieras ayudarme con ejemplos, videos, articulos, links que especifiquen como se hacen, eso me ayudaria. Gracias por tu pronta respuesta. Bendiciones !!!

  3. Jorge Ovalle dijo:

    Hola, estoy desarrollando un par de sitios en Joomla 3, y en ambos casos el cliente me ha pedido que la página no se modifique en otras resoluciones, sino que se mantenga tal como fue pensada en tamaño. Por eso mi consulta, hay alguna forma de “desactivar” el diseño responsivo en Joomla 3??
    Te agradezco cualquier respuesta.
    Saludos!

    • todojoomla dijo:

      Lo primero es convencer al cliente de que es positivo para su web, el adaptarse a los diferentes dispositivos; ya que cada vez son más las visitas desde dispositivos móviles. En segundo lugar, no conozco todabía Joomla 3.0, pero me atrevo a decirte que no, que no es posible “desactivar” RWD. De todas formas mira en las opciones de configuración de la plantilla, ya que supongo no la has hecho tú ;).

      Un saludo

    • John Manuel León Angarita dijo:

      Es mucho más fácil desarrollar de nuevo la plantilla
      Si necesitas ayuda nosotros desarrollamos plantillas a la medida para joomla wordpress y drupal

  4. lalapo1 dijo:

    Hola gracias por compartir! podrias decirme como ocultar modulos para mejorar la distribucion de laweb en dispositivos pequeños? por ejemplo, ocultar partes de la cabecera al navegar con un celular. saludos

    • Mikel dijo:

      Tal vez lo más conveniente sería no servir ese contenido…
      Si lo que quieres hacer es únicamente ocultarlo, revisa lo de las media Queries.

      Un saludo

  5. Martha dijo:

    Hola Mikel, me gustaría saber… ¿Puedo hacer responsive una web de joomla cuya plantilla no tiene opcion responsive o debo cambiar la plantilla de web?

    • Mikel dijo:

      Si podrías hacer responsive la plantilla. Ahora bien, ¿Cuanto va a costarte eso?
      Tal vez te sea más rentable, cambiar de plantilla o realizar una desde 0.
      Un saludo

  6. Carlos dijo:

    Buenas , soy nuevo en este foro y estoy creando una web con joomla 2.5 . Intento adaptarla a la versión movil que por defecto ya me viene puesto . Pero cuesta bastante y al final e desistido . Me gustaria saber desde que opción o como se quita la opción vista para moviles. Agradezco vuestras contestaciones. Gracias

  7. VePa dijo:

    Hola Carlos, tengo una consulta, tengo un sitio ya hecho en joomla, el cual obviamente se ve mal en dispositivos móviles, qué debería hacer para mejorarlo por dónde debería empezar, se puede ajustar la plantilla a responsive o debo crear una nueva plantilla?, espero me puedas contestar muchas gracias

    • Mikel dijo:

      Si podrías adaptar tu plantilla a responsive. Pero como desde el inicio no estaba pensada así, te vas a quitar muchos dolores de cabeza si realizas una nueva plantilla; te va a costar menos horas y el resultado va a ser mejor.

      Un saludo

  8. david dijo:

    Hola estoy diseñando un sitio web en joomla 2.5 y laplantilla con artister 4 , el diseño responsive funciona bien el problema son los menus despegables en la pc todo va bien pero en los moviles solo me muestra las pestañas base y no las subpestañas , me podrias ayudar con esto ?

  9. Daniel dijo:

    Buenas tardes.
    Tengo creada una web con artister 4.0 en modo responsive.
    Al mostrarla en dispositivos móviles la cabecera no se adapta a ellos, sin embargo los otros componentes si lo hacen.
    Y los subitems del menú horizontal no se me muestran.. Solo los principales..
    Alguien podría ayudarme en esto?
    Muchas gracias de antemano..

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s