¿Cómo hacer que los usuarios naveguen por el sitio web diseñado en terminales móviles? Lo sabrás después de leer este artículo.

En la era de Internet móvil, ¿cómo podemos diseñar sitios web que también puedan ser vistos por los usuarios en dispositivos móviles? Aquí le presentamos el diseño responsivo.

1. Definición responsive

El término Diseño Web Responsivo (RWD) fue acuñado por Ethan

Marcotte )propone. Publicó un artículo innovador en A List Apart, integrando tres tecnologías de desarrollo existentes (cuadrícula flexible, imágenes flexibles y consultas de medios) y nombrándola diseño web responsivo.

El diseño de un sitio web responsivo debe responder y ajustarse en consecuencia según la resolución del dispositivo utilizado por el usuario, para satisfacer mejor

las necesidades de experiencia del usuario de los diferentes dispositivos. El diseño de sitio web responsivo significa que un sitio web puede ser compatible con múltiples terminales sin necesidad de crear una versión específica para cada terminal.

Simplemente comprenda: un sitio web responsivo = sitio web de teléfono + sitio web de pad + sitio web de computadora

2. Diseño de interfaz en diseño responsivo

Para el diseño de interfaz, nuestros diseños anteriores para los productos de escritorio puede haber sido de un tamaño y la posición de cada módulo fue fija. Sin embargo, en el diseño responsivo, estas cosas han cambiado. Es necesario diseñar varias versiones del diseño.

Pero una cosa a la que debemos prestar atención es que es mejor mantener consistente el orden de los nodos DOM, porque en las páginas responsivas,

usaremos un diseño fluido y en un diseño fijo. Es posible que las técnicas de cambiar el orden DOM y el orden visual utilizando posicionamiento absoluto o márgenes negativos no se apliquen aquí.

3. Sitio web oficial de Apple

1. Cuadrícula elástica El contenido se puede ampliar o estirar según la resolución de la pantalla.

2. Las imágenes flexibles se pueden reducir de tamaño en pantallas pequeñas y se pueden ampliar a un tamaño máximo para admitir pantallas grandes.

3. Las consultas de medios son fragmentos de código colocados en el HTML y las hojas de estilo del sitio para recopilar información sobre las capacidades de visualización del dispositivo para admitir

diversas formas de interfaces.

1. Entorno externo

El rápido crecimiento y la creciente diversificación de los dispositivos conectados a Internet hace que ya no exista un tamaño de pantalla estándar.

2. Características propias La capacidad de respuesta estrictamente definida generalmente se refiere al diseño web responsivo, y la Web, con su flexibilidad y plasticidad únicas, puede adaptarse a dispositivos de varios tamaños y configuraciones y puede usarse en todas partes.

3. Necesidades internas

Tan pronto como se propuso el concepto de diseño responsivo, los principales sitios web y plataformas esperan adoptar este modelo único para hacerlo más flexible.

para adaptarse a más dispositivos, especialmente en esta era de dispositivos móviles abrumadores.

4. Todo es flexible

Hemos hecho la página más "flexible" a través de ideas de desarrollo y diseño responsivo. Las imágenes se pueden cambiar de tamaño automáticamente y los diseños de página ya no se rompen. Si bien nunca habrá una solución perfecta, nos brinda más opciones. Ya sea que los usuarios cambien la orientación de la pantalla del dispositivo o naveguen desde la pantalla de un escritorio a un iPad, la página será verdaderamente flexible. Con la tecnología Liquid Grid y Liquid Image, y usando el marcado HTML correcto en el lugar correcto.

5. Imágenes responsivas

La idea técnica de las imágenes responsivas: no solo escalar la imagen año tras año, sino también reducir la resolución de la imagen misma en pequeños dispositivos.

Cuando estas solicitudes llegan al servidor, el archivo de fondo determinará si estas solicitudes requieren imágenes originales o "imágenes responsivas" de tamaño pequeño y proporcionará la respuesta correspondiente. Para dispositivos móviles con pantallas pequeñas, nunca se utilizan imágenes grandes en su tamaño original.

Ventajas

1. Admite cualquier dispositivo y sistema

