Diseño web responsivo: crea sitios web flexibles que perduren

1. Introducción: Una de las mejores y una de las peores cosas de la Web es la frecuencia con la que cambia. Para mí al menos eso es increíblemente emocionante porque llego a volver a investigar diferentes técnicas para diseñar para la Web moderna. Hola. Yo soy Ethan Marcotte. Soy un diseñador Web independiente, autor y orador, y la clase de hoy se trata de diseño Web responsive. El diseño responsive significa que podemos crear una experiencia Web que se sirva hasta cada dispositivo y navegador y que se remodelará inteligentemente dependiendo del tamaño de la pantalla. Entonces, en esta clase vamos a estar mirando un diseño que fue creado para una revista ficticia y luego traducirlo en un diseño completamente receptivo utilizando los tres ingredientes que tiene cada layout responsive: rejillas fluidas, imágenes flexibles, y consultas de medios. medida que miramos cada uno de esos ingredientes individualmente, estaremos juntando para crear un diseño completamente agnóstico de dispositivos, completamente receptivo, y hacia el final de la clase estaremos viendo algunas estrategias que tú usar para remodelar tu proceso de diseño para ayudarte a convertirte en desarrollador front-end más receptivo para las pantallas que conocemos hoy en día así como para las que aún no se han inventado. Creo que la flexibilidad en el corazón del diseño responsive es tan importante y siempre ha sido importante porque nunca hemos estado diseñando para una pantalla de un solo tamaño. Es decir, hay navegadores incrustados en los cuadros de mando de autos ahora y esta no es la Web a la que me inscribí, pero ahora tenemos la capacidad de diseñar realmente una experiencia que pueda remodelarse de manera flexible sin importar dónde suceda ser. Entonces, esta clase creo que es realmente para diseñadores front-end y desarrolladores front-end. Estaremos viendo un poco de CSS, pero no necesitas ser un experto en CSS. Estaremos trabajando a través de algunos de los fundamentos de cómo realmente puedes traducir tus diseños en un diseño responsive. Para mí, realmente espero que te alejes de esta clase con una apreciación real de lo que significa ser un diseñador de primer nivel móvil y cómo eso cambiará la forma en que piensas de diseñar para la Web moderna. Me alegra tanto que decidieras unirte a esta clase. Vamos a ir. 2. ¿Qué es el diseño responsivo?: Entonces, empecemos la clase respondiendo a la pregunta, ¿qué es el diseño responsive? Porque cuando trabajo con un equipo nuevo o nuevo cliente, esa es una de las primeras preguntas que me dan. Porque todo el mundo está increíblemente emocionado con esa frase, diseño web receptivo. Pero todos tienden a tener una idea ligeramente diferente sobre lo que significa para ellos y para su empresa. Entonces, me gustaría empezar hoy diciéndoles algo de lo que significa para mí como diseñadora. Para ello, me gustaría contarles una historia sobre un árbol. Pero este es un árbol bastante especial, y está ubicado en el corazón del Bosque Pando, que está en Utah. Ahora Pando es un bosque bastante especial. Es de unos 100 acres de tamaño. Entonces, digamos que tú y yo estamos viajando lado a lado por este bosque, y mientras lo hacemos, estamos rodeados de alguna naturaleza increíble, estos hermosos troncos de árbol blanco disparando desde el suelo a nuestro alrededor hasta donde el ojo puede ver. Después de algún tiempo viajando por este bosque, me dirijo a ti y digo que te he mentido, pero sólo un poquito. Porque ya ves, Pando no es en realidad un bosque, Pando es sólo un árbol. Verás, Pando es en realidad el término latino para “me extendí”. Pando no era lo que se conoce como colonia clonal, es un solo árbol de álamo gigante que tembla. Entonces cada árbol que tú y yo podríamos ver con nuestros ojos es en realidad sólo un tallo y cada uno de ellos disparando fuera de este masivo sistema de raíces subterráneas que todos comparten. Había unos 40 mil tallos estimados que están en Pando hoy. Ahora, Pando es en realidad un árbol bastante viejo. Tiene unos 80 mil años de edad, lo que básicamente convierte a Pando en uno de los organismos más grandes y uno de los más antiguos conocidos con vida en el planeta hoy en día. Creo que esta es una historia realmente maravillosa para empezar. Porque pienso como diseñadores o tal vez como seres humanos, tendemos a mirar cosas que parecen visualmente complejas, y es nuestro instinto verlos como más distintos y más separados de lo que realmente son por defecto. He estado pensando mucho en eso en mi propia práctica de diseño. Por lo general, cuando estoy mirando por completo un bosque diferente. Cual todos los diferentes dispositivos y navegadores a los que me están pidiendo que entregue una experiencia hermosa y convincente. Ese es un bosque más complejo con el que siempre he tenido que lidiar a la hora de diseñar para la web. Pero la cosa es, es que cuando estamos diseñando para la web moderna, esto son solo estacas de mesa. El web está en cualquier lugar y en todas partes donde nuestros usuarios pasan a estar con lo que sea que las pantallas pasen a estar más cerca de la mano. Entonces, al menos para mí, es crítico entender la web como un medio de diseño completamente flexible. Es decir, cuando estamos diseñando para la web, estamos diseñando para un lienzo infinito completo. Es lienzo completamente flexible, y nuestros diseños tienen que ser tan flexibles y tan accesibles como los dispositivos que nuestros usuarios están sosteniendo en sus manos. Lo que es emocionante para mí como diseñador receptivo es que hay tanto trabajo de diseño receptivo excelente por ahí en la web hoy en día que puedo inspirarme. Seguro que encontraste tantos sitios de respuesta maravillosos por ahí, pero déjame mostrarte algunos ejemplos que realmente me gustan hoy. Lo emocionante que pienso en el diseño receptivo ya que está sucediendo hoy en día es que realmente hay un gran trabajo receptivo que se está haciendo en diferentes industrias. Aquí está Amherst College, que es un gran ejemplo de un sitio de Ed Superior sensible, y es hermoso, y es impactante en casi cualquier pantalla de tamaño. Te das cuenta de que a medida que estoy redimensionando la ventana del navegador, el diseño responsive está cambiando su forma para que sea accesible a pantallas tanto pequeñas como grandes. Los editores también han estado utilizando diseño responsive realmente efectivamente en los últimos años. Aquí está el Financial Times, que tiene un diseño de respuesta muy señorial y muy hermoso, utilizando rejillas flexibles, imágenes flexibles y consultas de medios, para crear una experiencia de respuesta realmente hermosa. Pero no se trata solo de editores o sitios web de Higher Ed. Hay una serie de aplicaciones web por ahí que han estado utilizando el diseño responsive de manera muy efectiva también. Aquí te presentamos Adobe Type Kit, y tienen una interfaz muy compleja que puedes usar en pantalla pequeña y grande para no solo navegar por fuentes sino también filtrarlas a lo largo de una serie de ejes realmente complejos. El motivo por el que muchas de estas organizaciones y empresas han ido respondiendo es porque reconocen el hecho de que ser agnóstico de dispositivos es solo estacas de mesa para diseñar para la web moderna. Estamos diseñando para mucho más que solo dispositivos de escritorio. La informática móvil ha explotado en los últimos años. Se estima que hay unos ocho mil millones de dispositivos móviles en uso en todo el mundo, y ese número no parece estar bajando pronto. informática de tabletas ya no es necesariamente el chico más nuevo del bloque, pero todavía me da pisos que tan solo en 2011, unos 80 nuevos dispositivos de tableta entraron al mercado en un periodo de 12 meses. Eso me parece salvaje. Entonces con todo el churn que estamos viendo tanto en la informática móvil como en tablet, hay una cantidad comprensible de inversión y experimentación en tratar entender cuál podría ser el próximo contexto post desktop. Entonces, hay una cantidad considerable de inversión sucediendo en televisores inteligentes y relojes inteligentes y tantos nuevos contextos de pantalla diferentes que en realidad tienen navegadores realmente poderosos en ellos también. cuántos de estos vamos a estar diseñando en el futuro. Ahora, cuando estamos viendo un mercado complejo como este, es muy tentador decir que deberíamos estar diseñando experiencias específicas para móviles o experiencias específicas para tabletas o experiencias específicas de escritorio. Pero en realidad es mucho más potente y mucho más liberador si dejamos diseñar para dispositivos individuales y en cambio pensamos un poco más flexible. Piensa en entregar una experiencia que se pueda ver en pantalla de cualquier tamaño. Porque en última instancia no solo estamos diseñando para dispositivos, estamos diseñando para la gente de los otros lados de esas pantallas. Piensa en un lector de tu sitio web que podría estar regresando a ese sitio web en múltiples momentos del día con cualquier dispositivo o dispositivo que suceda estar más cerca de la mano. Esto es algo que en realidad muchas editoriales y organizaciones se han dado cuenta. Que al ser un poco más flexible y no tratar de controlar las experiencias mucho a través de diferentes dispositivos, realidad pueden conducir y mejorar el engagement a través todos esos dispositivos al ser un poco más dispositivo agnóstico en cómo diseñan para la Web. En última instancia, el diseño responsive significa que estás diseñando una experiencia flexible, que se entrega a cada dispositivo que pudiera visitar ese sitio web. Ahora bien, esa experiencia podría cambiar en su diseño o su presentación dependiendo del tamaño de la pantalla pero eso está bien. Porque en última instancia, es un sitio web que estás entregando a todos tus usuarios. Al hacerlo, eso te ayudará a llegar más dispositivos y a más personas que nunca. Entonces, estas son solo algunas de las cosas que pasaban por mi cabeza cuando escribí por primera vez ese artículo llamado Responsive Web Design. trata de un artículo que se publicó en 2010, que básicamente está diciendo que la flexibilidad que es inherente a la web es algo que necesitamos ver como una fuerza, más que algo que necesitamos tratar de controlar o límite. Ahora, en el artículo, propongo esta receta de alto nivel para lo que hace un diseño receptivo. Específicamente que cada diseño responsive comienza con un diseño fluido o flexible basado en cuadrículas. Un diseño que se construye con porcentajes y proporciones en lugar de píxeles inflexibles. Entonces, hay imágenes y medios que son flexibles ellos mismos que funcionan dentro de esos diseños flexibles. Por último, tenemos consultas de medios, que son un poco de polvo de pixie de la especificación CSS. Nos permiten controlar la flexibilidad en formas que nos son útiles. Podemos cambiar y adaptar esos diseños fluidos en diferentes puntos de ruptura. En otras palabras, crear diseños que puedan cambiar su forma y representar información. Es decir, pueden responder a la forma cambiante de una ventana del navegador o a la pantalla del dispositivo. Entonces, eso todo suena muy técnico. Pero en última instancia, es importante reconocer que un diseño receptivo al final del día es simplemente de naturaleza flexible, pero luego cambia y se adapta en ciertos puntos de ruptura para que sea accesible a pantallas estrechas y anchas. En este curso, vamos a estar viendo el diseño de muestra para revista ficticia, uno que fue creado por, para, y sobre dinosaurios. Ahora, los archivos de muestra para ese diseño van a ser accesibles en la sección de recursos para este curso. Si quieres seguir adelante, por favor hazlo. Pero este diseño es lo que vamos a usar para mostrarte realmente cómo se juntan esos tres ingredientes de un diseño receptivo. Por lo tanto, estaremos utilizando rejillas fluidas, imágenes flexibles y consultas de medios para traducir este diseño en un diseño completamente flexible, completamente receptivo. También veremos algunas estrategias para cambiar nuestro proceso de diseño, que usted mismo pueda ser un diseñador o desarrollador más flexible. Con eso, empecemos. 3. Primer paso: cuadrículas fluidas: Entonces, comencemos con la base de un diseño receptivo que es realmente un diseño flexible o fluido basado en cuadrícula que va a alimentar toda tu experiencia. Porque realmente cada diseño responsive comienza con una base flexible. Entonces, echemos un vistazo a cómo podemos traducir un marcado para un diseño y convertirlo en un diseño completamente flexible basado en cuadrícula. Entonces, este es el marcado que he creado y esbozado para nuestra revista ficticia llamada Rawr que es por, para y sobre los dinosaurios. Ahora bien, si alguna vez has diseñado una página web en Photoshop o en Illustrator, probablemente estés bastante familiarizado con cómo podría funcionar un diseño como este. Ahora bien, esto es solo una foto de un sitio web y de arriba a abajo tenemos cosas como artículos recientes, una historia de portada, una carta de editores a la revista y luego finalmente, un pie de página todo el camino al fondo. Nada realmente súper elegante, pero este es realmente bonito caso de uso para nosotros para mostrar cómo puedes traducir un diseño de ancho fijo en algo que es mucho más flexible. Ahora, en la sección de recursos para la clase, encontrarás un enlace a algunos archivos de muestra que he creado y los estaré usando hoy para básicamente trabajar a través de los tres ingredientes para el diseño responsive y mostrarte cómo se pueden aplicar realmente a nuestro diseño de muestra. Entonces, voy a empezar con la primera sección sobre la creación de rejillas fluidas. Entonces, en este archivo HTML, he creado básicamente un diseño de estilo ligero simple para la sección de artículo reciente sobre nuestro diseño de muestra. Ahora, notarás que no hay mucho en el camino del diseño, solo hay algunos tamaños de fuente simples y estilos sencillos y no hay imágenes. De verdad solo quiero enfocarme en el contenido y el diseño para esta primera sección. Entonces, si voy a traducir esto en una cuadrícula completamente flexible, necesito volver atrás y mirar mi diseño. Ahora, en esta maqueta, me voy a centrar sólo en los artículos recientes. Tengo una cuadrícula de cinco columnas muy directa para este diseño de pantalla ancha. Ahora bien, si quiero traducir esto a HTML y CSS, básicamente puedo usar algo llamado CSS Grid para construir este diseño con bastante rapidez. Echemos un vistazo rápido al HTML para este módulo. Entonces, dentro de estos artículos div reciente, tengo cuatro elementos. Tengo el encabezado el cual contiene el título para esta sección así como un enlace para leer más artículos y luego debajo de ese encabezado, tengo dos artículos los cuales son básicamente teasers para el contenido que quiero que el usuario lea o haga clic el. Entonces, por último, tener un elemento aparte que contenga una lista de enlaces adicionales, básicamente a historias secundarias. Si volvemos al diseño, básicamente puedes ver que eso es más o menos lo que hemos creado. Entonces, en mi simulacro, me voy a centrar sólo en esta sección de artículos reciente. Lo que voy a hacer es, voy a hacer un inventario rápido de los diferentes tipos de contenido que tengo dentro de este módulo. Bueno, justo de arriba, tengo un encabezado que anuncia el título de esta sección de artículo reciente así como un enlace más off a costado que me permite crear un enlace a más artículos. Entonces debajo de ese encabezado, tengo dos historias prominentes que básicamente son solo teasers de contenido para atraer al lector a tocar o hacer clic en esos artículos. Entonces, tengo una lista de artículos relacionados desviados a la derecha en una barra lateral. Ahora bien, no me voy a centrar en el diseño, solo quiero enfocarme en esos diferentes tipos de contenido porque lo que he hecho es, los he traducido en algún marcado bastante sencillo. Tengo un contenedor para ese módulo de artículos recientes y luego dentro de eso, tengo un encabezado con mi titular, de ahí el nombre. Entonces, tengo dos elementos del artículo que contienen un poco de información teaser para esas dos piezas de contenido. Entonces en este bloque aparte, tengo una lista ordenada la cual contiene de nuevo, una lista de enlaces a historias secundarias. Si retrocedemos y miramos nuestro prototipo, ese es más o menos nuestro punto de partida, no tenemos un layout, pero tenemos algunos estilos de fuente ligeros aplicados a ese marcado muy sencillo. Ahora bien, si quiero traducir ese diseño a HTML y CSS, voy a volver a mi cuadrícula y echar un vistazo a las columnas con las que estoy trabajando. Ahora específicamente, cada una de estas columnas tiene 180 píxeles ancho y tengo cinco de ellas y la canaleta entre cada una de esas áreas tiene 25 píxeles de ancho. Ahora, esto solo está en mi marcado y estoy tratando con píxeles inflexibles fijos. Ahora, si quisiera construir este diseño con bastante rapidez en mi CSS, podría hacerlo con algo llamado cuadrícula CSS. Ahora, el diseño de cuadrícula CSS es una forma bastante nueva de crear diseños para la web moderna. Si alguna vez has hecho algo con floats o posicionamiento absoluto, CSS grid combina en realidad los mejores elementos de ambos y nos permite crear diseños mucho más rápidamente, es increíblemente potente. Entonces, por ejemplo, en mi bloque artículos-reciente, podría escribir un poco de CSS que básicamente diga, dentro de artículos-reciente, quiero establecer esto para mostrar cuadrícula y luego voy a hacer columnas de plantilla de cuadrícula y luego estoy va a hacer 180 pixeles y voy a escribir eso cinco veces. Entonces, voy a escribir grid-column-gap 25 pixels. Ahora, estas son todas las mediciones de píxel que tomé directamente de mi marcado. Cuando guardo esto y vuelvo a cargar la ventana de mi navegador. Entonces, en Firefox hay una utilidad realmente útil que puedo usar para inspeccionar rápidamente mis diseños basados en cuadrícula. Entonces, he abierto el inspector de mi navegador y si selecciono este bloque artículos-reciente en el que acabo de crear un diseño de cuadrícula en, encima en el panel derecho hay una opción para cambiar el resaltador de cuadrícula CSS. Entonces, si hago clic en ese pequeño símbolo, esto me va a mostrar el esqueleto para el layout que acabo de crear con esas tres líneas de CSS. Básicamente creé una etapa que es un diseño de cuadrícula y al establecer columnas de plantilla de cuadrícula a 180 píxeles cinco veces, he creado columnas de cinco a 180 píxeles de ancho y brecha de columna de cuadrícula 25 píxeles básicamente creé un canalón de 25 píxeles entre cada una de esas zonas. Ahora, cada columna se crea configurando algunas líneas de cuadrícula, una a la izquierda y otra a la derecha. Ahora, cada uno de esos está realmente numerado y podemos usar esos números para diseñar las diferentes partes de nuestra cuadrícula a lo largo de esas líneas de cuadrícula, decir, para completar nuestro diseño. Entonces, por ejemplo, nuestro elemento de cabecera está actualmente limitado a esta primera columna, lo que queremos que haga es abarcar el ancho completo de esas cinco columnas a través de las seis líneas de cuadrícula. Para ello, solo puedo abordarlo en mi encabezado CSS articles-reciente y básicamente puedo decir, grid-column-start: uno y luego también puedo decir, grid-column-end: seis. Entonces, voy a recargar mi navegador y ahora tenemos un encabezado que abarca todo el ancho de nuestro diseño de cuadrícula, desde la primera línea de cuadrícula en el extremo izquierdo hasta la sexta línea de cuadrícula en el extremo derecho. Entonces, veamos si realmente podemos mejorar también el ancho de nuestras historias. Por lo que en este momento, ambas historias básicamente solo están abarcando una columna igual que lo era nuestro encabezado antes. Entonces, seamos un poco más explícitos. Entonces, para la primera historia que es de clase a guiar historia, me gustaría ver grid-column-iniciar uno, pero quería que abarcara dos columnas. Entonces, lo que voy a hacer es que voy a decir, grid-column-end tres. Entonces, que básicamente va a la línea de rejilla que está al final de la segunda columna. Voy a guardar mi CSS, volver a mi navegador y darme cuenta y ahora esa historia está abarcando dos columnas en lugar de ser machacada en una. Hagamos lo mismo con nuestra historia final que se clasifica como story-alt. Ahora ésta va a empezar en la tercera columna básicamente al final justo después de esa primera historia, y luego también quería abarcar dos columnas. Entonces, voy a hacer columna de cuadrícula y cinco. Ahora si guardo mi trabajo y recargo el navegador, ahora tenemos algo que en realidad se ve un poco más cerca del diseño que trazamos en nuestro marcado. Hemos abarcado dos columnas en lugar de estar envueltos en una. Ahora este es un layout básico y en realidad podemos mejorar en esto solo un poco más. Grid-column-start y grid-column-end en realidad se pueden expresar un poco más concisamente porque podemos usar este tipo de notación de barra inclinada en una propiedad de columna de cuadrícula para decir que queremos que este elemento comience en esta línea de cuadrícula y terminar en este extremo mediante el uso de esa notación de barra inclinada. Entonces, para el elemento de plomo de la historia por ejemplo, podríamos básicamente decir cuadrícula-columna una barra inclinada tres en lugar de columnas de la cuadrícula comienzan uno y la columna de la cuadrícula final tres. Para story-alt, en lugar de grid-column-start tres y grid-column-end cinco, podemos hacer grid-column-tres barra cinco, solo una forma ligeramente diferente de hacer el mismo diseño con un poco más de eficiencia. Ahora aquí está la cosa de esta capa que acabamos de crear. Usamos píxeles para traducir perfectamente el diseño de nuestro marcado en código pero lo que pasa con los píxeles es que realmente no cambian su forma. Entonces, si cambio el tamaño de la ventana de mi navegador para simular cómo podría verse esto en una pantalla más pequeña, las cosas van a verse un poco raras. Entonces, voy a hacer que la ventana de mi navegador sea un poco más estrecha y mientras hago eso vas a ver que el diseño no cambia su forma. De hecho obtengo esta pequeña barra de desplazamiento horizontal realmente genial para significar que tengo más diseño que está disparando desde el lado derecho de la pantalla. Entonces, aquí es donde necesitamos tomar ese diseño fijo y flexible que diseñamos en boceto y traducirlo en algo más proporcional. Hay una fórmula muy directa que necesitas usar para hacer eso. Vamos a hablar un poco de unas matemáticas aquí y me disculpo por eso porque yo mismo me aterrorizan los números. Pero si estás traduciendo cualquier diseño de ancho fijo en algo más proporcional, usa esta fórmula. Objetivo dividido por contexto es igual a resultado. Déjame mostrarte cómo funciona eso. Digamos que tienes una pieza de tu diseño que podría ser una columna en tu cuadrícula, podría ser un módulo en particular. Bueno las posibilidades son buenas si has utilizado un programa como Sketch o Photoshop para diseñar tu diseño que tenga un valor de píxel objetivo en ese diseño. Ahora en lugar de tomar ese valor de píxel y ponerlo en nuestro CSS como acabo de hacer, lo que queremos hacer es que queremos tomar ese valor de píxel objetivo y traducirlo en algo más proporcional. Para ello lo dividimos contra el contexto en el que se sienta. Más específicamente nos dividimos contra el ancho de su elemento conteniendo y el diseño. Una vez que dividimos esos dos números juntos, nos queda el resultado basado en porcentajes que luego podemos traducir a nuestra cuadrícula flexible. Déjame mostrarte cómo funciona eso. Ahora estoy de vuelta en mi maqueta y voy a mirar las características del layout que diseñé y tratar de entender las relaciones entre diferentes anchuras en mi maquetación. Ahora como vimos antes, el ancho de cada columna individual es de 180 píxeles de ancho. Ahora ese es el ancho de píxel objetivo. Lo que quiero hacer es que realmente quiero entender la relación de ese valor contra todo el ancho del diseño que tiene 1,000 píxeles de ancho desde el borde izquierdo de la cuadrícula hasta el borde derecho. Entonces, realmente en lugar de decir 180 píxeles, quiero 180 píxeles divididos por 1,000 píxeles, valor de píxel objetivo de 180 píxeles dividido por el contexto en el que se sienta en el que es de 1,000 píxeles. Entonces, si divido esos dos números uno contra el otro, voy a conseguir el 18 por ciento. Entonces, si sustituyo el resto de esas referencias de 180 píxeles por 18 por ciento, ahora tengo los inicios de una cuadrícula flexible. Ahora a medida que cambie el tamaño de la ventana de mi navegador, los valores de píxel de esas columnas cambiarán con el tiempo pero las proporciones que diseñé en mi marcado se mantendrán intactas y ese es el componente clave de una cuadrícula flexible ahí mismo. Las relaciones entre anchuras más que las anchuras mismas. Ahora queda un pequeño trabajo de detalle que es este hueco de columna de 25 píxeles que tenemos aquí también. Pero en realidad podemos traducir esto en algo más basado en porcentajes también. Ahora los 25 píxeles es lo que diseñamos en nuestra maqueta pero también podemos usar ese objetivo dividido por contexto iguala fórmula de resultado aquí también. Estamos dividiendo esos 25 píxeles contra el mismo contexto que antes, 1,000 píxeles el ancho completo de nuestro diseño basado en cuadrícula. Por lo tanto, 25 píxeles divididos por 1,000 píxeles es igual a 2.5 por ciento. Entonces, ahora cuando guardo mi trabajo, tanto las columnas como las canaletas son completamente flexibles con visión de píxeles más estrecha y ahora tengo una cuadrícula completamente flexible. Ahora un pequeño poquito de finura trabajo que podemos hacer con este layout. He escrito 18 por ciento cinco veces pero en realidad hay una pequeña herramienta realmente genial dentro de cuadrícula CSS que nos permite ser un poco más concisos. Específicamente, está esta función llamada repetición, que me permite básicamente decir en lugar de escribir 18 por ciento cinco veces, básicamente puedo decir que tengo cinco columnas que son 18 por ciento ancho y que básicamente va a ser exactamente el mismo resultado que es un poco más conciso. Misma disposición exacta solo una forma ligeramente diferente de expresarlo. El último que hay que tener en cuenta y luego dejaré atrás las matemáticas un poco, es que también hay esta unidad muy cool dentro de cuadrícula CSS llamada la unidad fraccional lo que básicamente significa que podemos representan perfectamente el espacio restante. En lugar de escribir 18 por ciento, sólo podemos decir una f r que básicamente dice que para cualquier espacio que quede después de haber asignado nuestros huecos de columna, quiero que dividan perfectamente ese espacio cinco veces en nuestros cinco separados columnas. Entonces, en lugar de hacer matemáticas súper complejas para cada parte de tu diseño a veces esa unidad f r será todo lo que necesitas y entonces tenemos nuestra cuadrícula completamente flexible. 4. Paso dos: imágenes flexibles: Entonces, en la última lección, creamos un par de cuadrículas flexibles utilizando esta nueva tecnología llamada CSS Grid layout. Pero en nuestras rejillas, en realidad no incluimos muchas imágenes. Entonces, arreglemos eso. Lo que he hecho es en la segunda sección de archivos de muestra que encontrarás en los recursos, he vuelto a las cuadrículas flexibles, y he añadido algunas imágenes, partes clave del diseño. En el módulo de artículos recientes, he incluido algunas fotos en la parte superior de los propios artículos destacados. En la carta de los editores, he incluido una pequeña foto de que una empresa es el titular en la columna de la izquierda. También he ido adelante y he creado un layout completo en una cuadrícula flexible para este módulo de aspecto realmente salpicado llamado, nuestra historia de portada, y te mostraré algunas estrategias para gestionar imágenes aquí también. Pero empecemos por lo alto del diseño, ante todo. Ahora, al igual que antes, nuestras imágenes se caen en el html y las cuadrículas son completamente flexibles. Entonces, veamos qué pasa cuando realmente redimensionamos las cuadrículas ahora que hemos incluido imágenes. Voy a hacer que la ventana de mi navegador sea un poco más estrecha para simular lo que sucede en pantallas más pequeñas. Al igual que antes, nuestras columnas van a ser completamente flexibles. Pero, oh Dios mío, las cosas están rotas ahora que hemos incluido imágenes. Aquí está la cosa con las imágenes, es que cuando se muestran al usuario final, las imágenes en realidad tienen dimensiones nativas, tienen un ancho y una altura. Como los hemos dejado caer en nuestros diseños sin hacer nada con ellos en CSS, solo se están renderizando en sus dimensiones nativas y están rompiendo nuestro diseño. Están escapando de las columnas en las que se sientan y rompiendo la experiencia para el usuario final. Pero al igual que cualquier otro aspecto de nuestros diseños, en realidad podemos controlar la presentación de esas imágenes con nuestro CSS. Ahora bien, si quieres que aparezcan imágenes flexibles dentro de tus diseños responsive, hay una pieza muy directa de CSS que debes saber para que funcionen dentro de tus rejillas flexibles. Es decir, imagen, max-width 100 por ciento. Eso no parece mucho, pero ese fragmento de código básicamente dice que una imagen puede renderizarse al tamaño que quiera, siempre y cuando nunca sea más ancha que el elemento que se sienta. En otras palabras, eso significa que la imagen puede renderizarse al tamaño que quiera, pero si esa columna es más pequeña que la imagen, esa imagen se va a redimensionar proporcionalmente y encogerse para caber dentro de esa columna. Déjame mostrarte cómo se ve dentro de nuestro diseño de muestra. Entonces, si se agrega la imagen max-width 100 por ciento, y ahora a medida que redimensiono la ventana de mi navegador, notarás que las imágenes también están redimensionando proporcionalmente. Son completamente flexibles y redimensionan tan flexibles como lo son nuestras rejillas. Ahora bien, podrías notar que en resoluciones de pantalla más amplias, algunas de estas imágenes no necesariamente encajan con el ancho completo de la columna, y tal vez eso esté bien para ciertas partes de tu diseño. Pero al menos para esta, me gustaría asegurarme de que estas clases particulares de imágenes siempre van a ser de ancho completo. Para ello, tenía una pieza de CSS ligeramente diferente, solo para esas imágenes. Entonces, como podrían recordar, dentro del trabajo reciente de estos artículos, tenemos dos elementos de artículo que contienen esas historias teaser que se presentan de manera prominente dentro de ese módulo. Ahora, las propias imágenes que he clasificado con un poco de html, les he dado un nombre de arte. Entonces, básicamente puedo decir que dentro de esos elementos de la historia, quiero que esas imágenes de arte siempre tengan un ancho del 100 por ciento. Eso es un poco diferente al max-width 100 por ciento, que básicamente dice que la imagen nunca debe exceder el ancho de su contenedor. Ancho 100 por ciento dice que siempre quiero que esa imagen coincida con el ancho de sus elementos contendientes. Entonces, ahora si vuelvo, notarás que esas imágenes están perfectamente ras contra el ancho que están conteniendo columna. Siguen siendo completamente flexibles, pero ahora independientemente de lo amplia que se ponga esa columna, siempre va a haber sangría completamente completa. Ahora, vamos a bajar un poco más. Ahora, de nuevo, tenemos esta imagen insertada que acompaña al titular en las cartas del editor. Al igual que antes, si redimensiono mi cuadrícula para hacerla mucho más pequeña, esa imagen max-width 100 por ciento está haciendo hermoso trabajo asegurando que esa imagen se redimensione proporcionalmente. Ahora, como veremos en una lección posterior, hay mucho trabajo de ajuste y acabado que puede pasar a controlar qué imágenes le sirves a tus usuarios, pero esa regla de 100 por ciento de ancho máximo de imagen es realmente el primer paso en nuestro viaje. Es una de las herramientas más críticas en el kit de herramientas del diseñador receptivo. Por lo tanto, hemos logrado constreñir algunas de las imágenes que hemos incluido en nuestro html de formas que no rompen las cuadrículas flexibles que hemos creado para nuestro diseño responsive. Pero, ¿y si estamos lidiando con imágenes de fondo? Eso es algo que aparece con bastante frecuencia en mi trabajo y estoy seguro de que lo mismo es cierto para ti también. Ahora, voy a volver al diseño que creé en boceto para este único diseño en particular. Hay un elemento en particular en el que me voy a centrar en este momento, que es esta imagen de fondo unas huellas fósiles que me gustaría haber incluido en mi diseño. Entonces, para hacerlo en mi CSS, solo voy a incluir ese archivo SVG. Entonces, en el elemento principal, voy a establecer una imagen de fondo que apunte a la ruta de mi archivo footprint.SVG, y ahora voy a usar la propiedad background-repeat para decir que solo quiero una versión de la imagen, No quiero un azulejo entero al fondo, y lo pondré a que no se repita. Ahora una vez que haya hecho eso, tengo una imagen masiva como fondo para mi diseño. Ahora bien, eso no es lo que presenté en boceto, idealmente lo que me gustaría ver pasar es que me gustaría anclar eso arriba en la esquina superior derecha y me gustaría hacerlo un poco más pequeño. Para controlar el tamaño de las imágenes de fondo, igual que hacemos con las imágenes en línea, podemos usar la propiedad de tamaño de fondo. Ahora, el tamaño de fondo es una propiedad muy poderosa y puede ser muy útil bajo diferentes circunstancias. Por ejemplo, podría configurarlo en 200 píxeles, auto. Ahora, lo que eso significa es que la imagen se redimensionará a un ancho de 200 píxeles, y luego he establecido su altura para redimensionar a auto, lo que básicamente asegura que se redimensionará proporcionalmente para caber dentro de ese ancho de 200 píxeles. A ver cómo se ve eso. Entonces, ahora tenemos una pequeña huella arriba en la esquina superior izquierda de nuestro diseño. Ahora, puedo hacer eso un poco más prominente, podría establecer esa posición de fondo en 95 por ciento y cero, que básicamente se moverá al 95 por ciento del camino a través del eje horizontal, moviéndola hacia la columna de la derecha, y luego tenerlo anclado en la esquina superior derecha usando una posición de fondo de cero. Entonces, ahora lo tenemos anclado en la parte superior derecha. Ahora bien, eso está bien, pero al igual que con nuestras imágenes anteriores, el ancho de esa huella no está cambiando. También podemos utilizar valores proporcionales para nuestros tamaños de fondo también. Entonces, lo que voy a hacer es establecer este tamaño de fondo en 30 por ciento, que básicamente lo establecerá en 30 por ciento de su elemento contenedor, es decir, en este caso, la ventana completa del navegador. Entonces voy a bajar su posición de fondo solo un poco de arriba, se siente un poco cerca del borde de la ventana del navegador. Entonces, ahora que he establecido el tamaño de fondo en 30 por ciento, la imagen es mucho más prominente, y además, se va a redimensionar proporcionalmente. Entonces, en pantallas más pequeñas, esa imagen sólo va a ser mucho más pequeña de lo que sería en las más anchas. Ahora, como dije antes, el tamaño de fondo es increíblemente poderoso. De hecho, hay algunas otras propiedades que podrían ser útiles para usted en otras partes de su diseño. Ahí está éste en particular llamado tapadera. En realidad puede ser realmente útil. Un sitio responsive que creo que utiliza esto de manera muy efectiva es en virb.com. Entonces, esta imagen que ves arriba en el área de banner superior justo en su página de inicio es en realidad una imagen de fondo. Al cambiar el tamaño de la ventana del navegador, notarás que esa imagen siempre mantiene su tamaño para que coincida con el ancho de su contenedor. Entonces, a medida que ese contenedor se vuelve más estrecho o se hace más corto, está ajustado a la cubierta de tamaño de fondo lo que básicamente asegura que la imagen siempre cubrirá perfectamente el espacio disponible frente a él, es una propiedad realmente poderosa y puede ser muy útiles para nosotros también. Pero estas son solo algunas de las diferentes estrategias que podemos utilizar para gestionar imágenes de fondo de manera más flexible en nuestros diseños. Usando el tamaño de fondo y la posición de fondo, realmente podemos controlar con precisión no solo la colocación sino también la escala proporcional de nuestras imágenes de fondo. Ahora, el tamaño de fondo es realmente genial, y de hecho hay una manera de hacer algo muy similar también con las imágenes en línea, y para darles un ejemplo de eso, les voy a mostrar nuestra historia de portada. Dentro del módulo de nuestra historia de portada, hay una imagen prominente muy grande que se incluye en línea dentro de esta área de contenido. Ahora, está configurado en un diseño basado en cuadrícula, igual que hicimos con nuestras otras rejillas flexibles, y si muestro las líneas de cuadrícula para esta imagen en particular, esta imagen intro art, la foto en línea está básicamente configurada para abarcar cinco columnas. Pero no cumple del todo con las cinco columnas completas, y también está dejando un poco de espacio en la parte inferior de la imagen. Idealmente lo que me gustaría ver pasar es que me gustaría que esa imagen fuera de altura completa, por lo que cubre perfectamente el espacio vertical dentro de este módulo. Bueno, puedo hacer eso estableciendo altura 100 por ciento en esa imagen. Por lo que al establecer la altura 100 por ciento en esta imagen, en realidad hemos estirado un poco esta imagen en el eje vertical. Idealmente lo que nos gustaría ver pasar es que queremos asegurar que esas proporciones permanezcan intactas. Ahora bien, la forma en que podemos hacer eso, porque esta es una imagen en línea, es con algo llamado ajuste de objeto, que es una propiedad ligeramente más reciente en CSS. Entonces, lo que voy a hacer es, voy a establecer el objeto fit para cubrir, y notarás ahora la imagen conserva sus proporciones originales. Básicamente es un poco como cubierta de tamaño de fondo pero para imágenes en línea. Hemos extendido esa imagen a través de un cierto espacio, pero básicamente hemos dicho que la imagen que aparece dentro de ese espacio debería redimensionarse proporcionalmente dentro de ese lienzo, y esta es otra propiedad realmente valiosa que puede ser útil para usted en ciertas circunstancias. Entonces, en esta lección, hemos mirado un par de estrategias diferentes para gestionar imágenes en línea que aparecen en nuestro html y también para imágenes de fondo. Al usar algunas de estas técnicas en concierto entre sí, podemos tener imágenes que son cada bit tan flexibles como nuestras rejillas fluidas flexibles. 5. Paso 3: media queries: Entonces, en nuestras dos últimas lecciones, miramos las formas en que podemos usar cuadrículas flexibles e imágenes flexibles juntas. Pero lo que pasa con los diseños flexibles, es que no siempre son la mejor experiencia. Entonces, por ejemplo en nuestro módulo de artículos recientes, una vez que traigo la ventana del navegador alrededor, digamos 50 por ciento, ya podemos decir que esta no es la mejor experiencia para el usuario. Algunas de las longitudes de línea, comienzan a sentirse un poco apretadas. Empiezan a envolver realmente dramáticamente. Este layout ya no es realmente un placer leer. No se siente tan cómodo como lo hace en una pantalla más ancha. Es cierto lo mismo, si bajamos un poco más a la carta de nuestros editores. Nuevamente, el diseño se ve bien. Se está redimensionando proporcionalmente pero la experiencia de lectura no es necesariamente ideal. Ese titular superior se ve realmente pesado y prominente. De hecho, si traemos nuestra ventana del navegador incluso un poco más, empieza a ocupar considerablemente más bienes inmuebles de los que realmente necesita. Nuevamente, nuestra cuadrícula está redimensionando de manera flexible, pero llega a cierto punto el diseño, donde empieza a romperse. Entonces, no es la mejor experiencia que podemos empezar a servir a nuestros usuarios finales. Entonces tal vez, necesitamos mirar una forma en la que podamos tomar esta base flexible y remodelarla un poco. Para tal vez cambiar la forma en que se presenta la información, en ciertos anchos de pantalla o de ventanillas, fin de servir algo que no solo cabe, sino que también se sienta como en casa en pantalla de cualquier tamaño. Aquí es donde entran las consultas de medios. Este es un poco de CSS que vamos a aplicar a nuestra base flexible para mejorar la experiencia, que se vea hermosa en pantallas pequeñas y anchas por igual. Entonces, voy a escribir un poco de CSS simple, eso te muestra cómo puede funcionar una consulta de medios. Porque realmente la consulta de medios es como una pregunta, estamos haciendo un navegador. Estamos preguntando al navegador si cumple con ciertas características o condiciones. Si pasa esa prueba, y dice, sí cumplo con todas estas condiciones que has escrito en tu consulta de medios, entonces podemos aplicar condicionalmente algunas reglas de estilo extra solo para esas circunstancias específicas. Voy a empezar con algo muy sencillo que es decir que en el elemento cuerpo, quiero que el color del texto sea negro. Pero cuando tengo un ancho de pantalla de al menos 500 píxeles de ancho, quiero que el color sea rojo, y quiero que el texto sea negrita. Déjame mostrarte cómo se ve eso en la práctica. Entonces, así es como se ve la pantalla en un dispositivo más pequeño. Estoy usando el modo de diseño responsive de Firefox, para simular ese efecto de pantalla estrecho. Pero a medida que hago la ventanal un poco más ancha, el texto se va a cambiar de tamaño proporcionalmente. Pero una vez que golpeé un ancho de pantalla de alrededor de 500 píxeles, el diseño cambia bastante dramáticamente, porque se han cumplido las condiciones de consultas de medios. En nuestra consulta de medios, dijimos que solo debes aplicar el color rojo, solo debes aplicar la negrita, si al menos tenemos un ancho mínimo de 500 píxeles. Si ese es el caso, entonces vamos a hacer que las cosas se vean bien, francamente feas. Esta no es la consulta de medios más útil, pero en su núcleo, esta es la flexibilidad que podemos aplicar a nuestros diseños responsivos. Podemos cambiar el diseño y cambiar la tipografía y cambiar otros aspectos de nuestro diseño, de formas que nos sean un poco más útiles que el texto rojo. Entonces, echemos un vistazo más de cerca a la sintaxis para las consultas de medios. Ahora, dijimos antes que esta es una pequeña pregunta que estamos haciendo al navegador y cada consulta de medios básicamente se descompone en dos componentes específicos. Toda consulta de medios comienza con un tipo de medio, que delinea la clase de dispositivo o más específicamente los medios que estamos tratando de diseñar. Ahora, en la especificación CSS, hay cuatro tipos de medios aceptables que se esbozan. Pantalla, como navegadores móviles y tabletas y de escritorio. También está el tipo de medios de voz, para navegadores orales que podrían estar leyendo contenido permitido al usuario. También está el tipo de medios impresos, para estilos específicos de impresión y luego finalmente, está el tipo de medios todo, que básicamente dice que esta consulta de medios debe aplicarse a todos los medios. Ahora, el tipo de medio es completamente opcional. Si lo dejas fuera, efectivamente estás diciendo que esto se aplica a todos los medios de comunicación. Por defecto es que todo tipo de medios. La segunda parte de la consulta de medios es, la verdadera clave para desbloquear el poder detrás de una consulta de medios. Esa es la característica mediática. Esta es realmente la pregunta que en realidad estamos haciendo al navegador. Como hemos dicho antes, esta característica de medios en particular está diciendo, ¿es tu ventana gráfica, es tu ventana de navegador de al menos 500 píxeles de ancho? Si es así, aplica los estilos dentro de la consulta de medios. Ahora bien, hay toda una serie de diferentes características de medios que en realidad puedes consultar. No necesariamente vamos a cubrir a todos ellos en esta clase en particular. Si te interesa aprender más, va a haber un enlace en los recursos a una lista completa de todas las diferentes opciones que tienes disponibles para ti. Es justo decir que la mayor parte de lo que hacemos en un diseño receptivo es, aplicar consultas de ancho mínimo para capas de estilos más complejos en nuestros diseños a medida que las pantallas se ensanchan con el tiempo. Entonces, echemos un vistazo a nuestro diseño de muestra y veamos algunas formas en las que podemos usar consultas de medios de ancho mínimo, para poner en cuarentena algunos de estos estilos de pantalla ancha a pantallas bien, más anchas. Entonces, cuando empiezo a aplicar consultas de medios a un diseño flexible, me parece realmente útil mirar las áreas en las que mi diseño está empezando a descomponerse y donde está empezando a descomponerse a medida que la pantalla se estrecha. Entonces, como dijimos antes, seguimos lidiando con un diseño flexible basado en cuadrícula, que tiene cinco columnas de ancho, lo cual realmente es ideal para dispositivos de pantalla ancha y navegadores. Entonces, por debajo de ese punto de pantalla ancha, queremos aplicar un diseño diferente. Sólo queremos aplicar ese diseño de cinco columnas, cuando las pantallas están al menos por encima de cierto ancho. Entonces, voy a empezar, tomando algunas de las reglas de diseño de cuadrícula panorámica que hemos escrito para el módulo de artículos recientes y rodeándolas con una consulta de medios. Entonces, voy a escribir medios, min-width, 60em's. Entonces voy a tomar todas estas reglas de cuadrícula que escribimos para el módulo de artículos recientes, y aplicarlas dentro de esa consulta de medios. Ahora, 60em's, es básicamente equivalente a escribir 960 píxeles. Me gusta usar consultas de medios basadas en m porque son un poco más accesibles. Si alguien cambia el tamaño del texto en su navegador, entonces las consultas de medios van a seguir más o menos esa preferencia para el usuario final. Si estás más cómodo escribiendo consultas de medios basadas en píxeles, eso está totalmente bien. Esta es una preferencia estilística y una que me parece un poco más accesible, pero sin importar cómo lo escribas. Ahora, que tenemos una consulta de medios que dice, por encima de este ancho de pantalla ancha, por encima de un ancho de 60em, aplicar este diseño de cuadrícula. Si guardo mis cambios, y vuelvo al navegador, y refresco mi trabajo, cuando caigo y refresco mi trabajo, por debajo del umbral de ese 60em, pierdo mi diseño basado en cuadrículas y las cosas linearizan a un solo diseño de columna. Ahora, a estas alturas, eso no es muy atractivo. Pero creo que se podría ver cómo en una pantalla más pequeña, esto en realidad funciona increíblemente bien. Hemos comenzado con un pequeño diseño amigable con pantalla, y luego cuando llegamos a un cierto ancho, podemos hacer que el diseño sea tan complejo como necesita ser. Podemos aprovechar mejor el espacio que tenemos a nuestra disposición. Ahora bien, eso no cambia el hecho, que aún tenemos este incómodo periodo de transición. Entonces, lo que voy a hacer es, voy a aplicar una consulta mediática de 35em's. Entonces, he escrito en medios, min-width, 35 ems, que debería apuntar bastante bien a ese diseño de rango medio. Ahora dentro de esta zona, voy a apuntar a mis artículos bloque reciente. Voy a declarar un diseño basado en cuadrícula. Pero en lugar de hacer un diseño de cinco columnas, voy a hacer un diseño de cuatro columnas. Entonces voy a bajar la brecha de columna al dos por ciento. Ahora, antes de continuar, sólo quiero señalar que estamos estratificando la complejidad a medida que el resorte se hace cada vez más amplio. Todas las reglas de la consulta de medios anterior, aplicaremos las siguientes. Entonces, esto es como un efecto de estratificación que estamos haciendo en nuestro diseño a medida que las cosas se vuelven más complejas. Mencioné eso porque hemos declarado display, grid en este punto en el CSS, lo que significa que cuando llegamos a nuestro diseño de pantalla ancha, en realidad podemos eliminar la segunda declaración. Ya lo hemos declarado un punto de ruptura más estrecho, y así seguirá siendo un efecto cuando lleguemos al más amplio. Entonces, ahora tenemos un diseño de cuatro columnas. Es posible que recuerdes esta extraña ubicación predeterminada de elementos en nuestro diseño de cuadrícula de la lección anterior. Pero lo que realmente hemos hecho aquí, si encendemos las líneas de cuadrícula en Firefox, se puede ver que hemos creado una cuadrícula flexible de cuatro columnas. Ahora, podemos usar esto para completar nuestro diseño tal como lo hicimos antes. En este punto de ruptura, aún quiero que mi encabezado abarque todo el ancho del módulo. Entonces, para hacer eso, en realidad puedo tomar la regla desde el punto de corte de pantalla ancha y moverla hasta el estrecho. Eso es algo que quiero cierto tanto en este punto de ruptura de gama media, también en la pantalla ancha. Básicamente puedo decir columna de cuadrícula inicio uno, y columna de cuadrícula y uno negativo para tener su lapso el ancho completo de la fila. Ahora, tenemos un encabezado de fila completa arriba en la parte superior. Ahora, recuerda, tenemos un diseño de cuatro columnas con el que estamos trabajando en lugar de un diseño de cinco columnas. Entonces, lo que me gustaría ver pasar es que me gustaría que todas las historias dentro de mi bloque artículos-reciente tuvieran un grid-column-end, y quiero abarcar dos columnas. Entonces, una vez que guardo esto, ahora tenemos más o menos el tipo de maquetación que buscamos en este rango medio. Ambas historias están igualmente ponderadas a través de este eje horizontal, las dos que abarcan dos columnas, y las historias secundarias están sentadas abajo. Esto es mucho mejor que lo que teníamos antes, porque teníamos un diseño de una sola columna para pantallas pequeñas, y ahora tenemos un buen punto de ruptura de rango medio para todo en el medio, moviéndonos hasta la parte superior. Entonces, esto es una mejora, pero hay un poco de trabajo de ajuste y acabado que aún podemos hacer. Específicamente, esta lista de historias aquí abajo en la parte inferior se siente un poco como si pudiera estar aprovechando mejor el espacio disponible. Para ello, en realidad voy a tratar esta lista como una cuadrícula en sí en este punto de ruptura en particular. Lo que voy a hacer a continuación es que voy a decir que una vez que haya alcanzado un punto de ruptura de al menos un ancho de 35 ems, pero también a un ancho máximo de 60 ems. Yo quiero tratar esa lista un poco diferente. Entonces, esta es una forma en que podemos combinar características de medios juntos para hacer una consulta de medios más compleja. Básicamente podemos decir que queremos que sea por lo menos 35 ems de ancho pero no mayor a 65 ems, solo para apuntar a la zona media. Una vez que tengamos ese punto de ruptura medio en su lugar, entonces puedo escribir un pequeño código para apuntar a mi barra lateral. Específicamente, voy a escribir articles-recent-aside y articles-reciente-teaser-list. Esto me permitirá apuntar tanto al elemento aparte que contiene la barra lateral, también a la lista dentro de ella. Entonces voy a escribir display: contenidos. Ahora, esta es una pequeña pieza mágica de la especificación CSS Grid que nos permite apagar esas piezas de HTML. En otras palabras, le estamos diciendo al navegador que tipo de pretender que esos elementos no existen y simplemente enfocarse en todo lo que está dentro de la propia lista, específicamente en nuestros enlaces a historias secundarias. Una vez que hacemos eso, guardo mi trabajo, vuelvo al navegador. Esos elementos de la lista van a ser tratados como si fueran parte de la cuadrícula que se sienta encima de ellos, y así van a estar dispuestos en esas cuatro columnas. Ahora bien, hay diferentes formas en que podrías abordar este problema. Podrías usar otros métodos de diseño para diseñar esos elementos están a lo largo de las mismas líneas de cuadrícula, pero esto creo que es una forma realmente efectiva de hacer algo similar. Debido a que en realidad lo hemos alcanzado a un ancho máximo de 60 ems, una vez que pasemos a nuestro diseño de pantalla ancha, notarás que vuelven a aparecer en la barra lateral. Hemos desactivado esos estilos por encima de nuestro diseño de pantalla ancha, y luego básicamente están ubicados de vuelta en esa quinta columna. Por lo que ahora, tenemos una cuadrícula flexible, imágenes flexibles y consultas de medios trabajando en conjunto. Hemos empezado con el diseño de pantalla ancha y hemos desactivado partes del diseño que no son apropiadas para pantallas más pequeñas. Eso para mí es la señal de un diseñador receptivo realmente efectivo. Para hacerte esas preguntas difíciles, no solo sobre la pantalla pequeña y la pantalla ancha, sino preguntarte qué otras experiencias podrías no estar necesariamente considerando, y tener un diseño o diseño en su lugar que hable con algunos de esos rangos medios? Entonces, ahora que hemos hecho que el módulo de artículos recientes responda, he seguido adelante y en realidad he traducido tanto la carta de los editores como también nuestros módulos de historia de portada de la misma manera exacta. Empecé mirando ese diseño flexible y mirando formas en las que se estaba descomponiendo, y aplicé algunas consultas de medios, no solo para deshabilitar estilos más complejos, sino también para refinar el enfoque en pantallas más pequeñas y anchas. Tan solo para darte una idea rápida de algunas de las decisiones que tomé, la carta para nuestros editores en realidad me acerqué de una manera muy similar al módulo de artículos recientes. Entonces, en diseños más pequeños, terminé optando por otro diseño de cuatro columnas nuevamente especificado con CSS Grid. Nuevamente, estoy tratando los enlaces secundarios hacia abajo en la parte inferior una manera muy similar a la que hice en el bloque de artículos recientes. Entonces debajo de un cierto punto de pantalla, estoy confiando sólo en el texto para suministrar algún diseño para pantallas más pequeñas. En otras palabras, aquí no hay un diseño de cuadrícula del que hablar, aunque ciertamente podría aplicar cuando si lo quiero. Para la historia de portada, hice algo muy parecido. Entonces, en lugar de superponer el blurb y la imagen uno encima del otro, decidí simplemente apilar en pantallas más pequeñas. Es igual de impactante, pero es un poco más sencillo cuando no tengo tantos inmuebles de pantalla con los que trabajar. Pero luego a medida que la pantalla se vuelve un poco más ancha, puedo empezar a buscar oportunidades en la pantalla ancha para luego introducir el diseño completo sólo cuando estoy por encima de ese ancho de pantalla de 60 ems. Pero por debajo de ese punto, simplemente simplemente apilados. Es así como haces que estos diseños fluidos respondan, con un poco de trabajo de consulta de medios. 6. Ajusta tu diseño: En esta lección, quiero tocar tres áreas distintas que realmente pueden poner un nivel extra de pulido en tus diseños sensibles, específicamente tipografía, diseños de reserva e imágenes. Entonces, en nuestra última sección, miramos algunas formas en que podríamos remodelar nuestros diseños flexibles utilizando consultas de medios para asegurar que las cosas se vean hermosas en la pantalla pequeña, pero también en la pantalla ancha. Entonces, lo que hemos hecho hasta ahora es que tenemos una adaptación realmente agradable sucediendo a nivel de rejilla para cada uno de estos módulos. Las cosas pasan de un diseño de una columna a un diseño de cuatro columnas, y luego finalmente a un diseño de cinco columnas en el extremo superior. Pero si pasas un poco de tiempo mirando sobre estos diseños, notarás algunas áreas en las que aún necesitan un poco de atención extra, específicamente en su tipografía. Entonces, por ejemplo, este titular realmente prominente en las cartas del módulo de nuestro editor. En pantallas más pequeñas, ese texto prominente realmente grande comienza a sentirse bien bastante grande y prominente y. De hecho, si miras esto en un dispositivo de pantalla pequeña o en una tableta, probablemente notarás que empieza a adelantar al resto de la pantalla. Entonces, en la lección anterior, usamos consultas de medios para modificar nuestras cuadrículas para que no estuviéramos sirviendo diseños de pantalla ancha hasta usuarios de pantalla pequeña. También debemos buscar oportunidades en nuestros diseños receptivos para asegurarnos de que no estamos sirviendo topografía panorámica hasta usuarios de pantalla pequeña. Entonces, lo que terminé haciendo en esta lección, es en realidad mirar algunas formas de usar las consultas de medios para personalizar la tipografía. Entonces, por ejemplo, en un dispositivo de pantalla más pequeño, básicamente traje el tamaño del tipo inferir ese titular considerablemente. Entonces cuando llegamos a nuestro punto de ruptura de rango medio alrededor de los 35 M, puedo subir un poco más el tamaño del tipo. Entonces una vez que lleguemos a nuestro diseño de pantalla ancha, tenemos el titular y la vista completos. Ahora, esto también puede aplicarse a nuestra historia de portada. Tienes este título realmente grande, hermoso y ese blurb en pantallas más anchas. Pero en pantallas más pequeñas, ese tamaño de tipo no necesariamente se siente apropiado. Entonces, también podemos apretar eso, tal vez hacer que esa subcabeza un poco más pequeña también y reducir el relleno en el blurb así para asegurar que se sienta realmente agradable y apropiado en pantalla de cada tamaño. Entonces, estos son una especie de los retos frente a los diseñadores receptivos para pensar no solo en cómo está cambiando el diseño a nivel macro, sino también mirar estos pequeños detalles como este y asegurar que las cosas se sientan como en casa en pantallas más pequeñas también. otra cosa que deberíamos hablar es de qué hacer cuando los navegadores no soportan algunas de las características que podrías estar usando para potenciar tus diseños responsive. Ahora, para la clase de hoy hemos estado usando CSS Grid realmente fuertemente para proporcionar esa rejilla fluida flexible que se sienta como la base de nuestros diseños receptivos. Ahora bien, no tienes que usar CSS Grid, puedes usar floats o flexbox o lo que tengas si prefieres hacer eso, pero al menos para mí encuentro que es una manera realmente genial de diseñar diseños para la web moderna. El asunto con CSS Grid aunque es relativamente nuevo y todavía hay algunos navegadores y dispositivos antiguos por ahí que no lo soportan de forma nativa. Entonces, ¿cuál es el mejor escenario para esos dispositivos y navegadores? Tienes un par de opciones diferentes. Una es que podrías evitar CSS Grid. Esa es una elección perfectamente válida. En cambio, lo que realmente me gusta usar es algo llamado Feature Queries. Ahora, hemos estado utilizando ampliamente las consultas de medios a lo largo de este curso para adaptar nuestros diseños responsivos basados en las características de los medios que están renderizando nuestros diseños. Feature Queries nos permiten preguntar realmente al navegador si soporta ciertas características CSS, y si lo hace, entonces podemos implicar condicionalmente esos diseños más mejorados. Ahora, la forma en que se escriben las Consultas de Característica es con la directiva de Apoyos Arte. Ahora, si nos fijamos en nuestro diseño en Internet Explorer, las cosas van a verse un poco raras en esas versiones antiguas de Internet Explorer que no admiten CSS Grid. Entonces, las preguntas que nos tenemos que hacer es, ¿queremos suministrar un diseño de respaldo que esté escrito con flotadores, o con flexbox, o qué tienes, que básicamente sea visualmente similar a lo que hemos creado con CSS Grid? Ese es un enfoque perfectamente válido, y dependiendo de quién esté en tu audiencia y los tipos de navegadores que usen, esa podría ser la mejor opción para ti. Para la mayoría de los proyectos en los que he estado trabajando recientemente, cambio lo que he optado por hacer es servir un diseño de columna única a los navegadores que no entienden CSS Grid, y luego para los navegadores que lo hacen, para más modernos dispositivos y navegadores, les sirvo un diseño impulsado por cuadrícula completa. Entonces, lista cuatro nuestra revista ficticia, voy a escribir una Feature Query, y voy a preguntar al navegador si es compatible con display grid. Ahora, si el navegador entiende Feature Queries, y entiende cuadrícula de visualización, puedo aplicar reglas más avanzadas dentro de este bloque. Ahora, realmente lo que quiero ver pasar sin embargo es que quiero constreñir el ancho del elemento body solo a navegadores que no lo entienden. Entonces, en cambio, voy a establecer un margen de cero auto para todos los navegadores y establecer un ancho máximo de 30 ems en el elemento body que básicamente creará una bonita columna centrada en medio de la ventana del navegador si no soportan CSS Grid. Ahora, para los navegadores que sí soportan CSS Grid, quiero desactivar ese ancho máximo y quiero volver a ajustar el margen a cero. Estas son mis reglas de diseño más avanzadas. Ahora, si volvemos a Internet Explorer, vas a ver que las cosas están perfectamente centradas en medio de la ventana del navegador. Ahora bien, eso puede no ser necesariamente un diseño que tú y yo hemos dedicado una cantidad considerable de tiempo diseñando, pero lo importante es que permite que cada navegador y cada dispositivo accedan al contenido de nuestra página web independientemente de sus capacidades. Para los navegadores que son un poco más avanzados, obtienen una experiencia un poco más refinada. Entonces, esta lección de afinación, hemos mirado formas de masajear un poco nuestra topografía y también de proporcionar una mejor experiencia para dispositivos y navegadores menos capaces. También hay diferentes formas en que podemos hacer que nuestras imágenes respondan también. A veces simplemente cambiar el tamaño de una imagen no es necesariamente el mejor enfoque. Es posible que desee servir diferentes formatos de archivo a diferentes dispositivos si no admiten el tipo de imagen que está tratando de entregarles. A lo mejor quieres servir imágenes de mayor definición a pantallas de mayor calidad sin sobrecargar dispositivos menos capaces con imágenes que no renderizarán. O tal vez en ciertas circunstancias, quieres ser muy específico sobre los cultivos de imágenes que estás mostrando a ciertas clases de dispositivos. Si pasas algún tiempo navegando por este diseño de página completa que he hecho, verás diferentes instancias en las que he usado diferentes partes de la especificación de imágenes responsive para hacer justamente eso. Por ejemplo, el logotipo que aparece en el cabezal utiliza el elemento de imagen y dentro del elemento de imagen, notarás que hay una etiqueta fuente. Bueno, esa etiqueta fuente apunta a un archivo SVG que es una representación vectorial agradable y nítida de nuestra pequeña marca de logotipo, pero sólo se sirve a los navegadores que entienden el elemento de imagen y que excepto las imágenes SVG basadas en el tipo atributo que hemos puesto en esa fuente. Si un navegador no entiende el elemento de imagen o no acepta imágenes SVG, hemos dejado una imagen dentro de nuestro elemento de imagen que actúa como un respaldo que apunta a un archivo SVG simple y antiguo. En otras palabras, podemos entregar condicionalmente esa imagen de mayor calidad a los navegadores y dispositivos que la entienden, y si no lo hacen, los dejamos con un bonito retroceso. También podemos ser muy prescriptivos sobre qué tipos de imágenes queremos que se muestren en diferentes puntos de ruptura. También podemos usar el elemento de imagen para hacer eso. Te darás cuenta en la portada, en pantallas más pequeñas, estoy cargando un recorte ligeramente diferente de la imagen. Está un poco más enfocado en la cara del dinosaurio, pero en pantallas más anchas, volvemos a subir a esa imagen completa y cuadrada que está superpuesta en la parte superior del módulo completo. Es un cultivo ligeramente diferente y es un poco más amigable con pantalla ancha. Soy capaz de especificar en qué imagen se carga en dónde se usa nuevamente el elemento de imagen. Pero ahora en realidad estoy usando la etiqueta fuente para decir en realidad por encima de un cierto punto de ruptura, quiero usar esta consulta de medios para cargar condicionalmente en esa imagen de pantalla blanca. Entonces por defecto, tengo esa etiqueta de imagen simple y antigua que actúa como la experiencia de línea base para los usuarios de pantalla pequeña. Entonces, en nuestra lección hasta ahora, hemos mirado diferentes formas de adaptar nuestros diseños para hacerlos más flexibles y más receptivos, pero en la siguiente lección vamos a dar un paso atrás de HTML y CSS, y en su lugar hablar de nuestro proceso de diseño y cómo podría necesitar cambiar ahora que estamos diseñando para más dispositivos que nunca. 7. Un proceso más responsivo: En la lección hasta ahora, hemos mirado mucho y diseños receptivos. Pero ahora, me gustaría hablar un poco más ampliamente sobre cómo su trabajo como desarrollador receptivo o diseñador receptivo podría cambiar en los próximos meses o pocos años. En una de las primeras lecciones, dije que las cosas que hacen que un diseño responda son las rejillas fluidas, las imágenes fluidas, y las consultas de medios. Pero, la cosa es que realmente se trata solo de diseño, establecer una jerarquía visual, y de definir cómo esa jerarquía podría necesitar cambiar con el tiempo usando puntos de ruptura y cuadrículas fluidas. El caso es que todos esos ingredientes están realmente solo enfocados en el diseño, establecer una jerarquía visual, y luego usar consultas de medios para articular cómo esa jerarquía necesita cambiar a medida que las pantallas se ensanchan o se hacen más pequeñas. El caso es que el diseño es mucho más que eso. Ahí está esta cita que me encanta de Paul Rand. Dijo alguna vez que el diseño es el método para juntar forma y contenido. Más recientemente, un colega y amigo mío, Mark Boulton dijo que el diseño es lo que hay alrededor del resultado final. diseño no es solo el conjunto final de maquetas o el sitio que has lanzado, es el proceso que tardaste para llegar allí. El camino que caminaste hasta las duras preguntas que tenías que hacerte como diseñador o como desarrollador. Eso es lo que finalmente da forma a tu diseño. Entonces, cuando nos estamos preguntando, ¿qué hace que un diseño responda? Creo que el énfasis es un poco en la parte equivocada de la frase. En otras palabras, ¿cómo necesita cambiar nuestro proceso para que el diseño receptivo sea mucho más fácil para nosotros? ¿ Cómo necesitamos convertirnos en diseñadores más receptivos o en desarrolladores más receptivos? Entonces, me gustaría hablar un poco en esta lección sobre cómo ha cambiado mi práctica en los últimos años. Me gustaría comenzar hablando de un caso de estudio específico, que es el rediseño del Boston Globe, que fue el primer rediseño de respuesta a gran escala que ocurrió hace unos años. Ahora, cuando me trajeron mis colegas y yo para ayudar con este proyecto, el equipo ya había creado esta suite de comps realmente hermosas para un diseño de pantalla ancha, igual que hicimos hoy en este curso. Entonces, el reto que tuvimos que averiguar era cómo realmente se toman estas fotos de un sitio web, y se traducen en un diseño fluido completamente receptivo. Porque el reto con maquetas es que son imágenes de ancho fijo de un sitio web. No necesariamente son tan flexibles como el lienzo para el que realmente estamos diseñando en la web moderna. Ahora, tal vez puedas trabajar en torno a esto, ¿verdad? Debido a que las comps podrían ser replicadas, podrías mostrar diferentes versiones de un layout en diferentes puntos de ruptura, pero eso es increíblemente caro. Romper la pantalla pequeña y los puntos de ruptura de rango medio para todas estas diferentes páginas se pone realmente difícil en Photoshop o en Sketch. Entonces, estas herramientas de diseño no son necesariamente tan flexibles como necesitamos que sean cuando estamos diseñando de manera responsiva. También encontramos que la forma en que estábamos gestionando el proceso creativo era un poco demasiado inflexible para el producto responsive. De manera más específica, cuando llegó al punto de transitar entre el diseño y el desarrollo front-end, el cliente tuvo esta idea de que ya habían aprobado la obra. Habían firmado en las comps, y así era simplemente más o menos un diseño en el navegador que representaba el diseño en las comps que habían aprobado. Desafortunadamente, esas comps no eran casi tan flexibles como necesitábamos que fueran. Entonces, por eso muy temprano, yo y los otros compañeros con los que estaba trabajando, nos dimos cuenta de que necesitábamos romper ese muro entre diseño y desarrollo, y en cambio, iterar más rápidamente sobre el diseño y el navegador. Todos estábamos trabajando de manera efectiva como un equipo creativo. Algunos de nosotros diseñando principalmente en Illustrator o en Photoshop. Otros trabajando principalmente con HTML y CSS. Todos estábamos diseñando este sitio responsive juntos. El modo en que trabajamos a través de esto fue con una revisión de diseño más colaborativa, es donde nos sentaríamos como grupo y en realidad revisaríamos el siguiente conjunto de trabajos juntos, específicamente revisando los comps que diseñó la mitad del equipo había producido. Cuando nos reunimos como equipo de diseño, nos presentamos el diseño el uno al otro. Entonces, el diseño la mitad del equipo contaría un poco de una historia sobre cómo llegaron allí, algunas de las decisiones que tomaron en este diseño, y cómo cumplió las necesidades del negocio. A partir de entonces, fue realmente en la mitad de desarrollo del equipo de diseño hacer muchas preguntas, y eran preguntas de amplio alcance. Podrían abordar cuestiones de diseño, sobre lo que sucede cuando tienes dos piezas dominantes de información. Digamos en un módulo, y luego cuáles fueron las expectativas en la mitad de diseño del equipo si has perdido el beneficio de dos columna lado a lado. Si estás renderizando este módulo en una pantalla pequeña, ¿cuál de esas dos piezas de información debería aparecer primero? Podrían abordar cuestiones de interacción. Si estás mirando un carrusel fotográfico por ejemplo, como fue diseñado en Photoshop, probablemente sea bastante fácil adivinar cómo podría funcionar esto si tienes un mouse disponible para tu dispositivo. Si tocas o haces clic en un elemento para avanzar en el carrusel. Pero, ¿qué pasa si en realidad no tienes un ratón? ¿ Qué pasa si estás en una pantalla táctil? ¿ Quieres construir una asequibilidad para el tacto y poder deslizar esas fotografías? ¿ Qué pasa si alguien no ve el diseño como tú y yo podríamos, y están teniendo esta información leída en voz alta en un navegador hablante? Eso también es algo que podemos diseñar. Entonces, ¿cuáles son las expectativas del diseño la mitad del equipo sobre cuál debe ser esa experiencia? Seré honesto, he estado en el extremo receptor a algunas de estas preguntas en muchos proyectos y son terribles. Porque muy frecuentemente como diseñador, no he considerado algunas de estas opciones. Pero nos dimos cuenta muy temprano en el rediseño del Boston Globe, está bien si no teníamos respuestas. En realidad, lo que estamos tratando de hacer es asegurar que cada miembro del equipo tenga un entendimiento compartido de lo que nos llevó hasta este punto, porque en algún momento, el proceso le va a corresponder la mitad del equipo heredar el trabajo de otra mitad. Entonces, tienen que poder hacer recomendaciones sobre cómo proceder. Esto es algo que he escuchado de cada uno de mis clientes, desde que trabajé en el Boston Globe. Que cuando se puede acercar el diseño y el desarrollo, siempre, siempre resulta en productos de respuesta digital más fuertes. Mejora la calidad del trabajo, más estrechamente el diseño y el desarrollo pueden trabajar juntos. Parte de eso en realidad es tratar la fase de prototipado como parte del proceso de diseño, porque una vez que se tiene un entendimiento compartido de cómo las comps llegaron a este punto, hay que sacarlas de las comps y ello a codificar. En otras palabras, necesitas meterlos en un prototipo flexible de respuesta que en realidad es el lienzo para el que realmente estamos diseñando. Una vez que puedas hacer, que puedes tener desarrolladores front-end realmente haciendo recomendaciones sobre cómo comenzar con un diseño de pantalla pequeña, e introduciendo cuadrículas flexibles, imágenes flexibles y consultas de medios para crear un prototipo que sea tan responsiva lo más posible. Ahora, en el prototipo, con mucha frecuencia no necesariamente tendrán diseños de referencia para cada uno de esos puntos de ruptura. En otras palabras, están diseñando en el navegador, y están haciendo buenas recomendaciones más a menudo que no, pero solo son recomendaciones. Entonces, es por eso que en el otro extremo de la fase de prototipado, me parece increíblemente útil volver en equipo, y en realidad tener una revisión de diseño más interactiva. Pero en lugar de imprimir diseños y pegarlos en una pared o tal vez proyectarlos en la pantalla, realidad es increíblemente útil cargar el prototipo en tantos dispositivos y navegadores como sea posible, y entregárselo a la gente. En realidad, déjalos trabajar con el diseño en estos diferentes dispositivos, y hablar de cómo se siente realmente el diseño para ellos. Estas revisiones de diseño más interactivas son una manera increíblemente poderosa de verificar un diseño receptivo en vivo en tantos dispositivos y navegadores como sea posible. Simplemente puedes tener una conversación corrida sobre cómo se siente el diseño receptivo. ¿ El diseño se siente apropiado ya que lo estamos viendo en pantallas de diferentes tamaños? ¿ Se siente bien si estoy en una pantalla táctil y estoy deslizando por diferentes elementos? O lo más importante, ¿algún elemento realmente necesita una dirección de diseño adicional? Busca oportunidades en tu diseño donde algunas partes del elemento podrían estar rompiendo, y tal vez el diseño de la mitad que el equipo pueda decamp, y haz algunas recomendaciones sobre cómo marcar en algunos de esos detalles. En otras palabras, si puedes usar prototipado y herramientas de diseño tradicionales estrechamente juntas, eso siempre va a resultar en un producto de mejor respuesta. Es decir, tratar tus comps de Photoshop o tus archivos de Sketch como canónicos, como la referencia perfecta, es algo que realmente va a comprometer el valor de tu producto responsive porque son imágenes de un sitio web en el final del día. No te pueden decir qué sucede en pantallas de diferente tamaño o cuando las fuentes no cargan o cuando alguna parte de tu diseño realmente no se renderiza en el navegador. Es decir, HTML y CSS son las mejores herramientas de diseño que tenemos para llenar algunos de esos vacíos. Pero idealmente, estaremos trabajando con estos juntos. Ahora, la otra cosa que es increíblemente poderosa, y creo que esto es cierto para cualquier proyecto responsive, es echar un vistazo a la información que diseñamos en estas pantallas, y esto fue muy valioso para nosotros en el Boston Globe. En cada punto del proceso, siempre nos preguntábamos ¿qué valor tiene este contenido para el usuario móvil? móvil primero fue acuñado por el diseñador llamado Luke Wroblewski hace más de 10 años. En su momento, estaba argumentando que las pantallas móviles tienen que ser nuestra prioridad en el proceso de diseño. Estaba argumentando esto por una serie de razones. El tráfico móvil había explotado en aquel entonces y francamente, sigue explotando ahora. Pero también, estos dispositivos tienen todas estas maravillosas capacidades. Entonces, si empezamos a diseñar para ellos primero, eso realmente mejorará el producto, e introducirá características nuevas y emocionantes. Pero finalmente, y yo diría que tal vez lo más importante, estaba argumentando que las pantallas móviles nos obligan a enfocarnos. Que son pantallas que son 80 por ciento más pequeñas que las que tradicionalmente hemos diseñado. Entonces, si podemos empezar por diseñar ahí, podemos construir un consenso en torno a lo que más importa a nuestro diseño, y usar eso para mejorar la experiencia para todos. Esto es algo que he escuchado de cada diseño receptivo exitoso a escala. Uno de mis ejemplos favoritos de esto es en realidad el sitio web de Virgin America, muy difunto, y después de que el rediseño subió, un colega mío y yo entrevistamos al equipo detrás del rediseño. El líder del diseño en el proyecto, un tipo llamado Joe Stewart dijo una vez: “Por la razón que sea, gente piensa que está bien tener experiencias de usuario enfocadas en el móvil, pero cuando llegas al escritorio, se trata de lanzar el fregadero de cocina. Una de las grandes cosas de responsive es que te obliga a tomar esas decisiones móviles en un escritorio”. Al final del día, el móvil primero se trata de diseñar para el enfoque. Independientemente de si estás diseñando para un diseño de pantalla pequeña o un diseño de pantalla ancha, echa un vistazo a cada pieza de información que actualmente está siendo ranurada en esa página, y pregúntate, ¿en realidad tiene alguna valor al usuario móvil? Si no lo hace, bueno quizá valga la pena tener una conversación dura sobre el valor que tiene para cualquier usuario. Debido a que nuestros públicos son tan predominantemente móviles en estos días, esto realmente tiene que ser nuestro punto de partida. El gran secreto sobre el diseño del primer móvil, es que si realmente puedes enfocarte en lo que realmente importa a tus usuarios, va a hacer que tus usuarios no móviles sean mucho más felices también. Entonces, estas son solo algunas de las estrategias a tener en cuenta cuando estás diseñando de manera responsiva. Mira las formas en que colaboras con diseñadores y con desarrolladores, y también hazte algunas de esas difíciles preguntas sobre una primera prioridad móvil en tu diseño. Si puedes hacer eso, vas a idear algunos diseños de respuesta realmente hermosos que se ajustan y se sienten como en casa en cualquier clase de dispositivo que pudiera visitarlos. 8. Reflexiones finales: Entonces, en esta clase, hemos utilizado los ingredientes clave de un diseño receptivo. Rejillas fluidas, imágenes fluidas y consultas de medios, para construir más diseños agnósticos y flexibles de dispositivos. También pasamos un poco de tiempo mirando algunas formas en las que podemos afinar nuestras experiencias responsivas. Ajustar la tipografía o las imágenes en función de las necesidades del dispositivo o del navegador, para asegurarse de que las cosas encajen y se sientan como en casa en pantalla de cualquier tamaño. De verdad espero que solo utilices esta clase como punto de salto. Después utilizas algunas de las técnicas que hemos visto hoy para construir tu propio vocabulario de cómo construir hermosos sitios sensibles. Me encantaría ver parte del trabajo receptivo que haces, tal vez compartir en la galería de proyectos. Muchas gracias por tomar esta clase, estoy muy emocionado de ver el trabajo que has hecho. 9. ¿Qué sigue?: [ MÚSICA]