Las piedras angulares del diseño receptivo

Las piedras angulares del diseño receptivo

Sitios web de próxima generación deben ser reactivo, las razones son muchas y dispares pero por ahora veamos dos: hay mucha gente que navega desde un móvil o una tableta (y perder una base de usuarios tan alta sería una verdadera lástima), Google aprecia los sitios receptivos y la clase superior en comparación con el otro.



Para crear una página web desde diseño de respuesta debes tener conocimiento técnicas específicas y en particular hay 3 reglas para conocer y aplicar.

Index
  1. Las piedras angulares del diseño receptivo

Las piedras angulares del diseño receptivo

1. Consultas de los medios

Podemos definir instrucciones que tengan la tarea de revelar qué medio está siendo utilizado por el usuario (por ejemplo la pantalla) y, sobre esta base, mostrarán y aplicarán los identificadores y clases definidos para ese medio específico. En otras palabras: gracias a las solicitudes de los medios, el desarrollador web tiene la posibilidad de mostrar su sitio de una manera diferente según el dispositivo utilizado por el usuario.

Para hacer todo esto, es posible explotar las reglas de consulta multimedia y obtener el resultado insertando una única línea de código adicional.

ES Conocer las reglas y usarlas tanto como sea posible es esencial.

2. Rejillas fluidas

Su trabajo consiste en cambiar el diseño de una página web según el espacio disponible, por lo que sirven para eliminar los problemas que ocasiona la maquetación fija. La diferencia más obvia con el diseño fijo es la unidad de medida: no se expresa en píxeles sino en porcentaje. Si es un principiante y desea crear cuadrículas fluidas, puede descargar bibliotecas como principal.

DATEI Bunte Weihnachtstexteffekte Photoshop Tutorials

De lo contrario, Dreamweaver le permite crear diseños de cuadrícula fluidos desde el menú Archivo, Nuevo, Diseño de cuadrícula fluida.

sitio web adaptable

3. Imágenes flexibles

Es fundamental que las imágenes también se escalen de forma independiente según el tamaño del monitor. ¿Cómo se puede lograr esto? Existen diferentes estrategias.

Puede aprovechar la propiedad CSS max-width con un valor de 100% y altura automática para que la imagen se adapte proporcionalmente a su contenedor y sin pérdida de calidad.

responsive_design1

ap-pet-store

También puede relacionar el tamaño de las imágenes con el tamaño del texto.

pts-floristería

Y finalmente, si la imagen contiene texto, puede establecer un tamaño mínimo y un tamaño máximo para asegurarse de que el texto sea siempre legible.

Diseño RCTA receptivo

Hinaufgehen

Wir verwenden unsere eigenen Cookies und Cookies von Drittanbietern, um die Benutzererfahrung zu verbessern. Mehr Informaticon