Que vous ayez un petit budget pour votre template ou pas, le choix de votre Template est primordial, il reflète votre image et vous permet d'ajouter de nombreuses fonctionnalités pour votre site internet.

Le marché du template sur Joomla! est énorme c'est pour cela qu'il est préférable, avant de choisir votre template, de faire une liste précise des fonctionnalités que devra remplir le template et qui correspondra a vos exigences. Après cela vous serez à même de choisir le template qui correspondra le plus à vos besoin, à votre budget et à votre projet.

Table des matières

Comment choisir son Template Joomla,  gratuit ou payant ? 

La disposition de base 

La première chose à faire est de déterminer le type de contenu que vous allez afficher sur votre site.Cette étape vous permettra de choisir le type de disposition que vous voudrez adopter pour présenter le contenu a vos visiteurs.

En effet si votre site contient de nombreux articles et peu de médias il sera plus judicieux de choisir un template de type blog ou « magazine » afin de pouvoir centrer le lecteur sur le contenu du site et pas avoir de problème de mise en page car on ne peut pas remplir toutes les positions.

Exemple : https://yootheme.com/joomla-templates/paladin

Si votre site au contraire contient une majorité de médias (photos,vidéos,...) il vous faudra choisir un template type media qui contient une large place dédiée aux visuels.

Exemple : https://www.joomlart.com/demo/ja-space

Et si vous avez un site e-commerce il vous faudra choisir un template avec une mise en page particulière qui permet de mettre la boutique et les produits en avant.

Exemple : http://www.shape5.com/demo/index.php?no1_shopping

Avant de valider votre choix de template vous devez donc définir la disposition générale de la mise en page qui doit accueillir votre projet et son contenu. Du choix des images affichées en page d'accueil jusqu'à a typographie de votre contenu, chaque élément doit être pris en compte dans votre analyse.

Template responsive ? Qu'est-ce que c'est ?

Un template responsive (ou adaptatif) est un modèle de conception de site web qui s'adapte automatiquement à la taille de l'écran de l'appareil utilisé pour le visualiser. Cela signifie que le site web aura une apparence et une convivialité optimales, que vous le consultiez sur un ordinateur de bureau, un ordinateur portable, une tablette ou un smartphone.

Les templates responsives utilisent généralement des grilles fluides et des images flexibles, ainsi que des requêtes média CSS pour déterminer la taille de l'écran et ajuster la mise en page en conséquence.

L'utilisation d'un template responsive est importante car de plus en plus de personnes utilisent des appareils mobiles pour accéder à Internet. Si votre site web n'est pas adapté aux appareils mobiles, les visiteurs peuvent avoir du mal à naviguer et à lire le contenu, ce qui peut les inciter à quitter votre site. De plus, Google privilégie les sites web adaptés aux mobiles dans ses résultats de recherche.

Caractéristiques d'un Template Responsive

• Grilles Flexibles : Utilisation de grilles proportionnelles plutôt que des pixels fixes. Par exemple, au lieu de définir la largeur d'une colonne en pixels, on utilise des pourcentages.
• Images Flexibles : Les images redimensionnent automatiquement pour s'adapter à la taille de l'écran. Les techniques comme CSS max-width: 100%; permettent aux images de ne jamais dépasser la largeur de leur conteneur.
• Media Queries : Utilisation des media queries en CSS pour appliquer différents styles en fonction des caractéristiques de l'appareil (taille de l'écran, résolution, etc.). Par exemple :

@media (max-width: 600px)
{
 .container {
   font-weight: bold;
   flex-direction: column;
  }
}

• Fluidité du Layout : Les éléments de mise en page doivent pouvoir se repositionner de manière fluide. Par exemple, une barre latérale pourrait passer en dessous du contenu principal sur un écran plus petit.
• Optimisation pour le Touch : Pour les appareils tactiles, les boutons et les liens doivent être suffisamment grands et espacés pour être facilement cliquables.

Avantages d'un Template Responsive

