Cómo hacer un sitio web responsivo

PDF download Descargar el PDF
PDF download Descargar el PDF

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
Método 1 de 3:

Planificar un diseño responsivo

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a6\/4427341-1.jpg\/v4-460px-4427341-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a6\/4427341-1.jpg\/v4-728px-4427341-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Actualmente, la mayoría de las personas navegan por la web desde teléfonos móviles y tabletas. [1] 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. [2]
    • 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/39\/4427341-2.jpg\/v4-460px-4427341-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/39\/4427341-2.jpg\/v4-728px-4427341-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/44\/4427341-3.jpg\/v4-460px-4427341-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/44\/4427341-3.jpg\/v4-728px-4427341-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0c\/4427341-4.jpg\/v4-460px-4427341-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0c\/4427341-4.jpg\/v4-728px-4427341-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. [3] Pregúntale a tu proveedor de alojamiento web qué herramientas CMS están disponibles con el servicio.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/29\/4427341-5.jpg\/v4-460px-4427341-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/29\/4427341-5.jpg\/v4-728px-4427341-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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).
    Anuncio
Método 2
Método 2 de 3:

Hacer que el diseño de la página sea responsivo

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7b\/4427341-6.jpg\/v4-460px-4427341-6.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7b\/4427341-6.jpg\/v4-728px-4427341-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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:
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/6f\/4427341-7.jpg\/v4-460px-4427341-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/6f\/4427341-7.jpg\/v4-728px-4427341-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. [4] 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/4427341-8.jpg\/v4-460px-4427341-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/4427341-8.jpg\/v4-728px-4427341-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d7\/4427341-9.jpg\/v4-460px-4427341-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d7\/4427341-9.jpg\/v4-728px-4427341-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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: [5] 
     < 
 h1 
 style 
 = 
 "font-size:10vw" 
 > 
 wikiHow 
 </ 
 h1 
 > 
 @ 
 media 
 screen 
 and 
 ( 
 min-width 
 : 
 480px 
 ) 
 { 
 body 
 { 
 background-color 
 : 
 aqua 
 ; 
 } 
 }
    Anuncio
Método 3
Método 3 de 3:

Hacer que las imágenes sean responsivas

PDF download Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/54\/4427341-10.jpg\/v4-460px-4427341-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/54\/4427341-10.jpg\/v4-728px-4427341-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. [6] 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/4427341-11.jpg\/v4-460px-4427341-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/4427341-11.jpg\/v4-728px-4427341-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5f\/4427341-12.jpg\/v4-460px-4427341-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5f\/4427341-12.jpg\/v4-728px-4427341-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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 
 >
    Anuncio

wikiHows relacionados

Cómo
escribir fracciones en una calculadora
Cómo
probar un relé
Cómo
hacer antenas
Cómo
hacer el símbolo de corazón en la computadora
Cómo
apagar una calculadora escolar
Cómo
escribir la raíz cuadrada en una computadora o Mac
Cómo
probar un capacitor (condensador)
Cómo
usar tu computadora sin ratón
Cómo
calcular el amperaje
Cómo
escribir palabras con una calculadora
Cómo
escribir el símbolo pi
Cómo
ver todas las aplicaciones y ventanas abiertas (Windows 10, 11 y Mac)
Cómo
instalar un juego desde un archivo torrent
Cómo
crear una nueva carpeta en la computadora
Anuncio

Referencias

  1. ↑ https://in.godaddy.com/blog/how-to-make-a-responsive-website/
  2. ↑ https://www.w3counter.com/globalstats.php
  3. ↑ https://in.godaddy.com/blog/how-to-make-a-responsive-website/
  4. ↑ https://www.w3schools.com/css/css_rwd_viewport.asp
  5. ↑ https://www.freecodecamp.org/news/how-to-start-thinking-responsively/
  6. ↑ https://www.freecodecamp.org/news/how-to-start-thinking-responsively

Acerca de este wikiHow

Esta página ha recibido 1120 visitas.

¿Te ayudó este artículo?

Anuncio