Acest tutorial face parte din Construirea sistemului de pornire cu seria PHP pe Envato Tuts +. În această serie, vă conduc prin lansarea unui startup de la concept la realitate, utilizând ajutorul meu Planificatorul întâlnirilor aplicație ca exemplu de viață reală. Fiecare pas de-a lungul drumului, voi lansa codul Planificatorului de Întâlniri ca exemple de sursă deschisă pe care le puteți învăța. Voi aborda, de asemenea, problemele de afaceri legate de pornire în momentul în care apar.

Îmbunătățirea paginii principale

Pagina principală a unui serviciu web are multe roluri. Funcțional, trebuie să faciliteze înscrierea persoanelor și începerea aplicației. Dar, de asemenea, trebuie să atingeți estetic vizitatorii și să le dați o impresie profesională că serviciul dvs. oferă ceea ce pagina de start le spune că face.

Deoarece am fost atât de concentrat în acest moment în construirea funcționalității de planificare pentru Planificatorul de întâlniri, nu am avut timp să mă concentrez pe lustruirea paginii de pornire - și sincer că a fost în scădere, lăsând vizitatorii pentru prima dată neimprimați.

În timp ce sunt un program și un manager de produs, un designer UX și un dezvoltator de web, nu sunt un designer grafic sau un guru HTML / CSS. Nu am investit încă resurse externe în proiect, așa că am trebuit să îmbunătățesc acest lucru singur.

În episodul de astăzi, vă voi arăta cum am întărit pagina de pornire și ce aspecte ale Bootstrap și CSS am exploatat pentru a vă oferi un aspect mai profesionist. Aveți multe de făcut cu Bootstrap pe cont propriu, dacă vă scufundați puțin mai adânc.

Dacă nu ați încercat încă Planificatorul întâlnirilor sau Planificatorul simplu, continuați și programați prima dvs. întâlnire. Particip la comentariile de mai jos, deci spune-mi ce crezi! Puteți să mă contactați și pe Twitter @reifman. Sunt interesat în special dacă doriți să sugerați noi caracteristici sau subiecte pentru tutoriale viitoare.

Ca un memento, întregul cod pentru Planificatorul întâlnirilor este scris în cadrul Yii2 Framework for PHP. Dacă doriți să aflați mai multe despre Yii2, consultați seria noastră paralelă Programming With Yii2.

Paginile actuale de acasă

În ultimul episod, am menționat lansarea programului Simple Planner alături de Planificatorul de întâlniri cu diferite scheme de culori și imagini. Nu păreau rău, dar butoanele de plumb și de înscriere pentru produs erau sub limită. Primii vizitatori vor sosi și vor vedea mai întâi fotografia.

Iată o privire mai atentă:

Planificarea îmbunătățirilor

Mai sus, puteți vedea versiunea finală pe care am creat-o. În esență, am vrut să migrez plumbul și opțiunile de conectare și de înregistrare de deasupra ori, fără a obstrucționa complet imaginea de fundal a paginii de pornire.

În esență, trebuia să fac patru lucruri:

1. Asigurați-vă că imaginea de fundal a fost receptivă și că a avut capacitatea de a aplica opacitatea (transparența).
2. Creați o coloană din stânga cu un panou transparent pentru a afișa plumbul.
3. Creați o coloană din dreapta pentru a afișa panouri cu înregistrare, conectare și formular de notificare de lansare cu o anumită transparență.
4. Asigurați-vă că caruselul video se poziționează sub imaginea de fundal.

Să examinăm fiecare provocare.

Restructurarea imaginii de fundal

Pentru a face fundalul mai fiabil, am redenumit codul pentru al plasa ca imagine de fundal pe elementul corp al paginii.

În primul rând, am creat o nouă foaie de stil home.css care ar fi configurată în fișierul HomeAsset.php:

 * @ de la 2.0 * / clasa HomeAsset extinde AssetBundle public $ basePath = '@webroot'; public $ baseUrl = '@web'; public $ css = ['css / site.css', 'css / home.css', 'css / home-video.css',]; publicul $ js = ['js / home.js', 'js / froogaloop2.min.js',]; public $ depinde = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset',];  

Fișierul de active determină ce biblioteci CSS, JavaScript și dependente sunt încărcate pentru fiecare aspect.

Iată topul home.css care definește corp element:

/ * CSS folosit aici va fi aplicat după bootstrap.css * / body -webkit-background-size: cover; -moz-background-size: capac; -o-background-size: cover; dimensiunea fundalului: capac;  

Pentru a roti dinamic imaginea de fundal, am adăugat o etichetă de stil în fișierul de aspect, Home.php (CSS nu poate face asta):

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

Aceasta a aplicat imaginea de fundal selectată definită în ultimul episod de SiteHelper.php:

corp background: url ('./ img / home / home-params ['site'] ['img']?>. jpg ') nu-repeta centru 30px; 

