El diseño responsive ya llego hace un tiempo y es considerado un requerimiento esencial por los diseñadores web para cualquier sitio. Sin embargo, muchos proyectos aun son realizados solo para pantallas de gran tamaño. Si tienes un sitio web en esta ultima categoria sea Joomla o no, este tutorial te dara una aproximacion general a lo que se require para realizarlo.

Antes de comenzar, sit u sitio web esta construido solo con tablas, olvidate de hacerlo con este tutorial. Estas en un lio, quita todas las tablas, cambialas por Divs y luego nos vemos por aqui. Todo esta relacionado con el CSS Primero debes saber CSS, para mi ejemplo, tenemos este sitio web: El área pintada verde representa el contenedor principal (dentro de este tenemos el menú, texto, imágenes, video embebido, etc). Este bloque utiliza el id selector #mycontainer y su ancho es de 960px.

#mycontainer {    
    width: 960px;
}

Este es el tamaño que tenemos cuando visitamos la pagina desde cualquier dispositivo como PC de escritorio, Tablet y móviles. Ahora lo necesitamos mas pequeño para que se adapte a pantallas mas pequeñas. CSS Media queries para diseño responsive. El diseño responsive es possible gracias a esta caracteristica de CSS. Las Media queries nos permiten modificar los valores para el ancho de acuerdo al tamaño de la pantalla. Para pantallas que tienen un ancho máximo de 480px, podemos hacer que el contenedor sea más pequeño con el siguiente código:

@media (max-width: 480px) {
    #mycontainer {    
           width: 400px;
    }
}

El codigo anterior establece un ancho de 400px a #mycontainer cuando el dispositivo del usuario es un smartphone. Nota: ten en cuenta que existen varios anchos de pantalla para los smartphones. Algunos son más pequeños que otros, considera también la orientación retrato o paisaje. Practicando con los valores de ancho Repite el proceso anterior para todos los tamaños de pantalla a los que quieres disponer definiendo un valor max-width en cada una de las media query desde la más alta a la más baja.

@media (max-width: 768px) {
    // Tus propiedades CSS van aquí
}

@media (max-width: 600px) {
    // Tus propiedades CSS van aquí
}

@media (max-width: 480px) {
    // Tus propiedades CSS van aquí
}

En breves palabras, el valor width cargado al último tiene mayor prioridad. Probando el resultado final Para cada nueva actualización prueba el resultado para confirmar que funciona como esperas. Simplemente redimensiona la ventana del navegador para ver el responsive en acción o usa una herramienta como Responsinator para emular los tamaños de pantalla más utilizados de una sola vez.

Conclusión

El testing es muy importante, aun cuando el test muestre un resultado positivo no te olvides de probar con dispositivos reales para comprobar que la compatibilidad responsive funciona correctamente.

Traducción del original How to make your old site responsive, beginner guide