Chargement…
Comment rendre votre site web Mobile

Comment rendre votre site web Mobile (Responsive)



Aujourd’hui, je vais vous montrer comment rendre votre site web responsive et adapté pour les mobiles en 20 minutes chrono. Ce HTML et CSS Responsive tutoriel est destiné aux débutants, mais il peut être suivi par les développeurs qui veulent s’amuser un peu!

Niveau Tutoriel: Débutant
Compétences requises: connaissances de base en HTML5 et CSS
Temps d’achèvement: Environ 20 minutes

À la fin de ce tutoriel et si vous êtes un bon élève, vous serez célèbre dans le monde du Web!! Je rigole! Je veux dire que vous serez prêt à rendre n’importe quel site web 100% Responsive.

Nous avons utilisé dans ce tutoriel Foundation 3 que vous pouvez télécharger ici : Lien, c’est un Framework facile à installer et bien documenté, mais vous pouvez utiliser un autre Framework de votre choix, comme Twitter Bootstrap ou Lessframework.

Notre objectif est de créer une page similaire à cela :

Rendre votre site web responsive

Comme vous pouvez le voir, le design est très simple, avec un logo, un menu, un contenu et une barre latérale droite. Le but principal de ce tutoriel est de créer une page responsive qui s’adapte automatiquement en fonction de la taille de l’écran d’un appareil Mobil (smartphone, tablette…).

En principe, nous allons créer une page web simple avec : une en-tête, un corps pour le contenu, une barre latérale droite et un pied de page. Mais le tout sera 100 % Responsive.

Page Web Normal

Comprendre la structure de Foundation

Foundation utilise 12 colonnes pour définir la largeur de chaque section (Header, Body, Barre Latérale et Footer). Cette largeur est de 1000 px, alors si on écrit :

Le code ci-dessus signifie que dans cette rangée, nous allons avoir 12 colonnes avec une largeur de 1000 px. Alors que sur le code ci-dessous:

Nous avons placé deux colonnes « six columns » à l’intérieur d’une rangée de douze colonnes « twelve columns », cela signifie que six colonnes occuperont 50 % de la largeur de douze colonnes. Il en va de même pour un autre nombre de colonnes:

Nous avons créé une rangée (row) de 12 colonnes qui aura la largeur maximal (Notre Header), puis juste après on a placé une rangée de 12 colonnes qu’on a divisé en 7 colonnes (Pour le Body) et 5 colonnes (pour la barre latérale). C’est un mix de rangées et de colonnes important pour pouvoir créer notre page web de base.

page-web-normal-2

Le code ci-dessous est pour le petit diable d’Internet Explorer, c’est aussi là qu’on appel les feuilles de styles nécessaires pour rendre notre page web 100% responsive est adaptée aux mobiles :

Ce qui est bien avec Foundation est qu’il facilite l’intégration de tous les éléments nécessaires à notre page web (Menu, Buttons, Formulaires…etc). Pour en savoir plus sur le design que vous pouvez appliquer à votre page web mobile, veuillez consulter la Documentation de Foundation.

Pour styler notre page web mobile, nous avons simplement ajouté une Pattern pour l’arrière plan, vous pouvez choisir celle qui vous convient dans ce site.

Voilà, on a créé une page web mobile en 20 minutes, certes c’est une approche basique, mais c’est une structure idéale pour n’importe quel site internet que vous voulez rendre Responsive. Et comme je suis gentil, je vous donne le code source à télécharger et que vous pourrez modifier comme bon vous semble! Un petit Merci sera le bienvenue ;)



Laisser un commentaire