• Amélioration de l'Expérience Utilisateur : Si vous avez lu notre article sur la loi de Jakob, vous savez à quel point l'amélioration de l'expérience utilisateur est importante. Un site responsive offre une expérience de navigation cohérente et agréable quel que soit l'appareil utilisé.
• SEO (Search Engine Optimization) : Google et d'autres moteurs de recherche favorisent les sites responsive, car ils offrent une meilleure expérience utilisateur.
• Maintenance Simplifiée : Un seul site à maintenir plutôt que de créer et gérer des versions séparées pour mobile et desktop.
• Accessibilité : Permet d'atteindre un public plus large, y compris les utilisateurs sur des appareils mobiles.

Exemples d'outils et de Frameworks pour des Templates Responsive

Pour créer des sites web responsive, plusieurs outils et frameworks sont largement utilisés par les développeurs. Voici une description détaillée des plus populaires :

Bootstrap

Bootstrap est l'un des frameworks CSS les plus populaires pour le développement de sites web responsive. Il a été développé par Twitter et offre une collection complète d'outils CSS, JavaScript et HTML.

• Grille Responsive : Bootstrap utilise un système de grille de 12 colonnes qui permet de créer des mises en page fluides et adaptatives. Par exemple :

<div class="container">
<div class="row">
<div class="col-md-8">Contenu principal</div>
<div class="col-md-4">Barre latérale</div>
    </div>
</div>

• Composants UI : Il propose de nombreux composants prêts à l'emploi comme les boutons, les modals, les carrousels, les formulaires, etc.
• Media Queries : Utilisation de breakpoints prédéfinis (par exemple, xs, sm, md, lg, xl) pour appliquer différents styles en fonction de la taille de l'écran.
• Personnalisation : Les développeurs peuvent personnaliser Bootstrap via des variables Sass pour ajuster les couleurs, les espacements, les tailles des composants, etc.

Foundation

Foundation est un autre framework CSS robuste et flexible pour la création de sites web responsive, développé par Zurb.

• Grille Flexible : Foundation utilise un système de grille similaire à Bootstrap, mais avec plus de flexibilité dans la configuration des colonnes.

<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-6 medium-4">Contenu principal</div>
<div class="cell small-6 medium-8">Barre latérale</div>
    </div>
</div>

• Composants UI : Il offre une large gamme de composants tels que des menus déroulants, des modals, des carrousels, et bien plus encore.
• Flexbox et Grid Layout : Foundation permet d'utiliser facilement Flexbox et CSS Grid Layout pour des mises en page plus modernes et complexes.
• Personnalisation : Comme Bootstrap, Foundation permet la personnalisation via des variables Sass.

Flexbox

Flexbox (Flexible Box Layout) est un module CSS moderne qui permet de créer des mises en page flexibles et responsive sans l'utilisation de frameworks externes.

• Alignement et Distribution : Flexbox facilite l'alignement et la distribution des éléments dans un conteneur avec des propriétés telles que `justify-content`, `align-items`, et `flex-wrap`.

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.item {
    flex: 1;
    min-width: 200px;
}

• Ordre des Éléments : Permet de changer l'ordre visuel des éléments sans modifier l'ordre dans le code HTML avec la propriété order.

Grid Layout

CSS Grid Layout est un module CSS puissant qui permet de créer des mises en page à deux dimensions. Il est idéal pour les mises en page plus complexes que Flexbox.

• Définition de Grilles : CSS Grid permet de définir des grilles avec des lignes et des colonnes, et de placer les éléments à des positions précises.

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 10px;
}
.item {
    grid-column: span 2;
}

• Alignement et Espacement : Facilite le contrôle de l'alignement et de l'espacement des éléments avec des propriétés comme grid-gap, align-content, justify-items.

Tailwind CSS

Tailwind CSS est un framework utilitaire qui permet de créer des mises en page responsive en utilisant des classes CSS utilitaires directement dans le HTML.

• Classes Utilitaires : Utilise des classes utilitaires comme flex, pt-4, text-center pour appliquer des styles directement dans le HTML.

<div class="flex flex-wrap justify-center items-center">
<div class="w-full md:w-1/2 lg:w-1/4 p-4">Contenu</div>
</div>

