Ce tutoriel fait partie de la Construire votre démarrage avec la série PHP sur Envato Tuts +. Dans cette série, je vous guide dans le lancement d’une startup du concept à la réalité en utilisant mes Planificateur de réunion application comme exemple de la vie réelle. À chaque étape du processus, je publierai le code de Meeting Planner sous forme d’exemples open source à partir desquels vous pourrez apprendre. Je traiterai également les problèmes liés au démarrage au fur et à mesure qu'ils surviennent.

Améliorer la page d'accueil

La page d'accueil d'un service Web remplit de nombreux rôles. Sur le plan fonctionnel, il doit être facile pour les gens de s’inscrire et de commencer à utiliser l’application. Mais il doit également toucher esthétiquement les visiteurs et leur donner une impression professionnelle que votre service fournit ce que la page d'accueil leur dit..

Depuis que je suis tellement concentré sur la création de la fonctionnalité de planification pour Meeting Planner, je n’ai pas eu le temps de peaufiner la page d’accueil - et franchement, la page manquait, laissant les visiteurs pour la première fois peu impressionnés..

Bien que je sois un responsable de programme et de produit, un peu un concepteur UX et un développeur web, je ne suis pas un graphiste expérimenté ni un gourou HTML / CSS. Je n’investis pas non plus de ressources externes dans le projet, j’avais donc besoin de l’améliorer moi-même..

Dans l'épisode d'aujourd'hui, je vais vous expliquer comment j'ai renforcé la page d'accueil et quels aspects de Bootstrap et de CSS j'ai exploités pour offrir une apparence plus professionnelle. Vous pouvez faire beaucoup de choses avec Bootstrap si vous plongez un peu plus profondément.

Si vous n'avez pas encore essayé Meeting Planner ou Simple Planner, planifiez votre première réunion. Je participe aux commentaires ci-dessous, alors dites-moi ce que vous en pensez! Vous pouvez également me joindre sur Twitter @reifman. Je suis particulièrement intéressé si vous souhaitez suggérer de nouvelles fonctionnalités ou de nouveaux sujets pour de futurs tutoriels..

Pour rappel, tout le code pour Meeting Planner est écrit dans le framework Yii2 pour PHP. Si vous souhaitez en savoir plus sur Yii2, consultez notre série parallèle Programmer avec Yii2.

Les pages d'accueil actuelles

Dans le dernier épisode, j'ai mentionné le lancement de Simple Planner en même temps que Meeting Planner avec différents jeux de couleurs et images. Ils ne semblaient pas mauvais, mais les boutons d’avance et d’inscription du produit étaient en dessous du pli. Les visiteurs pour la première fois arriveraient et verraient surtout la photo.

Voici de plus près:

Planifier les améliorations

Ci-dessus, vous pouvez voir la version finale que j'ai créée. Pour résumer, je souhaitais migrer le prospect et les options de connexion et d'inscription au-dessus du pli, sans obstruer complètement l'image de fond de la page d'accueil..

Essentiellement, je devais faire quatre choses:

1. S'assurer que l'image d'arrière-plan était sensible et capable d'appliquer une opacité (transparence).
2. Créez une colonne de gauche avec un panneau transparent pour afficher le fil.
3. Créez une colonne de droite pour afficher les panneaux avec inscription, connexion et lancement du formulaire de notification avec une certaine transparence.
4. Assurez-vous que le carrousel vidéo se positionne sous l'image d'arrière-plan.

Regardons chaque défi.

Restructurer l'image de fond

Pour rendre l'arrière-plan plus réactif, j'ai réécrit le code pour le placer en tant qu'image d'arrière-plan sur l'élément body de la page..

Tout d'abord, j'ai créé une nouvelle feuille de style home.css qui serait configurée dans le fichier HomeAsset.php:

 * @since 2.0 * / class HomeAsset étend AssetBundle public $ basePath = '@webroot'; public $ baseUrl = '@web'; public $ css = ['css / site.css', 'css / home.css', 'css / home-video.css',]; public $ js = ['js / home.js', 'js / froogaloop2.min.js',]; public $ depend = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset',];  

Le fichier d'actif détermine les CSS, JavaScript et les bibliothèques dépendantes chargés pour chaque présentation..

Voici le top de home.css définissant le corps élément:

/ * Les CSS utilisés ici seront appliqués après bootstrap.css * / body -webkit-background-size: cover; -moz-background-size: couverture; -o-background-size: couverture; taille du fond: couverture;  

Afin de faire pivoter l'image d'arrière-plan de manière dynamique, j'ai ajouté une balise de style au fichier de présentation, Home.php (CSS ne peut pas le faire):

params ['urlPrefix'])? $ urlPrefix = Yii :: $ app-> params ['urlPrefix']: ");?> beginPage ()?>         tête ()?>  

Ceci appliquait l'image d'arrière-plan choisie définie dans le dernier épisode par SiteHelper.php:

body background: url ('./ img / home / home-params ['site'] ['img']?>. jpg ') centre de non répétition 30px; 

Le côté gauche de la grille