Hoy es la era de Internet móvil. El acceso a Internet de las personas ya no se limita a computadoras PC y teléfonos móviles. , tabletas y otros dispositivos móviles

también está aumentando. Se puede acceder al sitio web responsivo desde cualquier dispositivo, y el ancho del sitio web se puede ajustar en el navegador para que no aparezcan barras de desplazamiento en el sitio web, de modo que los usuarios no tengan un diseño confuso o una visualización incompleta sin importar que naveguen por el sitio web. en cualquier pantalla, o problemas de código confuso, maximizando así la experiencia del usuario en el sitio web.

2. Puede reducir el costo de tiempo y el costo de capital de producción.

Los sitios web producidos según métodos tradicionales son relativamente limitados y no necesariamente se puede acceder a ellos normalmente en varios dispositivos. y navegadores. Algunas empresas necesitan crear un sitio web para PC, un sitio web móvil o incluso una aplicación, lo que requiere una gran inversión de tiempo y dinero. La creación de un sitio web responsivo puede resolver muy bien este problema. Por un precio, puede obtener la experiencia de dos sitios web y, en última instancia, lograr el efecto de un sitio con múltiples usos, ahorrando así los costos de construcción del sitio web.

3. Tres sitios en uno, fácil mantenimiento

Los tres sitios web de computadora, teléfono móvil y WeChat usan la misma URL, la misma administración de backend y los datos se actualizan sincrónicamente. todo

p>

Las imágenes y el contenido solo necesitan cargarse y actualizarse una vez, lo que hace que el mantenimiento sea simple y fácil, ahorrando mucho tiempo y dinero.

Desventajas

1: No es compatible con la compatibilidad de versiones antiguas de IE

Este es un problema con un soporte deficiente para versiones antiguas de IE (IE6, IE7 , IE8). El problema fatal es que si la mayoría de los usuarios de su sitio web todavía usan la versión anterior de IE, se recomienda no realizar un diseño web responsivo.

2: Falta de flexibilidad

Según los diferentes atributos del dispositivo de diferentes terminales, los requisitos de experiencia del usuario para el producto serán completamente diferentes. Los sitios web con más contenido y funciones

no son adecuados para la capacidad de respuesta

3: La velocidad puede disminuir

Ya que las páginas responsivas se descargan al mismo tiempo. Si aplica código de estilo CSS, puede descargar el código redundante de PC y Pad en su teléfono móvil.

Esto hará que el archivo se haga más grande y afecte la velocidad de carga.

1. La misma página debe verse cómoda en diferentes tamaños y proporciones

2. La misma página debe verse razonable en diferentes resoluciones

3. La misma página debe tener una experiencia unificada bajo diferentes métodos operativos (como mouse y pantalla táctil)

4. La misma página debe usarse en diferentes tipos de dispositivos (teléfonos móviles, tabletas, computadoras), el método de interacción debe Ser consistente con los hábitos.

Tamaño de diseño de 1 iPad

Tamaño: 1024*768px

Barra de estado: 20px

Barra de navegación: 44px

Barra de etiquetas: 49px

2 LA APLICACIÓN DE Comercio electrónico OUTENT

1. Fuente

2. Icono

3. Público * **Control

Tamaño del diseño del iPhone 3

Tamaño: 750*1334px

Barra de estado: 40px

Barra de navegación: 88px

Barra de etiquetas: 98px

Tamaño de la interfaz y altura de la columna

1. Texto

En una aplicación, el rango de tamaño de fuente es generalmente 20-36 Entre (@2x), por supuesto, el diseño de títulos grandes aparece en iOS 11.

El tamaño de fuente aún debe configurarse de acuerdo con los atributos del producto. Otra cosa a tener en cuenta es que todas las configuraciones de tamaño de fuente deben ser números pares y la relación entre los tamaños de fuente del contenido superior e inferior es 2-4.

A través de este artículo podrás conocer los siguientes puntos:

1. Qué es un sitio web responsivo

2. Las perspectivas de un sitio web responsivo

; p>

3. ¿Cuáles son las ventajas y desventajas de los sitios web responsivos?

4. Cuatro niveles de diseño de sitios web responsivos

5. Normas comunes sobre tamaños de dispositivos móviles