• Personnalisation : Tailwind CSS est extrêmement personnalisable via un fichier de configuration où les développeurs peuvent définir leurs propres styles, breakpoints, et autres configurations.

Media Queries CSS

Les media queries sont une fonctionnalité CSS standard permettant d'appliquer des styles spécifiques en fonction de certaines conditions, telles que la taille de l'écran, la résolution, etc.

Exemple de Media Query :

@media (max-width: 600px) {
    .container {
        flex-direction: column;
    }
}

Ces outils et frameworks permettent aux développeurs de créer des sites web modernes, flexibles et adaptatifs, garantissant une expérience utilisateur optimale sur tous les appareils.

Template Joomla gratuit ou payant ?

Choisir entre un template Joomla gratuit ou payant dépend de plusieurs facteurs, tels que vos besoins, votre budget et le niveau de personnalisation souhaité. Pour vous aider à faire votre choix voici une analyse des avantages et inconvénients de chaque option :

Templates Joomla Gratuits

Avantages

• Coût : Comme ils sont gratuits, vous n'avez aucun frais à engager, ce qui est idéal pour les petits budgets ou les projets personnels.
• Accessibilité : Facile à télécharger et à installer, ce qui permet de démarrer rapidement votre projet.
• Communauté et Support : Il existe une grande communauté de développeurs qui utilisent et améliorent ces templates, offrant parfois des forums et des aides en ligne.

Inconvénients

• Fonctionnalités Limitées : Les templates gratuits peuvent ne pas offrir autant de fonctionnalités ou de personnalisations que les templates payants.
• Support Technique : Le support technique est souvent limité ou inexistant, ce qui peut être problématique en cas de bugs ou de difficultés.
• Mises à Jour : Les mises à jour peuvent être irrégulières, ce qui peut poser des problèmes de compatibilité avec les nouvelles versions de Joomla.
• Originalité et Design : Les templates gratuits sont souvent utilisés par de nombreux sites, ce qui peut rendre votre site moins unique.

Templates Joomla Payants

Avantages

• Fonctionnalités Avancées : Les templates payants offrent généralement plus de fonctionnalités et de possibilités de personnalisation, permettant de créer un site web plus unique et professionnel.
• Support Technique : L'achat d'un template payant inclut souvent un support technique de qualité, ce qui est utile pour résoudre les problèmes rapidement.
• Mises à Jour Régulières : Les développeurs de templates payants fournissent généralement des mises à jour régulières pour assurer la compatibilité avec les nouvelles versions de Joomla et améliorer les fonctionnalités.
• Qualité du Design : Les templates payants sont souvent conçus par des professionnels et offrent des designs plus sophistiqués et personnalisables.

Inconvénients

• Coût : Le coût peut être un obstacle, surtout pour les petites entreprises ou les projets personnels.
• Complexité : Parfois, les templates payants peuvent être plus complexes à configurer en raison des nombreuses options et fonctionnalités disponibles.
• Dépendance : Vous pouvez devenir dépendant du développeur pour les mises à jour et le support, ce qui peut être problématique si le développeur cesse ses activités.

Template Joomla sur mesure

Il était difficile pour nous qui travaillons sur des projets agence spécifiques de ne pas parler d'une autre catégorie de Template : les templates sur mesure.  En effet les templates Joomla sur mesure constituent une autre option à considérer, surtout si vous avez des besoins très spécifiques et un budget conséquent. Voici une analyse des avantages et inconvénients des templates sur mesure :

Avantages

• Personnalisation Complète : Un template sur mesure est entièrement conçu selon vos spécifications, ce qui permet de répondre précisément à vos besoins et à vos préférences esthétiques.
• Originalité : Votre site web sera unique, ce qui peut vous aider à vous démarquer de la concurrence et à renforcer votre identité de marque.
• Optimisation : Le code du template peut être optimisé pour les performances et le SEO, ce qui peut améliorer la vitesse de votre site et son classement dans les moteurs de recherche.
• Adaptabilité : Le template sur mesure peut être conçu pour s'adapter parfaitement à toutes les extensions et fonctionnalités spécifiques dont vous avez besoin.
• Support Dédié : Vous bénéficierez d'un support technique dédié de la part du développeur ou de l'agence qui a créé votre template, ce qui peut faciliter la maintenance et les mises à jour.

