Case study example: A fictitious local newspaper

Submitted by admin on 15 December 2010 - 11:48pm

For this case study example, let's pretend we want to operate a website for our local news and community and we'll call it My Street.

Channels

After some thought, we've decided that My Street will be organised into 3 sections: Sport, Business, and Community (which also covers everything else not in Sport or Business). Naturally, each of these sections will be represented by a channel on the website.

We also want a way to distinguish note-worthy stories for the front page which could be from any section. We'll use the Promote this post checkbox for this purpose and have a channel widget for the front page which only shows promoted stories.

So we create the following three channels:

  • Sport
  • Business
  • Community

(If you have just created a site with ProsePoint Express, you can use the pregenerated channels by renaming them to match what we have here.)

The channels are used as follows.

All sports stories will be assigned to the Sport channel. All business news and community news stories will be assigned to the Business and Community channels respectively.

If we have a story that is related to both sport and local business, we assign it's default channel to either Sport or Business, whichever is more suitable (sorry, you have to choose one as the default ie. main channel). We then assign the other channel (Business or Sport) as an additional channel.

A story is listed on the page of its default channel, and also any additional channels. However, the breadcrumb for the parent of the story links to the default channel.

If we have a story that should not show on the front page, we untick its Promote this post checkbox. The channel widgets generated by the ProsePoint Express site wizard are configured only to show promoted stories, so they will not list any unpromoted ones.

Organising your content

Let's just take a step back and consider the pool of content that we have to organise into some sort of structure.

We will have:

  • The website front page,
  • Three channels,
  • An ever increasing set of news stories, variously assigned to channels,
  • A set of author pages, where each author page represents a journalist or news source,
  • A few static basic pages like an About or Company Profile page, and
  • A few miscellanous special purpose pages like a Contact page (with a contact form).

Let's organise this from the top, starting with the Main Menu.

We won't put the front page in the menu. (Some people like to place it in the menu as a Home link. For this example, let's not, but it doesn't really change things much if you do.)

We'll put the three channels in the menu.

We'll leave the author pages out of the menu for this example since they're not that important (compared to news stories).

We'll then place the other one-off pages into the menu since, well, it makes sense to do so.

We can add all the relevant pages to the Main Menu so it ends up like this:

  • Business
  • Sport
  • Community
  • About
    • Company Profile
  • Contact

(If you have just created a ProsePoint Express site, some of this would have been pregenerated for you. Just modify things around to suit.)

