Rendre son site "mobile-friendly" avec bootstrap

Simple guide rapide sur quelques points clés pour rendre son site "mobile-friendly" avec bootstrap. La première étape consiste a tester si son site est "mobile-friendly". Pour cela il existe plusieurs approches. Pour tester un site déjà en ligne on peut par exemple utiliser l'outil de google (noter qu'il existe aussi d'autres tests). En utilisant l'outil de google et en lui fournissant l'adresse url que l'on souhaite tester on obtient généralement les trois erreurs suivantes:

Text too small to read
Viewport not set
Clickable elements too close together

L'erreur la plus importante ici et qui est aussi la plus simple à résoudre est "Viewport not set". Pour cela il suffit d'ajouter la ligne de code suivante dans l'entête de votre page html:

<meta name="viewport" content="width=device-width, initial-scale=1">

Noter que pour tester si une page web est "mobile-friendly" durant le développement (c'est-à-dire en local), on peut utiliser le navigateur chrome. En effet, si vous allez dans le menu "View -> Developer -> Developer Tools" (voir figures ci dessous),

Rendre son site "mobile-friendly" (tester localement avec chrome)

vous pouvez alors tester votre page pour différents types de mobiles:

On peut alors tester avec et sans la ligne de code

<meta name="viewport" content="width=device-width, initial-scale=1">

dans une page simple page html:

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Mobile Friendly Test Page</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum."

</body>
</html>

Ce qui donne les deux figures ci-dessous:

Le viewport d'une page web est tout simplement la partie visible par un visiteur, et celle-ci peut varier si on visite la page depuis un écran d'ordinateur ou d'un mobile (on peut aussi dire que la taille des pixels est différentes sur l'écran d'un ordinateur ou d'un mobile). Configurer le viewport permet ainsi de zoomer automatiquement sur la page à partir d'un mobile (le texte parait plus grand). Ajouter cette simple ligne est parfois alors suffisante pour rendre une page web "mobile-friendly".

On peut ensuite utiliser bootstrap pour améliorer ou adapter l'apparence d'une page web en fonction de la taille de l'écran. Pour cela, il existe déjà de nombreux tutoriels en ligne, ici on va rapidement voir quelques points clés comme:
- comment rendre visible ou cacher certains éléments en fonction de la taille de l'écran ?
- comment définir le "break point" (dimension de rupture) de la barre de navigation ?
- comment imposer des boutons à 100% de la largeur pour de petits écrans ?
- comment transformer un menu de liens en menu déroulant pour de petits écrans ?
- etc

Changer le style en fonction de la largeur de l'écran

Tout d'abord on peut facilement changer le style css de la page en fonction de la taille de l'écran, pour rappel on peut définir les tailles suivantes:

Ecran	Taille
Extra small devices (portrait phones, less than 576px)	max-width: 575.98px
Small devices (landscape phones, less than 768px)	max-width: 767.98px
Medium devices (tablets, less than 992px)	max-width: 991.98px
Large devices (desktops, less than 1200px)	max-width: 1199.98px

Par exemple si on veux agrandir la taille du texte si la page est visitée à partir d'un mobile, il suffit d'ajouter la ligne suivante dans l'entête de la page html:

<style>

@media (max-width: 767.98px) {
    body{font-size: 20px;}
}

</style>

dans cet exemple pour un écran de largeur inférieur à 767.98px la taille du texte est de 20px (on peut tester cela on faisant varier la largeur de la fenêtre chrome avec la souris, voir figures ci dessous).

Mettre les colonnes à 100% de la largeur

Quand la largeur de l'écran diminue, il est préférable de mettre les colonnes à 100% de la largeur comme ceci:

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

illustration:

code source:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Mobile Friendly Test Page</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>

body {
padding-top: 40px;
}

@media (max-width: 767.98px) {
body{font-size: 12px;}
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

</style>

</head>
<body>

<div class="container">

<div class="row">

<div class="col-md-8">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">Text 1</h4>
            </div>
            <div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum."
            </div>
        </div>

</div>

<div class="col-md-4">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">Text 2</h4>
            </div>
            <div class="panel-body">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum."

            <div class="row">
            <form action="/" method="post">
                <br>
                <div class="col-xs-6">
                    <label for="e1">First name</label>
                    <input type="text" class="form-control" id="e1" name="first_name">
                </div>
                <div class="col-xs-6">
                    <label for="e1">Last name</label>
                    <input type="text" class="form-control" id="e1" name="first_name">
                </div>      
            </form>
            </div>

            </div>
        </div>

</div>

</div>
</div>

</body>
</html>

Rendre visible ou cacher certains éléments en fonction de la taille de l'écran

...

Références

Liens	Site
Is your web page mobile-friendly?	google
5 Tools To Test If Your Website Is Really Mobile Friendly	searchenginepeople.com
How to make your website mobile friendly?	link-assistant.com
Getting Started	google.com
mobile-friendly?	google
How to Simulate Mobile Devices with Device Mode in Chrome	sitepoint
Responsive Web Design - The Viewport	w3schools
Responsive Web Design Basics	developers.google.com
Why is mobile friendly website so important to Google?	link-assistant.com
w3schools	w3schools
w3schools	w3schools
Responsive Web Design Tips from Bootstrap’s CSS	sitepoint
bootstrap grid	bootstrap
Hide menu items in small screen AND drop down menu Bootstrap 3	stackoverflow
Bootstrap: How to collapse navbar earlier	stackoverflow
Bootstrap right Column on top on mobile view	stackoverflow
Bootstrap 3 only for mobile	stackoverflow
Bootstrap 3 Apply CSS on Mobile View Only	stackoverflow
bootstrap-table hide column in mobile view	stackoverflow

Salut, je suis Ben, le fondateur de moonbooks.org. Je travaille en tant que chercheur spécialisé dans la télédétection par satellite de la Terre, en me concentrant particulièrement sur la détection des incendies à l'aide des capteurs VIIRS et ABI. Mes domaines d'expertise incluent Python, l'apprentissage automatique et la science ouverte. N'hésitez pas à me contacter si vous remarquez des erreurs sur le site. Je m'efforce constamment de l'améliorer. Merci !

Rendre son site "mobile-friendly" avec bootstrap

Changer le style en fonction de la largeur de l'écran

Mettre les colonnes à 100% de la largeur

Rendre visible ou cacher certains éléments en fonction de la taille de l'écran

Personnaliser le "break point" (point de rupture) de la barre de navigation

Transformer un menu de liens en menu déroulant pour de petits écrans

Références

Benjamin

Skills