This website is an initiative of J-Lab





Module Templates

Module Development Outline

The KCNN Web site faces a unique challenge: presenting a coherent, usable interface that still allows individual module developers creativity in terms of design and technology.

Our approach is for the KCNN Web site to develop a design and layout that becomes an “envelope” for containing the modules, and to also prepare a set of requirements, guidelines and templates for module developers.

Our intention is not to limit module developers in what you may and may not do, but to allow fairly free reign within a region of a KCNN Web page, with some requirements for anything outside the module area. At the same time, we will provide a module developer who wants an easy, consistent, and attractive design solution to have one at his or her fingertips, by providing a set of templates that may optionally be used. Below are the requirements, suggestions, and template information for module developers, including available technology you can take advantage of.

J-Lab worked with a Vancouver-based Web design company, Hop Studios, to design and produce the KCNN Web site. To expedite development of your module, you may find it convenient to contract with Hop Studios on any production or design task you need to accomplish, but the only areas in which you must work with Hop Studios are:

  • Getting software applications installed on the KCNN Web server
  • Piggybacking on KCNN Web server technology (they will help you to know whether this can be done, and to provide access to you and/or your developer)
  • Additional assistance needed to use the KCNN module templates, beyond the documentation already provided. This does not mean you need to use Hop Studios to implement the templates, only that if you have problems with them, Hop Studios is the resource for resolution.


These are non-negotiable elements of a KCNN module. We’ve kept this list as simple as possible. The idea of these requirements is to provide a basis for technological development and a viable user experience for visitors to the KCNN Web site,

  • You must include the KCNN site navigation and branding at the top of your pages. We will provide access to code to insert this material in such a way that it will be updated without your needing to edit your pages. This part of the page cannot be changed to suit your design and layout, as it must be in place and consistent in order for the KCNN site to be usable by visitors.
    To do this insert the following code into your HTML file, following the </head> and in lieu of a <body> tag:
    <script type="text/JavaScript" src=
  • It must be possible to print all text pages without experiencing cut-off edges. This can be accomplished through design, by having a print stylesheet, or by providing a secondary, printable version. If you have an alternative solution that meets the requirement, please let us know what you propose.
  • No pop-up windows are permitted, although you may open new browser windows.
  • Links to pages that load media (audio, video, etc.) or directly to non-HTML pages must indicate to the user what will happen – by means of a visual cue, an icon, or simply by stating in the surrounding text. The idea here is to let people know when they may be downloading something large, etc. (Get the icons.)
  • Links to sites outside the KCNN Web site must be indicated in some way – again, by a visual layout cue, icon or text description. (Get the icons.)
  • Layout and design must accommodate an 800x600 screen resolution.
  • Modules must be compatible with IE 5.5 and above for Windows, Safari 1.2 for Mac, and Firefox 1.0 for Mac and Windows. Small differences in layout between one browser and another are permissible, as long as no functionality is excluded.
  • So that you may be featured in marketing copy and in appropriate spots on the KCNN Web site, please notify J-Lab staff of significant updates to your module. Email details of the update to {encode="" title=""}, {encode="" title=""} and {encode="" title=""}. If the nature of your module is such that it is updated frequently, like a blog, please make J-Lab staff aware of your publishing schedule when your module is launched, as well as when/if you plan to stop updating the module.
  • If you plan to update your module and host a copy of it on another Web site, you must regard the KCNN version as the primary. That is, if there are updates (anything from blog posts to resource list additions to additional content) to be done, they must be done on the KCNN version of your module, by you, and you must notify KCNN of significant updates for marketing and promotion purposes. We suggest, of course, that if you do host other copies of your module outside the KCNN Web site, that those copies should also be kept up to date.
  • If your module is updated on an ongoing basis, you must provide an RSS feed.

If your unique vision simply requires that you violate one of these basic requirements, you may make an appeal, but be prepared to explain a) why you can’t achieve the same result in compliance with requirements, and b) why what you want to do is important.