(Don't forget there's also the website front page but it isn't listed in the menu)

The website's content has just been structured. All the news stories are found in one or more of the three channels Business, Sport, Community. Any new stories you subsequently add will be found in its assigned channel. The other non-story, non-channel pages have also been placed in the menu hierarchy.

In terms of architecting your website content, the structure is complete. Let's now turn our attention to presentation and layouts.

Layouts

Layouts are a very powerful feature of ProsePoint Express, allowing very flexible placement of content into myriad combinations. Unfortunately, layouts also take a bit of getting used to, and unlocking their full potential requires some time, learning and experimentation.

Whilst the ProsePoint Express site creation wizard automatically creates some layouts for your site that you can use straight away, you'll probably want to try and create your own layouts sooner or later. This section will help you to understand them in further detail.

Here are a few key points to using layouts:

  • If you are making a small layout change, try to reuse an existing layout instead of creating a new one if possible. Layouts can self-adjust and hide or stretch zones depending on widget visibility.
  • If this is not possible, or you want a radically different look (or it just makes more intuitive sense to you), then create a new layout.
  • Modifying a layout will affect the look of all the pages using that layout.

Layouts can self-adjust, depending on widget visibility, as follows:

  • Widgets can be configured to be visible or invisible depending on the page url or page type.
  • If all the widgets of a zone are invisible, then the zone becomes zero-width and hidden.
  • If a zone is hidden, any adjacent zones configured with a width of Stretch to fit will expand to fill up the available horizontal space.

Hence, by careful and judicious use of widgets and visibility, it is possible for a single layout to handle several related looks.

Reusing a layout saves on potentially more administrative effort later on. For example, if you wish to add a menu to the footer of all your sites's pages, this change must be done for all layouts. The fewer layouts you have, the less work needed.

On the other hand, if you wish to create a very different look for a subset of pages, sometimes you cannot avoid creating and using a new layout. The Grid Layout page of the ProsePoint Express demo is an example of this where a dedicated layout was created just for a single page.

Going back to our fictitious site, let's go to the extremes and pretend we want to use multiple distinct layouts for the purposes of illustration.

For every set or group of pages which should look different, you need a new layout.

Let's consider My Street. We should separate the content of My Street into groups and then have a distinct layout for each set or group.

How do we separate the content into groups? Well, for starters, we could treat the front page as a special case and then separate the rest by page type. This would give us:

  • Front page
  • Channel pages (Business, Sport, and Community)
  • Story pages
  • Author pages
  • Basic and special purpose pages

Let's consider if we want each group to look different and how.

We want the front page to look different and special so we can emphasise certain stories. Makes sense. We'll create a layout called Frontpage layout for this.

We want to include an extra Ad or two on story pages. We also want to show a list of other stories from the same channel. This qualifies as 'looks different' so we'll want a separate layout for stories. We'll create a layout called Story layout for this.

As for the channel, author, basic and other special purpose pages ... well we can't think of any reason for them to look different. Let's merge these into one big group and use a single layout to cover them all. We'll create a layout called channel, author, basic ... actually, let's call it General layout, and we'll also use it for all subsequent non-story, non-frontpage pages.

So, from this reasoning, we will want the following three layouts:

  • Frontpage layout - which will be used only by the front page.
  • Story layout - which will be used by story pages.
  • General layout - which will be used by everything else.

Let's consider each layout in turn, starting with the general case first and moving to more specific cases.

General layout

This layout will be used by all non-story, non-frontpage content.

Let's decide we only want a two column, 32/16 format with the main column being twice as wide as the second and right column. The page body goes in the main column, and in the second column we want some text and a list of recent stories. We'll place an Ad in the header, and leave the footer blank (except for the footer message).

To realise General layout, we'll create a layout and choose the 3x3 grid format.

Since we only want two columns (in the main area of the page) and an Ad in the header, we only use the zones Row 1 Column A, Row 1 Column B and Header. Specifically:

  • Configure the width of the zone Row 1 Column A to be 32 units and place the Page content widget in it.
  • Configure the width of the zone Row 1 Column B to be 16 units and place two widgets in it: A text widget and a channel widget.
  • Configure the channel widget in Row 1 Column B to display the last 5 stories of <All channels>.
  • Configure the width of the zone Header to be 25 units and an Ad widget1 in it.

1 An Ad widget could be an Ad creative or an Ad group widget (if using the native Ad server plugin), or a code snippet from a third party ad network.

This will result in a generic layout to be used for all non-story pages. Then, we should edit the channel, author, basic and other pages and set them to use General layout.

Story layout

Now, let's consider Story layout. It will be similar to General layout with the following changes:

  • An extra Ad widget in the right column.
  • An extra Ad widget within the page text.
  • It should display a list of recent stories from the same channel (instead of all channels) in the right column.

We can create Story layout in the same way we created General layout, but with the following additional steps:

  • Place an Ad widget in the zone Row 1 Column B.
  • Place an Ad widget in the zone Page body (This will insert ads into the middle of a news story).
  • Configure the channel widget in Row 1 Column B to display the last 5 stories of <default channel> (This will make the stories displayed come from the same channel).

This will result in a layout to be used for all story pages. We should set the layout of all existing and subsequent story pages to Story layout.

Frontpage layout

Frontpage layout will be left as an exercise for the reader. However, a few comments and suggestions can be made.

Since it is used by a single special page - the front page - any manner of layouts and columns can be considered without affecting any other page.

Multiple channel widgets should be used to display multiple lists of stories from different channels and placed into appropriate zones.

The channel widgets should be configured to display stories from explicitly selected channels such as Business, Sport or Community instead of displaying from <default channel>.

A channel widget should be placed in a wide zone and configured to display promoted stories of <All channels> in a prominent manner. This emphasises those stories, which are notable headlines, on the website front page.

(If you have just created a ProsePoint Express site, a three column frontpage layout is already available for you to experiment with.)

Results

After all this, My Street will have three layouts in use. The website's front page will use Frontpage layout. All stories will use Story layout, and everything else will use General layout.

Modifying a layout will affect all pages using that layout. For example, if it is later decided that stories should use 28/20 column proportions, then editing Story layout and changing the widths of zones Row 1 Column A and Row 1 Column B will automatically affect all story pages. This is by design.

More on layouts

This case study of layouts for My Street showed one way of setting up layouts for a site. There are countless other ways and they will depend the situation at hand.

For example, it could have been decided (arbitrarily) for My Street that Business stories should have the narrower column on the left of the main column instead of the right. In order to achieve this, they'd be a Story layout and a new layout Business story layout which would have the columns switched. The permutations are endless.

It is advisable to try to keep the number of layouts small. Making a sitewide change may necessitate editing every layout of the site.

Set up and forget

After layouts are decided upon and configured, they no longer need to be changed when posting stories on a day-to-day basis. A newly posted story automatically gets picked up from its channel(s) by appropriately configured channel widgets and routed accordingly to appear in the correct places.