Patrón Layout Shifter en Diseño Mobile First

Contenido del curso

Web Developer Fundamentals

HTML

Etiquetas multimedia

Formularios

CSS

Responsive Design

Accesibilidad

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:51

Patrón Layout Shifter en Diseño Mobile First

Curso Definitivo de HTML y CSS

Clase 48 de 56

Clase 48 / 56

Recursos

¿Qué es el patrón Layout Shifter en diseño web Mobile First?

El diseño web Mobile First es una metodología que prioriza la experiencia del usuario en dispositivos móviles. Uno de los patrones que podemos utilizar en este enfoque es el Layout Shifter. Este patrón permite que, al aumentar el tamaño de la pantalla, los bloques o contenedores se reposicionen, ofreciendo así un diseño adaptativo. A continuación, te explicaré cómo construirlo utilizando HTML y CSS.

¿Cómo construir un Layout Shifter con HTML y CSS?

Para implementar un Layout Shifter, es esencial empezar con una estructura básica en HTML, donde los contenedores se organizan de forma jerárquica. Usaremos CSS para aplicar propiedades de flexbox que nos ayudarán a reposicionar elementos conforme el tamaño de pantalla cambia.

Paso a paso para crear el Layout Shifter:

Estructura básica en HTML:
- Usa una etiqueta <main> como contenedor principal.
- Añade contenedores <div> dentro del <main>, algunos de los cuales actuarán como contenedores de contenedores.
- A cada <div>, asígnale una clase que te permitirá manipular sus propiedades con CSS.
```
<main>
   <div class="container c1"></div>
   <div class="container c4">
      <div class="c2"></div>
      <div class="c3"></div>
   </div>
   <div class="container c5"></div>
</main>
```
Estiliza con CSS:
- Define un display: flex para el contenedor principal.
- Usa la propiedad flex-wrap: wrap para permitir que los elementos se reubiquen.
- Configura alturas y anchos automáticos para garantizar la adaptabilidad.
```
.container {
   display: flex;
   width: 100%;
   flex-wrap: wrap;
}

.c1, .c2, .c3, .c4, .c5 {
   height: 150px; /* Ajustar según sea necesario */
   flex: 1;
}
```

¿Cómo implementar Media Queries para cambios de diseño?

Los Media Queries permiten que el diseño cambie cuando se detecta un tamaño de pantalla específico. Configura puntos de quiebre que se adapten al tipo de dispositivos en los que se visualizará tu diseño.

Crear Media Queries:

Primer breakpoint - 600 píxeles:

Cambia el ancho de los contenedores individuales para adaptarse a pantallas de tabletas.

@media (min-width: 600px) {
   .c1 {
      width: 25%;
   }
   .c4 {
      width: 75%;
   }
   .c5 {
      width: 100%;
   }
}

Segundo breakpoint - 800 píxeles:

Limita el crecimiento del contenedor principal y centra la estructura.

@media (min-width: 800px) {
   .container {
      width: 800px;
      margin: 0 auto;
   }
   .c1 {
      width: 50px;
      order: 1;
   }
   .c4 {
      width: 100px;
   }
   .c5 {
      width: 50px;
      order: 2;
   }
}

¿Cómo aprovechar este patrón en proyectos reales?

El patrón Layout Shifter proporciona flexibilidad y un diseño adaptativo impresionante para varios tipos de dispositivos, desde móviles hasta pantallas más grandes. Usando combinado el HTML, el CSS y las Media Queries adecuadas, puedes lograr una transición fluida entre diferentes breakpoints.

Consejos y recomendaciones:

Agrega más contenedores y experimenta con la posición y el contenido según los breakpoints.
Introduce texto, imágenes o videos dentro de tus contenedores para un diseño más realista.
Usa esta técnica para crear layouts únicos que ofrezcan experiencias optimizadas tanto en móviles como en computadoras de escritorio.