Inconvénients

• Coût Élevé : Comme pour tout type de développement, le développement d'un template sur mesure est généralement beaucoup plus coûteux que l'achat d'un template préconçu, qu'il soit gratuit ou payant. C'est un choix à faire sur le Retour sur Investissement que vous voulez avoir.
• Temps de Développement : La création d'un template sur mesure prend du temps, ce qui peut retarder le lancement de votre site. Il est donc important de prévoir le temps nécessaire et d'anticiper la mise en ligne.
• Dépendance au Développeur : Attention à bien choisir votre prestataire. EN effet si celui-ci choisi de faire du "pur dév" et de ne pas s'appuyer sur un Framework connu, vous serez fortement dépendant du développeur ou de l'agence qui a créé votre template pour les modifications futures et le support.
• Complexité de Gestion : La gestion et la mise à jour d'un template sur mesure peuvent être plus complexes, nécessitant souvent l'intervention de développeurs professionnels.

Alors, gratuit ou payants ?

Vous l'aurez compris le choix entre un template Joomla gratuit ou payant dépend de vos besoins spécifiques. Si vous avez un petit budget et que vous n'avez pas besoin de nombreuses fonctionnalités avancées, un template gratuit peut suffire. En revanche, si vous cherchez à créer un site web professionnel avec des fonctionnalités avancées et un support technique fiable, investir dans un template payant est une meilleure option. Les templates sur mesure, idéaux pour les entreprises ou les individus ayant des besoins très spécifiques et un budget suffisant pour investir dans un développement personnalisé, offrent une personnalisation totale, une optimisation maximale et une originalité unique, ce qui peut grandement bénéficier à votre projet web. Cependant, il est important de considérer le coût élevé et le temps nécessaire pour le développement, ainsi que la dépendance accrue au développeur pour la maintenance et les mises à jour

Chaque option a donc ses propres avantages et inconvénients, et la meilleure décision dépendra de vos priorités et de vos ressources. Prenez votre temps pour décider, le changement sera impactant pour la suite et le succès de votre projet !

Fournisseurs templates payants

• https://www.rsjoomla.com/joomla-templates.html (deux templates gratuits sur le site)
• http://www.joomlashine.com/
• www.gavick.com/joomla-templates
• https://www.joomshaper.com/joomla-templates
• www.shape5.com/product_details/club_templates/
• http://www.joomlart.com/joomla/templates  ( ATTENTION : tous les templates ne sont pas responsives )
• www.joomla-monster.com/all-templates/37-joomla-3-0  ( Quelques templates gratuits sur le site )
• http://www.joomlaxtc.com/joomla-templates  ( Faire attention a choisir des templates Joomla!3.x )
• http://www.joomlaplates.com/joomla3-templates
• http://www.themexpert.com/joomla-templates 
• http://www.templatemonster.com/joomla-templates.php 
• http://ltheme.com/joomla-templates/
• http://www.astemplates.com/joomla-templates
• https://yootheme.com/joomla-templates (C'est actuellement le framework le plus utilisé par l'agence Agerix sur ses derniers projets, voir ici https://www.agerix.fr/nos-realisations)

Fournisseurs templates gratuits

• www.shape5.com/product_details/free_templates/
• https://www.siteground.com ( Attention ces templates ne sont pas responsives )
• http://www.rockettheme.com/joomla/templates

Une note spéciale pour notre ami Daniel Dubois qui a mis en ligne une plateforme entièrement dédiée aux Templates Joomla. Cette plateforme vous sera très utile pour affiner votre choix : https://templatejoomla.com/

Si vous pensez qu'il manque un fournisseur de template, gratuits ou payants, n'hésitez pas à nous le proposer, nous mettrons à jour cet article avec plaisir !
(dernière mise à jour le 30/05/2024)