Website layouts: Columns

In creating a page from a station's website promoting my radio play, one of the things I have to show is how the web page communicates with the reader. One aspect of this is the layout. There are three main types of layout which I shall discuss as well as why I have chosen a two-column layout

One-column layout

As the name suggests, this is a simple layout designed like a page of A4 paper. This is best for a block of several paragraphs of text because it uses a wide proportion of the screen. It also helps the reader to not become distracted from the text by other pieces of content. However, it is not good for when lots of bits of content need to be included because the page automatically becomes longer, resulting in more scrolling for the user.

Two-column layout

A two-column layout can be achieved in two main ways:

1. A 'main' section of content (usually containing text) with a 'sidebar' (either containing navigation or additional content)
2. Two equal width columns, both containing the main content (as shown above)

The advantage of a two-column layout is that it can be used for a more 'multimedia' approach; it is good for where a page needs to contain videos, sound files and widgets. However, the text needs to be kept to a minimum - ideally only 1 paragraph in each box. A potential problem in my view of a two-column layout is that the user can get distracted with no focal point for their eyes to focus on.

Three-column layout

Much the same as a two-column layout, there are two main ways that a three-column layout can be achieved:

1. Three equal columns

2. One main column with two sidebars

My choice

I have chosen to use a two-column layout because:

• The page will not contain much text. It will mainly consist of videos, sound etc. (there is a full list of the planned contents here). The main text on the page will be the character profiles and the short description of my radio play.
• It helps to 'break up' the page as opposed to a one-column layout. A whole web page of text can be very dull for the reader; a two-column layout makes it more interactive.
• Two-columns gives each item more space than the three-column layout. I think that a three-column layout would feel more squeezed.

Website layouts: Considering different screen resolutions

One of the challenges of designing a web page is that different computers/devices have different screen resolutions (i.e. the size of the screen, measured in pixels). A website that does not properly consider this could force the user to scroll horizontally, making the website unattractive and difficult to use.

There are a two main types of layouts:

"Fixed-width" - As the name suggests, the width of the page is fixed by the designer, regardless of the resolution of the device it is being viewed on.

"Liquid layout" - A liquid layout is where the content moves automatically to fit the screen resolution. I shall be using a liquid layout for this reason to prevent the user having difficulty using the website (some users in my target audience may not have much experience using computers).

Screen resolutions of computer monitors

Wireframe

Colour schemes for web page

Using a great website called Kuler, I have created a few possible colour schemes for my website:

Research into radio station websites

BBC Radio 4

This is BBC Radio 4's home page. I like the colour scheme, it suggests a 'serious' radio station.

This is the mini-site for The Archers. I like the use of the 'on air' feature in the top right corner. Further down the page, there are blogs and polls - both good ways of gaining audience involvement.

Absolute Radio

Absolute Radio is not a speech and radio drama station like Radio 4 but I like the way they have used a scrolling carousel' on their home page.

Planning for web page

I am continuing to put together my radio play (main task) which will be completed shortly. I am now starting work on my 1st ancillary task - the web page on a radio station's website promoting the play.

I have decided I will include the following elements on my web page:

• A description of the play - this should be short, just enough to persuade people to listen
• A 'listen again' player for the play
• A video of the director about how the play was made
• Character profiles - these will include the actor's name and the character's background and personality
• Links to social media
• Galleries
• Polls to involve the audience
• A blog
• Navigation to other pages
• 'On air now'
• A header including a station logo