Rendre son site "mobile-friendly" avec bootstrap

Active 13 mars 2018    /    Viewed 5937    /    Comments 0    /    Edit


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:

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

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:

Rendre son site "mobile-friendly" (avec et sans viewport)

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).

Rendre son site "mobile-friendly" (changer la taille du texte en fonction de la largeur de l'écran)

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:

Rendre son site "mobile-friendly" (changer la taille du texte en fonction de la largeur de l'écran)

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

...

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

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


Card image cap
profile-image
Daidalos

Hi, I am Ben.

I have developed this web site from scratch with Django to share with everyone my notes. If you have any ideas or suggestions to improve the site, let me know ! (you can contact me using the form in the welcome page). Thanks!