¿Cómo hacer un sitio web responsivo?
Al diseñar un sitio web, es importante asegurarte que se vea bien en cualquier dispositivo, independientemente del tamaño y la forma de la pantalla. Los sitios web responsivos se diseñaron para lucir bien en toda clase de dispositivos modernos como computadoras, teléfonos, tabletas, televisores, dispositivos vestibles e incluso pantallas para automóvil. Si quieres hacer un sitio web responsivo, necesitas modificar el CSS y el código HTML para redimensionar de manera automática los elementos dependiendo de condiciones específicas. Este wikiHow te enseñará a planificar e implementar un diseño web responsivo básico.
Método 1: Planificar un diseño responsivo

1. Averigua cómo tu público usa tu sitio web.
Actualmente, la mayoría de las personas navegan por la web desde teléfonos móviles y tabletas. Para que un sitio sea responsivo, debes asegurarte de que se vea de manera adecuada, sin importar desde dónde lo visiten. Si el tiempo y el dinero son limitados, concéntrate en saber qué tipos de dispositivos son los más populares entre tus usuarios (si la información está disponible) y cómo usan tu sitio. Con la ayuda de un software de análisis de datos o alguna otra herramienta de investigación, averigua lo siguiente: 
Qué clase de dispositivos suelen emplearse para visitar el sitio web, prestando especial atención a las marcas de teléfonos móviles, tabletas, computadoras y al tamaño de la pantalla y resolución.
Qué navegadores son los más populares entre los usuarios. Según las estadísticas globales, Google Chrome es el navegador web más popular del mundo, pero Safari le sigue muy de cerca.
Cómo los usuarios visitan el sitio web (por ejemplo, cuánto tiempo pasan en el sitio, desde dónde lo visitan hasta cuál es el contenido más popular). Esto te ayudará a determinar qué tipo de contenido es necesario incluir y cuál puede omitirse.

2. Crea diseños diferentes para distintos dispositivos.
Se puede usar una combinación de CSS y JavaScript para detectar el dispositivo del usuario, así como también sus capacidades (si es compatible con Java, Flash, etc.), y mostrar una versión en particular del sitio según sea necesario. Las consultas de medios de CSS son particularmente útiles para determinar el tamaño y la resolución del dispositivo.

3. Responde a los diferentes tipos de interacciones.
El usuario puede interactuar con el sitio web por medio de un ratón, un teclado, una pantalla táctil o incluso un lector de pantalla para personas con problemas visuales. Teniendo esto en cuenta, el sitio web debería responder a los clics del ratón, a las teclas del teclado (Tabulación, Enter, Retorno, etc.,) y al roce de los dedos en la pantalla. 
Los efectos hover funcionan solamente con el mouse. En lugar de usar estos efectos, puedes pedirle al usuario que haga clic en un botón o ícono para mostrar lo que haya sido mostrado anteriormente con el efecto hover del mouse.

4. Considera usar un sistema de gestión de contenidos (CMS, por sus siglas en inglés).
Una manera sencilla de asegurarte que el diseño del sitio sea responsivo es usar un CMS con un tema responsivo prediseñado. Un CMS como Joomla, Drupal o Wordpress te permite asegurarte que el sitio web se vea bien en cualquier dispositivo, sin que tengas que programar los elementos responsivos por ti mismo. Pregúntale a tu proveedor de alojamiento web qué herramientas CMS están disponibles con el servicio.

5. Usa herramientas en línea para probar tu sitio web.
Ahora que ha aumentado la popularidad del diseño web responsivo, existe una gran variedad de herramientas gratuitas que pueden usarse para probar el sitio web. Si ya has implementado el sitio web, utiliza estas herramientas para probar cómo luce el sitio en diferentes condiciones y saber dónde se necesita mejorar la capacidad de respuesta: 
Mobile-Friendly Test by Google: te avisa si tu sitio funciona en dispositivos móviles tan bien como lo hace en las pantallas de computadoras.
resizeMyBrowser: te permite ver tu sitio web en diferentes resoluciones.
Responsiator: muestra tu sitio en distintas pantallas de dispositivos con variados diseños (de costado o del lado derecho hacia arriba). Método 2: Hacer que el diseño de la página sea responsivo

1. Considera un marco con hojas de estilo responsivo y gratuito.
Un marco es un conjunto previamente escrito de HTML, CSS o JavaScript que puedes usar como esqueleto para tu sitio. Todos los marcos están probados y optimizados para trabajar en cualquier navegador, así que lo único que necesitas hacer es insertar el contenido, añadir tus preferencias de colores y de medios y publicar tu sitio. Algunos marcos populares son los siguientes: 
Bootstrap
Skeleton
Foundation

