Accessibility links


Sign In
  • Home
  • News
  • A guide to: the new Royal Opera House homepage

A guide to: the new Royal Opera House homepage

By David Watson (Former Digital Designer)

19 October 2010 at 5.51pm | 6 Comments

We’ve been working hard to create a new version of the Royal Opera House homepage, and wanted to give you a sneak preview of some of the new features you can expect.

The main aim of the new homepage is to show the full range of Royal Opera House activity in one place. We hope you like it; it’s just the first in a series of improvements that will be made over the coming months – including upgrades to the all-important ticketing parts of the website. 

The redesigned homepage aims to make it easier to explore what we have to offer. We’d like you to return to it regularly - and maybe even bookmark us. And as always, we’d like to hear your feedback so please let us know what you think by leaving comments on this blog post. 

Click the image (right) for a full preview of the new homepage.  

A note on screen resolutions
It's bigger! We know that over 80% of our visitors have a screen resolution of at least 1024 x 768, so we wanted to take advantage of that space to show more and give our beautiful photography more space to breathe.

Below is an overview of the new layout and functionality:


1) Notification Bar
This red bar will be used to display important customer notifications that include website maintenance, ticketing downtime and system statuses. When this notification bar is activated, it will always appear at the very top of your browser. To hide the notification, click the ‘CLOSE X’ button in the right hand corner.

2) Content Area 1

This content area is used to promote forthcoming productions and campaigns. It will contain between four to six panels that automatically rotate in sequence.

You can manually cycle through the content using the coloured arrows at the top of the panel. Or you can place your mouse over the image and the panel will pause. Each panel has a coloured content box which contains further information and a link to its relevant destination page. Placing your mouse pointer on top of the coloured information box will expand it, moving it away will collapse it.

2a) Content Area 2 

This content area is used to promote Royal Opera House activities that aren’t on the stage. It will contain only one content panel that will change periodically and will be linked through to a relevant destination page.

2b) Content Area 3

This is the showcase for our video content. When you click it, the video player will stream the video, delivering a quality suitable for your internet connection speed. Additional buttons will then become available including volume control, pause, full screen and close.

3) Cast Notifications

This centre bar displays key principal cast changes with links to the relevant production page so that you can find out more. 

4) Carousel
This carousel bar can contain up to eight content boxes. Each provides a glimpse of content deeper within the website, or on one of our other online platforms. Two of the content items (Latest Tweets and News Updates) pull content directly from our blog and our Twitter feed. This will keep you up to date with all the latest news and tweets - direct from our homepage.

The carousel bar automatically cycles through content (to the left), revealing all the content boxes available to explore. You can also manually cycle through it, using the left and right arrows either side of the carousel bar. On mouseover, the panel will pause allowing you to interact with the modules.

5) Primary and Secondary Footers

These two footer bars provide quick links to content and contact information. They include our address, switchboard and Box Office telephone numbers. 

6) Sitemap
Our new sitemap details the basic index of all our web content in one glance. It can be useful to quickly help you find what you are looking for - or you can use it to discover new content.

By David Watson (Former Digital Designer)

19 October 2010 at 5.51pm

This article has been categorised Uncategorised and tagged homepage

This article has 6 comments

  1. It all looks very pretty...but will it stand up to the craziness of booking day?

  2. zerodtkjoe responded on 20 October 2010 at 11:33am Reply

    Thanks for the info

  3. ECS responded on 20 October 2010 at 2:58pm Reply

    I don't come to the website because I have time to kill. I want a BIG button that says "Buy Tickets" or "Calendar"

  4. Oh, I like it very much. Thanks for the info!

  5. Looks fantastic. Great job on the redesign.

  6. Miriam responded on 30 October 2010 at 11:45am Reply

    The best thing about it is the site map at the bottom, except it it goes off the bottom of the screen so people might not even notice it is there. All I want from the site, and I expect most other users do too, is to find the information I want as quickly and easily as possible, and a lot of this other stuff just gets in the way.

Comment on this article

Your email will not be published

Website URL is optional