Instructor Lead On-Demand Learning Courses - August Big $10 Sitewide Extravaganza All Pro Web Designs and Udemy are happy to offer this special to you, good only on dates: 08/21-08/31 Act Now!

Building Your Startup With PHP: Bootstrap Your Home Page

Final product image
What You’ll Be Creating

    < ?php foreach ($authAuthChoice->getClients() as $client): ?>

  • < ?php $authAuthChoice->clientLink($client) ?>
  • < ?php endforeach; ?>

< ?php AuthChoice::end(); ?>

< ?php echo Yii::t('frontend','Wait for the Official Launch'); ?>
< ?= $this->render(‘launch’);?>

The AuthClient widget in the top panel displays the Facebook, Google and LinkedIn icons which I covered in this earlier tutorial

Vertical Margin for the Video Carousel

Building Your Startup Bootstrap Video Carousel Vertical Top Margin

Finally, I just needed to make sure the video carousel below the fold had enough vertical margin so as not to overlay the background image. I used the video-top class for this:

.video-top {
  margin-top:23%;
}

The 23% margin worked well for desktop and mobile. And here’s the HTML:

< ?= $this->render('_video_carousel.php',['urlPrefix'=>$urlPrefix]);?>

The Improved Mobile Home Pages

Here’s what the improved bootstrap pages look like on mobile:

Building Your Startup Bootstrap Improved Mobile Home Pages side by side

They are much more effective. Now, when users arrive on mobile, they see content right away and not just the lead image.

What’s Next?

Building Your Startup Multiple Domains - SimplePlannerio Home Page with Social Image

Certainly, there are a lot of ways to polish and improve the home page experience. But I hope you’ve seen today that you can quickly leverage common elements in Bootstrap to provide an aesthetically professional experience for your visitors. I was able to do all of this without resorting to hiring an outside designer and CSS coder, so far. I hope to do that at some point when the project is funded.

Over the next couple of weeks, I’ll monitor the ratio of visitors to signups and see if improvements are realized.

Looking ahead, I’ll be building features to improve Meeting Planner such as activity planning, more SMS, and enabling the development of a mobile app. There’s still lots to do. I hope you stay with us.

In the meantime, please check out Meeting Planner and share it with your business associates, family, and friends.

I’m also getting closer to launching the experiment with WeFunder based on the implementation of the SEC’s new crowdfunding rules. You can follow our profile there if you’d like. I will also write more about this in a future tutorial.

Have your own thoughts? Ideas? Feedback? You can always reach me on Twitter @reifman directly. Watch for upcoming tutorials here in the Building Your Startup With PHP series.

Related Links

See more about Building Your Startup With PHP: Bootstrap Your Home Page

Instructor Lead On-Demand Learning Courses - August Big $10 Sitewide Extravaganza All Pro Web Designs and Udemy are happy to offer this special to you, good only on dates: 08/21-08/31 Act Now!

Leave a Reply