Finalmente, prueba lo que has aprendido creando un proyecto personalizado empleando el Layout Shifter, y no dudes en compartir tus resultados. ¡Sigue explorando y aprendiendo para mejorar tus habilidades de diseño responsive!

Facundo Ezequiel Abizanda

Hace 6 años

Reto terminado!! Me llevo 3 días pero he aquí jaja Acepto criticas

MOVILE

TABLET

LAPTOP

INDEX.HTML


<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Desafio layout shifter</title>
        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" href="./tablet.css" media="screen and (min-width: 600px)" />
        <link rel="stylesheet" href="./desktop.css" media="screen and (min-width: 800px)" />
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Yusei+Magic&display=swap" rel="stylesheet">
    </head>
    <body>
        <header class="header">
            <div class="header-container">
                <div class="header-logo">
                    <figure>
                        <img class="header-logo_imagen" src="./pics/logo.png" alt="logo">
                    </figure>
                    <div>
                        <h1 class="header-logo_texto">Costumbres Argentinas</h2>
                    </div>
                </div>
                <nav class="header-nav">
                    <ul class="header-nav_list">
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Productos</a>
                        </li>
                        <li>
                            <a href="#">Contacto</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <main class="main">
            <h1 class="section-one_title">NOSOTROS</h2>
            <section class="section-one">
                <div class="section-one_content">                                 
                    <article class="content1-article article-one">
                        <h2 class="content1-article_title title-one">CLIENTES SATISFECHOS</h3>
                        <h3 class="content1-article_subtitle">LA ÚNICA FORMA DE HACER NEGOCIO</h4>
                        <p class="content1-article_text">
                            El valor de nuestra marca es conocer la tradición y costumbre de nuestra gente. Sabemos que es costumbre argentina buscar la mejor calidad al menor precio. Estudiamos el negocio, analizamos a los consumidores y creamos un producto en función de estas necesidades. Queremos ofrecer el mejor producto, con el mejor servicio en el mejor lugar.¡Sale como pan caliente!Nuestra propuesta abarca productos de panificados, facturería, pastelería seca, pastelería fresca, pizzas, sandwichs y empanadas. El concepto “producto caliente” es un sistema que ofrece durante todo el horario -desde la apertura al cierre de la tienda- medialunas y pan recién horneados
                        </p>
                    </article>
                       <article class="content1-article">
                        <h2 class="content1-article_title">NUESTROS LOCALES</h3>
                        <h3 class="content1-article_subtitle">AUTONOMÍA Y COMODIDAD DEL SELFSERVICE</h4>
                        <p class="content1-article_text">
                            Con un diseño moderno, funcional y práctico, nuestros locales son un paseo para los compradores. Los clientes disponen de la comodidad y autonomías del método self-service: el usuario capta, en pocos segundos, la dinámica y disposición de la compra. ¡Cada uno elige y se lleva lo que quiere!
                        </p>
                    </article>
                </article>
                <article class="content1-article">
                 <h2 class="content1-article_title">LOS FRANQUICIADOS</h3>
                 <h3 class="content1-article_subtitle">CUIDAMOS Y PROTEGEMOS SU INVERSIÓN</h4>
                 <p class="content1-article_text">
                    Realizamos acuerdos comerciales con los principales proveedores para lograr el mejor emplazamiento de nuestros locales. Transmitimos seguridad y confianza a cada uno de nuestros franquiciados, protegemos su inversión; resguardada en materiales sólidos y durables.
                 </p>
             </article>
                </div>
                <div class="section-one_image">
                    <figure>
                        <img class="section1-image_1" src="./pics/imagenPrincipalMovil.png" alt="imagen movil">
                    </figure>
                    <figcaption><a class="link-franquicia" href="#">Franquicia 1</a></figcaption>
                    <figure>
                        <img class="section1-image_2" src="./pics/imagenPrincipalDesktop.png" alt="imagen desktop">
                    </figure>
                    <figcaption><a class="link-franquicia" href="#">Franquicia 2</a></figcaption>
                </div>        
            </section>
            <h1 class="section-two_title">PRODUCTOS</h2>
            <section class="section-two">
                <div class="section-two_products">
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/criollitos.png" alt="criollitos">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">CRIOLLITOS</h2>
                            <h1 class="products-price">$50</h2>
                            <button class="products-button">COMPRAR</button>
                        </div>
                    </div>
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/medialunas.png" alt="medialunas">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">MEDIALUNAS</h2>
                            <h1 class="products-price">$130</h2>
                            <button class="products-button">COMPRAR</button>
                        </div>
                    </div>
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/baguette.png" alt="baguette">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">BAGUETTE</h2>
                            <h1 class="products-price">$200</h2>
                            <button class="products-button  ">COMPRAR</button>
                        </div>
                    </div>
                    <div class="products">
                        <figure class="products-figure">
                            <img src="./pics/pastafrola.png" alt="pastafrola">
                        </figure>
                        <div class="product-content">
                            <h1 class="products-name">PASTAFROLA</h2>
                            <h1 class="products-price">$300</h2>
                            <button class="products-button">COMPRAR</button>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <footer class="footer">
            <h2>THIS THE END</h2>
        </footer>
    </body>
