No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Buenas prácticas y ejemplos de responsive

49/55
Recursos

Aportes 154

Preguntas 36

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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 🤘🤘🤘

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.

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



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

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/

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

Clase 49 - Buenas prácticas y ejemplos de responsive


¿Qué buenas prácticas debemos de seguir a la hora de trabajar con responsive design?

  • Tener siempre separados nuestros breakpoints en diferentes archivos.
  • Tener en cuenta las dimensiones promedio de las diferentes pantallas de los dispositivos.
  • Tener un máximo de 4 breakpoints

¿Por qué debemos de tener separados los breakpoints en diferentes archivos?

  • Porque esto ayuda a que la carga de nuestra página web sea más rápida.

¿Qué herramienta podemos usar para sacar el promedio del tamaño de las pantallas de los diferentes dispositivos?

  • My Device.

¿Aproximadamente cuáles serían las medidas que deberíamos usar para nuestros breakpoints?

  • 320px = Smartphone.
  • 600px = Tablets.
  • 900px = Laptops/Desktop.

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

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.

Les comparto esta página con un layout de grid

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

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.
.

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

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

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

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

Lo que encontré fue lo siguiente, espero esté bien 😅.

Mostly Fluid: La página de Ripley
Ripley

Layout Shifter: La página de Audio Player
Audio Player

Column Drop: La página de CriptoNoticias
CriptoNoticias

  • 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.

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ó.

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

buen video excelente por las recomendaciones

Recomendacion: separar archivos css por break point

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


Con este curso eh logrado entender más a profundidad el diseño responsive. Me hace falta mejorar en el breakpoint para tablets, pero ahí voy, cualquier sugerencia es bienvenida.

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.

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:

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.

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.

Grid es importante saberlo, ya que ayuda a distribuir los elementos de manera equitativa, incluido el control de su separación.

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í?

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

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

Mobile 📱:

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

Laptop 💻:

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

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

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.

Los breakpoints son puntos específicos en los que el contenido y diseño de un sitio web se adaptan de cierta manera para proporcionar la mejor experiencia posible al usuario. * \*\*[320px — 480px\*\*: Dispositivos móviles](https://fironmarketing.com/blog/responsive-website-breakpoints/). * \*\*[481px — 768px\*\*: iPads, Tablets](https://fironmarketing.com/blog/responsive-website-breakpoints/). * \*\*[769px — 1024px\*\*: Pantallas pequeñas, laptops](https://fironmarketing.com/blog/responsive-website-breakpoints/). * \*\*[1025px — 1200px\*\*: Escritorios, pantallas grandes](https://fironmarketing.com/blog/responsive-website-breakpoints/). Es importante recordar que estos son solo puntos de partida. Los breakpoints que elijas deben basarse en el contenido de tu sitio web y cómo se ve y funciona en diferentes tamaños de pantalla. ¡Espero que esto te ayude en tu aprendizaje de diseño web responsivo!

Dejo esta página que habla sobre los 5 patrones de Responsive Design más usados

Sé que quiza mi pagina esta muy básica.
Pero espero que cuando entren a verla, ya haya tenido muchos cambios.

GermanAndPer
Este es mi portafolio.

Y va dirigido principalmente a ser Data Analyst.
Vamos por mas! compañeros!
🧑‍🏫👨‍💻

diego dice que maximo 6 breakpoints y en el quiz que te ponen mas adelante te equivocas te dice que maximo 3 breakpoints. …

Por que es importante el Responsive?

  • Como vemos, se adapta a todas las pantallas y es muy fácil de navegar. Es un ejemplo de que el responsive es muy importante aunque ya se tengan otras soluciones para móviles. Un usuario puede no tener descargada la app, no tener datos para hacerlo en ese momento o, simplemente, no querer hacerlo. Un buen responsive es esencial para una página web.

https://www.mydevice.io/#compare-devices

Aquí la página que visitó al principio del video

Análisis del patrón de maquetación de Responsive Design de:

CANVA: https://www.canva.com/

_

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

Ame las clases de patrones de diseño.

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/

<h4>Consejos para un mejor Responive Design:</h4>
  • 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

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…

Esta clase no carga !!

Optimización del Código para Velocidad de Carga:

  • Para mejorar la velocidad de carga del proyecto en el navegador, es crucial dividir el código CSS, especialmente en la sección de media queries.
  • Dividir los media queries en archivos separados ayuda a evitar cargar todos los estilos de una vez, lo que puede resultar en un archivo CSS pesado y tiempos de carga más lentos.
  • Esta práctica es especialmente importante en proyectos grandes, donde implementar múltiples breakpoints puede generar cientos de líneas de código por cada media query.

Selección Estratégica de Breakpoints:

  • Al seleccionar breakpoints, es esencial tener en cuenta las dimensiones globales de los dispositivos, como smartphones, tablets y computadoras de escritorio.
  • Se recomienda elegir breakpoints que cubran un amplio espectro de dispositivos y garantizar que el proyecto se vea bien en al menos tres tamaños de pantalla diferentes.
  • Herramientas como “my device io” proporcionan dimensiones estándar para dispositivos móviles, lo que facilita la selección de breakpoints adecuados.

Limitación de Breakpoints y Patrones de Maquetación:

  • Es importante evitar la sobrecarga de breakpoints y patrones de maquetación para mantener un código limpio y eficiente.
  • Se sugiere limitar los breakpoints a 3 o 4 para evitar la complejidad excesiva y garantizar una experiencia de usuario consistente en diferentes dispositivos.
  • Se pueden implementar varios patrones de maquetación, como Most, Layout Shifter y Grid Layout, según las necesidades del proyecto y la experiencia deseada.

Ejemplos de Patrones de Diseño en Páginas Web Reales:

  • Se presentan ejemplos de páginas web populares, como Dropbox, GitHub y Smashing Magazine, que utilizan diferentes patrones de diseño responsive.
  • Estos ejemplos ilustran cómo los sitios web reorganizan su contenido en respuesta a cambios en el tamaño de la pantalla, utilizando patrones como Most, Layout Shifter y Grid Layout.
  • Se alienta a los estudiantes a explorar otras páginas web y compartir ejemplos de patrones de diseño que encuentren interesantes o innovadores.

Recursos Adicionales y Próximos Pasos:

  • Se mencionan recursos adicionales, como cursos sobre Flexbox y Grid Layout en Platzi, para aquellos que deseen profundizar en técnicas de diseño responsive.
  • Se anima a los estudiantes a aplicar los conceptos aprendidos en proyectos personales y a seguir explorando nuevas tecnologías y tendencias en diseño web.

¡Con estos consejos y ejemplos, estás listo para optimizar tus proyectos y crear experiencias de usuario fluidas y receptivas en diferentes dispositivos!

Una pregunta, ¿como se hace los media para esconder algo ? el no lo mencionó