Ensuite, j'ai créé une disposition de grille Bootstrap pour afficher le panneau de contenu de gauche:

 
 
 
 
 
Choisissez des moments et des lieux ensemble. Rendre la planification facile.
 
 
 
 
  

J'ai utilisé un décalage d'une unité, col-md-offset-1, et une colonne de six unités, col-md-6. Et il y a quelques autres aspects intégrés ici.

le accueil classe dans la rangée m'a permis d'intégrer une marge verticale pour ces panneaux. J'ai trouvé que 16% travaillaient bien pour moi, de home.css:

.accueil haut marge haut: 16%;  

En donnant une opacité aux panneaux de la page d'accueil, opacité: 0,9;, l'image de fond est toujours visible à travers un peu, ce qui était esthétique:

.panneau par défaut opacité: 0.9;  .jumbotron text-align: center; couleur de fond: rgba (0,0,0,0,3); couleur: #fff; border-radius: 5px;  .jumbotron .lead color: #fff;  .jumbotron .btn font-size: 21px; opacité: 0,8; marge: 25px;  

De plus, j'ai pu donner au panneau de gauche une couleur de fond noire mais opaque en utilisant rgba, couleur de fond: rgba (0,0,0,0,3);.

Les valeurs de couleur RGBA sont une extension des valeurs de couleur RVB avec un canal alpha - qui spécifie l'opacité de l'objet. Une valeur de couleur RGBA est spécifiée avec: rgba (rouge, vert, bleu, alpha). Le paramètre alpha est un nombre compris entre 0.0 (totalement transparent) et 1.0 (totalement opaque). (Écoles W3)

Et j'ai créé des bordures rondes en utilisant border-radius: 5px;.

Le résultat permet à l’arrière-plan de s’afficher tout en promouvant le texte au plomb blanc..

Les panneaux et formes à droite

Pour créer le côté droit, j'ai créé une colonne de trois unités, col-md-3. Ensuite, j'ai créé deux panneaux Bootstrap héritant de la même opacité 0.9:

 
 
  
 
  ['site / auth', 'mode' => 'inscription'], 'popupMode' => false,]); ?> 

 
 getClients () en tant que $ client):?> 
clientLink ($ client)?>
  
  
 
 Ou,  
 
 
 
  
 
 rendre ('lancer');?> 
 
 

Le widget AuthClient dans le panneau supérieur affiche les icônes Facebook, Google et LinkedIn que j'ai décrites dans ce didacticiel précédent.. 

Marge verticale pour le carrousel vidéo

Enfin, je voulais juste m'assurer que le carrousel vidéo situé sous le pli avait suffisamment de marge verticale pour ne pas superposer l'image d'arrière-plan. J'ai utilisé la classe vidéo-top pour cela:

.vidéo en haut marge en haut: 23%;  

La marge de 23% a bien fonctionné pour les ordinateurs de bureau et les appareils mobiles. Et voici le code HTML:

 
 render ('_ video_carousel.php', ['urlPrefix' => $ urlPrefix]);?> 
 

Les pages d'accueil mobiles améliorées

Voici à quoi ressemblent les pages de démarrage améliorées sur mobile:

Ils sont beaucoup plus efficaces. Désormais, lorsque les utilisateurs arrivent sur leur mobile, ils voient immédiatement le contenu, pas seulement l'image principale..

Et après?

Certes, il existe de nombreuses façons d'améliorer et d'améliorer l'expérience de la page d'accueil. Mais j’espère que vous avez compris aujourd’hui que vous pouvez rapidement utiliser les éléments communs de Bootstrap pour offrir une expérience esthétiquement professionnelle à vos visiteurs. Jusqu'à présent, j'ai pu faire tout cela sans avoir recours à un concepteur externe et à un codeur CSS. J'espère pouvoir le faire à un moment donné lorsque le projet sera financé.

Au cours des prochaines semaines, je surveillerai le nombre de visiteurs par rapport au nombre d'inscriptions et verrai si des améliorations sont apportées..

Pour l'avenir, je construirai des fonctionnalités pour améliorer Meeting Planner, telles que la planification d'activités, davantage de SMS et l'activation du développement d'une application mobile. Il y a encore beaucoup à faire. J'espère que tu restes avec nous.

En attendant, veuillez consulter Meeting Planner et le partager avec vos collègues, votre famille et vos amis..

Je me rapproche également du lancement de l'expérience avec WeFunder basée sur la mise en œuvre des nouvelles règles de la SEC en matière de financement participatif. Vous pouvez suivre notre profil ici si vous le souhaitez. Je vais aussi écrire plus à ce sujet dans un prochain tutoriel.

Avez-vous vos propres pensées? Des idées? Retour d'information? Vous pouvez toujours me joindre directement sur Twitter @reifman. Surveillez les prochains tutoriels ici dans la série Construire votre démarrage avec PHP.

Liens connexes

• Planificateur simple ou planificateur de réunion
  
• Construire votre démarrage: exécuter plusieurs domaines (Envato Tuts +)
• Page WeFunder de l'organisateur de réunions
• Programmation avec Yii2: Mise en route