Bouw je Startup met PHP Bootstrap je startpagina

Wat je gaat creëren

Deze zelfstudie maakt deel uit van de Bouw je Startup met PHP-serie op Envato Tuts +. In deze serie begeleid ik je door het opstarten van een startup van concept naar realiteit met behulp van mijn Meeting Planner app als een realistisch voorbeeld. Elke stap die ik doe, zal ik de Meeting Planner-code vrijgeven als open-source voorbeelden waar je van kunt leren. Ik zal ook opstartgerelateerde zakelijke problemen aanpakken zodra deze zich voordoen.

De startpagina verbeteren

De startpagina van een webservice heeft veel rollen. Functioneel gezien moet het het gemakkelijk maken voor mensen om zich aan te melden en aan de slag te gaan met de applicatie. Maar het moet bezoekers ook esthetisch raken en hen een professionele indruk geven dat uw service levert wat de startpagina vertelt.

Omdat ik tot nu toe zo gefocust was op het bouwen van de planningsfunctionaliteit voor Meeting Planner, heb ik geen tijd gehad om me te concentreren op het polijsten van de startpagina - en eerlijk gezegd was het te laat, waardoor bezoekers voor de eerste keer niet onder de indruk waren.

Hoewel ik een programma- en productmanager ben, een beetje een UX-ontwerper en een webontwikkelaar, ben ik geen bekwame grafische ontwerper of HTML / CSS-goeroe. Ik investeer ook geen externe bronnen in het project, dus ik moest dit zelf verbeteren.

In de aflevering van vandaag zal ik je laten zien hoe ik de startpagina heb versterkt en welke aspecten van Bootstrap en CSS I zijn benut om een professionelere uitstraling te geven. Je kunt veel zelf met Bootstrap doen als je wat dieper duikt.

Als je Meeting Planner of Simple Planner nog niet hebt uitgeprobeerd, ga je gang en plan je eerste vergadering. Ik neem wel deel aan de opmerkingen hieronder, dus vertel me wat je denkt! Je kunt me ook bereiken via Twitter @reifman. Ik ben vooral geïnteresseerd als u nieuwe functies of onderwerpen voor toekomstige zelfstudies wilt voorstellen.

Ter herinnering: alle code voor Meeting Planner is geschreven in het Yii2 Framework voor PHP. Als je meer wilt weten over Yii2, bekijk dan onze parallelle serie Programming With Yii2.

De huidige startpagina's

In de vorige aflevering noemde ik Simple Planner naast Meeting Planner met verschillende kleurenschema's en afbeeldingen. Ze zagen er niet slecht uit, maar de knoppen voor productleiding en aanmelding lagen onder de vouw. De eerste bezoekers zouden arriveren en vooral de foto zien.

Hier is een nadere blik:

Planning van de verbeteringen

Hierboven ziet u de definitieve versie die ik heb gemaakt. In wezen wilde ik de lead en de aanmeldings- en aanmeldingsopties boven de vouw migreren, terwijl ik de achtergrondafbeelding van de startpagina niet volledig blokkeerde.

In wezen moest ik vier dingen doen:

Zorg ervoor dat de achtergrondafbeelding responsief was en de capaciteit had om opaciteit toe te passen (transparantie).
Maak een linkerkolom met een transparant paneel om de lead weer te geven.
Maak een rechterkolom om panelen weer te geven met een aanmeldings-, aanmeldings- en startnotificatieformulier met enige transparantie.
Zorg ervoor dat de videocarrousel zich onder de achtergrondafbeelding bevindt.

Laten we elke uitdaging bekijken.

Herstructurering van de achtergrondafbeelding

Om de achtergrond betrouwbaarder te laten reageren, heb ik de code herschreven om deze als achtergrondafbeelding op het body-element van de pagina te plaatsen.

Eerst maakte ik een nieuwe home.css-stylesheet die zou worden geconfigureerd in het HomeAsset.php-bestand:

 * @since 2.0 * / class HomeAsset breidt AssetBundle uit 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 $ depends = ['yii \ web \ YiiAsset', 'yii \ bootstrap \ BootstrapAsset',];

Het activabestand bepaalt welke CSS-, JavaScript- en afhankelijke bibliotheken voor elke lay-out worden geladen.

Hier is de top van home.css die de. Definieert lichaam element:

/ * CSS die hier wordt gebruikt, wordt toegepast na bootstrap.css * / body -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; achtergrondformaat: omslag;

Om de achtergrondafbeelding dynamisch te roteren, heb ik een stijltag aan het lay-outbestand Home.php toegevoegd (CSS kan dat niet):

params [ 'urlPrefix'])? $ urlPrefix = Yii :: $ app-> params ['urlPrefix']: ");?> beginpagina ()?>       <?= Html::encode($this->titel)?>  hoofd ()?>

Dit paste de gekozen achtergrondafbeelding toe die in de laatste aflevering door SiteHelper.php was gedefinieerd:

body background: url ('./ img / home / home-params ['site'] ['img']?>. jpg ') no-repeat center 30px;

