Créer votre premier site web adaptatif

Publié par Sébastien Giroux le 7 mai 2014

For most people, creating their first responsive website can be a daunting task.  Where should I start?  How does this new software works?  What structure should I use? Etc.

The best way to get started is by converting an existing website into Ekomobi.  In this video, we'll show you how we took an out-dated non-responsive website and converted it into a modern responsive website in less than 20 minutes.

Transcription du vidéo

Bonjour tout le monde. Aujourd’hui ce que je vais faire, je vais vous montrer comment prendre un site web actuel et comment le recréer et dans Ekomobi. C’est vraiment, une des meilleures façons d’apprendre comment à utiliser Ekomobi, c’est de prendre un site web actuel et de le recréer.

Dans mon cas, je vais prendre le site web de la Classique Charlebois Trépanier, qui est une œuvre de charité pour laquelle je suis impliqué, et je vais refaire le site web dans Ekomobi. Donc la première chose que j’ai faite, j’ai extrait des photos de ce site web là. Donc, on voit ici qu’il y a le logo, il y a le golfeur et il y a la photo en bas des partenaires. Donc, j’ai tout mis ça dans un répertoire et puis j’ai aussi extraire le five icons. Donc avec ça, je devrais être capable de créer mon site Ekomobi qui devrait ressembler pas mal à ce site-là.

Donc ce que je vais faire, dans le tuteur Ekomobi, je vais me créer un nouveau site. Première chose que je vais faire, je vais m’assurer d’être dans la bonne langue. Donc, la langue par défaut est en français, donc vu que ça doit être en français, c’est excellent. Je vais travailler comme ça. Par la suite, je vais créer quelques pages pour la navigation. De cette façon, lorsque je vais créer les « Call to Action » dans page, je vais pouvoir les lier directement, donc ça va m’éviter du travail, d’être toujours obligé d’aller modifier les « Call to Action » par la suite. Donc, je vais créer une page pour les inscriptions. Je vais créer également une page pour les partenaires. Ça devrait être assez pour l’instant. Donc, je vais mettre deux « Call to Action » sur ma page.

Par la suite, je vais aller configurer mon thème, je vais aller m’assurer que les couleurs matchent ce que j’avais dans l’autre site. Donc le menu, je vais le laisser comme ça. Je vais me faire un site de 940 pixels de large. C’est beaucoup plus facile dans un cas comme ça, quand on n’a pas beaucoup de photos. Je vais cacher le footer. Et puis vu que je vais probablement avoir des sous-pages, je vais ajouter les sous-menus dans les pages.

Par la suite, je vais aller choisir les couleurs pour mon thème. Donc pour ce faire, j’aime utiliser un color picker qui est directement intégré dans Chrome. Donc dans ce cas-là, j’utilise celui ici qui est le Awesome Color Picker qui m’ajoute un petit color picker dans Chrome qui va très, très bien lorsqu’on veut créer des sites Internet. Donc ce que je vais faire, première chose c’est que je vais copier la couleur qui est ici. Parfait, donc j’ai copié cette couleur-là qui va être utilisée un peu partout dans le site. Donc, je vais la mettre ici en couleur de background. Je vais la mettre dans la barre de menu également. Dans le background de mon en-tête.

Et puis la petite ligne qui est en dessous du menu, je vais la mettre le jaune qu’on a ici et également les différents boutons. Donc, je vais choisir cette couleur-là ici. Avec mon color picker, je vais retourner dans mon « Admin ». Donc les boutons, je vais aller changer la couleur de mes boutons. Excellent, parfait. Et pour ce qui est du footer et du bloc, bien je vais la mettre de cette couleur-là ici qui est le gris un petit peu plus pâle que l’on a également ici. Donc, je vais la choisir avec mon color picker encore. Et je vais faire la même chose pour le footer.

Maintenant ce que je vais faire, je vais m’occuper de ma typographie. Donc vu que le site va être foncé, je vais mettre la typo d’un blanc parfait. Même chose pour les titres. Donc, ça va être en blanc. Et je vais choisir comme police, Raleway ici. Parfait, c’est ce qui configure mon thème. Donc, je vais sauvegarder la page. Donc, on voit que le site est déjà pas mal de la bonne couleur.

Ce que je vais maintenant faire, ce que je vais commencer par uploader le logo. Donc avec qu’est-ce que j’ai préparé. Je vais sur mon « Bureau ». Je vais choisir mon logo. Je vais mettre un numéro de téléphone avec un petit icône blanc. Je vais choisir celui-là. OK toujours important lorsqu’on met le numéro de téléphone, c’est de mettre le 1 en avant. Donc lorsque les gens vont utiliser leur cellulaire et puis que c’est une longue distance, ça va le signaler automatiquement. Donc, c’est un petit truc que je voulais vous donner ici. Donc je vais ajouter le numéro de téléphone. Parfait. Excellent, donc si je regarde la page maintenant ce que ça a l’air, donc ça commence à avoir du bon sens.

Et puis ce que je vais faire maintenant, je vais créer le header de mon nouveau site. Pour ce faire, je vais vous montrer un petit truc. Je vais mettre une photo en background pour mon image, donc je vais effacer les autres blocs pour l’instant. Et puis, je vais effacer cette colonne-là. Puis dans ma colonne de droite, je vais juste mettre un texte assez simple, puis je vais dire quelque chose comme « Aider la sclérose en plaques ». Donc je vais regarder quel était leur logo ici et puis je vais copier ce bout de texte là. Encore là, j’utilise un petit plug-in dans Chrome qui permet de copier le texte sans avoir le HTML avec, ce qui est très, très utile lorsqu’on veut copier du texte sans avoir du HTML avec. Donc l’extension, je l’ai ici. C’est le « Copy Plain Text ». Ça enlève tout le formatage qu’il pourrait y avoir sur une page web et ça permet de faire une copie qui est beaucoup plus facile. Donc je vais aller ici, je vais copier mon texte, je vais le centrer, et puis je vais le mettre en titre H1. Excellent, donc j’ai ma page là.

Et puis en dessous, je vais m’ajouter un bouton qui va me permettre de devenir partenaire. Donc, je vais écrire mon texte : « Devenez partenaire ». Et puis je vais ajouter un lien sur ce bouton-là qui va pointer vers ma page Partenaires que je pourrais créer par la suite. Ce que je vais mettre, c’est que je vais vouloir lui ajouter des classes qui vont me permettre de transformer ce bouton-là en bouton. Donc je vais juste, pour l’instant, aller chercher le lien de mon bouton. Donc, je vais juste rafraîchir ma page. La page partenaire est ici, donc je vais copier ce lien-là dans mon URL. Et puis, on voit maintenant que j’ai mon bouton « Aider la sclérose en plaques », un bouton « Partenaires » qui va pointer au bon endroit.

Et ce que je vais pour ce bloc-là, je vais enlever les marges et puis je vais mettre une image en background qui va être à l’arrière de mon bloc. Donc, je vais venir ici en dans le background, je vais choisir un fichier. Donc là, je vais mettre mon petit golfeur. Puis, je vais positionner en haut à gauche de mon bloc. C’est là que je vais le mettre. Puis je vais faire « sauvegardez ». Donc, on voit que mon golfeur est ici, mais je veux probablement que le bloc prenne plus de place. Donc ce que je vais faire, je vais aller ajouter du padding à mon bloc. Donc, je vais ajouter 45 en haut et en bas. On a besoin de peut-être un petit peu plus. Je vais ajouter à 60. Donc, je pense que ça devrait être bon pour l’instant. Et puis je vais m’assurer que la couleur du background est la même couleur que la photo. Dans ce cas-ci, on va mettre un noir. Donc, je vais choisir le noir ici. Et puis, je vais m’assurer que la section va prendre toute la largeur de la page. Donc, j’ai maintenant mon bonhomme avec le texte par-dessus. Donc si je regarde le résultat, si je retourne à la page d’accueil, excellent. Donc, je pense que ça me fait un bel en‑tête, je pouvoir maintenant continuer à faire mon site web.

Donc, je vais décider… ici je vais ajouter un bloc de texte de la même… je vais utiliser la couleur de background par défaut. Donc, je vais mettre mon bloc de texte et puis je vais aller chercher l’invitation du comité organisateur. Donc ici, j’ai l’invitation. Encore là, je vais le copier sans aucun formatage et puis je vais le mettre dans le bloc. Et puis encore là, je vais le centrer et puis je vais le mettre en titre H1. Et je vais aller ajouter du padding autour de mon bloc. Donc, je vais enlever la marge et puis je vais essayer de garder toujours le même padding entre mes différents blocs. Donc, je vais toujours essayer de mettre 30-30 entre chacun des blocs pour espacer le tout correctement. Donc, je n’aime pas trop, trop le résultat, donc je vais venir ici, puis cette phrase-là je vais la transformer en sous-header. Ça devrait aider pas mal. OK, donc c’est bien.

Par la suite, je vais mettre peut-être un petit peu plus d’informations concernant la journée de golf. Ce que je vais faire, je vais ajouter encore là un autre bloc de texte, juste en dessous ici. À la bonne place. Et puis pour distinguer de la section précédente, ce que je vais faire, je vais changer la couleur de background, puis je vais utiliser une autre des couleurs qui est associée au site. Donc, je vais utiliser la couleur qui est ici. Donc encore là, je vais utiliser mon color picker et puis je vais changer la couleur de cette section-là. OK, je vais venir coller l’information. Parfait. Et puis je vais la mettre la largeur du bloc. Parfait, mon bloc est ici. Je vais aller ajuster les marges encore là pour ce bloc-là. Comme je vous disais, je vais mettre 30-30 pour chacun des blocs pour les espacer correctement. Et puis là, je peux venir mettre le titre par exemple de cette section-là. Donc ce que je vais faire, je vais mettre le déroulement de la journée. Donc, on voit ici, une des choses que je faire, l’information qui est ici, je vais la réorganiser pour que ce soit bien en mobile.

Donc, une des choses en mobile, ce qui va arriver c’est que la colonne de droite va se retrouver en dessous de la colonne de gauche. J’ai comme l’impression que l’information concernant l’heure du tournoi est plus importante, donc on va la mettre à gauche. Comme ça, elle va se retrouver en premier en mobile. Donc je vais venir… pour tout de suite, je vais faire le titre. Copier/coller au bon endroit. Déroulement de la journée, encore là je vais le centrer, je vais lui mettre encore là un paragraphe de titre 1. Et pour mettre le reste, je vais utiliser un deux colonnes. Encore là, je vais mettre la même couleur que le reste. Et je vais l’appliquer pour la largeur au complet. Donc, ce qui me fait mon bloc ici. Donc, je vais aller copier le texte. C’est toujours à peu près le même principe. Je vais le copier sans aucun formatage, puis je vais le mettre dans la colonne de gauche. Donc, je vais réorganiser le tout.

Puis ce que je vais faire, pour les titres, je vais les mettre en H3. Toujours important d’utiliser les titres qui sont déjà définis. Comme ça, on va s’assurer que le tout va bien apparaître sur le mobile. Je vais m’assurer que l’espacement est le même partout. Excellent. Et puis, je peux faire la même chose pour la colonne de droite. Donc, je vais juste terminer ça. Encore là, pour mes différentes sections, je vais ajouter des titres de niveau 3. Parfait. Donc, je vois maintenant que le résultat est quand même assez balancé. Donc, c’est le look que je vais avoir. Je prévisualise mon site, OK, ça commence à avoir l’air de ça. Ça commence à avoir pas mal de bon sens.

Donc là, ce que je voudrais faire probablement, c’est ajouter un « Call to Action » pour inciter les gens à venir s’inscrire au tournoi. Donc, je vais amener mon bloc « Call to Action » ici. Encore là, même principe. Je vais choisir la même couleur que l’autre. Donc, je vais amener la marge ici qui est sur celui-là, puis je vais lui ajouter… je vais laisser faire le padding, je vais le mettre directement dans le « Call to Action ». Donc encore là, je vais choisir la même couleur que tout le reste du site. Je vais l’appliquer à la largeur au complet. Parfait. Puis je vais ajouter du padding autour de mon bouton. Donc si c’est un « Call to Action », je vais en mettre un petit peu plus. Je vais mettre… je vais enlever la marge en bas et je vais mettre du padding, je vais lui mettre disons 40 pixels autour du bouton pour qu’il soit vraiment bien centré et apparaisse bien dans la page. Donc ce que je vais faire, pour les gens qui vont cliquer sur ce bouton-là, on pourrait utiliser comme titre « Inscrivez-vous à la journée de golf », et puis je vais le rediriger à la page d’inscription que j’ai créée ici, et puis je vais juste le centrer à ce moment-ci, centrer mon bouton. Donc, j’aime pas mal le résultat. Donc excellent, ça commence à bien aller.

