Responsive Web Design Strategies

Study Notes

Diseño de Páginas Web

Hay muchos tipos de dispositivos con diferentes tamaños de pantalla, lo que hace difícil crear un punto de control exacto para cada dispositivo.

Estrategias de Diseño

Hay dos estrategias principales de diseño: Mobile first y Desktop first.
Mobile first: se enfoca en dispositivos móviles y luego se adapta a otros dispositivos.
Desktop first: se enfoca en dispositivos de escritorio y luego se adapta a otros dispositivos.

Mobile First

Se utiliza cuando el público objetivo es en su mayoría usuario de dispositivo móvil.
Ejemplos: sitios para comprar boletos, pedir cita en restaurantes, etc.
Este enfoque hace que el desarrollo en escritorio sea muy sencillo, ya que se reduce a tener un diseño de móvil en escritorio y luego agregar nuevas secciones o partes para completar el diseño en resoluciones grandes.

Desktop First

Se utiliza cuando el público objetivo es en su mayoría usuario de computadoras.
Ejemplos: aplicación de contabilidad.
Lo primero que se diseña es la versión de escritorio, y luego se van descargando detalles o recolocando información hasta tener la versión para dispositivos móviles.

Diseño Adaptable

Hace que una página se vea bien en cualquier tamaño de dispositivo.
Utiliza HTML y CSS.
viewport es el área visible de una página web, que varía según el dispositivo.

Anchos y Altos, Mínimos y Máximos

Podemos configurar el ancho y alto de la página por medio de porcentajes.
Utilizamos las propiedades max-width, max-height, min-width y min-height para establecer límites para el contenido y asegurarnos que se vea bien en todos los dispositivos.
Ejemplo: elemento { width : 50%; max-width : 700px; min-width : 350px; }

Media Query

Regla o conjunto de reglas que se introducen en una hoja de estilo CSS para definir propiedades específicas para distintos tipos de medios.
Podemos especificar el ancho y alto de un contenido para que se adapte a una pantalla de escritorio o de celular.
Ejemplo: @media (max-width: 600px) { p{ display: block; background-color: black; color: red; } }

Tipos de Medios

Existen distintos tipos de medios en los que podemos mostrar las páginas web.
Ejemplos: Pantallas, Medios impresos, All.
Tipo de medio: Significado
- screen: Monitores o pantallas de ordenador.
- print: Documentos de medios impresos o pantallas de previsualización de impresión.
- all: Todos los dispositivos o medios.

Puntos de Control

Se refiere al tamaño de pantalla en el que cambiará el diseño de nuestra página.
Ejemplo: @media screen { p{ background-color: blue; color: white; } }

Description

Learn about the importance of responsive web design strategies when dealing with devices of different screen sizes. Explore the concepts of 'Mobile first' and 'Desktop first' design approaches to ensure optimal user experience across various devices.