Ejemplo First Mobile - Jaque Asesores

Mucho se oye hablar últimamente acerca de la importancia que tiene para SEO la versión móvil de un sitio web, y no es para menos, desde Marzo de 2018 Google va a dar prioridad a la experiencia de usuario en móvil frente a la experiencia en escritorio.

Buscando referencias para este artículo, he encontrado mucha literatura al respecto de la importancia del first mobile para el posicionamiento de nuestra web. Sin embargo, echo en falta documentación acerca de como implementar esta metodología en una web. Es por ello que me he decidido a hacer algunos ejemplos de maquetas utilizando dicha filosofía.

CÓDIGO HTML

<div class="example jq-bcontainer">
<div class="row">
<div class="col">
<span> A </span>
<h3> ELEMENT A </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum ipsum lectus, auctor maximus erat aliquam eu. Suspendisse potenti.</p>
</div>
<div class="col">
<span>B</span>
<h3> ELEMENT B </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum ipsum lectus, auctor maximus erat aliquam eu. Suspendisse potenti.</p>
</div>
<div class="col">
<span> C </span>
<h3> ELEMENT C </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum ipsum lectus, auctor maximus erat aliquam eu. Suspendisse potenti.</p>
</div>
<div class="col">
<span> D </span>
<h3> ELEMENT D </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis bibendum ipsum lectus, auctor maximus erat aliquam eu. Suspendisse potenti.</p>
</div>
</div>
</div>

RESPONSIVE DESIGN

/* Columna en versión de escritorio */
#example1 .col {
width:25%;
float:left;
margin:0;
}

/* Columna en versión de tablet */
@media (max-width: 991px) {
#example1 .col {
width:50%;
}
}

/* Columna en versión móvil */
@media (max-width: 767px) {
#example1 .col {
width: auto;
float:none;
margin:16px;
}
}

FIRST MOBILE

/* Versión móvil */
#example2 .col {
margin:16px;;
}

/* Versión tablet */
@media (min-width: 768px) {
#example2 .col {
width:50%;
margin:0;
float:left;
}
}

/*Versión escritorio */
@media (min-width: 992px) { {
#example2 .col {
width: 25%;
}
}

PREVISUALIZACIÓN (EL RESULTADO ES EL MISMO)

Movil

Tablet

Escritorio