2. Establece la ventana gráfica con una etiqueta meta.
Si no estás usando un marco, querrás empezar con el aspecto más importante de implementar un sitio web responsivo: la ventana gráfica. Esta ventana gráfica es la parte del sitio web que es visible para el usuario. El secreto para hacer que tu sitio se muestre de manera adecuada independientemente del tamaño de la pantalla es escalar el tamaño de la ventana gráfica en la etiqueta META. Para lograrlo, incluye esta etiqueta en la parte superior de cada página del sitio: 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. Especifica el tamaño del texto en relación con la ventana gráfica.
Una vez que la ventana gráfica esté establecida, el texto en la página escalará hasta caber en la pantalla. Sin embargo, las fuentes podrían verse demasiado grandes o demasiado pequeñas si el tamaño no está especificado en relación con la ventana gráfica. Se puede hacer esto al definir el tamaño de la fuente como el porcentaje específico de la ventana gráfica con la unidad vw. Este ejemplo les indica a los encabezados H1 que muestren el 10 % del ancho de la ventana gráfica, sin importar el tamaño: 
<h1 style="font-size:10vw">wikiHow</h1>

4. Usa consultas de medios para mostrar distintos estilos para tamaños de pantalla variados.
Las consultas de medios te permiten elegir si quieres mostrar ciertos elementos CSS dependiendo del tamaño de la pantalla. Se pueden especificar los detalles de las consultas de medios en el archivo CSS. En este ejemplo, el color de fondo del cuerpo se volverá rojo si el tamaño de la pantalla del usuario es 480px o superior:
<h1 style="font-size:10vw">wikiHow</h1>
@media screen and (min-width: 480px) {  
    body {    
        background-color: aqua;  
    }
} Método 3: Hacer que las imágenes sean responsivas

1. Usa la propiedad de CSS width para escalar las imágenes.
En vez de establecer el ancho de la imagen en una cantidad específica de pixeles (por ej., 500px), utiliza un porcentaje (por ej., 100 %) para que la imagen vea el ancho del padre y se ajuste en conformidad. Establecer el ancho de la imagen al 100 % obliga a la imagen a escalar hacia arriba y hacia abajo dependiendo del tamaño de la pantalla del usuario. Puedes probar esto en línea de la siguiente manera: 
<img src="img.jpg" style="width:100%;">

2. Usa la propiedad max-width para limitar la escala del tamaño real de la imagen.
Si usas la propiedad width del paso anterior para escalar una imagen al 100 %, la imagen crecerá o se encojerá para ajustarse al 100% de su contenedor, independientemente del tamaño. Esto significa que, si la imagen está en el lado más pequeño, escalará más grande que su tamaño original y tendrá un aspecto de menor calidad. Para evitar esto, usa max-width para establecer el tamaño máximo de escala de la imagen al 100 % (su tamaño real). Se hace de la siguiente manera: 
<img src="img.jpg" style="max-width:100%;height:auto;">

3. Usa el elemento HTML picture para mostrar las distintas imágenes en varios tamaños de pantalla.
Si quieres crear imágenes de tamaño personalizado para mostrar en pantallas de diferentes tamaños, se puede especificar qué fotos mostrar en el código HTML. Crea las imágenes de diferentes tamaños y luego usa este código como un ejemplo para especificar qué imagen usar en pantallas de ancho de 600px y 1500px:   
<picture>
  <source srcset="img_small.jpg" media="(max-width: 600px)">
  <source srcset="img_regular.jpg" media="(max-width: 1500px)">
  <source srcset="img.jpg">
  <img src="img_small.jpg" alt="Your alt text here">
</picture>
Método 1: Planificar un diseño responsivo
1. Averigua cómo tu público usa tu sitio web.
2. Crea diseños diferentes para distintos dispositivos.
3. Responde a los diferentes tipos de interacciones.
4. Considera usar un sistema de gestión de contenidos (CMS, por sus siglas en inglés).
5. Usa herramientas en línea para probar tu sitio web. Método 2: Hacer que el diseño de la página sea responsivo
1. Considera un marco con hojas de estilo responsivo y gratuito.
2. Establece la ventana gráfica con una etiqueta meta.
3. Especifica el tamaño del texto en relación con la ventana gráfica.
4. Usa consultas de medios para mostrar distintos estilos para tamaños de pantalla variados. Método 3: Hacer que las imágenes sean responsivas
1. Usa la propiedad de CSS width para escalar las imágenes.
2. Usa la propiedad max-width para limitar la escala del tamaño real de la imagen.
3. Usa el elemento HTML picture para mostrar las distintas imágenes en varios tamaños de pantalla.