Corporate website and investor newsroom for a listed property company
The public website of Wereldhave, a property company listed in Amsterdam: a Drupal 7 site built as a mosaic of tiles, with a newsroom for investors and press that carried the share price from the exchange.
Wereldhave is a Dutch real-estate company listed on the Amsterdam stock exchange. In 2013 it owned shopping centres and offices in the Netherlands, Belgium, France and Finland, and its website was a TYPO3 site from another era. I was freelancing for the agency Itsavirus, and we rebuilt it in Drupal 7. I did most of the front-end work, and I built the newsroom for investors and press, the part of the site that a listed company is actually obliged to have.
The code is not at hand, and the site has since been rebuilt again by someone else. What follows is written from two screenshots taken in December 2014 and from the Wayback Machine, which holds the pages and their HTML but not the modules behind them. The old TYPO3 site is still in the archive on 30 December 2013; the next capture, in September 2014, is ours.
Everything is a tile
The design the agency made was a grid of squares. Under a full-width slider of three slides, the home page is a mosaic: a photograph of Belgium, the share price, a press headline, a gong, a photograph of France, an announcement in purple, one in turquoise, the company mission as a quote. A country, an event, a release and a number all had to live in the same box, and the box was always one square, or two squares wide when a headline needed the room. In the markup that is one class, sqblock, with a wideblock2 on the two-wide ones, and the pattern held across the whole site: the newsroom is the same grid with different contents.
The constraint that came with this was that nothing on the page could be long. A press release on the home page is its title and a Read more; an event is a name, a date and a time; a country is a picture and its name. That turned out to be a discipline rather than a loss. The tiles were Drupal blocks and nodes rendered through one template, so the editors placed content and the grid took care of itself, and the theme was written in LESS and compiled on the server, which in 2013 was how you got variables into CSS.
The slider is FlexSlider, the lightbox is Colorbox, and the swipe on touch screens is a small script of its own. It was jQuery throughout, because it was Drupal 7 and that is what came in the box. The site was English only, even though the company operated in four countries; there is no language switcher in any capture.
2 images — swipe or scroll sideways
A newsroom for two audiences
A listed company publishes for two very different readers. An analyst wants the last five press releases, the financial calendar, the key figures per share and a phone number. A shopkeeper renting a unit in one of the centres wants none of that. The newsroom has one switch at the top, Investors & Press or Tenants, and it is two URLs, /newsroom and /newsroom/tenants, so each audience has a page to bookmark rather than a state to find.
The lists are Drupal Views. Press releases and updates are separate lists with separate archives, filtered by year through the URL, so a link to the releases of 2014 is a link and not a click. Each list has its own RSS feed, which is how press and investors actually followed a company in 2013. The rest of the page is the grid again: the share price, the financial calendar, key financials from the half-year report, the annual report, the press contact and the analyst contact with their direct numbers, downloads, conference calls and webcasts, photographs and videos, and the logo in EPS and JPEG for whoever needs to print it.
Two of those tiles did something plainer than it looks. Balance sheet and P&L are not pages; they are links to page 16 and page 18 of the half-year results PDF. The figures already existed in a document that had been through audit and legal, and retyping them into a web page would have created a second version to keep in step with the first.
The share price
The tile that mattered most to the client was the smallest. It shows the market, AMS, the latest price, the volume traded and the change against the previous day as a percentage, with an arrow and a colour, and above it the time of the last update. On 5 September 2014 it read 70.00 at 17:35; on 12 December, in the middle of a rights issue, 52.99 at 17:59 with 296,341 shares traded.
It came from the market, not from an editor, and it was rendered on the server into the same block markup as every other tile. There is no ticker script in the page and no widget from a third party, which was the point: a widget would have carried someone else’s styling into a grid that was all one shape, and it would have failed silently in a corner of the home page when the provider had a bad day. The time stamp is there for the same reason. A price on a website is always a little old, and a reader deciding what to do with shares should be able to see how old.
The same tile sat on the home page and in the newsroom, one block placed twice, so the two could not disagree.
DRUPAL 7 (theme "wereldhave", LESS)
┌──────────────────────────────────────────────────────────────────────────┐
│ content blocks views │
│ ┌──────────────────┐ ┌──────────────────┐ ┌───────────────┐ │
│ │ press releases │ │ share price │ │ press releases│ │
│ │ updates │ │ key financials │ │ updates │ │
│ │ events: EGM, │ │ contacts │ │ filtered by │ │
│ │ webcast, results│ │ downloads │ │ year, + RSS │ │
│ │ countries │ │ quote │ │ │ │
│ └────────┬─────────┘ └────────┬─────────┘ └───────┬───────┘ │
└───────────┼───────────────────────────┼────────────────────────┼─────────┘
│ each one is a tile │ │
▼ ▼ ▼
┌────────────────────────┐ ┌────────────────────────────────────────────┐
│ / │ │ /newsroom /newsroom/tenants │
│ slider (3 slides) │ │ investors & press tenants │
│ mosaic of 1x1 tiles, │ │ lists · share price · financial calendar │
│ a headline takes 2x1 │ │ key financials · contacts · downloads │
└────────────────────────┘ └────────────────────────────────────────────┘
▲ ▲
│ share price tile │
└──────────── stock market ──────────────┘
AMS · latest · volume · D/D-1 [%] · last updated
The pieces. Everything is rendered as a tile, the newsroom is two pages for two audiences, and the share price is one server-side block that the home page and the newsroom share.
The site went live in 2014, after the last TYPO3 capture at the end of 2013, and stayed in this form until the company rebuilt it. The archive still has the December 2014 newsroom, rights issue and all.