Responsive Design

Principios Básicos:

Diseño responsivo y diseño adaptativo:: Un diseño responsive responde en todo momento a las dimensiones del dispositivo, reaccionando automáticamente, dando una respuesta ajustada a la situación, mientras que un diseño adaptativo es aquel que se adapta cuando el servidor detecta el dispositivo y envía un contenido adaptado al mismo, pero no necesariamente responde en todo momento.
Flujo:: Cuando el tamaño de la pantalla es más pequeño, hace que todo ocupe más espacio vertical que horizontal, hecho que hace que el contenido sea empujado hacia abajo.
Unidades relativas:: Según el dispositivo, el tamaño de la pantalla inevitablemente va a variar, por lo que para trabajar correctamente en diseños responsive hay que tener en cuenta siempre trabajar con unidades relativas como los % e intentar evitar las unidades estáticas, las cuales no responden a la adaptación de diseños flexibles.
Puntos de ruptura:: Estos permiten que el diseño cambie en puntos predefinidos, Puede ser que en ordenador se muestren 3 columnas de contenido pero al pasar a un ancho más estrecho, estas se muestren una debajo de otra y no de lado.
Valores máximos y mínimos:: Es importante utilizar propiedades como min-width o max-width, para definir tamaños mínimos o máximos en los elementos para que estos se puedan ampliar o reducirse según sea necesario dependiendo de la pantalla del dispositivo utilizado.
Objetos anidados:: El maquetar teniendo en cuenta etiquetas como section, article y divs que engloben otros contenidos se es más facil que la apariencia se mantenga constante cuando se desea, por mucho que cambie el tamaño de la pantalla.
Móvil o escritorio primero:: Se deben considerar el uso de 2 estrategias antes de maquetar: Mobile first: Enfocarse primero en dispositivos móviles y luego en los demás, y la otra es Desktop first: Enfocarse primero en dispositivos de escritorio y luego pensamos en dispositivos móviles.
Fuentes web vs fuentes del sistema:: Algo más a considerar es el tipo de fuentes que se quieren utilizar. Se pueden usar las fuentes de sistema que son de carga rápida, excepto cuando el usuario no las tiene localmente; o usar fuentes web las cuales, aunque se son más impresionantes y tienen más estilo, el servidor tenga que cargarlas por aparte como un archivo más, hecho que ralentiza el proceso de carga de la página.
Imágenes de mapa de bits vs Vectores:: Los mapas de bits, como el propio nombre indica, están hechos con bits. Estoy significa que si se incrementa mucho el tamaño del archivo, se verá pixelado. Los vectores evitan este problema, ya que son capaces de adaptarse a cualquier tamaño. Para un mapa de bits usa un jpg, png o gif; para los vectores, SVG.

Media queries:

Las reglas media queries son un componente clave del diseño responsive. son un tipo de reglas de CSS que permiten crear un bloque de código que sólo se procesará en los dispositivos que cumplan los criterios especificados como condición, permitiendo adaptar el sitio o aplicación según la presencia o el valor de dichos criterios.

Tipos de medios:

all:: Aplica a todos los dispositivos. El que se utiliza por defecto.
screen:: Monitores o pantallas de ordenador. Es el más común.
print:: Destinado a material paginado y documentos vistos en una pantalla en modo de vista previa de impresión.

Características de medios:

Las características de medios describen características específicas del agente de usuario, el dispositivo de salida o el entorno. Las expresiones de características de medios comprueban su presencia o valor y son completamente opcionales. Cada expresión de características de medios debe estar entre paréntesis.

width:: Ancho de la ventana gráfica, incluido el ancho de la barra de desplazamiento.
min-width:: Ancho mínino de la ventana gráfica.
max-width:: Ancho máximo de la ventana gráfica.
aspect-ratio:: Relación de aspecto ancho-alto de la ventana gráfica.
orientation:: Orientación de la ventana gráfica.
otros:: media features

Operadores lógicos:

Estos se pueden utilizar para redactar una media querie compleja.

and:: Se utiliza para combinar varias características de medios en una sola media querie, lo que requiere que cada característica encadenada regrese true para que la regla sea true. También se utiliza para unir características de medios con tipos de medios.
not:: Se usa para negar una media querie, regresando true si la consulta de otra manera devolvería false. Si está presente en una lista de consultas separadas por comas, solo negará la consulta específica a la que se aplica. Si usa el operador not, también se debe especificar un tipo de medio.
only:: Aplica un estilo solo si coincide una media completa. Es útil para evitar que navegadores antiguos apliquen estilos seleccionados. Si usa el operador only, también debe especificar un tipo de medio.
, (coma):: Las comas se utilizan para combinar múltiples medias queries en una sola regla. Cada query en una lista separada por comas se trata por separado de las demás. Por lo tanto, si alguna de las queries en una lista es true, la declaración de medios completa devuelve true.