De linkerkant van het raster

Vervolgens heb ik een Bootstrap-rasterlay-out gemaakt om het linkerdeelvenster van de inhoud weer te geven:

    
 Kies tijden en plaatsen samen. Maak plannen eenvoudig.

Ik heb een offset van één eenheid gebruikt, col-md-offset-1, en een kolom met zes eenheden, col-md-6. En er zijn een paar andere aspecten geïntegreerd hier.

De home-top Klasse in de rij stelde me in staat om een verticale marge voor deze panelen te integreren. Ik vond dat 16% goed werkte voor mij, van thuis.css:

.home-top margin-top: 16%;

Door de panelen op de startpagina wat ondoorzichtigheid te geven, dekking: 0,9;, de achtergrondafbeelding bleef nog een beetje zichtbaar, wat esthetisch aangenaam was:

.paneel-standaard opacity: 0.9;  .jumbotron text-align: center; achtergrondkleur: rgba (0,0,0,0.3); color: # fff; border-radius: 5px;  .jumbotron .lead color: #fff;  .jumbotron .btn font-size: 21px; ondoorzichtigheid: 0,8; margin: 25px;

Ook was ik in staat om het linkerpaneel een zwarte achtergrondkleur te geven, maar met dekking op basis van rgba, achtergrondkleur: rgba (0,0,0,0.3);.

RGBA-kleurwaarden zijn een uitbreiding van RGB-kleurwaarden met een alfakanaal - dat de dekking van het object aangeeft. Een RGBA-kleurwaarde wordt gespecificeerd met: rgba (rood, groen, blauw, alpha). De alpha-parameter is een getal tussen 0,0 (volledig transparant) en 1,0 (volledig ondoorzichtig). (W3-scholen)

En ik heb rond grenzen gemaakt met behulp van border-radius: 5px;.

Het resultaat laat de achtergrondafbeelding zien terwijl de witte leadtekst wordt gepromoot.

De rechterpanelen en formulieren

Voor het maken van de rechterkant heb ik een kolom met drie eenheden gemaakt, col-md-3. Vervolgens heb ik twee Bootstrap-panelen gemaakt met dezelfde ondoorzichtigheid van 0,9:

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

  getClients () als $ client):?> clientLink ($ client)?>
  
  
  Of,  
 
    
  maken ( 'launch');?>

De AuthClient-widget in het bovenste paneel geeft de Facebook-, Google- en LinkedIn-pictogrammen weer die ik in deze eerdere zelfstudie behandelde.

Verticale marge voor de videocarrousel

Ten slotte moest ik er alleen voor zorgen dat de video-carrousel onder de vouw voldoende verticale marge had om de achtergrondafbeelding niet te overlappen. Ik heb hiervoor de videoklassiek gebruikt:

.video-top margin-top: 23%;

De marge van 23% werkte goed voor desktop en mobiel. En hier is de HTML:

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

De Verbeterde Mobile Home-pagina's

Dit is hoe de verbeterde bootstrap-pagina's eruitzien op mobiel:

Ze zijn veel effectiever. Wanneer gebruikers nu mobiel aankomen, zien ze meteen inhoud en niet alleen de leadafbeelding.

Wat is het volgende?

Zeker, er zijn veel manieren om de ervaring op de homepage te verbeteren en te verbeteren. Maar ik hoop dat je vandaag hebt gezien dat je snel gemeenschappelijke elementen in Bootstrap kunt gebruiken om een esthetische professionele ervaring voor je bezoekers te bieden. Ik heb dit alles kunnen doen zonder tot nu toe een externe ontwerper en CSS-codeur aan te nemen. Ik hoop dat op een gegeven moment wanneer het project wordt gefinancierd.

In de komende weken zal ik de verhouding van bezoekers aan aanmeldingen controleren en nagaan of verbeteringen worden gerealiseerd.

Wat de toekomst betreft, zal ik functies ontwikkelen om Meeting Planner te verbeteren, zoals activiteitenplanning, meer sms en de ontwikkeling van een mobiele app mogelijk te maken. Er is nog steeds veel te doen. Ik hoop dat je bij ons blijft.

Bekijk in de tussentijd Meeting Planner en deel het met uw zakenrelaties, familie en vrienden.

Ik kom ook dichter bij het lanceren van het experiment met WeFunder op basis van de implementatie van de nieuwe crowdfundingregels van de SEC. Je kunt ons profiel daar volgen als je dat wilt. Ik zal hier ook meer over schrijven in een toekomstige tutorial.

Heb je je eigen gedachten? Ideeën? Feedback? Je kunt me altijd rechtstreeks op Twitter @reifman bereiken. Kijk hier voor komende tutorials in de Building Your Startup With PHP-serie.

Gerelateerde Links

Simple Planner of Meeting Planner
Uw startup opbouwen: meerdere domeinen draaien (Envato Tuts +)
De WeFunder-pagina van Meeting Planner
Programmeren met Yii2: Aan de slag

Code