Il n'est pas toujours facile quand on débute dans la création de sites internet de trouver les outils et les services qui nous permettent de gagner du temps et de travailler plus efficacement. Nous avons sélectionné 20 utilitaires pour aider les jeunes professionnels du web.
Poser les bases de son projet :
- Choisir son CMS :
Il est aujourd'hui de plus en plus fréquent d'avoir recours à un CMS pour créer son site internet. Plus pratique et mieux conçu, c'est souvent une solution de premier plan pour créer un site solide et esthétique. Il existe une multitude de CMS, le choix du logiciel idéal pour votre projet n'est donc pas des plus aisé. Pour vous venir en aide, vous pouvez notamment vous référer à cette infographie sur les trois principaux CMS opensource ou consulter le livre blanc des 200 questions pour choisir un CMS.
- Créer sa charte graphique :
Nous vous avons déjà présenté l'outil Kuler, proposé par Adobe. C'est l'un des meilleurs utilitaires pour vous aider dans la création de la charte graphique de votre site. Grâce à lui vous pourrez créer des harmonies graphiques élégantes à partir de votre logo ou d'une photo, ou bien puiser l'inspiration auprès des membres de la communauté.
Créer une maquette :
- Composer une grille :
Un site donne toujours une impression plus professionnelle quand son design est structuré sous forme de grille. Pour vous aider à créer la grille qui correspond le mieux aux besoins de votre site, Modular Grid est l'outil qu'il vous faut. Il vous suffit d'indiquer quelques paramètres de votre grille (largeur du site, nombre de colonnes, largeur de la gouttière, etc.) pour que ce site génère pour vous un modèle correspondant parfaitement à vos attentes. Il ne vous reste plus qu'à le télécharger dans le format de votre choix. Une extension est également disponible pour créer votre grille directement dans Photoshop.
- Prévoir ses espaces publicitaires
Quand on souhaite monnayer son site internet, il est primordial de prendre en compte la taille et l'emplacement des encarts publicitaires dès les premières étapes de la conception de son site, afin de s'éviter toute mauvaise surprise. En effet, les publicités sur le web répondent à des normes strictes. Pour connaître les formats standards des encarts, vous pouvez consulter l'aide de Google pour les formats de publicités Adsense, ou encore les recommandations de l'IAB sur les formats publicitaires classiques.
- Choisir ses icônes
- Trouver la police qui correspond à votre projet :
La recherche de la typographie idéale est une quête de longue haleine. Pour vous aider dans vos recherches, il existe de nombreux sites proposant des polices gratuites. Parmi ceux-ci, Dafont et son catalogue de plus de 12 000 typos s'impose comme l'une des références en la matière. Vérifiez bien là aussi quelles sont les conditions d'utilisation de votre police.
Développer son site :
- Coder :
Plus convivial que le simple bloc-note, l'utilitaire Notepad ++, grâce à ses nombreuses options de coloration syntaxique, d'indentation ou de recherche vous permettra de créer ou de modifier votre code plus facilement.
- Créer ses feuilles de style :
Primer CSS se charge de générer automatiquement votre css à partir du code HTML que vous lui avez indiqué. Vous récupérez ainsi un squelette vide avec vos classes et vos attributs, et il ne vous restera plus qu'à les décrire.
- Débuter en HTML5 :
Grâce à cet aide-mémoire des tags HTML5, le nouveau et très prometteur standard du web n'aura plus de secrets pour vous. L'infographie propose également un très utile récapitulatif de l'état de compatibilité des navigateurs avec le HTML 5.
- Innover grâce à la CSS3 :
Envie d'ajouter un dégradé, des bordures arrondies ou encore cette jolie police que vous avez trouvé sur Dafont à votre site ? Exit les images, grâce à la CSS 3 vous gagnez en accessibilité et en référencement et le CSS3 Generator vous permettra de créer le code correspondant à vos envies.
- Préparer ses emplacements textuels :
- Utiliser des images de remplissages :
Si vos photos ou vos illustrations ne sont pas encore prêtes mais que vous souhaitez tout de même préparer vos pages, pourquoi ne pas faire appel au service Placehold.it ? Il vous suffit de choisir la taille de votre image, sa couleur ou encore un texte d'accompagnement, et de récupérer le code généré pour le placer sur votre site.
- Générer ses mentions légales :
Étape peu attrayante mais pourtant indispensable dans la création d'un site internet, vos mentions légales peuvent être facilement générées grâce aux modèles fournis par le site de la CNIL. Juste quelques cases à cocher et il ne vous restera plus qu'à les personnaliser.
Tester et débugger :
- Tester la compatibilité sur les navigateurs...
Le service Adobe Browser Lab vous aidera à tester la compatibilité de votre site avec tout type de navigateurs, des plus anciens aux plus récents. Le meilleur moyen de vérifier comment votre site sera perçu par les internautes. Attention, ce service deviendra payant à compter du mois d'avril 2012.
- … et sur les terminaux mobiles :
De plus en plus d'internautes consultent aujourd'hui le web depuis leur téléphone portable, leur tablette et bientôt par le biais de leur télévision connectée. Pour leur éviter une expérience désagréable en arrivant sur le vôtre, et risquer de perdre des visiteurs définitivement, testez le rendu de votre site sur les différents types de terminaux mobiles grâce aux services emulateur mobile pour les smartphones, ou screenfly pour tous les types de terminaux mobiles.
- Tester l'accessibilité :
Il est primordial de vérifier si votre site sera bien accessible à tous types de visiteurs. Heureusement, il existe un outil très efficace et simple d'utilisation : la plateforme Wave. Grâce à elle, vous pourrez tester et facilement visualiser les éléments de votre site qui n'auraient pas été optimisés pour l'accessibilité web. Il ne vous restera plus qu'à apporter les correctifs nécessaires pour faire de votre site un modèle d'accessibilité.
- Valider son site :
Pour garantir la qualité et l'accessibilité de votre site, il est nécessaire de vérifier qu'il est bien en adéquation avec les spécifications des standards du web édictés par le W3C. Le W3C Markup Validation Service vous permettra de valider à la fois votre code HTML, mais aussi vos feuilles de style grâce au W3C CSS Validation Service.
- Débugger en ligne :
Une fois votre site en ligne, le plus simple pour traquer les bugs ou essayer quelques modifications est de recourir à l'extension Firebug pour Firefox. Grâce à ses fonctionnalités avancées, vous pourrez facilement faire vos tests avant de les appliquer à votre site.
- Tester le temps de chargement des pages :
La vitesse de chargement d'un site tient une place des plus importantes dans son référencement par les moteurs de recherche. Un site trop lent pourra être pénalisé, même si son code et son contenu ont été optimisés pour le référencement. Pour vous éviter ce genre d'impair, tester le temps de chargement de vos pages grâce à des outils en ligne tels que Yottaa. Cet utilitaire aux fonctionnalités avancées calculera le score de votre site et vous permettra même de simuler son temps de chargement pour plusieurs zones géographiques.
- Votre site internet et Google :
Pour voir votre site comme Google le voit, vous assurer qu'il ne présente aucun obstacle majeur pour être correctement référencé et tester votre sitemap avant de la soumettre aux moteurs de recherche, vous pouvez utiliser les Google Webmaster Tools qui vous aideront à en savoir plus sur l'indexation de votre site.
Vous voilà désormais armés pour développer votre premier site internet. Et pour les créateurs les plus aguerris, n'hésitez pas à partager vos astuces dans les commentaires.
Stéphanie M.
Stéphanie M.
Quand le collectif Digitives ne blogue pas, il crée de jolis sites internet. Envie d'un site web à votre image ? 
Excellent article très complet, je récupère quelques outils que je ne connaissais pas comme Moduel Grid, Primer CSS et Yotaa que je vais m'empresser de tester !
RépondreSupprimerMerci !
Supprimer