Envie de proposer une version mobile de votre site Joomla! ?
Ne cherchez plus voici un tutoriel qui vous guidera pas à pas dans l'élaboration d'un design compatible avec la plupart des périphériques mobiles (iPhone, iPad, tablettes, Android, etc ...). Avec un exemple concret partant d'un template fourni dans le package, vous allez voir comment créer votre propre template Joomla! Responsive Design !
Après une brève présentation des techniques possibles, vous allez plonger dans le code d'un template Joomla! et y ajouter vos propres styles pour adapter le design aux différents périphériques. Chaque étape vous est expliquée, et le code CSS vous est fourni pour comprendre comment ça marche et vous allez voir quels sont les soucis qu'on peut rencontrer et comment y remédier.
Le package comprend :
- Un tutoriel PDF d'environ 50 pages avec exemples et illustrations
- Un template Joomla! 2.5 Responsive Design : celui utilisé pour le tuto et qui contient déjà tous les codes décrits dans le tutoriel
- Un gabarit Template Creator pour pouvoir modifier le template dans le composant Template Creator CK que j'ai utilisé pour créer le template
Et bien sur le tout est gratuit !
Télécharger le Tutoriel adapter son template Joomla! pour mobiles
Télécharger le tutoriel vidéo sur Tuto.com
Sommaire du tutoriel :
I.Introduction 6
II.Du blabla pour la théorie 7
1.Les techniques 8
1.1)User agent - PHP 8
1.2)Javascript 8
1.3)Mediaqueries 8
2.Les périphériques 9
3.Comment ça marche ? 10
3.1)Fixer le redimensionnement de l'affichage sur les smartphones 10
3.2)Ajouter des conditions de taille d'écran 10
III.Cas pratique - tutoriel 11
1.Création de la base du template 12
2.Définir le design en fonction des résolutions 15
2.1)Design avec largeur de 758px 17
2.2)Design avec largeur de 524px 17
2.3)Design avec largeur de 292px 18
3.Modification du fichier index.php 19
4.Création de la feuille de styles CSS 20
4.1)Tablette en mode portrait : 758px 20
4.2)Mobile en mode paysage : 524px 24
4.3)Mobile en mode portrait : 292px 30
5.Bonus – Réglage de sous-menus dans Maximenu CK 39
6.Bonus 2 – Détection User-agent pour le Slideshow 46
7.Extensions utilisées 48
7.1)Template Creator CK 48
7.2)Maximenu CK 48
7.3)Slideshow CK 48
8.Ressources 49
News