Responsive Design: Estrategias Mobile First
Contenido del curso
Se debe optimizar para todos los dispositivos. Hay tiene que tener en claro un par de conceptos:
@media (min-width: #;) {"código que se aplicará"} y se aplican para cada tamaño de dispositivo. El pixelaje dado será el break point.Lo más importante es diseñar para movil. Por lo que se debe diseñar con mobile first. Es decir, primero diseñar para celular, luego un break point para tablet y finalmente un break point para PC.
Para aplicar media queries con buenas prácticas, hay que hacerlo en el header. Porque así solo se descarga el código necesario según el dispositivo, mientras que en CSS se descarga todo sin importar nada.
En la tag link se colocan los atributos href, rel y, a partir del segundo archivo, el break point media="screen and (min-width: #px". El style.css debe estar hecho para mobile. Luego se pueden crear otros archivos como tablet.css o desktop.css.
Thank you
Gracias
¿Qué es Responsive Design? Son todas esas técnicas que usamos para adaptar nuestras aplicaciones web a la mayor cantidad de pantallas 250px-Diseno-web-responsive-design.jpg Patrones en Reponsive Design:
Mostly Fluid Colocación de columnas Layout shifter Tiny tweaks Off canvas Para mas información: https://mediaqueri.es
Conceptos nuevos:
Viewport: área visible del navegador Portrait: vertical Landscape: horizontal Mobile first: empezar un websit desde la menor resolución soportada Deskto first: empezar un websit desde la mayor resolución soportada ¿Cúal es mejor?: Técnicamente Mobile First
@Yeisson Stik Gutierrez Rivera, ¿por qué técnicamente mobile first es mejor? Según lo que entiendo depende de tu proyecto y del objetivo que tengas o que quieras alcanzar. . Aunque, si me gustaría hacer una anotación: hace unos días leía sobre la importancia del mobile first, y en resumen se decía que el uso de internet desde teléfonos móviles es bastante alto (mayor al uso de internet desde otros dispositivos), por lo que existe mayor probabilidad de que alguien use tu sitio desde un teléfono móvil. . Lastimosamente, no recuerdo dónde vi este dato, pero busqué en internet y encontré este blog que tiene unos datos interesantes. . NOTA: Agradecería mucho tu aclaración sobre el porqué técnicamente mobile first es mejor o algún recurso recomendado donde pueda profundizar sobre esto.
@ivanbatistao Hola, como tu mismo sabes ahora mucho del trafico de las paginas web son atreves de dispositivos móviles, así que muchos prefieren usar el Mobilefirst para ir escalando progresivamente según las pantallas de los dispositivos, además en mi opinión es muy importante definir primero el estilo y apariencia de tu pagina desde el punto de vista Mobile por lo que podrás elegir el mejor aspecto con la información mas importante para el usuario, además de lograr transiciones mas organizadas y darle mejor ambiente a tu pagina. espero haber podido ayudarte :)
¿Qué son los breakpoint en responsive design? Es el "punto" en el que el contenido y el diseño de un sitio web se adaptarán de cierta manera para brindar la mejor experiencia de usuario posible. Básicamente, los breakpoints son valores de píxeles que un desarrollador / diseñador puede definir en CSS. Cuando un sitio responsive alcanza esos valores de píxeles, se produce una transformación para que el sitio web ofrezca una experiencia de usuario óptima.
¿Qué es responsive design? El responsive design permite que los sitios web "se adapten" a diferentes tamaños de pantalla sin comprometer la usabilidad y la experiencia del usuario. El texto, los elementos de la interfaz de usuario y las imágenes se redimensionan y cambian de tamaño según la ventana gráfica. El responsive design permite a los desarrolladores escribir un solo conjunto de código HTML, CSS y JavaScript para múltiples dispositivos, plataformas y navegadores. What is Responsive Design?
Estas son algunas de las razones por las que el libro “Mobile First” sugiere, al igual que su nombre, que utilice el móvil primero.
Mobile First by Luke Wroblewski
EXCELENTE !!!
jajajaja a ver wix!
Jajaja
Hola comunidad, este es mi portafolio actual, tiene media queries para distintias medidas y para detectar el modo oscuro/claro de tu navegador y lo implementa segun el tema activo. Me gustaría su feedback para ver si en sus pantallas se ve bien Portafolio
Hola, Guillermo, todo muy bien, pero si te puedo recomendar algo es que muestres las tecnologías que manejas, Para un Dev quizás son evidentes, pero las personas que están haciendo reclutamiento muchas veces no tienen tiempo de indagar tanto. al igual en cada proyecto identifica con que tecnologías están hechas. Saludos
Compañero buenísimo tu portafolio, los personajes de tu portafolio con que herramienta los elaboraste?.
Les comparto tres páginas para responsive (gracias al instagram de Leonidas Esteban),
Buen aporte compañero yo sumo este https://solisapp.com/
Gracias por la info!!
GRACIAS POR LAS IMAGENES
Enserio? :0
La forma en que yo practico es hacer mis apuntes de forma gráfica en CSS por cada bloque que vemos.
Que gran idea!!!
No se a ustedes pero a mi me provoco una gran emosion el aprender RD <3
Totalmente! Había aprendido un poco de RD pero ahora lo va a explicar desde Mobile First y eso me emociona demasiado. Haber como nos va :)
a mí igual
Clase 44 - Responsive design: media queries
¿Qué es responsive design?
¿Qué necesitamos conocer para poder trabajar con responsive design?
¿Qué son los Breakpoints?
¿Qué son los Media queries?
@media (min-width: 480px) { ... }
¿Cuáles son las medidas que debemos usar para las pantallas de smartphone, tablets y laptops/desktop?
¿Qué metodología debemos de usar hoy en día con Responsive Design?
¿Qué es Mobile first/only?
¿Por qué debemos de escribir los Media queries partiendo desde el tamaño más pequeño hasta el más grande?
¿De qué formas podemos aplicar los Media Queries en nuestros proyectos?
¿Cuál es la mejor forma de implementar los Media queries en nuestros proyectos y por qué?
<link rel="stylesheet" href="./tablets.css" media="screen and (min-width: 720px)">
Muy buenos resúmenes. Gracias!
Excelente Resumen .. GRACIAS !
Este es un pequeño resumen que hice, si consideran que la información está errada agradecería bastante una crítica constructiva
Para estos casos yo recomiendo adoptar a alguien que sepa menos que uno.
Soy diseñador de WordPress y solía hacerlo de desktop a mobile. Hora de cambiar los hábitos :)
La industria ahora dice que depende del tipo de proyecto. Si vas a hacer un dashboard o una intranet la mayoría de personas se conectan de una laptop o computadora por lo cual tiene que ser desktop-first
Se utilizan para: Aplicar estilos condicionales con las reglas-at @media e @import de CSS. Indicar medios específicos en los elementos <link>, <source> y otros elementos HTML. Testear y monitorizar los estados de los medios usando los métodos de javascript Window.matchMedia() y MediaQueryList.addListener(). Fuente: https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_queries
Responsive disign: meida queries
¿Cómo haces que nuestra aplicación o pagina web se vea bien en distintos dispositivo o plataformas de tamaños diferentes? Responsive disign es la respuesta, pero ¿Qué es?¿Cómo funciona? Para entender responsive disign hay que entender dos conceptos:
@media (min-width: #;) {"código que se aplicará"}
Ojo: la medida que va después de min-width es un break point, o sea la medida del width un dispositivo
Buenas Practicas Desarrollar nuestras aplicaciones web con las metodología de Mobile first. Empezando a diseñar primero para los dispositos mas pequeños y luego ir aumentando el tamaña del dispositivo
Que buen aporte, compañero. Muchas gracias por haberlo compartido 👍
Los media queries son la base de Bootstrap, Bootstrap está construido con media queries y pensando en Mobile First, aquí pueden ver algunas de las queries que usa Bootstrap
En el curso de Desarrollo Web Online se explica muy bien el tema de RD. Muy buen curso.
Dejo el enlace por aqui : https://platzi.com/clases/html5-css3/
Si, en ese curso de Leonidas también aprendes demasiado. Creo que ese y este serían los cursos de los que recomendaría a alguien que va comenzando en el desarrollo web! Saludos:)
Media queries Primero hay que comprender lo que es un breakpoint. Un breakpoint es una dimensión especifica en el viewport justo en el cual se va a generar un cambio.
Hay varias estrategias para implementar media queries, una de ellas y la más utilizada en nuestra era, es Mobile First.
El tema de la Cascada en CSS es importante en las media queries. Siempre empezamos desde el tamaño más pequeño hasta el más grande.
También se pueden aplicar desde el head en el** html**, y de hecho ++es una mejor practica++, debido a temas de optimización. Por ejem, Un usuario que visite tu app web desde el teléfono, no debería descargar todo tu CSS para desktop.
RESPONSIVE DESIGN
MEDIA QUERIES: son elementos llamados puntos de quiebre, ya que cuando se aplique uno, lo que se busca es que cuando se cumpla la condición del media query se ejecute dicha acción.
@media (min-height: 480){ //Aqui se define la condición del break point ... //Aqui se ejecuta la acción } @media (min-height: 768){ ... } @media (min-height: 1024){ ... }
¿Qué es Mobile First/Only?
En una metodología donde empezamos a desarrollar nuestros proyectos desde un tamaño de un móvil, e ir escalando hasta llegar a un tamaño de escritorio, asegurándonos de que el contenido pueda verse de manera adecuada.
¿CÓMO FUNCIONA LAS HOJAS CSS EN EL RESPONSVE DESGIN?
Es importante saber que depende del tamaño que tiene un dispositivo, lo correcto seria que el navegador cargara el documento que tiene los estilos del sitio, según el tamaño, ya sea móvil, tablet, o pc, y eso lo logramos de la siguiente forma.
<link rel="stylesheet" href="css/style.css" media="screen and(min-width: 768px)">
De esta forma le decimos al navegador que documento css.