Branding

The model you create in the Berkeley Studio can be viewed in the Berkeley Runner. However, eventually you will want to publish your model. At this point, the layout of your model is no longer done by the Studio. Instead, the model is styled with a presentation layer. This presentation layer can be made specifically for your company by either yourself or by Berkeley Bridge (please contact us if you want more information). If you are wondering what the possibilities are for the layout of your model, you can check the demonstrations on the website.

Example of an application with presentation layer
Example of an application with presentation layer

Presentation layer

The use of a presentation layer separately from your model has several advantages. You can re-use the layer for all models you make, thus saving time and making sure all models look the same. Furthermore, the presentation layer can make up your model so that it fits your company style with the right colors, logo and fonts. Last, the presentation layer can add extra functionality such as pop-up information and data visualization.

The presentation layer is made with CSS, a styling language used on the web. Usually, our web team supplies everything here in close cooperation with your own company to get everything in line with your style guide and other needs. Depending on the complexity and amount of Berkeley Publisher features used in or outside a model and your in-house or third-party knowledge of CSS, it is also possible that our web team creates the HTML/JavaScript part but leaves the CSS part in your hands. This gives you ongoing control over the layout.

Styling in the Studio

It is important to realize that most styling you do in the Berkeley Studio, such as using styles, layout templates or editing interfaces, will only change the look of the Berkeley Runner. Whenever the model is published, the presentation layer will ‘take over’ the layout.

However, some styling changes do impact the look of your online model. Jumplists, chapters and information sources are all important elements to help your user and will be present in your online model. Furthermore, the headings of the texts in your models will determine the headings on the online, published version.

Some examples on styling

As mentioned earlier, the demonstration page on the Berkeley Bridge website offers plenty of examples of how the presentation layer can be used. However, below we would like to present some examples on the possibilities of the presentation layer. Please note that some of these examples are custom made for our customers, and may require some effort to implement.

Extra information for questions

Whenever you add a information source on a question, you might not want to show it all the time. Therefore it is possible to add a small [i] button to a question that shows information when a user clicks it:

Example of a expanded information button
Example of a expanded information button

Information visualization

Whenever you use data sets, tables or other large volumes of data, it might be more useful to visualize them than presenting them in numbers. There are plenty of options to do so, so please contact us if you are interested in visualizing any data.

Example of data visualization
Example of data visualization

Audit trail

All models can be equipped with a so called ‘audit trail’. This audit trail provides an overview of the results of the model, and can be customized to meet specific requirements. It usually shows the questions and the answers provided by the user.

Example of an audit trail
Example of an audit trail

Information in tabs

Sometimes you may want to present the user with more than just a single piece of information. In that case, the presentation layer can offer the user tabs in which he or she can select which information he or she needs. This allows to show much more information without an information overload.

Example of extra information in tabs
Example of extra information in tabs

Live previews

Whenever the model includes a document that is drafted throughout the model, it is usually presented at the conclusion of the model. However, the user may want to know how his or her document looks like halfway through the model. In this case, it is possible to add a live preview to the model that will be ‘build’ as the user moves through the model and answers questions.

Example of a live preview
Example of a live preview

For technical information on incorporating a Berkeley Studio model into your own site, please visit the technical information on branding.