Cómo hacer que su sitio web responda

Cómo hacer que su sitio web responda

En estos días es difícil encontrar a alguien que no posee un dispositivo móvil, o múltiples, conectado a Internet. Y los propietarios de sitios web y los desarrolladores deben adaptarse a los desafíos del tiempo.

Si tiene un sitio web existente que no responde, debe leer este artículo.

Actualmente, la técnica más popular se encuentra en el diseño web sensible, favoreciendo el diseño que se adapta dinámicamente a diferentes vistas de navegador y dispositivo, cambiando el diseño y el contenido a lo largo del camino. Esta solución tiene los beneficios de ser los tres, sensible, adaptable y móvil.

Por lo tanto, para hacer que su sitio responda, en general, sus dos objetivos principales son:

Puede comenzar a trabajar en los cambios de código. Tendrá que comprobar tanto el HTML como el CSS del sitio bastante a menudo durante este proceso, así que asegúrese de familiarizarse con las herramientas del desarrollador de su navegador.

Debemos asegurarnos de que la ventana gráfica del sitio responda a las diferentes resoluciones de los dispositivos, permitiendo que las consultas de medios CSS funcionen. Esto se logra añadiendo la siguiente meta tag a la <head> de todas las páginas:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Entonces necesitas reconocer todas las clases. A continuación, eliminamos los estilos de ancho de cada uno, agregamos un contenedor de clase <div> que envuelve el contenido de cada sección (encabezado, contenido, pie de página, etc.) y aplicamos un estilo de máximo ancho a esa clase.

El diseño responsable es una excelente manera de tomar su sitio web existente y adaptarlo para su nuevo público móvil.

En cuanto a los temas de WordPress – hay buenas noticias. Casi todos los temas de prima de calidad decente hoy en día es totalmente adaptable haciendo la adaptación para los dispositivos móviles mucho más fácil. Un buen ejemplo de un tema bien codificado responde es Rehub, una opción muy popular para el comercio electrónico y sitios de revisión. Puedes verlo en acción por ejemplo en esta página sobre un rizador de pelo.

El siguiente paso para hacer que la estructura del sitio responda plenamente es crear las consultas de medios que adaptarán el contenido a la ventana gráfica.

General Media Consultas puntos de interrupción:

  • 912px: ancho máximo del contenido
  • 767px: mid-size / tablets
  • 480px: dispositivos pequeños / móviles
  • 400px: viewports más pequeños

El objetivo del siguiente paso es garantizar que todas las páginas se pueden alcanzar fácilmente en cada resolución y en cada dispositivo. Es necesario habilitar dos sistemas de navegación diferentes, uno para el sitio web original y el otro para el sitio web para móviles. Y optimizarlos.

Es finalmente el momento de sumergirse en los detalles y asegurarse de que cada pieza del rompecabezas funciona perfectamente en cada ventana y dispositivo. Para lograrlo, debe revisar cada componente y adaptar sus tamaños, mostrar contenido y permitir diferentes tipos de interactividad.

Ajustar el tamaño de la fuente y la altura de la línea de los textos de párrafo para aumentar la legibilidad en pantallas pequeñas y aumentar el tamaño de los botones para los dispositivos que permiten una interfaz táctil son sus primeras grandes preocupaciones al hacer el salto a la respuesta.

Otro aspecto importante para el diseño web responsivo implica medios flexibles. Como los viewports comienzan a cambiar el tamaño los medios de comunicación no siempre siguen el ejemplo. Las imágenes, videos y otros tipos de medios deben ser escalables, cambiando su tamaño a medida que cambia el tamaño de la ventana de visualización.

Una manera rápida de crear medios escalables es utilizando la propiedad max-width con un valor de 100%.

Al hacerlo, se asegura que a medida que la ventana se reduzca, cualquier medio se reducirá según sus contenedores width.

Ejemplo:

img, video, canvas {

  max-width: 100%;

}

Otras características de los medios incluyen la identificación de colores de salida disponibles con el uso de las características de color, índice de color y monocromo, identificación de dispositivos de mapa de bits con la característica de cuadrícula e identificación del proceso de exploración de un televisor con la función de exploración. Estas características son menos comunes pero igualmente útiles cuando se necesitan.

Después de todos estos pasos, todo lo que queda es afinar los estilos. Ahora es el momento de revisar todas y cada una de las páginas del sitio web, utilizando todos los dispositivos disponibles y probando todas las posibles formas en que un usuario puede acceder a su sitio.

Fue consejos simples y útiles para aquellos que quieren hacer su sitio mejor y sensible.

 

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *