Mise en page adaptative Le site permet aux pages Web de s'adapter automatiquement aux écrans des tablettes et des smartphones. Le trafic Internet mobile augmente chaque année et de traiter efficacement ce trafic, vous devez offrir aux utilisateurs des sites adaptatifs avec une interface pratique.
Les moteurs de recherche utilisent un certain nombre de critères pour évaluer l'adaptabilité du site lors de la visualisation sur des appareils mobiles. Google essaie de simplifier l'utilisation d'Internet pour les propriétaires de smartphones et de comprimés, notant dans l'émission mobile adaptée sous des sites de périphériques mobiles, marque spéciale pour les mobiles.. Le Yandex travaille également l'algorithme qui préfère les sites avec une version mobile / adaptative pour les utilisateurs dans une recherche mobile.
Vous pouvez vérifier l'affichage de la page sur les appareils mobiles sur les services et.
Figure. 1. Mobile Yandex et Google émettant une note sur la convivialité du site aux appareils mobiles Qu'est-ce qu'une mise en page adaptative
La disposition adaptative implique l'absence bande horizontale Faites défiler et des zones évolutives Lors de la visualisation sur n'importe quel appareil, de texte lisible et de grandes zones pour des éléments clicables. À l'aide de registres multimédias, vous pouvez contrôler la mise en page et l'emplacement des blocs sur la page, en reconstruisant le motif de manière à ce qu'elle s'adapte à différentes tailles de périphériques.
Les principales techniques de création d'un site adaptatif sont données dans l'article. Pour conception réactive La largeur du conteneur principal du site est définie en%, alors qu'elle peut être égale à la largeur de 100% de la fenêtre du navigateur et moins. La largeur des colonnes de la grille est également définie en%. DANS conception adaptative La largeur du conteneur principal et les colonnes de grille sont fixes à l'aide des valeurs de PX.
La disposition de caoutchouc adaptative, considérée dans cette leçon, fonctionnera parfaitement sur un modèle à deux colonnes, ce qui rend le site adaptatif et pratique pour la visualisation sur des appareils mobiles. Le modèle suppose une disposition différente du contenu principal des pages, dans cette leçon, sera démontée vers la page principale.
Casier de la page principale
La page se compose de trois blocs principaux: le pied de page supérieur (CAP), le conteneur d'emballage pour le contenu principal et la barre de sauge et le pied de page (page de page). En tant que tournant de points de conception, prenez 768px et 480px.
En premier lieu, cachez le menu supérieur et déplacez la barre latérale sous le conteneur avec des poteaux. Dans le deuxième point, vous modifierez l'emplacement des éléments d'en-tête, d'annuler le positionnement des boutons de réseaux sociaux dans les messages et d'annuler le flux autour des colonnes des pages.
Figure. 2. Exemple de mise en page adaptative 1. Metagelet et section
1) Ajouter à la section
Les fichiers requis sont un lien vers les polices utilisées, la bibliothèque JQuery, ainsi que le plug-in préfixe (ne pas écrire pour les propriétés des préfixes de navigateur):
2. Capuchon de page
Dans l'en-tête de la page
Logo ;
bouton pour afficher / masquer le menu principal
< div class = "col-md-4" > [Classe d'envoi: BTN - Classe plate: Col - XS - 12 "Commande"]< / div > < / div > |
Note importante:Chers amis, dans cet exemple, j'utilise des styles adaptatifs pour créer un formulaire de contact sur WordPress, c'est-à-dire qu'il peut prendre des formes de toute taille d'écran.
Vous verrez le bouton dans le coin supérieur droit. Déjà certainement pas manquer. 🙂
Nous avons fait une partie du travail, nous allons maintenant à la prochaine étape.
Configuration des adresses de messagerie pour recevoir des applications
Dans cette étape, nous devons faire des paramètres de manière à ce que les lettres soient sur notre boîte aux lettres. Comment atteindre cela va dire ci-dessous.
Nous devons cliquer sur la "lettre" de la grande onglet. Ce sera le second après le modèle de forme.
La première chose que vous voyez est vos tags que vous avez ajoutés, nous avons besoin d'eux insérer dans la lettre de la lettre, c'est-à-dire qu'ils substituent les données qui entrent dans l'utilisateur du formulaire. Je pense que je l'ai expliqué est intelligible.
Maintenant dans les champs:
- Pour (où l'application est envoyée, dans mon cas, c'est mon adresse e-mail, vous pouvez spécifier plusieurs adresses où envoyer des applications)
- De (où le champ provient, c'est-à-dire substituera la valeur que la demande provient de mon site de studio)
- Thème (sert à déterminer quelle forme une application vient dans notre cas, il s'agit d'une application avec la forme de promotion du site Web).
- Des en-têtes supplémentaires (titres supplémentaires, ne les touchent pas, ils sont nécessaires pour l'exactitude du formulaire d'envoi)
- Corps de message (le corps du message, vous spécifiez ici à qui la lettre est venue de et à partir de quelle adresse, par exemple: "de: ivan" "adresse mail: vasya @ mail. Ruelle »)
- Pièces jointes de fichier (application au fichier, ne touchez pas)
Nous devons maintenant configurer des notifications sur les courriels réussis ou infructueux du formulaire de contact WordPress.
Ce seront des messages qui seront montrés à l'utilisateur en réponse à ses actions avec le formulaire. Par défaut, ils vont en anglais. J'ai fait un transfert aux Russes le plus nécessaire pour vous. Ils seront plus que suffisants, et sinon, alors le traducteur Google pour vous aider. Donc, procédez.
- Si vous envoyez un message avec succès: «Votre message a été envoyé avec succès. Merci."
- Si vous ne parvenez pas à envoyer un message à partir du formulaire: «Erreur lors de l'envoi d'un message. Veuillez essayer plus tard ou contacter l'administrateur du site. "
- Erreur de remplissage: "Erreurs de remplissage. Veuillez vérifier tous les champs et envoyer à nouveau. "
- Les données envoyées sont définies comme spam: "Erreur lors de l'envoi d'un message. Veuillez essayer plus tard ou contacter l'administrateur du site. "
- Certaines conditions doivent être acceptées: "Veuillez accepter les conditions de la poursuite."
- Certains champs doivent être remplis: "Veuillez remplir un champ obligatoire."
- La longueur des caractères du champ est dépassée: "Il est indiqué trop de données."
- Longueur insuffisante du symbole dans le champ: "Les données sont trop indiquées."
- Format de date non valide: "Le format de date est incorrect."
- Date de début de la limite minimale: "La date suivante est indiquée."
- Date tardive à la limite maximale: "La dernière date est indiquée."
- Chargement de fichier infructueux: "Impossible de télécharger un fichier".
- Type de fichier non résolu: "Ce type de fichier n'est pas autorisé."
- Chargement d'un fichier trop volumineux: "Ce fichier est trop grand."
- Le chargement de fichier a échoué en raison d'erreurs PHP: «L'envoi d'un fichier a échoué. Une erreur s'est produite. "
- Le format numérique introduit par l'expéditeur est incorrect: "Le format numérique est incorrect."
- Le nombre est inférieur à la limite minimale: "Ce nombre est trop petit."
- Le nombre est supérieur à la limite maximale: "Ce nombre est trop grand."
- L'expéditeur n'a pas saisi la bonne réponse à la question: "Vous avez introduit une réponse incorrecte."
- L'adresse e-mail introduite par l'expéditeur est incorrecte: "E-mail incorrect".
- L'URL introduite par l'expéditeur est incorrecte: "URL incorrecte".
- Le numéro de téléphone entré par l'expéditeur est incorrect: "Numéro de téléphone incorrect."
Très bon. Avec le paramètre de formulaire, nous avons terminé, vous devez maintenant l'insérer sur le site. Pour cela, la technologie déjà connue, allons à une page existante ou en créer un nouveau. Dans votre exemple, je vais vous montrer un exemple de formulaire existant sur la page de site WordPress.
Depuis notre formulaire collecte des applications pour la promotion du site Web, allons à une page similaire.
Pour insérer notre formulaire de contact, nous devons copier, attribué à celui-ci avec un plugin, un code court. Il est disponible appelé votre formulaire.
Copier et insérer dans notre page, après avoir passé en passe éditeur de texte (pas visuel). Présenté dans la capture d'écran ci-dessous:
Enregistrez notre page et voyez ce qui s'est passé à la fin dans le navigateur:
Super! Essayons maintenant d'envoyer le formulaire sans remplir. Et c'est ce que nous verrons.
Une erreur d'envoi du formulaire est survenue, car l'utilisateur ne spécifie pas les données nécessaires dans les champs. Entrez maintenant les données correctes et voyons ce que nous réussissons dans ce cas. 
Nous cliquons pour envoyer et c'est ce que notre formulaire écrit:
Voyons maintenant à quoi ressemble notre application. Ils viennent de moi à Milovskaya Mail. Vérifier la livraison:
Allons à l'intérieur pour s'assurer que le codage et toutes les données sont correctes.
Tout va bien. Le formulaire fonctionne bien et envoie des données. Nous pouvons maintenant collecter des applications qui vous viendront lorsque vous le ferez si nous parlons de promotion régionale.
Nous avons donc dit comment créer un formulaire de contact sur WordPress sur la page Site. Maintenant je vais vous dire comment faire formulaire de rétroaction adaptative contextuelle Utilisation de notre formulaire de contact Plugin 7.
Nous faisons un formulaire de contact de retour d'informations adaptatif contextuel sur WordPress
Pour que notre formulaire soit adaptatif, c'est-à-dire un caoutchouc, nous devons connecter un autre plugin, et plus précisément son addition au formulaire de contact 7 - il s'appelle le formulaire de contact bootstrap 7. Installez et simplement activez et tout - cela fonctionne. Aucun paramètre n'a pas besoin de faire avec elle. Installé et oublié.
Dans la prochaine étape, je vais vous dire quels changements devraient être apportés afin que notre formulaire devienne pop-up et adaptatif. J'ai fait une telle réalisation sur page d'accueil de son site studio. Pour ce faire, nous nous tournons vers le modèle index.php, situé dans la section "Editeur extériorique". Nous ne travaillerons qu'avec le code, manuellement.
Notre formulaire contextuel sera affiché dans la boîte de dialogue modale comme suit:
Pour atteindre ce résultat, vous aurez besoin du code suivant, je l'imaginerai complètement dans l'extrait:
Commander
< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" > Commander< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" > Et fois;< / span > < span class = "sr-only" > Fermer< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" > Soumettez votre candidature< / h4 > < / div > |
De l'auteur: Une bonne page de contact est très importante pour maintenir des relations avec leurs visiteurs. Que nous parlions de commerce électronique, de magazines, de sites Web personnels, de services en ligne - comme le premier outil de communication avec vous utilisez généralement une page de contact. Il est étrange, mais de nombreux concepteurs Web négligent la page de contact modeste, en considérant même l'un des aspects les moins importants du site Web. Fixons-le.
La valeur d'une bonne page de contact
La page Contacts est souvent manquée de la vue. Combien de sites Web avez-vous visités pour vouloir contacter pour vous plaindre du produit ou du service, ou de poser une question? Et combien de fois avez-vous eu à vous battre avec le formulaire de contact?
Une bonne page de contact est bénéfique pour tout type d'entreprise. Elle est capable d'accroître la satisfaction de la clientèle, contribuant à résoudre leurs problèmes. Cela peut également aider à améliorer ses produits et services, en garantissant une manière large pour un examen précieux.
Lorsqu'il s'agit de révoquer un utilisateur direct, d'autres canaux peuvent être limités. Télévision, radio, magazines, journaux ... toutes sont une forme de communication unilatérale. La communication en ligne devrait être une rue double face; Dialogue entre entreprise et visiteur. Les deux parties, et voici la raison pour laquelle la bonne page des contacts est si importante.
Emplacement
Première étape: lieu de placement de vos coordonnées. Cela n'a aucun sens d'avoir la meilleure page de contact du monde, si vos visiteurs ne peuvent pas le trouver. Vous pouvez les aider si vous adhérez à certaines traditions de designer.
En général, les informations de contact peuvent être situées à deux endroits:
Navigation principale - endroit parfait pour créer un lien vers la page de contact. Les visiteurs recherchent généralement une page de contact à droite, car il est vu par l'élément de la valeur secondaire. Par conséquent, vous verrez simplement un lien vers la page de contact comme l'un des derniers éléments de navigation du site.
Nous pouvons également examiner moins de sous-alimentation dans le coin supérieur droit de l'écran. Ceci est également une position précieuse pour la page de contact. Au fait, il est préférable d'éviter la mise en place de la page de contact dans le menu déroulant, car il est facile de le sauter.
bas de page Est également une destination populaire pour les informations de contact. Il peut contenir un lien vers la page de contact:
... ou les informations de contact les plus importantes:
Prédire le flux des visiteurs à la page de contact est difficile, de sorte que la mise en place de références au moins dans les deux endroits mentionnés vous obligera à vous forcer en toute sécurité.
La chose la plus importante dans la page de contact
Vous êtes maintenant calme - vos visiteurs pourront trouver un chemin vers la page de contact et il est temps de penser à son contenu réel. Commençons par la principale et considérons les informations qui doivent être représentées.
Email email / Formulaire de contact
L'adresse e-mail est le moyen le plus simple des entreprises en ligne dans les affaires. Sinon, vous pouvez utiliser un formulaire de contact qui fait référence à un email. Grâce à la forme, vous obtenez plus de contrôle sur le contenu (nécessaire pour remplir le champ) et peut donc être empêché par le spam. Nous allons parler des formulaires de contact dans cet article ci-dessous.
Adresse
Les affaires avec un magasin traditionnel ne doivent pas oublier de mentionner votre adresse. Si vous avez de nombreux magasins, il est préférable de créer une page individuelle pour tout le monde. Remplissez-le avec des informations de contact séparées de ce magasin, des heures de travail, du schéma de voyage, etc. Il est nécessaire non seulement aux visiteurs, mais peut aider votre site dans les requêtes de recherche locales.
Téléphone
L'affichage du numéro de téléphone provoque un sens de confiance. Ceci est souvent considéré comme un signe d'une vraie entreprise existante et aide vraiment les magasins en ligne.
De nombreux sites Web ont commencé à ajouter le bouton des réseaux sociaux à la page de contact. Bien que, peut-être, cela ne profite pas à tous les sites, certains visiteurs ont signification supplémentaire. En particulier puisque de plus en plus d'entreprises offrent un support client via Twitter (parfois même 24 heures sur 24 et sans jours de congé).
aditionellement
Il n'y a pas de solution universelle pour une bonne page de contact. Tout site Web ou entreprise nécessite certains éléments qui peuvent être inutiles sur d'autres sites.
Il existe de nombreuses informations supplémentaires ou propriétés qui seront utiles sur la page de contact. Pour les magasins traditionnels, une bonne idée est de mentionner, par exemple, des heures d'ouverture. Les grandes entreprises pourraient faire référence à leur chat en direct et les sites de commerce électronique peuvent consolider la confiance des utilisateurs, survolant son numéro de TVA.
Informations confortables
La facilité d'utilisation des informations protégera vos visiteurs de la déception de la page de contact.
Au lieu d'images, activez vos informations sous forme de texte HTML. Texte html Vous pouvez copier et coller qui facilite le visiteur pour enregistrer vos données de contact.
L'adresse e-mail doit utiliser le lien Mailto. Cela donne au visiteur la possibilité de cliquer dessus et d'envoyer un message sans qu'il soit nécessaire de copier l'adresse de livraison et l'ouverture. client de messagerie. Avec cette technique, cependant, il peut y avoir un problème face aux spambots collectant des adresses électroniques liées à Mailto :. Par conséquent, vous pouvez décider d'abord de les confondre à l'aide du service comme Mailtoencoder.com.
Remarque générale: Les numéros de téléphone doivent également être interactifs. L'année dernière, nous avons posté un petit conseil sur la façon de créer un numéro de téléphone sensible au clic. Grâce au petit fragment du code, les smartphones identifient les numéros de téléphone et permettent de les appeler. C'est vraiment pratique pour les utilisateurs mobiles.
Les entreprises qui dépendent fortement de leurs magasins traditionnels, obtiennent souvent beaucoup d'avantages d'une carte interactive, donnant à l'utilisateur la possibilité de trouver rapidement la voie des points de vente. Afficher bien l'adresse du magasin et ajoutez une carte interactive encore meilleure.
Merci Google Maps. insérer propriété utile Aussi facile que la tarte. Entrez simplement votre adresse dans Google Maps et cliquez sur l'icône Liens de la colonne latérale. Là pour vous, il y a un code d'insertion.
Saviez-vous que vous pouvez adapter la carte à vous-même? Vous pouvez modifier les couleurs de la carte, ajouter des pointeurs personnalisés sur la carte et créer une légende. Vous pouvez en savoir plus à ce sujet sur les développeurs.google.com. Vous pouvez également réfléchir à l'utilisation de services alternatifs, tels que Cartebox plutôt attrayante.
N'oubliez pas d'optimisation des moteurs de recherche
En tant que visiteur, vous reconnaîtrez instantanément l'adresse de la page de contact. Moteurs de rechercheCependant, une petite aide est nécessaire lors de la reconnaissance de divers éléments.
Formulaires de contact
La plupart des sites Web appliquent le formulaire de contact sur leur page. Cependant, certaines formes sont inutilement compliquées et hostiles à l'utilisateur.
Peu importe la simple sorte que le formulaire de contact semblait, il s'agit en fait d'une combinaison de plusieurs composants. Ils doivent tous travailler ensemble pour garantir la meilleure impression de l'utilisateur.
Champs de saisie
Les champs de saisie, tels que les champs de texte, les options de sélection des options (piscines radio), les cases à cocher, etc., permettent à l'utilisateur de prendre les informations nécessaires.
Les visiteurs de sites Web sont plus enclins à remplir de courtes formes, car elles ont besoin de moins d'efforts. Le nombre de champs d'entrée équilibre entre les besoins de l'utilisateur et les besoins de l'entreprise. Hubspot a analysé plus de 40 000 formes et considéré comme l'effet d'augmenter le nombre de champs de saisie. Le résultat de leurs recherches indique qu'il devrait être utilisé aussi peu de champs de formulaire et d'être particulièrement prudent avec des zones de texte compliquées et des listes d'accompagnement.
Aidez vos visiteurs à remplir les champs, en spécifiant le bon format. Les numéros de téléphone et les dates peuvent être des pièges, en particulier pour les visiteurs étrangers. L'attribut HTML5 Placeholder vous aidera.
Ensuite, assurez-vous d'allouer le champ dont vous avez besoin pour le remplir (ils sont traditionnellement isolés à l'aide d'astérisques *). Indifférent définitivement le champ obligatoire et facultatif pour remplir le champ.
Enfin, il est utile de mettre en évidence le champ actif. Il peut être désigné à peine ou très brillant - comme vous le souhaitez.
Vous trouverez ci-dessous un exemple de formulaire de contact d'un Jim Nielsen Jim. Il utilise un pignon rouge destiné à remplir les champs, donne des conseils sur les formats et met en évidence le champ actif.
Validation du formulaire
La validation interne est également capable d'empêcher certaines maladies de formulaires de contact. La nécessité d'envoyer et de transférer le formulaire en raison de l'introduction de données incorrectes ou de données dans le mauvais format est très gênante. Comme déjà mentionné ici, il est préférable d'aider les visiteurs en montrant le format requis (par exemple, dates, numéro de téléphone ...).
Boutons
Sans le bouton d'envoi, il n'y a pas de formulaire de contact. Ça doit être à la fin. En tant que texte du bouton, utilisez le "message d'envoi" au lieu de "envoyer" pour rappeler aux clients ce qu'ils font.
La norme habituelle depuis l'année dernière est d'activer le bouton "Réinitialiser" ou "Effacer la forme". Ne faites pas cela. Il l'appuiera au hasard. Il n'y a rien de pire que d'imprimer un message détaillé bien pensé et perdez-le en raison du bouton "Réinitialiser".
Réponse
Le visiteur a fait ses coordonnées, a écrit un message et appuyé sur le bouton "Envoyer". Maintenant quoi? Est-ce que le message ou pas?
ANSURE Vos visiteurs en ce que le message a été envoyé avec succès en affichant le message approprié. Appliquez également un email pour confirmer.
Le même conseil concerne les erreurs. Affichage d'erreur Si vous échouez avec l'envoi d'un message - un besoin qui peut empêcher de nombreux différends futurs. Un message d'erreur doit être sympathique, évitez donc de montrer les codes d'erreur alarmants.
Conception de page de contact
Beaucoup s'appliquent à la conception de la station de contact les pré-requis techniquesmais n'oublie pas l'un des les points les plus importants: Styles visuels.
Si vous utilisez le formulaire de contact, effectuez les champs en grandes, amicaux et montés. L'espace blanc et l'indent vous serviront un bon service.
Les visiteurs de sites Web suivent le modèle sous la forme de la lettre F lors de la surveillance d'une page Web, de sorte que lors de la création de votre balisage, rappelez-vous ceci. Pour les formulaires de contact, il est préférable de placer tous les champs verticalement au lieu de placer leur un près de l'autre. Donc, le nombre de mouvements de vue des visiteurs nécessaires est réduit lorsque la forme est remplie.
La page de contact doit être combinée avec des fonctionnalités visuelles du site. La séquence est la clé de la perfection. Regardez, par exemple, sur cette page de contact, créée en tant que carte postale.
Et, comme dans le cas de la plupart des tâches de conception Web; L'approche créative paie parfaitement. Neil Petel (Neil Patel) a créé sa page de contact sous forme d'infographie, tripler le nombre de demandes de contact.
Exemples de formulaires de contact
En parlant de bonnes formulaires de contact, voyons pour inspiration pour ces exemples (cliquez sur l'image pour visiter le site correspondant):
Conclusion
Avant de créer la conception de votre page de contact, assurez-vous que les visiteurs sont capables de le trouver. Faites-lui une référence à partir de la navigation principale ou du pied de page. N'oubliez pas que la plupart des gens recherchent des informations de contact sur le côté droit de l'écran.
Pensez à quelles informations vous devez activer. La possibilité d'envoyer un message par courrier électronique ou par un formulaire de contact est de toute urgence importante. L'adresse et le numéro de téléphone peuvent également être utiles. Informations Complémentaires, tels que des liens vers des profils dans réseaux sociaux Et les heures d'ouverture pour certains types d'entreprises sont également nécessaires.
L'interactivité est importante. Appliquez l'attribut Mailto pour les adresses électroniques et l'attribut TEL: pour les numéros de téléphone (Il est très utile pour les visiteurs des appareils mobiles). Vous pouvez insérer une carte interactive, telle que Google Maps, mais examiner ses effets pour la performance.
Le formulaire de contact de convivialité peut créer ou détruire la page de contact. Ne demandez que les informations les plus nécessaires. Vous pouvez éviter les maux de tête, affichant le bon format des champs de saisie et appliquer la validation interne. Sur oublier d'afficher un envoi réussi de messages lors de l'envoi d'un formulaire.
