Fermer

décembre 12, 2019

Votre site de portfolio doitil être un PWA?


À propos de l'auteur

Suzanne Scacca est une ancienne implémentatrice, formatrice et responsable d'agence WordPress qui travaille maintenant comme rédactrice indépendante. Elle est spécialisée dans l'artisanat marketing, web…
En savoir plus sur
Suzanne
Scacca

Vous passez tellement de temps à vous concentrer sur les sites Web d'autres personnes qu'il est facile de mettre le vôtre en veilleuse et de vous dire: «Je vais arranger ça un jour bientôt.» Mais voulez-vous vraiment attendre pour vous améliorer votre site de portfolio professionnel? Cela pourrait vous apporter beaucoup plus d’affaires – beaucoup plus d’entreprise de qualité aussi – si vous n’y consacriez plus de temps. Dans cet article, Suzanne Scacca explique pourquoi passer ce temps à la transformer en PWA en vaudrait la peine.

Cela va sembler étrange à suggérer, compte tenu de la quantité de travail nécessaire pour créer une application web progressive à la place d'un site Web réactif. Mais, pour beaucoup d'entre vous, votre site de portfolio devrait être construit en tant que PWA.

Il y a un certain nombre d'avantages à le faire, que je vais décrire ci-dessous, mais la ligne de fond est la suivante:

Si vous voulez pour passer moins de temps à chercher des clients, à postuler à des concerts de conception et à convaincre des prospects de vous embaucher, un PWA serait un investissement judicieux pour votre entreprise.

Pourquoi les concepteurs de sites Web doivent-ils créer des PWA pour eux-mêmes?

Si vous ' J'ai parlé aux clients de la création de PWA pour leurs entreprises, alors vous connaissez les arguments de vente habituels:

Une application Web progressive est intrinsèquement rapide, fiable et attrayante.

Mais pour un concepteur ou développeur Web , il existe d'autres raisons de créer un PWA pour votre entreprise.

Raison n ° 1: montrer et dire

Quand il s'agit de vendre des clients sur un PWA, vous devez vous rappeler que le concept est encore relativement nouveau, du moins en termes de sensibilisation du public.

Rappelez-vous quand nous sommes passés du Websi "convivial" mobile tes à réactif? Vous ne pouvez pas simplement résumer ce qu'est un site Web réactif et vous attendre à ce que les clients acceptent de payer plus cher que pour un site non réactif. Il fallait en fait leur montrer la différence en termes de design et, surtout, en démontrer les avantages.

Plus ou moins, je pense que les consommateurs connaissent aujourd'hui le responsive design, même s'ils ne le font pas le connais par son nom. Il suffit de regarder les statistiques sur le nombre de personnes qui visitent des sites Web sur des appareils mobiles ou sur la façon dont Google récompense les sites destinés aux mobiles. Cela ne serait pas possible sans une conception réactive.

Pour les PWA, il faudra du temps aux consommateurs pour vraiment comprendre ce qu'ils sont et quelle valeur ils ajoutent au Web. Et je pense que cela commencera naturellement à se produire au fur et à mesure que de nouvelles PWA apparaîtront.

