Mobile First

El concepto, como nos pone Google, es una mejora de forma progresiva, que indica priorizar el diseño del desarrollo WEB para dispositivos móviles, por sobre el diseño y desarrollo de dispositivos de escritorios.

¿Esto quiere decir que demos importancia solo a móviles? No, pero si quiere decir que el diseño y desarrollo progresivo inicie desde Móviles a Tablets y llegando a Escritorio. Ya que “MOBILE-FIRST” tiene como fundamento mejorar la experiencia del usuario en distintas resoluciones de pantalla de forma óptima.


¿Por qué debes optar por Mobile First?

Los móviles (smartphone) es lo más cercano que tienen tus clientes o lectores para acceder a tus landing page, sitio web, app web, etc.

El tráfico de datos móviles no deja de ir en aumento:

2020 → 35EB

2021 → 49EB

*1 exabyte = 1 millón de terabytes = 1000 millones de gigabytes

Fuente


¿Cómo implementar Mobile First en Desarrollo web?

Desarrollemos nuestro componente Card con Mobile First

A continuación crearemos el css enfocado a Mobile First con la resoluciones desde mobile a desktop.

¡Ten en cuenta que esto incluye a la sección padre de nuestras cards!

Iniciamos con el diseño mobile de nuestra sección y cards, donde por medio de grid aremos de una forma rápida y simple el responsive de nuestras cards:

/* [SECTIONS] */
.fx-section {
    background-color     : #ececec;
    padding-block        : 20px;
    padding-inline       : 10px;
    margin               : 0;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap             : 20px;
    grid-template-rows   : repeat(auto-fit, minmax(200px, 1fr));
}

/* [CARD] */
.fx-card {
    background-color: #fff;
    border          : 1px solid #e0e0e0;
    border-radius   : 10px;
    padding         : 20px;
    margin          : 0;
    font-size       : 14px;
    font-family     : 'Roboto', sans-serif;
}

.fx-card__title {
    font-size  : 14px;
    line-height: 1.5;
    font-weight: 700;
    margin     : 0 0 .5rem 0;
}

.fx-card__content-image {
    display      : block;
    width        : 100%;
    height       : auto;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.fx-card__content-image img {
    width          : 100%;
    height         : 15em;
    object-fit     : cover;
    object-position: center;
    border-radius  : 10px;
}

Ahora nos enfocaremos en la siguiente resolución Tablet, donde aplicaremos las reglas de responsive correspondiente a nuestra sección y cards

/* [SECTION AND CARD MF @media tablet] */
@media (min-width: 768px) {
    .fx-section {
        padding-block: 40px;
    }

    .fx-card {
        font-size: 16px;
    }

    .fx-card__title {
        font-size: 16px;
    }
}

Posteriormente el desarrollo de la resolución de escritorio

/* [SECTION AND CARD MF @media desktop] */
@media (min-width: 1200px) {
    .fx-section {
        padding-block: 60px;
    }

    .fx-card {
        font-size: 18px;
    }

    .fx-card__title {
        font-size: 18px;
    }
}

Preview CODEPEN

<section class="fx-section">
    <div class="fx-card">
        <div class="fx-card__title">Lorem ipsum dolor sit amet</div>
        <div class="fx-card__content">
            <div class="fx-card__content-image">
                <img src="https://picsum.photos/200/300" alt="image">
            </div>
            <div class="fx-card__content-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam
                    tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl. Sed euismod, nunc ut
                    aliquam tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl.</p>
            </div>
        </div>
    </div>
    <div class="fx-card">
        <div class="fx-card__title">Lorem ipsum dolor sit amet</div>
        <div class="fx-card__content">
            <div class="fx-card__content-image">
                <img src="https://picsum.photos/200/300" alt="image">
            </div>
            <div class="fx-card__content-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam
                    tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl. Sed euismod, nunc ut
                    aliquam tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl.</p>
            </div>
        </div>
    </div>
    <div class="fx-card">
        <div class="fx-card__title">Lorem ipsum dolor sit amet</div>
        <div class="fx-card__content">
            <div class="fx-card__content-image">
                <img src="https://picsum.photos/200/300" alt="image">
            </div>
            <div class="fx-card__content-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam
                    tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl. Sed euismod, nunc ut
                    aliquam tincidunt, nunc nisl aliquam mauris, eget aliquam nisl nisl sit amet nisl.</p>
            </div>
        </div>
    </div>
</section>
/* [SECTIONS] */
.fx-section {
    background-color     : #ececec;
    padding-block        : 20px;
    padding-inline       : 10px;
    margin               : 0;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap             : 20px;
    grid-template-rows   : repeat(auto-fit, minmax(200px, 1fr));
}

/* [CARD] */
.fx-card {
    background-color: #fff;
    border          : 1px solid #e0e0e0;
    border-radius   : 10px;
    padding         : 20px;
    margin          : 0;
    font-size       : 14px;
    font-family     : 'Roboto', sans-serif;
}

.fx-card__title {
    font-size  : 14px;
    line-height: 1.5;
    font-weight: 700;
    margin     : 0 0 1.5rem 0;
}

.fx-card__content-image {
    display      : block;
    width        : 100%;
    height       : auto;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.fx-card__content-image img {
    width          : 100%;
    height         : 15em;
    object-fit     : cover;
    object-position: center;
    border-radius  : 10px;
}

/* [SECTION AND CARD MF @media tablet] */
@media (min-width: 768px) {
    .fx-section {
        padding-block: 40px;
    }

    .fx-card {
        font-size: 16px;
    }

    .fx-card__title {
        font-size: 16px;
    }
}

/* [SECTION AND CARD MF @media desktop] */
@media (min-width: 1200px) {
    .fx-section {
        padding-block: 60px;
    }

    .fx-card {
        font-size: 18px;
    }

    .fx-card__title {
        font-size: 18px;
    }
}

Puedes revisar el demo de este ejemplo en: https://codepen.io/darioesp/pen/MWBmojo

Podemos concluir:

  1. Debes preocuparte de que tus desarrollos o landing apliquen esta metodología.
  2. El enfoque es que tus clientes disfruten de una experiencia mejorada y responsiva.
  3. Mobile First mejora tu preocupación por reducir el consumo de datos y proveer una mejor experiencia de carga y contenido.


Cerremos con un extra:

A continuación te dejo un par de cosas curiosas:

  1. Una calculadora de datos móviles para uso que nos provee Entel para estimar el consumo de datos.
    https://www.entel.cl/consumo-datos/
  1. Estadísticas de Think With Google relacionadas a estrategias de marketing de app y mobiles en mobile-first-shopping-statistics.
    https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-first-shopping-statistics/


Buena SUERTE, integrando MOBILE FIRST a tus desarrollos desde su etapa cero.

Escrito con ❤️
Dario Espinoza
PM FIX.U

Fuentes:
https://www.elmostrador.cl/agenda-pais/2022/06/30/trafico-de-datos-moviles-aumenta-un-33-durante-2022/
https://www.ionos.es/digitalguide/paginas-web/diseno-web/mobile-first-la-nueva-tendencia-del-diseno-web/
https://developer.mozilla.org/es/docs/Glossary/Mobile_First

Si tienes un proyecto en mente o quieres probarnos como Partner de Desarrollo, contáctanos y sin compromiso te entregaremos un diágnostico gratuito.