This week, the Web Team is introducing a new page element: the event details box.
You can see an example to the right.
The event details box provides a way to highlight event details and links to important information without having to know HTML.
As we watch event announcements come through the publication queue, the Web Team sees a lot of attempts to make sure that the details of an event stand out from the rest of the text. Making your event details stand out is a good idea, and it agrees with best practices for the web.
But that’s difficult to do in our Ektron environment, and the available ways of doing it (like using a heading style on content that isn’t a heading) can interfere with our accessibility and search engine efforts or require advanced knowledge of standards-based HTML.
Because each event details box is its own content block, placing an event details box on a page is a two-step process. First you create the event details box, then you attach it to a page. (This is the same process we use to create “learn more” boxes.)
In brief, here’s what you do:
Choose New > Smart Form > Event Details Box, fill out the smart form with your event details, and submit it for publication.
Edit the page on which you want to place the event details box, go to the Metadata tab, and then put the event details in the “LearnMoreBlock.”
For full directions, see our new how-to: Using the Event Details Box.
Setting up the event details box is a bit more complicated than just typing it into your page.
You can’t see how the final page will look until both the box and the page are approved for publication. (The same as when you use collections or “learn more” boxes.)
It is a bit more work. You’ll now have three things to do when announcing an event: a news post, a calendar item, and an event details box.
Once you’ve created an event details box, you can put it on lots of pages. If you update the box, it gets updated everywhere. This is very useful when an event gets rescheduled or moved and can make the extra work worth it.
Formatting is taken care of for you. Because we are using this style of callout only for events, regular website visitors (74% of our visitors) should come to recognize this box right away.
The box resizes automatically when you put it into a news item, regular page, or a home page. So it fits everywhere.
The event information is presented in a format that is easily readable by Google and other search engines.
The event details box is the second of a series of smart forms we’re calling “page elements.” The whole set is:
Learn More Box: Provides links to related information
Event Details Box: Provides details about an event
Spotlight Box: Highlights text or pictures (still in development)
Call to Action Box: Encourages users to click a link or button (still in development)
We have a few ideas for others, too. Put together, these page elements are going to allow for a lot more variety in the way you can lay out your webpages.
If our news feeds were more like blogs, there would be a comment section right here, and we could take comments and answer your questions right here. In lieu of a comments section, send your comments and questions to firstname.lastname@example.org and we’ll address them in a future post.
Next time, we’ll be taking a look at our best practices checklist, the best place to get started improving your website. See you then!
March 7, 20121:00 p.m.–3:00 p.m.IT Support Center Training Lab (Delaney Hall, Room G41)
This training builds on the training provided in the New Basics, to help you plan the strategy behind promoting events, accomplishments, and more.
Web Training Workshop Registration Form.