Introducción al diseño web responsivo: un diseño para cada dispositivo

1. Introducción: Hola. Yo soy Spencer. Soy diseñador web aquí en Skillshare. En realidad soy parte del equipo que diseñó el video que estás viendo la escena ahora mismo. Entonces, cuando estás navegando, mirando tu propio perfil, subiendo tu proyecto, eso todo fue tocado por el proceso de diseño que yo y los otros diseñadores hacemos aquí. En esta clase rápida, vas a aprender los conceptos básicos de crear una cuadrícula adaptable. Adaptable significa que esta cuadrícula va a contener todos los elementos de tu diseño y si lo estás mirando en una laptop, una tableta, un teléfono, todo realmente se va a ajustar en consecuencia a una cuadrícula en cualquier tamaño de pantalla que se tira hacia arriba de este sitio web. Con algunos ajustes, normalmente puedes ajustar el diseño que ya tienes para caber dentro de una nueva cuadrícula que realices. Pero también puedes usar el conjunto de habilidades que tienes para cualquier diseño fresco que puedas presentar. Esto realmente se ponga en una cuadrícula. Es posible que escuches cuadrículas y pienses que las rejillas son limitadas, que van a limitar tu diseño, pero en realidad no es así. cuadrículas son un sistema visual subyacente. No son la representación visual de lo que estás creando. Entonces, una cuadrícula realmente simple va a funcionar para cualquier cosa que crees ya sea limpia, compleja, caprichosa, incluso tu copo de nieve de un diseño. No hace mucho tiempo, Skillshare no respondía y no se veía bien en los teléfonos, lo cual es un problema porque hoy en día mucha gente está accediendo a la web en sus teléfonos, en su tableta. Lo que ves en esta clase es que no es tan inaccesible, no es tan difícil de hacer. Entonces, en realidad les voy a mostrar el proceso de lo que hicimos de tomar la página principal y ajustarla para que quepa en la cuadrícula que creamos para Skillshare. 2. Prólogo: por qué es importante el diseño responsivo: Entonces, aquí tenemos la página principal de marketing de Skillshare de algún momento del año pasado, y esto se muestra en este momento al 100 por ciento y esa es la única forma en que fue diseñado. Fue diseñado para el escritorio, para un portátil. Por cierto, se ve bastante bien en este tamaño. Tienes tu cizalla en la parte superior, llamada principal a las acciones, quiere que te conviertas en miembro desde aquí, o puedes hacer click para conocer más, y obtener más detalles. Entonces tenemos algunas subsecciones a continuación. Entonces, esos son mayoritariamente conformados por imágenes, enlace de texto, que es el título, alguna sub copia debajo de eso, e incluso lo mismo para la sección de comunidad, video, prensa, y tenemos un pie de página en la parte inferior con un montón de enlaces en ella. Si alejamos un poco y digamos que estamos fingiendo que ahora esto se reduce y se adapta a una tableta. No es tan malo escalado a este tamaño, no es ideal, pero ninguno de los elementos realmente es tan pequeño. Entonces, todavía puedes leer el texto, el botón todavía se siente bastante grande, las imágenes siguen siendo agradables, ya sabes lo que estás mirando. Entonces, en general, como que funcionó, no un rompetrato. Pero si vamos por aquí y miramos el móvil, así que esto al 100 por ciento. Entonces, lo que hice aquí es que solo tomé el diseño anterior y lo bajé, que es lo que pasaría. Entonces, tienes tu diseño que es de unos mil píxeles aquí, y creo que es un poco más y lo escalamos a unos 400 píxeles de ancho, lo cual va a depender del teléfono que utilices pero solo de la forma en que ese ilustrador lo renderiza, es aún más difícil de leer, pero se puede obtener la idea del tamaño del botón y el tamaño del texto, ese texto es realmente pequeño y difícil de leer. Esos textos enlaces antes y los botones, ya no muy legibles, realmente no pueden tocarlos muy fácilmente, y es realmente difícil de entender, necesitas acercar para realmente hacer algo o leer nada en esta página, que no es una experiencia ideal de aterrizaje. Por lo que esta, la página de inicio, fue en realidad nuestra página más visitada en el móvil. Casi el 20 por ciento de nuestros visitantes a la página principal venían por teléfono. Tipo de legítimamente así. Esta página de Mobile tenía más del 40 por ciento de tasa de rebote y lo que eso significa es que, las personas que estaban visitando el sitio desde un teléfono se iban inmediatamente a una tasa mucho mayor que el escritorio. Con eso, la cantidad de personas que estaban haciendo lo que queríamos que hicieran desde esta página que se convierte en miembro era realmente baja. Mucho más bajo que el escritorio y eso es porque realmente no ves muy bien el llamado a la acción, no vienes aquí y realmente entiendes lo que debes hacer o lo que Skillshare está tratando de decirte. Entonces, realmente sabíamos que necesitábamos optimizar esta página para móviles o ustedes seguirían saliendo. Entonces, nos embarcamos en crear un sistema de cuadrícula responsive en todo el sitio, que estaría adaptando todas nuestras páginas antiguas, como esta, a una nueva cuadrícula y utilizarlas como base para cada nueva página que diseñamos avanzando. En el siguiente video, te explicaré un poco más sobre lo que es una cuadrícula básica. 3. Proyecto: diseño de una página de inicio responsiva: Así que sólo brevemente, antes de entrar a hablar de cuadrículas y puntos de ruptura, quiero hablar del proyecto rápido que vas a estar creando aquí, que es encajar o diseñar una página de un sitio web en una cuadrícula responsive. Entonces, si tienes un sitio web en este momento que no es receptivo, arreglemos eso, hagamos ese proyecto aquí. Pero si no tienes un sitio web, o realmente no quieres trabajar en tu sitio web, lo entiendo, podríamos escoger el sitio web de tu restaurante favorito. La mayoría de los restaurantes tienen sitios web. Son bastante simples pero sorprendentemente no hay respuesta. Incluso una cadena grande como el Olive Garden. Lo sentimos, Olive Garden, no mi restaurante favorito, tiene un sitio web sencillo, no respondiendo. El paso uno es tan fácil. Simplemente deberías hacerlo ahora. Cinco minutos como máximo. Toma una captura de pantalla del sitio web que estás haciendo tal cual, ya sea tu propio sitio web, el sitio web del restaurante que quieres hacer, o un diseño que has puesto en marcha pero ni siquiera has construido aún. Agarra esa captura de pantalla, subirla a la galería del proyecto, y ese es el paso uno. El proyecto final que vas a compartir para esta clase va a ser tomar esa pantalla que decidas hacer y la vas a subir en tres tamaños. Entonces, va a haber escritorio, tablet y teléfono, y va a funcionar dentro de esa cuadrícula. 4. ¿Qué es un sistema de cuadrícula?: Aquí, tengo un tipo de diseño rebajado de una estructura alicatada. En realidad es totalmente wireframe. Como pueden ver le pongo una rejilla encima. Entonces, esta es la cuadrícula de 12 columnas que la usamos Skillshare, y divide el espacio horizontalmente en estas unidades llamadas columnas. Las columnas son los bits blancos más anchos. Entre ellos tenemos las canaletas. Entonces, estas 10 líneas y canaletas realmente solo están ahí para proporcionar un espaciado uniforme entre columnas. Del contenido que ves cuál es el texto y las imágenes, esos están contenidos dentro de la cuadrícula pero pueden variar según el ancho. Entonces, obviamente, van a ocupar más de una sola columna de cuadrícula. Este texto aquí recorre todo el camino a través de las 12 y estas imágenes se dividen en unidades más pequeñas de cuatro columnas cada una. Eso les permite tener tres imágenes caben en una fila. Estas columnas se van a encoger proporcionalmente con el contenido interior. Entonces, a medida que nos movemos aquí, a medida que llegamos a una pantalla más pequeña que intel hace una cuadrícula más estrecha, así que no hace una enorme diferencia notable de cómo funciona. Entonces, verás que muchos de los textos han bajado a esta tercera línea, porque el tamaño del texto no ha cambiado solo ha cambiado la cantidad de espacio en el que podemos mostrarlo ha cambiado. Pero es un poco más obvio cuando miras estas caras sonrientes de lado a lado, cómo estas caras sonrientes en la pantalla más pequeña siguen ocupando cuatro columnas, pero las cuatro columnas ahora no son tan anchas. Lo que sucede con el texto de abajo ya que esto está contenido como una unidad es texto similar a lo que vimos antes de los descensos. En realidad está bajando de dos líneas a tres, lo que significa que todo el contenido que se sentaría debajo que simplemente será empujado hacia abajo aún más. Ahora sucedió que la página tan generalmente cuando tomas una página como esta, y la haces un poco menos ancha en una cuadrícula, la página se convierte en una página de desplazamiento más larga. Por lo que tal vez te estés preguntando cómo decides sobre tu sistema de cuadrícula. De qué tamaño, y cuántas columnas y esa es una buena pregunta. Entonces, vamos a desplazarnos por aquí. Esta es solo una pantalla que muestra que generalmente cuantas más columnas tengas en tu cuadrícula, más opciones de diseño tendrás. Entonces, ahora mismo, esta es una cuadrícula de dos columnas. Entonces, si miramos específicamente los objetos de cara sonriente, puedes ver que tienes dos opciones de diseño, cuatro elementos dentro de una fila. Tienes un ancho completo el cual va a ocupar ambas columnas o puedes poner un elemento en cada columna. Entonces, lo que tienes aquí a media talla. Si convertimos esto a través de rejilla de columnas en una cuadrícula de cuatro columnas, vas a conseguir muchas más opciones, porque como puedes ver, mantienes las mismas opciones de ancho completo que ahora está a través de cuatro medias, que ahora está a través de dos, y conseguimos a estos tipos. Entonces, ahora tienes columnas individuales que son la mitad del tamaño de lo que es en una cuadrícula de dos columnas, y cuando tienes varias columnas, puedes hacer las cosas más grandes y más pequeñas dentro de la misma fila. Entonces, ya sea que quieras tratarla como una sección primaria con algo secundario o mezclar-y-emparejar un poco el diseño, tienes esa opción. Entonces, esto va a crecer exponencialmente a medida que añadas columnas a tu cuadrícula. Terminamos yendo con una cuadrícula de 12 columnas sobre escultura, jugamos por ahí con muchas opciones diferentes. Entonces, esto lo que tenemos aquí es en realidad una grilla con 12. Sabíamos que queríamos un diseño que fuera divisible por dos, tres y cuatro. Entonces, aquí lo vemos divisible por tres, para que podamos tener filas con artículos familiares y tener variedad de si queríamos artículos más pequeños, podríamos poner cuatro imágenes a través y tener que sean tres columnas cada una, y así sucesivamente. En el siguiente video, te mostraré cómo ajustamos uno de nuestros diseños para que encajara en este nuevo sistema de cuadrícula de 12 columnas de ancho. 5. Creación de una cuadrícula: Entonces, ahora echemos un vistazo atrás al diseño de la página de inicio que vimos antes hace unos videos, y encima de él yacía la cuadrícula que vimos en el último video. Entonces, lo que vamos a hacer ahora es mostrar cómo podemos ajustar un diseño existente. A veces con bastante facilidad a esta cuadrícula para que podamos hacer que funcione de manera responsiva, y en tamaños de pantalla más pequeños que como vimos esta página de inicio no lo hace actualmente. Entonces, las dos primeras secciones son en realidad bastante buenas. En realidad diseñamos esta cuadrícula con base en torno a estas páginas existentes que están a las 9:30. Entonces, va a ver a primera vista como si todo encaja bastante bien dentro de él, cómo las cosas se alinea con la cuadrícula externa aquí, y aquí a la derecha. Realmente no necesitamos ajustar estos botones ni este texto, no voy a hacerlo. No creo que cada botón tenga que estar arriba en una canaleta y que todo necesita ser espaciado el ancho de una canaleta, creo que eso en realidad se vería un poco raro en este caso. Entonces, vamos a dejar eso en paz y sólo saber que como texto se envuelve, vamos a golpear un punto de ruptura, que hablaré un poco más tarde, que ajustaré los botones cuando llegue a cierto tamaño. Entonces, esto podemos dejar solos a este tamaño y lo mismo para esto. Entonces, esto miramos pero porque tenemos una cuadrícula de 12, y tenemos una fila de tres, ya funciona. Encaja dentro de la rejilla, están espaciados 30 de distancia que son estas canaletas. Entonces, esta sección para ahora mismo tipo de ya hecho. No obstante, cuando llegamos a esta pieza, tenemos una fila de cinco artículos. Lo cual no funciona porque, 12 no es divisible por cinco. Entonces, debido a que estos artículos no tienen canaletas entre ellos, cuando esta rejilla se iba a encogerse, no estarían espaciados correctamente. Entonces, tenemos un par de opciones aquí. Estamos viendo esto, podemos decir que podemos ir a una fila de seis proyectos, en otro proyecto aquí lo que significaría hacer más pequeño a este tipo y tenerlo sean dos, pero eso crea un poco de problema. Entonces, aparte de ser bastante pequeño, se puede ver que con ciertos nombres y seguidores, va a crear un problema. Realmente no quiero que esto fluya a la siguiente línea y vaya mucho más alto que estas imágenes. Entonces, no creo que tenerlo sean dos contras y vaya a funcionar. Pero, si vamos a tres, entonces en realidad tenemos más espacio del que tenemos ahora para nombres y metáforas. A medida que esto crece en esto empuja hacia abajo, esto empujará todo lo demás abajo. el bien de la velocidad no voy a seguir adelante y hacer eso, sino a medida que mueves las cosas hacia abajo solo para asegurarte de que todo se mueva en consecuencia. Pero como ven aquí, con esto de tres, no podemos caber cinco artículos que tienen tres columnas de ancho. Entonces, uno va a tener que cortarse. Entonces, vamos a bajar a cuatro, que en este caso, creo que está bien. Si no crees que cuatro es suficiente pero quieres mantenerlo así de ancho, puedes decir que vas a tener dos filas de proyectos y tener ocho proyectos. Entonces, voy a seguir adelante y eliminar esto, y a través de la magia televisiva, voy a jalar esto que hice antes, y ya están listos para salir. Yo sí lo dejaré caer así. Ahí lo tienes. Ahora puedes ver que están espaciados por la canaleta, y te puedes imaginar a medida que esto se encoge, la canaleta se mantiene igual. Estos funcionarán todos proporcionalmente juntos en esta rejilla más apretada. Vamos a seguir adelante y hacer lo mismo para esta fila de cinco. Entonces, de nuevo, digamos que cuatro es lo suficientemente bueno para nosotros y vamos a sacar uno. Entonces, lo siento TechCrunch. Te gusta mucho. Pero simplemente no encajas en este momento. Entonces, seguiríamos adelante y haríamos de todas estas filas de o tres columnas de ancho. Ahí lo tienes. Esta sección ahora encaja dentro de la cuadrícula. Para este tipo de abajo, tenemos cinco. En este caso, y en todos estos casos quizá quieras discutir la UX de lo que es importante mantener, quizá quieras reconfigurar las cosas para que quepan dentro de esta cuadrícula, hacer un cambio más grande, pero creo que para nosotros en este momento nosotros están bien sacando materias, porque esas viven dentro de las escuelas. Ahora, aun cuando se vinculen de la misma manera que a medida que estos contras se hacen más pequeños, esto se va a cerrar en ello, y sólo se van a acercar más. Entonces, hagamos que estos se alinearan a estas rejillas. No tiene que estar todo alineado bajo la misma cuadrícula cuando tienes cuatro columnas, pero creo que se ve bien lo mantiene bastante simple. Entonces, así es como voy a hacer que funcione aquí. Ahí lo tienes. Ahora lo que alguna vez no estaba contenido adecuadamente dentro de una cuadrícula, con unos sencillos ajustes. Esto podría haber sido más fácil que algunas otras páginas que están por ahí. Se ajusta muy bien dentro de la rejilla. Todo está contenido en la columna, espacio por una canaleta que necesita ser. Como dije antes, estos no lo son. Creo que si esto tuviera un espacio de canaleta entre él, en realidad es demasiado. Creo que mucho espacio entre la imagen y el nombre, se ve mal. Entonces, debajo de la unidad, realmente no estoy tan preocupado de que se haga más pequeño. Ahí lo tenemos para esto. En el siguiente video, vamos a hablar de puntos de ruptura. Los puntos de ruptura son cómo se ajustan las rejillas cuando es necesario en función del ancho de la pantalla que estás viendo. 6. Demo de puntos de ruptura en vivo: Ahora, hagamos un pequeño demo en vivo. Entonces, en el sitio de Skillshare, Skillshare.com/classes, te voy a mostrar, sólo cambiando el ancho del navegador, esta cuadrícula se encoge en acción y puntos de ruptura. Entonces a medida que lo hago más pequeño, podía ver que todavía estamos en punto de ruptura uno, pero las imágenes se están haciendo más pequeñas proporcionalmente, la canaleta se mantiene igual y las mantiene separadas. Se puede ver el texto a continuación en estas unidades comienza a envolver. Muy pronto, lo ves envuelto a una tercera línea. Entonces, nada de esto realmente se considera un punto de ruptura, pero sigue empujando contenido a continuación. Si vinieras al sitio con esta grande, se ve bien. Si tu ventana es así de ancha, todavía se ve bien. Entonces, el contenido realmente se ajusta a la ventana en la que está. Una vez que empezamos a mirar algunos puntos de rotura, puedas ver rápidamente, que puedas ver rápidamente,cae a una segunda línea, así que ese es un punto de ruptura menor que pones ahí, porque no queríamos que el cinturón se solapara con la barra de búsqueda. Pero aquí, lo ves yendo a la tableta. Entonces, en tableta, el menú cambia. Contamos con menú de hamburguesas en ambos lugares. Entonces antes de eso, teníamos Mis Clases y la campana ahí. Entra y puede parecer un poco temprano pero sigue siendo generalmente bueno mantener el menor número de puntos de rotura posible. Realmente simplifica el diseño, simplifica el desarrollo del mismo, y funciona todo el camino a través del móvil. Entonces, moviéndose a la tableta, vemos que suceden otros cambios como el riel que existía en el lado izquierdo, que tenía todos estos flotantes. Ahora, se retira y se pone en la parte superior. Simplemente hizo enlaces, lo cual tiene sentido porque no necesitas estados de rollover en una tableta porque solo lo estás tocando, por lo que realmente puedes obtener el estado de rollover. También te das cuenta de que las canaletas cambian a 20 píxeles. Debido a que estos artículos son más pequeños ahora, generalmente nos gusta mantenerlos un poco más cerca juntos y pensar que se ve un poco mejor como una cuadrícula. Si seguimos aún más pequeños, pronto llegaremos al móvil. Entonces, móvil hay un par de otros cambios que suceden. Entonces, hemos hecho eso en el punto de ruptura, el título más pequeño, y lo hemos alineado al centro. Entonces ese es un pequeño cambio que hicimos ahí. También hemos hecho que estas opciones sean más amplias. Lo hicimos de ancho completo lo cual es bonito y móvil. Quieres que las cosas que queremos que toques como botones o menús sean un poco más grandes porque tus dedos son un poco más gordos que el cursor del ratón. Sin ofender. También nos hemos movido a una cuadrícula de una columna. Entonces, estas imágenes son en realidad un poco más grandes ahora, pero es una vista mucho más simple que realmente se adapta mucho mejor a sí misma para el móvil. Entonces, ahora, podríamos mirar otro ejemplo de sitio web, que es The New Yorker. Acabo de encontrar un artículo al azar sobre tortugas marinas. Si te desplazas hacia abajo, te darás cuenta, sabemos que hay mucho más columnas, y dos, pero generalmente tienen dos secciones por lo que tienen el artículo y las imágenes, y luego la sección derecha que tiene su anuncios y enlaces para descubrir diferentes artículos. Entonces, si empezamos a hacer la ventana un poco más estrecha, se puede ver un pequeño punto de ruptura donde los artículos de navegación se vuelven más pequeños, para que quepan cómodamente en esta nueva ventana más delgada. El título es un poco más pequeño, y se hace más pequeño aún para que encaje con el anuncio ahí. Pero en general, no han ocurrido cambios importantes a la grilla aparentemente. Una vez que vas un poco en más, entonces lo ves girar a un punto de ruptura mayor que es una columna larga. Por lo que el menú se ha ido y se ha convertido en una hamburguesa, similar a lo que viste en Skillshare. Ellos lo manejan de manera diferente. El título ahora está alineado con el centro, simplificado de lo que había a través de dos áreas ahora traídas a una. Esto se siente más como una sección general. Entonces, las cosas que tenían en la derecha, como los anuncios, ahora incluyen en esa sección de contenido principal. Entonces, si lo ves incluso se hace más pequeño aún. Simplemente tienen el ajuste de texto a medida que estas columnas se hacen más pequeñas. Generalmente mantienen el anuncio igual. Supongo que eso son solo las restricciones de las imágenes que tienen. No quieren que este texto se haga mucho más pequeño porque es una imagen. Donde esto, tienen un poco más de margen de maniobra con cómo se trata. Desplazándose hacia abajo, antes, donde vimos por el lado derecho la sección más popular, sacaron y agregaron al fondo. Entonces, eso otra vez, un cambio bastante importante dentro de un punto de ruptura, puedes hacer cosas pequeñas como cambiar algunos tamaños, mantenerlo en su lugar, o puedes hacer cambios importantes como cortarlo de una sección y agregarlo a otra. Mucho de esto va a ser llamado de juicio con base en el contenido. Ojalá pudiera decir que hay una regla correcta y una forma correcta de manejar esto, pero realmente depende de lo que estés haciendo. Entonces, te recomiendo en realidad, si estás haciendo este proyecto en tu propia página web o cuando haces este proyecto en la clase, para ir a diferentes webs, jugar alrededor. Es tan fácil como ensancharse y hacer más pequeño navegador y ver cómo lo hacen un montón de lugares. 7. Determinación de los puntos de ruptura: Los puntos de ruptura son anchos que estableces en tu diseño. Entonces, cuando tu navegador se convierte en el ancho de tu punto de ruptura se vuelve más delgado, lo cargas en una tableta, lo cargas en un teléfono, o incluso si expandes tu navegador para que sea más ancho. Esto va a forzar un cambio más grande en tu maquetación mayor para que se ajuste mejor al nuevo ancho. Entonces, los cambios de ejemplo pueden estar cambiando el tamaño de tu canaleta. Entonces, en la versión de escritorio 3.1, tenemos y canalones de 30 píxeles y en la versión de tableta, tenemos canalones de 20 píxeles. Parte de eso es simplemente proporcionalmente pensamos que se ve un poco mejor para que puedas ver las imágenes de cara sonriente. Las imágenes son más grandes de lo que son en este tamaño de tableta. Entonces, cuando tienes una imagen más grande como esta, darle un poco más de espacio entre sí tiene sentido. Pero, cuando las cosas tienen un tamaño un poco más pequeño, si estuvieran a 10 píxeles más separados, en realidad podría verse un poco demasiado lejos. Pero eso también viene un poco por necesidad para nosotros, y acabamos de establecer una regla de que en nuestra cuadrícula, las columnas nunca van a ser menos anchas que las canaletas. Entonces, con esta cuadrícula de 12 columnas y teniendo canalones de 30 píxeles, la cuadrícula tiene un mínimo de 750 píxeles de ancho antes de que estas columnas comiencen a ser más delgadas que las canaletas, que no queremos. Sucede lo mismo en punto de ruptura dos que es nuestra versión de tablet, pero eso es de 500 píxeles de ancho cuando las columnas se convierten en el mismo ancho que el canalón que realmente no queremos y luego nos descomponemos a móvil. En el móvil, en realidad reducimos el número de columnas y lo hacemos una cuadrícula de seis columnas, y eso también sólo tiende a prestarse a pantallas móviles donde y las cosas móviles simplemente se simplifican realmente. Entonces, en realidad hemos hecho que los botones sean más grandes para que sea más fácil de tocar. Hemos simplificado el diseño de esta fila de tres a una sola pieza de columna. Con eso, incluso puedes ver que tienes seis aquí y ocupa un bonito tamaño en dos filas, pero cuando las pones todas singularmente, seis se vuelve súper largas. Entonces, otra cosa que podrías hacer en un punto de ruptura es en realidad actualizar o eliminar contenido. Eso podrían ser secciones enteras o podrían ser imágenes. Entonces, y algo así si agregamos seis aquí en estos dos primeros puntos de ruptura y lo movemos al punto de ruptura tres, probablemente en realidad cortaría tres de estos y dijera, sólo vamos a mostrar tres imágenes. Creo que una longitud como esta, para móvil, se ajusta más apropiadamente porque presumiblemente, podrías tener contenido por debajo de que esto va a empujar hacia abajo y no quieres que tu página móvil sea demasiado larga de un pergamino, pero, por supuesto, eso depende de cuál sea tu contenido. Otros cambios son la navegación. Entonces, aquí puedes ver tenemos mucho espacio entre la barra de búsqueda y la pestaña de la comunidad. Pero a medida que empieza a hacerse más pequeño, cuando la barra de búsqueda se cierra, podemos establecer un punto de ruptura para decir: “Está bien, X-pixels de ancho, digamos, tiene 800 píxeles de ancho, la barra de búsqueda se acerca demasiado a la comunidad así que, bajemos esto a la segunda línea”. Podríamos decir: “Cuando esto se acerca demasiado así probablemente no lo querríamos menos que esto y esto en este momento es- ¿en qué es esto? Esto está en 610 de ancho”. Entonces podríamos decir a las 610 y menos, pasemos a un menú de hamburguesas que es este estado colapsado. Entonces, todos estos artículos simplemente estarían escondidos aquí abajo y entonces eso puede llegar a ser tan pequeño como se muestra aquí. Con todos estos cambios, puedes tener diferentes puntos de ruptura. Tienes múltiples puntos de rotura en un diseño para decir que, en un punto de ruptura diferente, vas a caer a una segunda línea de navegación entonces cambiarías a canalones de 20 píxeles de ancho. Generalmente, es bueno mantenerlos en el menor número de puntos de rotura posible. Es solo que generalmente es una gran guía para no tener que hacer un seguimiento de demasiados, pero realmente depende de tu contenido así que, supongo que habla con tu desarrollador local sobre lo que es posible. Para nuestro próximo video, profundizando en los puntos de ruptura, vamos a echar un vistazo a algunos puntos de ruptura en vivo en acción. Entonces, eso va a ser un sitio de Skillshare y una diferencia de sitio en Skillshare. 8. Conclusión: Sólo envolver. Recuerdo cuando estaba investigando, aprendiendo sobre calificaciones, la diferencia que hacía cuando realmente las estaba creando y jugando con ellas versus leyendo sobre ellas. Entonces, de verdad te animo a que te des una puñalada en este proyecto de clase. Echa un vistazo a la guía del proyecto, incluso he publicado un ejemplo de lo que son Skillshare Grid es. No decir que tienes que seguirlo o necesariamente debes seguirlo en base a cualquier contenido que tengas. Pero, eso podría ser un punto de salto realmente fácil solo para ver cómo lo hacemos y cómo podrías querer hacerlo también. No dudes en hacer preguntas en el apartado de discusión. Además, es un gran lugar para dejar enlaces o compartir cualquier conocimiento que tengas de hacer esto tú mismo o lo has hecho en el pasado o aprenderlo por primera vez a través de esta clase. De verdad espero con ansias ver lo que ustedes se les ocurre. Estaré en la galería del proyecto, metiendo alrededor, dejando comentarios, así que muéstrame lo que tienes. 9. Explora sobre diseño en Skillshare: manera.