How our websites use BU Banners

Transcript

Hi folks! Ashley Kolodziej with Boston University Interactive Design here. Today, I’m excited to show you how BU Banners is being used across the university in different websites.

In our last video, we talked about what makes BU Banners different from its predecessor, Content Banner. Now, we’ll take a look at how this is used across the university.

How Responsive Framework uses BU Banners

In this example, you can see exactly how BU Banners would look just right out of the box with Responsive Framework. And you can see that it looks pretty good.

There are lots of design options that make this look great. Just out of the box, it will pick up Responsive Framework’s, font options, the color options, and it’ll work well even with the design options available in BU Banners. So here, we can see a few different design options available, which we’ll go into more depth about.

But for example, here is a full width left aligned banner that shows you how you can position the text in different ways on top of your banner image.

How Federal Relations uses BU Banners

Across the university, Federal Relations is one example of a site that uses BU Banners, but only uses the image option.

So across the site, you can see that they really wanted that image to be the star of the page. You can see that the title is still visible at the bottom, so you’re not completely blocking all content. This is something that we want to be mindful of when we have banner images.

How Diversity & Inclusion uses BU Banners

Next, the Diversity & Inclusion website is a great example of a website using a custom theme that also leverages the power of BU Banners to make the site really beautiful and engaging. I love Diversity & Inclusion because they use lots of different options within BU Banners to really keep the viewers interest as they move across pages.

For example, this is a half width BU Banner, but as you click around the site, you can see that they’re using full-width, left aligned text, a different version of full-width left aligned text, right aligned text, and the different version of left aligned text here.

All of these different variations and options mean that throughout the Diversity & Inclusion website, the right people are being focused on in the banner, and we keep the user engaged.

How Boston University Alumni & Friends uses BU Banners

Another great example of a site using BU Banners in a different way is the Boston University Alumni & Friends website.

Again, this is a custom theme, but you can see that the basic functionality of BU Banners is still available here.

One of the best new features of BU Banners that’s available right out of the box is the ability to play video right inline on a banner. This video can be from YouTube or it can be from Vimeo. Either one works just fine. BUniverse videos are also supported.

In the BU banners video layout, all you have to do is click play video, and the video will start playing immediately right in the banner area with muted audio so it doesn’t disrupt the user. You can unmute at any time using the player controls. You can also pause the video, and it will leave the video in the background along with a resume video button.

You’ll also notice that closed captions are enabled by default, which makes it really easy to see the transcript if you have it enabled.

How Sustainability uses BU Banners

Next, let’s take a look at Sustainability. The BU Sustainability website is a great example of how far we can push the design of BU Banners without changing the base functionality in a custom theme.

So here, you’ll notice that the same information is available in Sustainability as in a regular banner, a title, a subtitle, and a call to action. But look at how different it looks. The photo takes up the full width of the page in a really beautiful way, and things have been rearranged just slightly. This is a great example of how we can do very lightweight development work to change the look and feel of a banner to match your own custom theme.

How Dining Services uses BU Banners

In the BU Dining Services website, we use BU Banners to align text in different ways, a lot like Diversity. And you can see that they have a separate styling on their title and subtitle that really matches their custom theme. But one of the cool things that we can do with BU Banners in Interactive Design, because of the flexible way we built it, is we can extend custom functionality in it.

One example is the Where to Eat page on Dining. This isn’t a standard BU Banner type. We added this type to Dining so that we could quickly move people from page to page from the banner using multiple links. So here you can see this as a quick links banner type. And from here, you can click immediately to Choosing the Right Plan, Rhetty to Go and Flu Meals, and what’s open now from the Where to Eat page.

Learn what your options are with BU Banners

The ability to modify the functionality – the type of data you can enter, and how it works in BU Banners – is one of the most powerful aspects of BU Banners. And if you’re using a custom theme, that’s going to be available to you through Interactive Design.

Modifying BU Banners does require some development work. So if you have any interest in modifying the way that BU Banners works in your custom theme, just ask your account executive. They’ll be able to help connect you with our development team and help figure out what the best options are for achieving your goals in BU Banners in your custom theme.

Next we’ll explore the default functionality that comes with BU Banners and how to edit a BU Banner. I’ll see you in just a moment.