Pour l'instant cependant, vos perspectives auront besoin de plus qu'une assurance que les PWA sont l'avenir du Web. Et ils auront très certainement besoin des avantages décomposés en termes qu'ils comprennent (ce qui signifie qu'il ne sera pas question de travailleurs des services, de la mise en cache ou de la présence sur le bureau).

L'une des meilleures façons de vendre des prospects sur un PWA sans trop compliquer c'est de dire , "Notre site Web est un PWA." Non seulement c'est un excellent moyen de présenter le PWA comme quelque chose qu'ils connaissent déjà, mais c'est essentiellement comme dire:

Nous n'essayons pas de vous vendre une nouvelle tendance . En fait, nous marchons.

Et quand vous ouvrez la conversation de cette façon, leur réponse devrait être quelque chose comme:

Wow! Je me demandais comment vous avez réussi à obtenir XYZ.

Prenez par exemple Mutual Mobile .

Disons qu'un client potentiel a trouvé la PWA dans les résultats de recherche et a décidé de fouiller dans le portefeuille pour voir ce que type de travail effectué par le conseil dans le passé.

Voici ce qu'ils verraient:

 Barre collante inférieure Mutual Mobile PWA
La Mutual Mobile PWA inclut une barre collante de partage social sur les pages du portefeuille. (Source: Mutual Mobile ) ( Grand aperçu )

En plus de l'en-tête collant qui maintient le logo toujours présent avec le menu, une nouvelle barre inférieure apparaît sur cette page.

Cette barre inférieure collante sert à plusieurs fins:

  • Le nombre de partages fonctionne comme preuve sociale .
  • Les liens rapides vers les médias sociaux encouragent les visiteurs à partager la page avec les autres, surtout s'ils connaissent quelqu'un qui a besoin d'un designer.
  • L'icône de courrier électronique permet d'envoyer facilement une copie de la page à eux-mêmes ou à quelqu'un d'autre – encore une fois, servant de référence ou de rappel que cette page est

Ce n'est pas le seul endroit où la barre inférieure apparaît sur le site Mutual Mobile. Comme vous l'avez peut-être deviné, il apparaît également sur le blog – un endroit où l'engagement et le partage devraient avoir lieu.

 Blog Mutual Mobile avec partage social
Le blog Mutual Mobile comprend une bannière inférieure collante avec des boutons de partage social et compte. (Source: Mutual Mobile ) ( Grand aperçu )

J'aime particulièrement cette utilisation de la barre du bas étant donné la difficulté de placer des icônes de partage social sur responsive sites Internet. Soit ils sont assis tout en haut ou en bas du message où ils ne sont pas susceptibles d'être vus, soit ils sont ajoutés sous la forme d'une barre verticale en vol stationnaire qui peut compromettre la lisibilité du contenu.

Cela peut sembler être un tel caractéristique insignifiante d'une PWA à mettre en évidence, mais cela peut faire une énorme différence si votre site réactif (ou celui de votre client) manque d'engagement.

De plus, le fait que la barre inférieure n'apparaisse qu'à certains moments démontre cette entreprise comprendre comment fonctionnent les PWA et comment tirer le meilleur parti de leurs fonctionnalités similaires à celles des applications.

Cela dit, vous ne voulez pas utiliser votre PWA pour vous vanter de vos prouesses de développement progressif d'applications Web.

, présentez simplement votre PWA comme exemple de ce qui peut être fait, puis expliquez l'intérêt d'utiliser des fonctionnalités spécifiques à PWA pour augmenter l'engagement et les conversions.

Et si vous avez une histoire à raconter sur la raison pour laquelle vous avez construit un PWA pour votre entreprise que vous savez que la perspective peut rel mangé, n’ayez pas peur d’en parler. La narration est une tactique de vente vraiment puissante car elle ne donne pas du tout l'impression que vous vendez. C'est plus authentique.

Raison n ° 2: créer quelque chose que les constructeurs de bricolage ne peuvent pas

J'ai testé la plupart des principaux constructeurs de glisser-déposer et je comprends pourquoi les propriétaires d'entreprise envisageraient ce bricolage apparemment plus rentable approche maintenant. Il y a quelques années? En aucune façon. Mais ces technologies s'améliorent vraiment pour pouvoir «concevoir» un site Web d'aspect professionnel. (La vitesse, la sécurité et la fonctionnalité sont cependant une toute autre histoire.)

Sachant cela et connaissant la direction que prend le Web, il serait judicieux pour les concepteurs de sites Web de commencer la transition de leurs entreprises vers des PWA. Pas complètement, au début. Il y a encore des clients qui seront prêts à payer un concepteur de sites Web pour construire un site Web pour eux (au lieu d'essayer et de le faire par eux-mêmes). puis transformer votre site Web en PWA, vous vous mettriez dans une excellente position. Non seulement vous seriez considéré comme un concepteur avant-gardiste, mais vous seriez prêt à travailler avec un client de meilleure qualité sur la route.

Et pour le moment, vous auriez un PWA qui impressionnera à coup sûr car il chevauche soigneusement la frontière entre la commodité d'un site Web et l'élégance d'une application native.

Permettez-moi de vous montrer un exemple.

Ceci est le PWA pour Construire à Amsterdam :

: ] Procédure pas à pas Build in Amsterdam
Procédure pas à pas des pages Build in Amsterdam Cases. (Source: Construire à Amsterdam )

C'est assez simple en termes de contenu. Il n'y a que des pages pour les cas (qui tire le double devoir comme page d'accueil), à propos et contact. Vraiment, avec la qualité des cas et le contexte de ces cas fournis, c'est vraiment tout ce dont cette agence numérique a besoin.

Si vous décidez de transformer votre site de portefeuille en PWA, envisagez de faire quelque chose de similaire. Avec moins de pages et l'accent mis sur la livraison des informations les plus pertinentes, l'expérience sera aussi efficace et rationalisée qu'une application native.

Retour à Build in Amsterdam:

Le design est incroyablement engageant. Chaque fois que l'une des images de Cases est cliquée, on a l'impression que les visiteurs entrent dans un nouveau portail.

Bien qu'une bannière claire en haut et en bas ne soit pas clairement présente comme dans une application mobile, il est tout aussi facile de contourner cette application.

Le bouton de menu, par exemple, est toujours disponible. Mais remarquez comment un nouvel ensemble d'options de navigation apparaît en bas à mesure que la perspective se déplace vers le bas de la page:

 Build in Amsterdam bottom navigation
Build in Amsterdam utilise la bannière du bas pour ajouter une navigation personnalisée à son PWA. (Source: Construire à Amsterdam ) ( Grand aperçu )

Les flèches vers l'avant et vers l'avant placées de manière pratique dirigent les perspectives vers d'autres échantillons de travail. Le bouton central les ramène ensuite à la page d'accueil / Cases.

Ce n'est pas seulement l'ajout de boutons de navigation qui rend cette PWA unique. C'est le style de transition vers et hors des pages qui en fait également un exemple.

Donc, si vous cherchez à faire une très forte impression auprès des clients potentiels maintenant, construisez-vous un PWA qui fera tomber leurs chaussettes de le coup d'envoi. Plus vous maintenez votre présence sur le Web à la pointe de la conception, plus vous serez considéré comme une autorité en matière de conception dans un avenir pas si lointain (quand tout le monde sera finalement accroché aux PWA).

Raison n ° 3: rendre la conversion plus fluide

Je parie que cela ne vous dérangerait pas de laisser votre site vendre davantage en votre nom.

Bien que vous puissiez certainement équiper votre site Web réactif de formulaires de contact, comment convaincre les visiteurs de prendre le saut? Pour commencer, la messagerie et le design doivent vraiment leur parler, à tel point qu'ils pensent:

Cela semble être un bon choix. Comment puis-je entrer en contact?

Mais plutôt que de les laisser ouvrir la navigation et localiser la page Contact (si elle est déjà là, puisque de nombreuses entreprises la cachent maintenant dans leur pied de page), votre formulaire de contact ne devrait être qu'un simple clic

Ce n'est pas comme si vous ne pouviez pas le faire avec un site Web. Cependant, c'est le style supplémentaire fourni par un PWA qui va vous attirer plus d'attention et d'engagement à long terme.

Prenez le Codigo PWA, par exemple.

 Page d'accueil de Codigo au formulaire de contact conversion
Exemple de procédure pas à pas de la page d'accueil de Codigo vers la conversion. (Source: Codigo )

Ce qui précède est une procédure pas à pas de la page d'accueil à la page Works. La transition à travers ces pages est fluide, élégante et attirera certainement l'attention de quelqu'un à la recherche d'un concepteur de sites Web capable de faire bouger les choses pour sa marque.

Sous chaque échantillon, les prospects trouvent de gros boutons rouges en avant et en avant. Cela facilite la navigation rapide à travers divers travaux. S'ils préfèrent revenir à la page principale, ils peuvent utiliser le bouton "Retour au travail" qui est toujours disponible dans le coin supérieur gauche.

Au-delà des gros boutons rouges, Codigo invite les prospects à entrer en contact. Cet appel à l'action ne se fait cependant pas de manière traditionnelle. Au lieu d'un grand CTA qui dit «Let's Chat», les options sont réparties comme suit:

  • Build
  • Co-incubate
  • Customize
  • Organize

Cela permet à l'agence de demander un ensemble spécifique des questions basées sur ce dont la perspective a réellement besoin en termes de développement d'applications mobiles. Et, encore une fois, la transition entre les écrans est très engageante. De plus, les transitions se produisent très rapidement, donc il n'y a pas de décalage qui amène les prospects à se demander si c'est à quel point leur propre application serait lente.

Dans l'ensemble, cela donne une très forte impression de ce que peut être un PWA.

Comme vous le savez, les PWA s'intègrent très bien avec les fonctionnalités de nos téléphones, alors ne vous sentez pas obligé de mettre toute votre attention dans un formulaire de contact si un click-to-call, click-to- le texte ou le bouton cliquer pour envoyer un courriel serait préférable. Trouvez juste le bon CTA puis programmez votre PWA pour simplifier et rationaliser ces actions pour vous.

Conclusion

Je sais que ce n'était probablement pas ce que vous vouliez entendre, surtout quand vous êtes déjà trop occupé à essayer de préparer et terminer le travail rémunéré pour les clients. Mais vous savez comment c'est:

Il est difficile de trouver du temps pour travailler sur votre entreprise car personne ne vous paie pour le faire. Mais quand vous le ferez enfin, vous vous donnerez un coup de pied pour ne pas le faire plus tôt.

Et alors que nous entrons dans une nouvelle décennie, il n'y a pas de meilleur moment que le présent pour consulter votre site Web et déterminer ce qui doit être fait afin de le pérenniser. D'après ce que nous savons sur le Web axé sur les mobiles et la puissance des PWA pour l'engagement et la conversion, c'est probablement là que votre site Web se dirige tôt ou tard. Alors, pourquoi ne pas accélérer les choses et le faire maintenant?

Lectures complémentaires sur SmashingMag:

 Éditorial Smashing (ra, yk, il)




Source link