Watch This Space for News on Upcoming Events

Ellen H (Editor in Chief) ,  03/02/2016

Proposal presented to the Board, Jan 18, 2016

Alan Fletcher (Web Master) ,  01/20/2016

Work in Progress

This documentation includes information from the written report approved by the board, the posters presented to the board, and additional comments about the slides approximating my presentation and comments by board members.

WARNING: the layout presented in these slides are sketches. Detailed layouts will be defined during the design process.

I have included some design ideas which have not been reviewed by the web subcommittee.

The present site is unsatisfactory in many ways and, in particular, has been hacked and remains vulnerable to further hacking.We therefore plan to implement a new site. It will have some of the features of the old site, and some new ones.

It would be possible to implement an interim “static” site (eg schedule not clickable) in about a month, but the web team thinks it better to take longer.

The first requirement is that it it is Responsive — namely, it works well on different devices.Depending on the size of the device the layout may be different.

We have identified three “break-points” at which the appearance should change: Browser, Mobile and WideScreen.

Secondly, a laptop or desktop has a mouse or dedicated touchpad, so menus and other clickable items can be quite small.  On a phone or tablet the buttons have to be larger.


We also want to avoid a site where you have to dig deep into it to obtain information. We call this a “Shallow” design.We propose limiting the site to 5 pages at the top level, with 5 sub-pages or “Tabs”.

Users who come to the site for specific information, and don’t find it on the home page, should usually get there with one click, sometimes two, and rarely (on small mobile devices), 3 or more.

Choosing what information goes on each page, and tab will require careful design.


Each page will have a “sticky header”, which stays at the top of the screen as you scroll down.

This lets you return to any page of the site with a single click.

On small mobile devices there isn’t enough space to show the whole header, so a “Hamburger menu” — three parallel lines — pops up a full menu.

On regular browsers we may choose to show two menu levels in the sticky menu.

On widescreen devices the menus (and other information) can be on the right., and will always be in view.



This is a VERY rough sketch of what the home page might look like.

  • Sticky header
  • Pretty picture
  • Listen online (hopefully)
  • What’s playing
  • Headline news/events
  • Donation links ..  etc etc …

On large devices the Schedule page will show a weekly grid — on smaller devices a  daily grid.

You will be able to filter the schedule by selecting various categories (which will be color-coded).

You can click on a schedule entry to get more information about the program and host.Programmers (and hosts) will be encouraged to provide contact information (email, phone numbers, web site/facebook …) and information about upcoming programs.

The schedule is held in a CMS (Content Management System) so the information  can be presented in multiple ways … including the “What’s playing” on the home page, and on program pages and host pages.


A News page will show news and events in a single area (rather than being separated into News, Events etc as at present.)

Important items can be “pinned” to the top of the page, and a summary shown on the home page.

We might have a “Tag” filter so that only items of a particular type are shown.

We could also have a Calendar Tab .. and would have to decide whether to show only KPFZ events and meetings, or to open it up to community / Public Service events.


At present we are NOT planning to allow User Comments or a Contact Form on the website, because they are security loopholes.

Instead, we plan to add a number of “Mailto” buttons which will bring up the user’s own mailing system.

This email will NOT go directly to an email address like “” … but will go to a MAILING LIST. Anyone will be able to subscribe to or unsubscribe from a mailing list.

The system will be designed to support multiple lists, such as Office, Programming, Web, PSA/Events, Membership etc ….Initially logins will be provided only for site administration and editing.

Future :We might want to limit access to parts of the site to (eg) programmers, board etc, but I (Alan) think that the WHOLE site should be publicly accessible.

If a forum is required then we should probably use custom software. (For example, David built one in Drupal, but nobody came. Alan likes phpBB). We could provide a link to an external forum, or include it on one of our pages (technically, in an iFrame).

KPFZ_AFAA_09 Title should be “WEB Graphics Design”

The web team has concentrated on the technical aspects, but the overall look and feel requires specific WEB Graphics Design expertise.

This includes deciding whether we should use pulldown or popup menus, hamburger or scrolling on the sticky header for small devices, mouseovers on mousy systems (accurate pointing vs touchscreen) etc etc.

 I suggest that the overall look and feel can be classified on two scales :

Elegant (muted colors) … Flashy (bright colors)

Restrained (nothing moves) … Singing and Dancing (animated gifs etc)

My own preference (endorsed by the board) is for Elegant and Restrained, but the Web Graphics Designer should sketch a variety of styles.

Note that what we can do for the overall look and feel, and for individual aspects of the design depends on the platform we choose. For example, on WordPress we would have to choose or create a theme, and select or create plug-ins.


The web team hopes to be  able to select the platform at our next meeting.  The main candidates are:

  • WordPress (our current site) ..  Alan will take the lead on reviewing themes and key plugins
  • Drupal 8 .. David will take the lead
  • Get a design from another radio? For example, we like some aspects of the KMEC site.
  • Other platform candidates include Weebly, Joomla … and thousands more

We will also come up with a list of “chunks” of information (for example, program summary), and can then decide on the detailed page/tab structure, and which chunks appear on which page. (Note : Drupal’s “blocks” look like a very good way of doing this).

At that point we need the services of a Web Graphics Designer who will work with the implementation team. Once the page/tab  structure is defined we can work on the menu structures.

We should have the overall system defined by March 2016.

We think that the new site can be operational by the end of June 2016.