Buenas prácticas y ejemplos de responsive

Pues yo les dejo mi página web que ha sido fruto de los cursos de HTML y CSS de platzi, no es mucho, pero es trabajo honesto (:
https://midiaenunosminutos.com

La verdad este curso me ha funcionado perfecto para un proyecto que vengo pensando desde hace tiempo y ahora ya pude avanzar, a ver qué opinan:

CSS Grid es lo mejor de CSS, sobre todo cuando usas los templates jaja, lo pusieron en otro curso pero es muy recomendable aprenderlo.

Algo importante es que hay que preocuparse por los dispositivos de pantallas grandes, hoy en día hay personas que navegan por la web con sus pantallas ultra HD y monitores enormes, la mejor forma de evitar que la página se rompa en este tipo de pantallas es siempre estableciendo un max-width absoluto al html ^^

yo pude avanzar mi web agradeceria tu opinion https://soyronyvargas.com

Buenas noches, la página que decidí estudiar para la tarea que nos dejo Diego fue DEV community la cual recomiendo mucho ya que es una comunidad muy linda y es una buena fuente de información. Esta tiene 4 breakpoints y en cada una añade nuevos elementos y acomoda el contenido ya existente tal que se logre un layout balanceado y uniforme. Por ende, llego a la suposición que se trata de un layout shifter. Les paso capturas que tome del layout de la pagina en 3 breakpoints distintos (no se fijen en las notificaciones que tengo pendientes por favor 🤣). Dejenme saber si piensan lo mismo por favor!

PD: No les coloco el link porque no me sube el aporte 😦 dice que es un enlace no seguro aunque es un sitio seguro de acuerdo a mi navegador que es Google Chrome.

Como reto, todos deberían crearse una página como portfolio para que vayamos poniendo en practica todo lo que hemos aprendido y poco a poco irla mejorando a medida que sigamos avanzando. Aquí les dejo mi página, envíen también sus links para dar feedback 🤘🤘🤘

https://www.mydevice.io/

Otra herramienta/app que puede ser de gran ayuda para visualizar una página en distintos dispositivos es Responsively

Twitter me parece que es Column Drop

Leí un comentario si se puede impedir la descarga de breakpoints innecesarios al detectar el tipo de dispositivo usado.
Por buenas prácticas, no creo que sea recomendable. Aquí problemas reales que ocurrirían:
Desktop la gente a veces no trabaja con las ventanas a pantalla completa, esto puede afectar la experiencia de usuario al trabajar con ventanas pequeñas, le vas a causar que hagan scroll o zoom y va a ser fastidioso.
Mobile No se que tan común sea, pero existe la opción en Chrome mobile visualizar la página como en PC, si tu impiden la descarga de los otros estilos vas a estropear esta función.

Por eso por buenas prácticas colocar los estilos por cascada.

Les dejo este enlace de una web en donde podrán visualizar las vistas de una página en diferentes tipos de dispositivos.

https://www.responsinator.com/

Les dejo una página web que desarrollé exclusivamente con conocimiento de cursos de platzi, ojalá les guste.
https://constelacionesfamiliaresandal.com

Esta me parece interesante porque usa column drop pero con animaciones, me parece que esto debe hacerse con javascript
https://www.oksocial.co.uk/
Esta otra tambien usa colum drop en tablet y desktop tienen transiciones laterales, me llama mucho la atencion el manejo de las animaciones y el concepto minimalista
https://www.buildinamsterdam.com/
Esta tambien es column drop pero el tiene como header multiples pantallas animadas, tambien manejan conceptos minimalistas, en lo personal me gusta el diseño en general, estaria increible hacer un proyecto personal como este
https://pinkgreen.agency/

Les comparto https://mediaqueri.es/ es una página en la que podemos ver diferentes ejemplos de como manejan los breakpoints para cada dispositivo

Les comparto mi portafolio personal con lo aprendido en el curso hasta el momento, acepto retroalimentación para mejorar cada vez más.
https://dacosta011.github.io

En este enlace explican otros patrones de maquetación, junto con los que hemos visto, espero sea de ayuda.

Al revisar YouTube pude ver que tiene mas como column drop o un grid layout. Sin embargo, al revisar el inspector de elementos de Google Chrome parece que no tuviera breakpoints o que no tuviera responsive, ¿alguien tiene idea de por qué pasa eso o que estoy omitiendo? Por acá les dejo una captura de pantalla para que vean a qué refiero.
.

Notas

Recomendación para que tu archivo cargue más rápido en el navegador:

Separar siempre tus archivos de CSS por break point

mobile.css/style.css
tablet.css
desktop.css

En esta página puedes ver el width en promedio de diferentes dispositivos.

Link: https://www.mydevice.io/

El dispositivo más chico es 320px
Para tablet más chica podría ser 400 px - 600 px

No es ideal que tengas más de 6 break points, de hecho entre 3 o 4 están bien.

Dropbox utiliza el patrón de mostly fluid.

Lamentablemente y para mala fortuna de nosotros los Frotend’s, hace unos meses salio el samsung galaxy fold. Y su ancho de pantalla de minimo es de 280px

Dejo el enlace de las resoluciones ya que no lo dejó el profesor Degranda. https://www.mydevice.io/

Aqui dejo algunos enlaces interesantes de referencia de paginas profesionales
https://www.awwwards.com/websites/
https://www.thebestdesigns.com/designers/

El diseño web responsive no es sólo una cuestión de apretar y estirar. Se trata de ofrecer un sitio web de innumerables maneras, dependiendo del ancho de la pantalla. Lo que hay que añadir, lo que hay que eliminar, cómo dar prioridad a lo que es más importante, cuáles son las implicaciones para el ranking de búsqueda y cómo se hace todo eso con una sola base de código.

Es una gran tarea, si, por eso te dejamos esta lista de muy buenas prácticas que debes considerar para hacer de este trabajo lo más grato y exitoso posible.

1. Menú de navegación oculto.
   Las pantallas más pequeñas que ocultan el menú de navegación principal es una buena manera de mantener los diseños simples. Un icono, texto o combinación de ambos indica al usuario dónde está el menú.

Tus opciones incluyen un simple menú desplegable, donde el menú se desliza hacia abajo y cubre el contenido principal o el método de superposición donde el menú se expande y cubre toda la pantalla.

1. Menú de desplazamiento horizontal.
   Otra manera es dejar el menú visible en pantallas pequeñas pero dejar el contenido del menú fuera del borde de la pantalla donde se encuentra la información. Dejar parte del texto del menú cortado indica que se puede desplazar hacia un lado, así el ejemplo del menú de Google en pantallas móviles al buscar un tema es especifico.

2. Ubicar botones y links largos, áreas “clickeables”.
   En lugar de hacer botones más pequeños en los móvil, hazlos más grandes, por lo que son más fáciles de aprovechar. De hecho, esto no sólo se aplica a las pequeñas pantallas, es bueno para cualquier medio donde se vean los sitios web.

Los botones grandes mejoran la usabilidad. A la vez que tienes botones más grandes, también debes tener enlaces de texto más grandes. Si, por ejemplo, tiene una rejilla de titulares de noticias, con un enlace de texto que dice “Leer más” dentro de cada uno de ellos; en lugar de hacer esto, puedes convertir en link todo el resumen del contenido, así todo pasa a ser clickeable.

1. Balance entre el peso de la fuente y el tamaño.
   La relación entre el tamaño de los encabezados y el texto del párrafo debe estar bien equilibrados. Los encabezados grandes no se ven bien en el móvil, sobre todo si se extienden sobre unas pocas líneas. Todo debe cambiar de tamaño adecuadamente.

Los dispositivos móviles nuevos tienen pantallas de alta resolución, lo que hace que un texto sea más legible y más fácil de leer. Puedes permitirte el lujo de ir un poco más pequeño en las pantallas móviles y aumentar los tamaños de fuente cuando se llega a una pantalla más grande.

1. Anchuras de lectura óptima.
   Al hacer un diseño más amplio en las pantallas más grandes, es importante tener en cuenta las longitudes de las líneas de tu contenido.

Si una línea de texto es demasiado larga, es más difícil de leer porque es difícil seguir la línea a línea. Del mismo modo, si se tienen líneas que son demasiado cortas rompe el ritmo de la lectura ya que los ojos tienen que moverse hacia atrás y hacia adelante con demasiada frecuencia.

La práctica común es mantener las longitudes de línea en alrededor de 60-75 caracteres. Esto se puede lograr mediante el establecimiento de sus áreas de texto para tener un máximo de anchura de aproximadamente 500/700 píxeles de ancho.

1. Poner la información importante en la parte superior.
   Muestra números de teléfono, información de contacto, los CTAs, etc. en la parte superior en el móvil.

Los usuarios de móviles quieren la información de forma rápida, pero esto también funciona bien en cualquier dispositivo. Por ejemplo, en una página de detalles de productos de comercio electrónico es bueno tener el botón “Añadir a la cesta” visible para la mayoría de los usuarios, sin que tengan que desplazarse.

1. Cambiar el orden de los bloques de contenido cuando se colapsan en pantallas pequeñas.
   Decide lo que es más importante para mostrar por primera vez en una pequeña pantalla, a continuación, cambia el orden de contenido.

Si en una pantalla de escritorio hay un bloque de contenidos de texto y un bloque de imagen situado uno junto al otro, decide lo que es más relevante y eso se mostrará a primera vista
fuente: https://www.somoscafeina.com/articles/7-buenas-practicas-para-un-diseno-web-responsive

Muy buena clase!
Cada ves queda mas claro toda la teoría y practica que se realizo en este modulo de Responsive 😄

Aqui la recomendación del Gran Diego!

Y aquí la Pagina que recomendó.

Les comparto esta página con un layout de grid

Desde los curso anteriores de Frontend, me puse el reto de hacer un clone de YouTube, lo hice desde Desktop first y he sufrido con esos media querin :c

Dejo el enlace del repositorio (https://github.com/Pieu11/Youtube-clone) y de la página (https://pieu11.github.io/Youtube-clone/) por si quieren verlo

Próximo proyecto ya sé que será desde Mobile First xD

Generalmente yo uso 3 o 4 breakpoints:
320, 440, aveces 550 y 768, los aprendí en el curso de Diseño para programadores y en la documentación de bootstrap también hay algunos tamaños.

Cordial saludo comunidad

Unos ejemplos pueden ser:

• Booking: que usan una especie de carousel de los hoteles disponibles.
  https://www.booking.com/index.es.html
  
  
• Adidas: que usa un menú muy interactivo para filtrar la información con menos breakpoints que booking.
  https://www.adidas.co/novedades
  
  
  Por último les comparto un documento de algunas consideraciones más avanzadas para tener en cuenta en temas de UE en responsive desing: https://drive.google.com/file/d/1DVgkxsbtZfPeRWKtlYxtixgyJGqHWRve/view?usp=sharing

Slds

no es ideal tener mas de 6 breakpoints

MyDevice.io - tamaño de pantalla de dispositivos

Dividir el código ayuda reducir los tiempos de carga de la página. -Dividir los @media

smashingMagazine.com - uso de otro patron (grid o grilla)

Blizzard Entertainment: Mostly fluid
Facebook: Layout shifter

La mayoría ocupa estas estrategias, en especial Mostly fluid.

Me costo un día hacerlo 😁 Gracias! Platzi 💚 Y al profe Diego ✌ #PlatziChallenge

Mobile 📱:

Tablet 📟 (No había emoji de tablet) :

Laptop 💻:

Encontre una pagina bastante famosa y que es de unos diseñadores…todas las cajas son div. Me sorprendio ver el codigo despues de aprender aqui como se hace una pagina profesionalmente…no todo es lo que parece. Uno se piensa que deben tener a los mas tops desarrollando su sitio pero parece que no.

dribble.com - uso de otro patron (grid o grilla)

La verdad que estas clases están muy buenas. Van directo al grano

GitHub.com (almacenamiento de código fuente y control de versiones) - uso de patron layout Shifter

Alguien me puede decir si estoy en lo correcto, segun lo que vi debo empezar a realizar mi pagina desde 320, es decir poner mi pagina con inspección en 320 y una vez termine esa, ya lo que hago son media quieries con los demás tamaños? si seria así?

tengo una pregunta alguien sabe como es que se puede diseñar o crear una pagina web como dropbox o como isieron para que cuando baje cambie

Recomendacion: separar archivos css por break point

buen video excelente por las recomendaciones

La página que analice es: https://stackoverflow.com/
dado que sus componentes se alinean hacia abajo deduzco que se trata de Mostly Fluid.
Sin embargo me llamo la atención una sección donde los elementos no se alinean hacia abajo sino que hacen scroll de izquierda a derecha

Una de las mejores paginas que he visto que implentanta muy bien el responsive es Tesla, se ve muy bien en mobile y en pc

Aqui un link del resumen de todo este curso https://platzi.com/tutoriales/2008-html-css-2020/7093-resumen-del-curso-definitivo-de-html-y-css/

Ahora toda página web que visito automáticamente me dirijo a inspect y analizo la forma en la que fue escrita. Qué maravilloso el mundo del desarrollo web.

Twitter y LinkedIn creo que trabajan con responsive Column Drop

Muy buenos ejemplos, me gusto esta clase.

Hay algo que no puedo entender aún, supongo que hace parte de otros cursos más adelante, pero porque en las página llega a existir los tres tipos de media query, max, min y maxmin. He pensado que si se empieza desde un modelo de mobile sólo el uso de min sería suficiente y max para desktop, pero no dejo de ver que parece que todas las páginas usan los 3. Me causa curiosidad eso.

Es muy buena esta información para mejorar los tiempos de carga

Creo que la version mobile de youtube tiene un layout shifter pero el contenido principal (los videos) los posiciona como column drop

Página estudiada: Platzi

Mobile

Tablet

Desktop

Esta pagina tiene solo 3 break points.
https://pixologic.com/

😃 Una buena practica es tener el menú de desplazamiento en horizontal.

Hola! Les dejo una web que estoy realizando con la escuela de PLATZI junto con los retos de FREECODECAMP.
.

Me dicen que les parece?
Mati’s portfolio

lo logre!!
encontre esos patrones!!!
pero no puedo poner captura aqui!! jijijiji
los encontre en la pagina de los videos x,y,z jajajajaja
😗

inicie estudiando sobre desarrollo backend, haciendo este curso me doy cuenta que hubiese sido muy bueno empezar por aca, no para especializarme en el tema, pero para darle un poco de vida a los proyectos y hacerlos mas visual

el ultimo ejemplo tambien se podria hacer con flexbox, para 4 imagenes un flex-basis de 25% para cada item, luego para 3 un 33.3% y asi sucesivamente

MPORTANTE

Existen muchos patrones de diseño responsive, algunos hasta incluyen JS pero los 3 vistos anteriormente son los más usados y reconocidos.

Comparto una entrada de blog de Platzi donde hablan de la diferencia entre Flexbox y CSS Grid.

https://platzi.com/blog/flexbox-vs-css-grid-cual-es-la-diferencia/

Notas de la clase

Estos son los with que considero más usuales en dispositivos:

• (to start) Small phones: 320x480
• (BP 1) Usual iPad / Tablet: 768x1024
• (BP 2) Small HD Laptop: 1024x768
• (BP 3) Usual 16:9 Laptop: 1366x768
• (BP 4) Large screens: 1920x1080

También les dejo esta tabla que obtuve de esta página con información valiosa sobre Laptops.
https://laptoping.com/laptop-display-specs-explained.html

Espero les sirva, saludos!

Buenas prácticas y ejemplos de responsive
Separa siempre tus archivos de CC por breakpoint
Mobile.css / style.css
Tablet.css
Desktop.css

Datos sobre responsive
https://www.mydevice.io/

• Separa tus archivos de css por breakpoint

• Escoje los breakpoint que mas te convengan usando mydevice.io

• No tener mas de 3 o 4 breakpoints

En el website https://www.mydevice.io/ se usa el patrón Column Drop!

Excelente curso, ahora me encuentro implementando esto en mis proyectos personales. Cada clase es un desafío.

Escoge entre 3 a 4 breakpoints y asegúrate de que el proyecto se vea bien en esos.

Me parece que Platzi esta hecho con el patrón de diseño Mostly Fluid, si no estoy en lo correcto por favor corríjanme jejeje

He realizado el estudio de estos conceptos por medio de una página web muy interesante, se llama coolors y establece paletas de colores que contiene una cierta cantidad de colores que combinan entre sí y que pueden ser utilizadas fácilmente. Utiliza la estrategia Mosttly Fluid

Bueno, por alguna razón muchos comparten sus logros acá; así que yo también lo voy a hacer. Jajaja.

De verdad, este ha sido uno de los mejores cursos que he tomado, de verdad me interesa mucho el mundo del Frontend, así que ya veré a dónde voy.
Home

…
…
Sign In

…
…
Sing Up

https://www.dahuasecurity.com/ es mostly fluid
https://www.blizzard.com/es-mx/ es una combinación de mostly fluid con grid layout

Con estos ejemplos tengo mas claro cada uno de los patrones de maquetación
En resumidas palabras puedo decir que
Mostly fluid no cambiará mucho el estilo con respecto a los tamaños de pantalla, la disposición de los elementos se mandrendrá muy similar
Layout shifter cambiará la disposición de algunos elementos, no tendremos la misma disposición de elementos en los diferentes tipos de pantalla
Column Drop Para mi es parecido a Layout shifter ya que la disposición de los elementos cambia, pero la diferencia que puedo decir es que esta se estará acomodando por columnas

Espero no haber confundido 😅

Grid layput tengo entendido que usa el principio de rejillar para dividir las páginas y de esta manera mostrar el contenido

pagina: https://bitcoin.org/es/
utiliza layout shifter

pagina: https://bitcoinmagazine.com/

UTILIZA: GRID Y LAYOUT SHIFTER

Interesante

https://www.shutterfly.com/
https://www.typeform.com/

Tipos de Breakpoints

Dropbox.com (almacenamiento en la nube) uso de patron mostly-fluid

Otro sitio que, les puede ayudar: https://mediaqueri.es/

No veo a Huawei 😦 en el mydevice

1024px…

• Mostly Fluid: CloudConvert es una página para convertir todo tipo de archivos en muchísimos formatos, siempre me saca de apuros.
  
  
• Layout Shifter: Siempre descargo VLC en mi PC, reproduce casi todo tipo de vídeo, muy útil y es Open Source. (Me costo mucho encontrar uno de este tipo de Responsive xD, algunos de sus bloques pasan a distintos ordenes.)
  
  
• Column Drop: Esta página es de la Documentación de Emmet para VS Code, es muy útil tiene todos estos atajos resumidos.
  
  

RESUMEN CLASE 49:
BUENAS PRACTICAS Y
EJEMPLOS DE RESPONSIVE

RECOMENDACION:

Separa siempre tus archivos de CSS por break point

• mobile.css / style.css

• tablet.css

• desktop.css

Tambien

• Optimizar en 320 Width

• Tener de 3 a 4 break point

Información resumida de esta clase
#EstudiantesDePlatzi

• Para optimizar la carga de nuestros proyectos es importante tener por separado los archivos CSS según o breakpoints

• El tamaño mínimo en el cual podemos iniciar es de 320px y creamos un breakpoint en 600px y otro en 800px, no es bueno tener más de 5 breakpoint

• Podemos visitar algunas páginas y aprender de ellas

Ame las clases de patrones de diseño.

El exchange de criptomonedas Uphold tiene un diseño web que aplica el Mobile First y usa un patrón de diseño responsive llamado Off Canvas.

Así se ve el exchange en teléfonos

Así se ve en tablets

Así se ven en PC

En el modelo Off Canvas el contenido menos usado se coloca fuera de la pantalla y solo se muestra cuando el tamaño de la pantalla es lo suficientemente grande; en las pantallas más pequeñas se requiere que el usuario se desplace hacia la derecha o izquierda.

La pagina de adidas siempre me ha llamado la atencion por las animaciones que hace y su layout en general aqui la dejo.
https://www.adidas.com/us

Frontend: -¿Cuantos breakepoints vamos a utilizar en este proyecto?
Smashing: -Si

YOUTUBE:

CRUNCHYROLL:

Pagina: https://www.mydevice.io/

Estuve analizando la página principal de platzi https://platzi.com/home
Y estoy casi seguro que se trata de un patrón Mostly Fluid, ¿alguno puede confirmar? xd

Me parece que https://planetario.buenosaires.gob.ar/observa-el-cielo es mostly fluid y https://www.tinkercad.com/things tambien es most fluid pero con un poco de grid. No se si estoy en lo correcto pero es lo que mi ojo inexperto está detectando jajaja

Mostly-fluid:
https://discord.com/

Layout Shifter:
https://www.wikipedia.org/
https://twitter.com/

Column Drop:
https://classroom.google.com/

Grid-layout:
https://zoro.to/

https://www.mydevice.io/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 120%;
}
.container {
  display: flex;
  flex-wrap: wrap;
}
.c1,
.c2,
.c3,
.c4,
.c5 {
  width: 100%;
  min-width: 150px;
  height: 150px;
}
.c1 {
  background-color: #003476;
  color:#b4d2f7;
}
.c2 {
  background-color: #0062d2;
}
.c3 {
  background-color: #b4d2f7;
}
.c4 {
  background-color: #d5dfef;
}
.c5 {
  background-color: #dfe1e5;
  color:crimson;
}

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="./table.css"
      media="screen and (min-width: 600px)"
    />
    <link
      rel="stylesheet"
      href="./desktop.css"
      media="screen and (min-width: 800px)"
    />
  </head>

GRID layout

https://mydevice.io para revisar dimensiones de dispositivos.

Grid es otro nivel.