Haciendo responsivo nuestro proyecto

Clase 23 de 29 • Curso Básico de Tailwind 2 y 3

Resumen

¿Cómo empezar a hacer responsivo nuestro proyecto web?

Para comenzar a hacer nuestro proyecto web responsivo, el primer paso es identificar qué debe cambiar al pasar de una versión móvil a una versión de escritorio. Saca provecho de herramientas como Figma para visualizar y planear estas transformaciones de manera eficiente. En esta etapa, el objetivo es analizar detalladamente los elementos de diseño y funcionalidad que se comportan de manera distinta según el dispositivo.

¿Cuáles son los cambios más relevantes en el layout web?

Navbar en lugar de Tab-bar: Es crucial distinguir entre la tab-bar utilizada generalmente en dispositivos móviles y la navbar más típica de las versiones web. Esto implica no solo un cambio visual, sino también una diferente manera de navegación.
Desaparición de Search bar: La barra de búsqueda puede no ser tan prominente, o incluso desaparecer, dejando espacio para otros elementos como texto adicional.
Flexbox y estructura de elementos: Las recomendaciones y las tarjetas mantendrán su comportamiento, pero la disposición de elementos mediante Flexbox podría requerir ajustes para que el diseño sea responsivo.

Configuración de estilos para breakpoint 'large'

Para manipular estilos en la versión web, es útil encapsular tus cambios de forma organizada. Al trabajar con breakpoints, añade clases específicas para la versión 'large' de tu proyecto, lo cual asegurará que los elementos se comporten adecuadamente en pantallas más grandes.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Web Project</title>
    <style>
        /* CSS simplificado con breakpoints */
        @media (min-width: 1024px) {
            .large-hidden { display: none; }
            .large-visible { display: block; }
        }
    </style>
</head>
<body>
    <div class="navbar large-visible">
        <!-- Contenido de la barra de navegación -->
    </div>
    <input type="search" class="large-hidden" placeholder="Buscar">
    <!-- Más contenido del sitio -->
</body>
</html>

Ajustes específicos en Flexbox y otros elementos

Para las imágenes y texto, asegúrate de usar propiedades como background-size: cover; y background-position: center; que garantizarán que las imágenes se muestren adecuadamente sin importar el tamaño de la pantalla. Considera reemplazar las imágenes con versiones que sean más adecuadas para escritorio si es necesario, como en el caso de una imagen diferente para San Francisco.

.img-container {
    background-image: url('SanFrancisco-desktop.jpg');
    background-size: cover;
    background-position: center;
    height: auto;
}

¿Cómo agregar un texto explicativo y posicionar elementos?

A medida que haces la transición de tu diseño, es importante añadir textos o botones que hayan sido diseñados para la experiencia de usuario en web. Por ejemplo, para incluir un texto como "encuentra más ubicaciones", asegúrate de que esté estilizado adecuadamente y posicionado para ser visible y legible en el entorno web.

Estilización y posicionamiento

El texto debe ser lo suficientemente grande y llamativo, pero también necesitas asegurarte de que no interfiera o se superponga con otros elementos en la pantalla.

<div class="info-text large-visible">
    <p>Encuentra más ubicaciones como esta</p>
</div>

<style>
    .info-text {
        font-size: 4rem; /* Ajuste del texto explicativo */
        margin-left: 16px;
        color: #000;
    }
</style>

Este enfoque sistematiza y facilita las modificaciones, asegurando que cada cambio sea visible y funcional. Obrar con preferencia de mobile-first y luego añadir modificaciones para pantallas más grandes mediante breakpoints resulta ser una de las prácticas más impactantes y organizadas para crear proyectos web responsivos.