The following guidelines are suggestions for best practices in developing a KCNN module. You do not have to comply with these guidelines, but doing so will increase the consistency of the user experience across the entire KCNN Web site and would be appreciated.

  • Make text links strongly visible (i.e. significantly different from your default text) through use of color, styling, graphics, etc.
  • Link colors throughout your module should be consistent.
  • When images are clickable, it should be obvious that they are.
  • Keep body and display text size readable for all eyes at 12pt or higher. Stick with a sans-serif font for readable body text.
  • Text should scale at the user's request. Don't lock users into a specific font size.
  • Headlines should be visually distinct from body copy. For example, set off a headline by using a larger point size, a different font, a particular and consistent styling, or with layout.
  • No text should be smaller than 10pt. Captions are frequent offenders in the small text category.
  • Be aware of how your pages might look for colorblind users, and those who have a hard time distinguishing between shades of the same color. A good site for testing your pages for colorblind issues is
  • Every image should have ALT text. Non-text content like audio and video should be described or even transcribed.
  • All media should be processed to create small files of appropriate quality – large downloads should be avoided if possible.
  • Elements such as navigation should be the same from page to page, and placed in the same spot. Specifically, all navigation items should be available on all pages; don't exclude the current page from that page's navigation.
  • Give folks a way to get in touch with you and/or report problems
  • When the technology you are using to deliver information requires a plugin, player or application, provide the appropriate links for people to acquire the technology.


We realize that not all KCNN module developers need to hire designers and coders to get their module produced. To help minimize the need for this, we have created a set of templates that can be used to produce your module, and some instructions for implementing them.

Attractive, easy to read templates are available for presentation of:

Feel free to adapt these templates to suit your needs, use them as a design starting point, or to repurpose them for use in delivering your content appropriately.

Use of the templates will ensure your module has the look and feel of the KCNN Web site, while still providing places within the template for a logo or branding of your own.

The templates are not a “turnkey” solution. You, or your designated web producer, will still need to know how to produce Web pages, edit HTML code, format images/audio/video/etc. If you wish, you may contract with Hop Studios to produce your module.


The KCNN Web site is run on the content management system Expression Engine (EllisLab, EE includes all the standard tools of blogging software, as well as bulletin boards, mailing lists, photo galleries, a wiki module, moblogging, search, and a calendar. A full feature chart can be found here:

You may piggyback on the EE installation for the KCNN Web site to any degree you like (although some configuration settings may be limited in order for the KCNN Web site to function properly). For those of you considering a blog, this may be the easiest solution, even if you want to implement your own design and layout. If you’d like to explore what is available within EE more fully, please contact Hop Studios at {encode=""} or 604.408.5722.

The KCNN Web site is hosted by (, running MySQL and PHP on a Linux server. Backups are done daily on the site. You may request installation of any software application that will run successfully on this server configuration so long as it does not degrade the functionality of the KCNN Web site and other modules. To find out whether your software application can be installed, please send the application’s requirements to Hop Studios ({encode=""}) along with the software application’s Web site and a brief explanation of what you will be doing with the software. We will notify you of any potential issues.

Questions about technologies not mentioned here (streaming, etc.) should also be addressed to Hop Studios.


You are free to host copies of your project on your own Web site and elsewhere. If you do this there are some requirements you must comply with:

  • Your must keep all copies of your module updated and synched. Planning a way for updating to happen, and for making sure all copies of your module match, is your responsibility.
  • If you host your module elsewhere, you need not include the KCNN branding and navigation, but you must include the KCNN logo and a link back to KCNN on the home page. Other places you might consider including a KCNN reference and link include an About page or your page footers. We also ask that  you include somewhere (in an “About” page or a page footer, for instance) a short explanation saying that your module was funded by the John F. and James L. Knight Foundation as part of the Knight Citizens News Network.


Once your module is ready for primetime, you must submit it to J-Lab staff for review and approval. J-Lab and the Knight Foundation reserve the right to request changes deemed necessary for usability and site compatibility. Your module will be reviewed for:

  • Quality of editorial content
  • Usability and interface interaction
  • Design
  • Compatibility with module requirements

You may be given a list of items that must be resolved prior to publication. You may also receive a list of suggested changes to be made at your discretion.

At the time you submit your module, please provide J-Lab with:

  • a short description, including title, that can be used for search results and or marketing purposes
  • a small graphic that might be used to promote the module, if appropriate
  • a description about when/if you plan to update your module.