BU Banners Feature Guide

Transcript

Hey folks, Ashley Kolodziej here from Boston University Interactive Design. Today. I am so excited to show you all the new features of BU Banners and what you’ll get when you upgrade to BU Banners. Let’s take a look.

New and improved interface

The first thing that BU Banners offers you is a significantly improved interface over what you used to get with Content Banner. It’s now so much easier to edit your banners. From the image, to the title, subtitle, and content to link to, there’s no more hand coding your HTML in banners.

All you have to do is fill out these simple areas, edit any time, and choose the custom design option that suits your photo best.

You can also change the text color from light to dark, and in custom themes, you can extend this even further with custom built functionality.

New flexible design options

BU Banners offers a number of flexible design options and an easy to use user interface that makes it easy to maintain and update your banners across your site.

The full-width left aligned layout

Here’s an example of a full-width left aligned banner. Full-width left aligned banners are great for when your subject is in the right hand of the photo.

In the full-width left aligned banner, your image will cover the entirety of the page, and WordPress will try to keep your image so that the subject is cropped in the middle. We’ll talk more about how to crop effectively in BU Banners, but you can rest assured that this automatic cropping does a great job of making sure that your subject always stays well positioned in the banner, especially if you choose the correct text alignment for your subject.

The full-width right aligned layout

Next is the full-width right aligned layout . Like the full-width left lined example, the full-width right aligned example features a full width photo with text aligned on the right. This is great for images where the subject is to the left of the photo, and you don’t want the text to overlay them.

Just like the full width left aligned banner, the full width right aligned banner automatically crops your image and tries to keep the subject to the left of the page. Notice how as you expand the page, more of the subject is revealed.

The image only layout

Next we’ll look at the image only banner. The image only banner is perfect for photography, where you have many, many faces, and there’s not a good place to put text over them, such as group photos. It offers the ultimate in flexibility and prioritizing your banner image so that everybody is visible and seen in the banner image.

You’ll also notice that it does not come with an overlay, so it’s very bright and vibrant. If you don’t have text over the image, you don’t have to worry about accessibility compliance, which means we don’t have to have that overlay over your image, and you can let the image shine just as it is.

Like all banner layouts, image only banners will automatically resize depending on the size of the screen and try to fit everything in the best way possible.

Half-width layouts

Half width banner images are really great for when you don’t want an overlay over someone’s face, but you’d still like to have text in the banner area. In the half width example, the image will only cover half the width of the banner area. And you can choose the placement of the text from there.

The half-width right aligned layout

I would recommend the half-width right aligned example for when your subject is facing towards the right. That way, they are looking at the call to action, which helps direct your users to that call to action and keep their focus on moving to the next point in the site.

The half-width left aligned layout

Just like the half with right aligned example, the half with left aligned example allows you to place a half width photo in the banner area with text aligned to the left. I would recommend this with portraits where the subject is facing towards the left. This will direct the user’s attention to the text on the page and to that next call to action.

The text only layout

In some cases you may not even have a banner image to use on a page, but we still allow you to use BU Banners to create a great title, subtitle, and call to action in that area, using the no image center aligned example. When you don’t have images, or perhaps you just want to use typography to brighten up your page and position the title of the page a little bit differently, BU Banners will absolutely allow you that flexibility. As with all BU banners layouts, this banner layout is responsive and will automatically adapt to all screen sizes.

The video banner layout

And finally, in one of our most exciting BU Banners updates yet, we’ve added the ability to add videos to your banner that will play right inline in that banner area. You can use YouTube, Vimeo, or BUniverse in the BU Banners video layout.

When you scroll down, you’ll have the option to add a title, subtitle, and call to action just like any other banner area. But you can also provide a video ID to a YouTube, Vimeo, or BUniverse video that will automatically play in this area.

As soon as the user hits play, the video begins playing right away, even with muted audio so that the user isn’t rudely interrupted in any task that they might be doing at that moment – for example, recording a video.

Closed captioning will automatically turn on for ultimate accessibility, and the user can always choose to unmute the video whenever they are ready.

All video controls in the video player work, just like you’d expect, including pause, play, and volume controls. You can also choose to turn closed captions off at any time so that they don’t distract you from the video.

In Vimeo videos, BU Banners features a beautiful interface that will show up after the video pauses. You’ll see the title, subtitle, and call to action when a user is paused on the video, and they can continue to resume the video, or go to that original call to action at any time during the process of playing the video, making it really easy to move your users from video to that call to action and next step seamlessly.

Improve performance and load times on your website

BU Banners offers significantly improved performance over the old Content Banner plugin. It does this by automatically generating crops of your large high-quality images and serving up the correct size image for the device that you’re on.

So for example, you can see that BU banners automatically crops, using technology in the WordPress backend, your photo to look beautiful in a mobile format.

And when you increase the size, the photo re crops automatically to a more horizontal format that works really well with the desktop layouts and iPad layouts. Not only does this mean that your banner is always looking good on your website, it also means that load times are significantly improved.

To help demonstrate this, I loaded just the uncropped image that was in that banner by itself, on a new page, and measured the performance in the network tab here. You can see that it took an entire six seconds to load this image. In Content Banner, you would have to manually crop your images to prevent this from happening. And most people didn’t.

Now, the new recommendation is to upload the highest possible quality image so that WordPress can do the cropping for you.

Here’s an example of the difference with the WordPress crop. Watch these two panels carefully. Here’s the original image. Here’s the WordPress crop. Not much different, right? But look at how quickly it loaded. Less than one second.

That’s over an 80% savings in load time, and the significant reduction in the data that’s being transferred from your website, which means your mobile users and your desktop users will have a faster, snappier experience using BU Banners.

What sites support BU Banners?

BU Banners has so much to offer and so many great features, and we’re going to continue growing it over time. I hope you’ll consider switching to BU Banners.

Responsive Framework versions two and above supports BU Banners right out of the box, so you can rest assured that your new sites will all use BU Banners in the future and use the latest banners technology to move users across the site. You can also enable BU Banners on Responsive version one. It just requires a small amount of development effort.

If you’re on Flexi Framework and you like what you see here in BU Banners, now’s a great time to upgrade to Responsive Framework and see what new options you can get by upgrading to our newest technology.

So I hope that helps you out. And I hope that helps you understand what you can get out of BU Banners today. I’ll see you later.