Partea din stânga a grila

Apoi, am creat un layout de rețea Bootstrap pentru a afișa panoul de conținut din stânga:

 
 
 
 
 
Alegeți ori și locurile împreună. Faceți planificarea ușor.
 
 
 
 
  

Am folosit o compensare cu o singură unitate, col-md-offset 1, și o coloană cu șase unități, col-md-6. Există și alte câteva aspecte integrate aici.

home-top clasa în rând mi-a permis să integrez o marjă verticală pentru aceste panouri. Am constatat că 16% au lucrat bine pentru mine, de la home.css:

.acasă-top margin-top: 16%;  

Oferind panourilor de pe pagina de pornire o anumită opacitate, opacitate: 0,9;, imaginea de fundal a fost încă prezentată printr-un pic, ceea ce era plăcut din punct de vedere estetic:

.implicit din panoul opacity: 0.9;  .jumbotron text-aliniere: centru; fundal-culoare: rgba (0,0,0,0,3); Culoare: #fff; border-radius: 5px;  .jumbotron .lead culoare: #fff;  .jumbotron .btn font-size: 21px; opacitate: .8; margin: 25px;  

De asemenea, am putut oferi panoului din stânga o culoare de fundal negru, dar cu opacitate folosind rgba, fundal-culoare: rgba (0,0,0,0,3);.

Valorile culorilor RGBA reprezintă o extensie a valorilor culorilor RGB cu un canal alfa - care specifică opacitatea obiectului. O valoare de culoare RGBA este specificată cu: rgba (roșu, verde, albastru, alfa). Parametrul alfa este un număr între 0,0 (complet transparent) și 1,0 (complet opac). (Școli W3)

Și am creat granițe rotunde folosind border-radius: 5px;.

Rezultatul permite afișarea imaginii de fundal în timp ce promovează textul plumb alb.

Panourile și formele drepte

Pentru a crea partea dreaptă, am creat o coloană cu trei unități, col-md-3. Apoi, am creat două panouri Bootstrap moștenind aceeași opacitate 0.9:

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

 
 getClients () ca $ client):?> 
clientLink ($ client)?>
  
  
 
 Sau,  
 
 
 
  
 
 render ( 'lansare');?> 
 
 

Widgetul AuthClient din panoul de sus afișează icoanele Facebook, Google și LinkedIn pe care le-am inclus în acest tutorial anterior. 

Marginea verticală pentru caruselul video

În cele din urmă, trebuia doar să mă asigur că caruselul video de sub fold avea suficientă marjă verticală pentru a nu suprapune imaginea de fundal. Am folosit clasa video pentru aceasta:

.video-top margin-top: 23%;  

Marja de 23% a funcționat bine pentru desktop și mobil. Iată codul HTML:

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

Paginile de acasă mobile îmbunătățite

Iată cum arată paginile de boot îmbunătățite pe mobil:

Ele sunt mult mai eficiente. Acum, când utilizatorii ajung pe mobil, ei văd conținut imediat și nu doar imaginea de plumb.

Ce urmeaza?

Desigur, există o mulțime de modalități de a lustrui și de a îmbunătăți experiența paginii de pornire. Dar sper că ați văzut astăzi că puteți utiliza rapid elemente comune în Bootstrap pentru a oferi o experiență profesională estetică pentru vizitatorii dvs. Am reușit să fac toate acestea fără a recurge la angajarea unui designer extern și a unui coder CSS, până acum. Sper să fac acest lucru la un moment dat când proiectul este finanțat.

În următoarele câteva săptămâni, voi monitoriza raportul dintre vizitatori și înscrieri și vom vedea dacă sunt realizate îmbunătățiri.

Privind în perspectivă, voi construi funcții pentru a îmbunătăți Planificatorul de întâlniri, cum ar fi planificarea activităților, mai multe SMS-uri și permiterea dezvoltării unei aplicații mobile. Mai sunt multe de făcut. Sper că rămâi cu noi.

Între timp, vă rugăm să consultați planificatorul de întâlniri și să îl împărțiți cu asociații de afaceri, familie și prieteni.

De asemenea, mă apropii de lansarea experimentului cu WeFunder bazat pe implementarea noilor reguli de cultură a SEC. Puteți să urmăriți profilul nostru acolo dacă doriți. Voi scrie, de asemenea, mai multe despre acest lucru într-un viitor tutorial.

Aveți propriile dvs. gânduri? Idei? Parere? Puteți să mă contactați mereu pe Twitter @reifman direct. Urmăriți tutorialele viitoare aici în Building your Startup With PHP series.

Link-uri conexe

• Planificator simplu sau Planificator de întâlniri
  
• Crearea punerii în funcțiune: rularea mai multor domenii (Envato Tuts +)
• Întâlnirea cu Planificatorul întâlnirilor
• Programarea cu Yii2: Noțiuni de bază