</html>

STYLE.CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Yusei Magic', sans-serif;
}

html {
    font-size: 62.5%;
}


.header {
    background-color: #ffcd00;
    height: 9rem;
    min-width: 380px;
    border: 3px solid #372626;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom: 0px;
}

.header-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
   
}

.header-logo {
    width: 100%;
    min-width: 380px;
    height: 65%;
    display: flex; 
    justify-content: center;
}

.header-logo figure, .header-logo div {
    margin: auto 10px;
}

.header-logo_texto {
    font-size: 2.6rem;
    font-weight: bold;
    min-width: 280px;
}

.header-logo_imagen {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
.header-nav {
    height: 35%;
    display: flex;
    align-items: center;
}

.header-nav_list {
    margin: 0 auto;
    padding-bottom: 5px;
    width: 70%;
    max-width: 300px;
    display: flex;
    justify-content: space-evenly;
    list-style: none;
}

.header-nav_list li a {
    color:#372626;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.6rem;
    border-bottom: 2px solid #372626 ;
}

.header-nav_list li a:hover {
    color: #a82f2f;
}

.section-one_title, .section-one_content {
    color: white;
}

.content1-article_title, .content1-article_subtitle {
    color:  #ffcd00;
}

.main {
    background-color: #372626;
    display: flex;
    flex-direction: column;
    min-width: 380px;
}

.section-one_title {
    text-align: center;
    padding-top: 15px;
    font-size: 2.6rem;
    min-width: 380px;
}

.section-one {
    width: 100%;
    min-width: 380px;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-one_image {
    order: 2;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2%;

}

.section1-image_1 {
    width: 100%;
    max-width: 800px;
    min-width: 260px;
    border: 3px solid #ffcd00;
    border-radius: 15px;
}

.section1-image_2 {
    width: 100%;
    max-width: 800px;
    min-width: 260px;
    border: 3px solid #ffcd00;
    border-radius: 15px;
    visibility: hidden;
    display: none;
}

.link-franquicia {
    color: #ffcd00;
    font-size: 1.6rem;
    text-decoration: none;
    margin-bottom: 10px;
    visibility: hidden;
    display: none;
}

.section-one_image figcaption {
    margin-bottom: 15px;
}

.section-one_content {
    order: 3;
}

.content1-article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    padding: 0 25px;
    min-width: 380px;
}

.article-one {
    margin-top: 0;
}

.content1-article_title, .content1-article_subtitle, .content1-article_text {
    margin: 0 auto;
    margin-top: 8px;
}

.section-two_title {

    font-size: 2.6rem;
    color: white;
    border-top: 2px solid black;
    margin-top: 30px;
    margin-bottom: 30px;
    padding-top: 30px;
    text-align: center;
    min-width: 380px;
}

.section-two {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-two_products {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-bottom: 25px;
}

.products {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: 280px;
    background-color: #611313;
    margin: 5px;
    border: 2px solid #ffcd00;
    border-radius: 30px;
}

.products-figure {
    height: 70%;
}

.products-figure img {
    width: 90%;
    height: 90%;
    max-width: 260px;
    max-height: 200px;
}

.product-content {
    margin-top: 20px;
    border-top: 3px solid black;
    border-radius: 4px;
    height: 20%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.products-name, .products-price, .products-button {
    font-size: 1.8rem;
}

.products-name, .products-price {
    color: white;
    margin-right: 15px;

}

.products-button {
    background-color: #ffcd00;
    border-radius: 5px;
    border: 2px solid black;
}

.footer {
    width: 100%;
    min-width: 380px;
    height: 40px;
    background-color: #ffcd00;
    border: 3px solid #372626;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top: 0px;
    text-align: center;
    padding-top: 5px;
}

TABLET.CSS

.header {
    height: 7rem;
}

.header-container {
    flex-direction: row;
}

.header-logo {
    justify-content: flex-start;
    height: auto;
    width: 50%;
}

.header-nav {
    height: auto;
    width: 50%;
    justify-content: flex-end;
}

.header-nav_list {
    justify-content: flex-end;
    margin: 0;
}

.header-nav_list li {
    margin-right: 15px;
}

.section-one_title {
    border-bottom: 2px solid black;
    padding: 15px;
}

.section-one {
    flex-direction: row-reverse;
    align-items: flex-start;
    justify-content: space-evenly;
} 

.section-one_image {
    width: 40%;
    justify-content: flex-end;
    height: 100%;
}

.section1-image_1 {
    min-width: 0px;
}

.section1-image_2 {
    min-width: 0px;
    visibility: visible;
    display: inline;
}

.link-franquicia {
    visibility: visible;
    display: inline;
}

.section-one_content {
    width: 50%;
}

.article-one {
    margin-top: 0;
}

.title-one {
    margin-top: 2%;
}

.content1-article {
    min-width: 0px;
}

DESKTOP.CSS

.main {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.section-one {
    order: 3;
    width: 57%;
}

.section-one_title {
    order: 1;
    width: 57%;
    border-bottom: 0;
    padding-bottom: 30px;
    border-bottom: 0;
    margin: 0;
}   

.section-two {
    order: 4;
    border: 0;
    width: 43%;
    padding: 10px;
    border-left: 2px solid #ffcd00;
}

.section-two_title {
    order: 2;
    margin: 0 auto;
    width: 43%;
    min-width: 0;
    border: 0;
    padding: 15px;
    padding-bottom: 30px;
    margin: 0;
    border-left: 2px solid #ffcd00;
}

.products {
    width:90%;
    max-width: 250px;   
}

PICS LOGO

FRANQUICIAS

PRODUCTS

Ariel Jacob

Hace 5 años

Muy bueno

Juan Felipe Torralba

Hace 5 años

Quedo genial!

Comentarios (525)525 comentarios

Jhean Pacheco

Efraín Hernández García

Ivan E. Batista-Ochoa

Jennifer Fernández

Joel Dominguez Merino

Tonatiuh Jiménez Sánchez

Daniela Díaz Graziani

Sergio Brandon De Lucio Chavero

Juan Christopher

Ixchel Garcia

Victor Andres Castillo Zambrano

Mauricio Galvez

Sebastián Olaya Escobar

Sofia Viesca

Hace 4 años

Julián Ramírez

Gerardo Lopez Hernandez

Jordi Dimas

Stiven Castillo Montero

Yair Lira

Lorena Espinoza Cuevas

John Cardenas

Jorge Cruz Perez

Juan David Valencia

Carolina Salazar Rios

Joaquín Escalona Mella

Adrian Bautista Orozco

Cristian Ignacio Zuñiga Medina

Carlos Rodela

Cristian Eduardo González Alba

RUBEN ALEJANDRO GARCIA FORONDA

jesus gomez

Alex Yovera

Luis Felipe Medina Rodriguez

Platzi Team

Web Developer Fundamentals

Este curso tiene una versión actualizada.

HTML y CSS: Fundamentos para Desarrolladores Web

Fundamentos del Desarrollo Frontend: Tecnologías y Prácticas Esenciales

Fundamentos del Desarrollo Backend

Comprende el Rol y las Habilidades de un Desarrollador Full Stack

Diferencias entre Páginas Web Estáticas y Dinámicas

HTML

Anatomía de una Página Web: Estructura y Elementos HTML

Creación y Estructura de un Archivo index.html Básico

Etiquetas HTML: Contenedoras y de Contenido

Listas anidadas y enlaces en HTML para recetas

Anatomía de Etiquetas HTML: Apertura, Cierre y Atributos

Etiquetas multimedia

Formatos de Imágenes y su Uso en Desarrollo Web

Optimización de Imágenes para Web

Uso de etiquetas IMG y FIGURE en HTML

Uso de las etiquetas HTML figure y figcaption para imágenes

Uso de la etiqueta de vídeo en HTML y sus atributos clave

Formularios

Creación de Formularios Web Efectivos con HTML

Creación de Formularios HTML con Campos de Fecha y Hora

Autocompletado y Requerimiento en Formularios HTML

Creación de Menús Desplegables con Select y Data List en HTML

Diferencias entre botones submit e input en formularios HTML

CSS

Introducción a CSS: Estilos y Aplicaciones Básicas

Implementación Básica de CSS en HTML

Pseudo Clases y Pseudo Elementos en CSS

Anatomía de una Regla CSS: Selectores y Declaraciones

Modelo de Caja en CSS: Margen, Relleno y Bordes

Herencia en CSS: Cómo Funciona y Afecta a los Estilos

Especificidad y Orden de Declaración en CSS

Especificidad y Orden en CSS: Crear y Aplicar Estilos Correctamente

Buenas prácticas en CSS: Especificidad y uso adecuado de selectores

Combinadores CSS: Hermanos Adyacentes y Especificidad

Selectores de Hermano General en CSS: Uso y Ejemplos Prácticos

Combinadores CSS: Hijos y Descendientes

Medidas Absolutas y Relativas en CSS: Píxeles y Porcentajes

Comprensión del uso de em en CSS: medidas relativas de fuente

Uso de REM en CSS para Fuentes y Dimensiones

"Uso de Viewport y Dimensiones en CSS: min-width, max-width, min-height"

Posicionamiento en CSS: Static, Absolute y Relative

CSS: Display Block, Inline e Inline-Block

Posicionamiento de Layout Básico en CSS

Posicionamiento y Estilos con Display Flex en CSS

Posicionamiento Vertical con Flexbox en CSS

Uso de Variables Custom en CSS para Optimizar Estilos

Fuentes y Web Fonts en CSS: Cómo Seleccionarlas y Aplicarlas

Responsive Design

Responsive Design: Estrategias Mobile First

Patrones de Diseño Responsive: Mobile First a Desktop

Media Queries para Diseño Responsive Mobile y Tablet

Patrón Layout Shifter en Diseño Mobile First

Patrón de Diseño Responsive: Column Drop en CSS

Diseño Responsive: Estrategias y Ejemplos Prácticos

Imágenes Responsive: Uso de la Etiqueta Picture y Buenas Prácticas

Accesibilidad

Accesibilidad Web: HTML Semántico para Proyectos Inclusivos

Uso de medidas relativas para accesibilidad en texto web

Atributos HTML para Mejorar la Accesibilidad Web

Próximos pasos

Próximos Pasos en Desarrollo Web: Mobile First y Más

Recursos Visuales para Desarrolladores Web

Patrón Layout Shifter en Diseño Mobile First