Ce que je vais faire maintenant, je vais juste ajouter une section en bas qui va nous permettre d’aller chercher des commanditaires. Donc, je vais utiliser le même principe, mais cette fois-là, je vais changer la couleur pour, encore là, séparer ma section. Je vais décider de la laisser noire. Donc, je vais aller voir sur le site actuel, il doit y avoir probablement de l’information concernant mes partenaires. « Devenez partenaire », parfait, c'est exactement le texte que j’ai besoin, donc je vais le copier. Je vais le centrer. Je vais en profiter pour le corriger. Puis je vais lui mettre un titre de type H1. Et puis comme les autres, je vais lui ajouter un padding de 30 pixels sur chacun des côtés. Et puis, même principe, je vais mettre un « Call to Action » pour inciter les gens à devenir partenaire.

Donc, je vais aller, il y a probablement du texte que je pourrais utiliser. « Cinq niveaux de commandites ». C’est excellent pour moi, pour mettre à côté de mon « Call to Action ». Vous voyez que lorsque les textes sont déjà faits, ça va quand même assez rapidement créer un site Internet. Et puis, je vais aller configurer mon bloc. Donc, « Devenez partenaire » et puis je vais envoyer vers la page Partenaire. Donc en créant les pages avant, dans la navigation avant, ça va être beaucoup plus facile par la suite de créer les différents items dans la page. Encore là, je vais mettre un pas digne de zéro et puis, autour de mon « Call to Action », je vais mettre 45 pixels pour bien séparer. Donc, je vais aller voir le résultat. Donc, on voit maintenant, j’ai la page Partenaire. On voit ici, il y a probablement trop d’espace. Donc, je vais aller enlever le padding que j’avais mis ici en haut, puis je vais garder juste le padding que j’avais pour mon « Partenaires ». Parfait, c’est mieux comme ça. Donc excellent, maintenant on voit, dans la page accueil, « Déroulement de la journée », « Devenez partenaire ».

Je pense que ce que je vais ajouter maintenant, c’est à peu près juste l’équivalent qu’on a ici, les partenaires platine. Donc pour compléter la page. Donc pour ce faire, je vais ajouter une photo à la fin pour les partenaires. Donc, j’ai utilisé ici mon une outil photo et je vais changer la photo et je vais utiliser la photo partenaire qu’on a déjà. Puis un des problèmes lorsqu’on fait surtout des sites web de commandites ou ainsi de suite, souvent ce qui va arriver, les logos on dirait qu’ils ont déjà un fond ou ainsi de suite et c’est difficile à intégrer. Donc ce que j’ai fait dans ce cas-là, c’est que j’ai utilisé Photoshop. Je les ai tous mis sur un fond blanc. Donc au moins, ils sont tous pareils. Et ce que je vais faire, c’est que je vais me créer une section autour qui va être tout en blanc et ça va bien apparaître dans le site.

Donc, je vais me mettre un titre entre les deux. « Partenaires ». Encore là, même principe, je vais le centrer. Donc « Partenaires » est centré. Je vais ajouter du padding en haut, donc un padding de 30. Et ce que je vais faire, c’est que je vais changer la couleur de cette typo-là. Par défaut, la typo de ce site-là est blanche. Ce que je vais faire, je vais la mettre noire et je vais changer le background, la couleur du background de mon site pour le mettre blanc. Et je vais l’appliquer à la largeur. Donc, on a le « Partenaires », je vais aller enlever la marge qui est en bas et je vais appliquer le même principe pour ce bloc-là. Background blanc, je mets le la largeur de la page. Excellent, j’aime bien le résultat. Donc on voit ici, il y a un petit peu de noir à la fin. Ce que je vais faire, je vais aller enlever la marge qui est en bas de ce bloc-là. Donc maintenant, si je rafraîchis la page, donc on voit que la page est terminée. J’aime pas mal le look. Je vais pouvoir maintenant la terminer. Je vais pouvoir créer les autres pages et ainsi de suite, mais je pense que c’est un bon début.

Et ce qui est intéressant maintenant, c’est que si je teste cette page-là en mobile, c’est une des beautés de Ekomobi, c’est que tout devrait être bon. Parfait, on voit que le site web est parfait en mobile, donc je suis très content. Ça va bien aller et je vais pouvoir maintenant continuer à créer le site Internet.

Donc, c’est ce qui complète cette formation sur comment créer rapidement une page accueil pour un site Internet. Si vous avez des questions, n’hésitez pas à me contacter à support@ekomobi.com. Ça me fera plaisir de vous aider à créer votre premier site Internet. Merci beaucoup et bonne journée

comments powered by Disqus