J’ai dans un article précedent parler de responsive design afin d’adapter un site en fonction des devices des visiteurs. Nous allons voir comment faire des tuiles responsive.
Nous allons repartir de l’exemple d’un article précédent montrant comment tronquer du texte en CSS. L’exemple montrait des tuiles carrées. Nous allons adpater le design pour avoir des tuiles rectangulaire si la largeur est inférieure à 480px.

Une tuile est définie par un titre, une description et une image.
Le code html d’une tuile est le suivant :

<li>
<a class="tile" title="Partager avec un Ami" href="#">
<h1>Partager avec un Ami</h1>
<img src="share.png" alt="">
<p>Partager sur Twitter, Facebook, ...</p>
</a>
</li>

Voici le code CSS qui permet d’afficher les tuiles sous formes d’un carré.

div#home[role="main"] ul#tiles-panel li {
	display: inline-block;
	list-style: none outside none;
	margin: 0 8px 8px 0;
	vertical-align: top;
}

.tile {
	-moz-box-sizing: border-box;
	background: none repeat scroll 0 0 #F0F1F4;
	border-bottom: 3px solid #7B4F9D;
	display: inline-block;
	height: 176px;
	text-decoration: none;
	vertical-align: top;
	width: 176px;
}

.tile h1 {
	color: #253340;
	display: block;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 10px;
	text-decoration: none;
	white-space: nowrap;
	text-overflow : ellipsis;
	overflow : hidden;
	text-align : center;
}

.tile img {
	left: 50%;
	margin: 5px 0 10px -25px;
	position: relative;
}

.tile p {
	color: #6A747E;
	font-family: "Segoe UI",Segoe,"Trebuchet MS",Tahoma,Geneva,sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 148%;
	margin: 0;
	padding: 0 10px;
	text-align: center;
}

Voici la démo de cet écran sans adaptation.

On peut voir qu’avec un petit écran, cet affichage n’est pas du tout adapté. Nous allons le modifier afin d’optimiser l’affichage sur les petites résolutions. Pour cela, nous allons :

• afficher les tuiles sous formes rectangulaires les unes à la suite des autres
• réduire l’image et la placer à la gauche de la tuile

Voici le code qui permet d’adapter le résultat pour une utilisation pour petits écrans avec l’utilisation d’une média queries ciblant les écrans ayant une largeur maximum de 480px :

@media only screen and (max-width: 480px) {
    h1 {
	font-size : 24px;    
    }
	
    div[role=main]#home   ul#tiles-panel  li {
	display: block; /*passage en block pour affichage les uns en dessous des autres */
	position : relative;        
    }
	
    /*Tiles*/
    ul {
        padding : 0;   
    }
    
    .tile {
        width : 100%;
        height : 55px;    
        display : block;
        border-bottom : 0px;
        border-left: 3px solid #7B4F9D;
    }
	
    .tile  h1 {
        padding : 0;    
    }

    .tile  h1, .tile p {
        margin-left : 50px;    
    }
	
    .tile img {
        position: absolute;
        top : 5px;
        left : 5px;
        width : 45px;
        height : 45px;
        margin : 0 1px; 
    }
}

Et voici le résultat avant/après (utilisation de la vue adaptative de Firefox pour tester) :

La page de démo

Dans cet exemple, j’utilise les mêmes images pour les 2 versions alors qu’il serait mieux d’avoir des images adaptées en fonction de la résolution, ce qu’on appelle responsive images. Il faut savoir qu’il sera bientôt possible de définir plusieurs sources d’image afin de gérer ce cas (via l’attribut srcset de la balise image ou via l’élément picture) et qu’il existe déjà des polyfills comme srcset-polyfill. Pour en savoir plus, je vous conseille responsiveimages.org.