Al diseñar su sitio web, es importante asegurarse de que se vea bien en cualquier dispositivo, independientemente del tamaño y la forma de la pantalla. Los sitios web receptivos están diseñados para verse bien en todo tipo de dispositivos modernos como computadoras, teléfonos, tabletas, televisores, dispositivos portátiles e incluso pantallas de automóviles. Para que un sitio web sea receptivo, deberá modificar su código CSS y HTML para cambiar automáticamente el tamaño de sus elementos según las condiciones específicas. Este wikiHow te enseñará cómo planificar e implementar un diseño web receptivo básico.
Pasos
Método 1 de 3: Planificación del diseño receptivo
Paso 1. Descubra cómo su audiencia usa su sitio web
En estos días, la mayoría de las personas que navegan por la web lo hacen desde teléfonos móviles y tabletas. Para que un sitio responda, debe asegurarse de que se muestre correctamente sin importar dónde se esté viendo. Si el tiempo y el dinero son esenciales, concéntrese en los tipos de dispositivos que son más populares entre sus usuarios (si esta información está disponible) y cómo usan su sitio. Con su software de análisis o alguna otra forma de investigación, averigüe:
- Qué tipo de dispositivos utilizan con más frecuencia para ver el sitio web, prestando especial atención a las marcas de teléfonos móviles / tabletas / computadoras y los tamaños de pantalla / resolución.
- Qué navegadores son los más populares entre sus usuarios. En lo que respecta a las estadísticas globales, Google Chrome es el navegador web más popular en todo el mundo, pero Safari le sigue de cerca.
- Cómo los visitantes usan su sitio web, como cuánto tiempo pasan viéndolo, dónde lo ven y qué contenido es más popular. Esto puede ayudarlo a determinar qué tipo de contenido es importante incluir y cuál puede omitirse.
Paso 2. Diseñe diferentes diseños para diferentes dispositivos
Puede utilizar una combinación de CSS y JavaScript para detectar el dispositivo de un usuario, así como sus capacidades (ya sea compatible con Java, Flash, etc.) y mostrar una versión particular de su sitio en consecuencia. Las consultas de medios CSS son particularmente útiles para determinar el tamaño / resolución del dispositivo.
Paso 3. Tenga en cuenta los diferentes tipos de interacciones
Su visitante podría estar interactuando con su sitio web utilizando un mouse, un teclado, una pantalla táctil o incluso un lector de pantalla para personas con discapacidad visual. Teniendo esto en cuenta, su sitio web debe responder a los clics del mouse, las teclas del teclado (Tabulador, Intro, Retorno, etc.) y los toques de los dedos en la pantalla.
Los efectos de desplazamiento no funcionan con nada excepto con el mouse. En lugar de usar estos efectos, puede solicitar al visitante que haga clic en un botón o icono para mostrar lo que se mostró anteriormente al pasar el mouse
Paso 4. Considere la posibilidad de utilizar un sistema de gestión de contenido (CMS)
Una manera fácil de asegurarse de que el diseño de su sitio sea receptivo es utilizar un CMS con un tema receptivo prediseñado. El uso de un CMS como Joomla, Drupal o Wordpress le permite asegurarse de que su sitio web se vea bien en todos los dispositivos sin tener que codificar los elementos de respuesta usted mismo. Consulte con su proveedor de alojamiento web para ver qué herramientas CMS están disponibles con su servicio.
Paso 5. Utilice herramientas en línea para probar su sitio web
Ahora que el diseño web receptivo ha aumentado en popularidad, existe una variedad de herramientas gratuitas que puede utilizar para probar su sitio web. Si ya ha codificado su sitio web, use estas herramientas para probar cómo se ve en varias condiciones para que sepa dónde necesita mejorar la capacidad de respuesta:
- Prueba de compatibilidad con dispositivos móviles de Google: le permite saber si su sitio funciona tan bien en dispositivos móviles como en pantallas de computadora.
- resizeMyBrowser: le permite ver su sitio en diferentes resoluciones.
- Responsiator: muestra su sitio en diferentes pantallas de dispositivos con diferentes diseños (de lado o del lado derecho hacia arriba).
Método 2 de 3: hacer que el diseño de la página sea receptivo
Paso 1. Considere un marco de hoja de estilo receptivo gratuito
Un marco es un conjunto preescrito de HTML, CSS y / o JavaScript que puede usar como esqueleto para su sitio. Los marcos están todos probados y optimizados para funcionar con todos los navegadores, por lo que todo lo que necesita hacer es insertar su contenido, agregar sus preferencias de medios y colores y publicar su sitio. Algunos marcos populares son:
- Oreja
- Esqueleto
- Fundación
Paso 2. Configure la ventana gráfica con una metaetiqueta
Si no está utilizando un marco, querrá comenzar con el aspecto más importante de la codificación de un sitio web receptivo: la ventana gráfica. La ventana gráfica es la parte del sitio web que es visible para el usuario. La clave para que su sitio se muestre correctamente independientemente del tamaño de la pantalla es escalar el tamaño de la ventana gráfica en la etiqueta META. Para hacerlo, incluya esta etiqueta en la parte superior de cada página del sitio:
Paso 3. Especifique el tamaño del texto en relación con la ventana gráfica
Una vez configurada la ventana gráfica, el texto de la página se ajustará a la pantalla. Sin embargo, las fuentes pueden mostrarse demasiado grandes o demasiado pequeñas si sus tamaños no se especifican en relación con la ventana gráfica. Puede hacer esto definiendo el tamaño de fuente como un porcentaje específico de la ventana gráfica con la unidad vw. Este ejemplo le dice a los encabezados H1 que se muestren al 10% del ancho de la ventana gráfica, sin importar su tamaño:
wikiHow
Paso 4. Utilice consultas de medios para mostrar diferentes estilos para diferentes tamaños de pantalla
Las consultas de medios le permiten elegir si desea mostrar ciertos elementos CSS según el tamaño de la pantalla. Puede especificar los detalles de su consulta de medios en su archivo CSS. En este ejemplo, el color de fondo del cuerpo se volverá rojo si el tamaño de la pantalla del usuario es de 480 px o más:
wikiHow
@media pantalla y (min-width: 480px) {body {background-color: aqua; }}
Método 3 de 3: hacer que las imágenes sean receptivas
Paso 1. Utilice la propiedad de ancho de CSS para escalar imágenes
En lugar de establecer el ancho de la imagen en una cantidad específica de píxeles (por ejemplo, 500 px), use un porcentaje (por ejemplo, 100%) para que la imagen mire el ancho de su padre y ajuste en consecuencia. Establecer el ancho de una imagen al 100% obliga a la imagen a escalar hacia arriba y hacia abajo según el tamaño de la pantalla del espectador. Para hacer esto en línea:
Paso 2. Utilice la propiedad de ancho máximo para limitar la escala del tamaño real de la imagen
Si usa la propiedad de ancho en el paso anterior para escalar una imagen al 100%, la imagen crecerá o se encogerá para ajustarse al 100% de su contenedor sin importar el tamaño. Esto significa que si la imagen está en el lado más pequeño, se ampliará más que su tamaño original y se verá de menor calidad. Para evitar que esto suceda, use max-width para establecer el tamaño máximo de escala de la imagen al 100% (su tamaño real). Así es cómo:
Paso 3. Utilice el elemento de imagen HTML para mostrar diferentes imágenes en diferentes tamaños de pantalla
Si desea crear imágenes de tamaño personalizado para mostrarlas en pantallas de diferentes tamaños, puede especificar qué fotos mostrar en su código HTML. Cree imágenes de diferentes tamaños y luego use este código como ejemplo para especificar qué imagen usar en pantallas de 600px y 1500px de ancho:
