Building websites at CERN

This draft document summarises recommendations from the CERN web team in the communications group. Comments and feedback welcome.

Introduction

Everyone involved in creating new websites or online content at CERN has a part to play in building a great experience for our users. This guide aims to help you by:

  • considering the context and purpose of your website

  • outlining the guidelines you should follow

  • giving you discussion points to consider with collaborators on your web project

  • showing you where you can find further help and documentation

This guide was written by the web team in the CERN Communications group.

Getting started

Why are you creating a website?

Before starting on a web project it’s important to define what your goals are and the reasoning behind them. Consider the following questions before you begin:

  • Can my goals be accomplished by other means?

  • How will my goals and needs for the website change through time?

  • Do I have the resources in place to succeed?

It’s important to think about the website in terms of years and decades rather than days and weeks.

  • Who will look after the site if I change roles or jobs within CERN?

  • Who will look after the site when I leave CERN?

  • Will they have enough documentation to understand how the site works and how to update it?

Think about the overall strategy for your website. Do you have a communications plan? Take a look at the CERN communications strategy for ideas: http://communications.web.cern.ch/strategy

Consultations

If your website is aimed at communicating a project or activity to an audience beyond your team or community, consider getting in touch with CERN’s communication group. They can offer:

  • help defining your objectives, audiences and content strategy

  • advice on the effective use of social media

  • guidance on the use of CERN branding

The group may also be able to communicate your activity through other existing channels they manage, such as the core CERN website. You can get in touch with the team via the contact form here: http://communications.web.cern.ch/contact

If you have technical questions about your web project, consult the web services team in the IT department. https://webservices.web.cern.ch/webservices/

The CERN web platform

Requesting a new website

If you have a CERN primary account you can request a new website via the web services website: https://webservices.web.cern.ch/webservices/ 

The CERN service portal is your first stop for problems with your website that you cannot resolve yourself. The service desk team will log your ticket or request and route it to the appropriate team for resolution: http://cern.ch/service-portal

Websites must be owned by a primary account holder (not an e-group or service account). Consider carefully who the owner of the website should be; ownership can be transferred at a later date, but this may only be done by the site owner themselves.

Systems

If you’re creating official CERN websites intended for a broad audience then use the CERN Drupal service. Drupal is an open source content management platform that powers millions of websites and applications; built, used, and supported by an active and diverse community of people around the world. You can find out more here: http://drupal.org/

For internal projects, or for collaborations involving small groups, consider using Sharepoint. It integrates well with Microsoft tools such as Office suite, making it a more accessible option for users.

Hosting

We strongly recommended that you host websites on CERN’s central web services. Our websites are a particularly prize target for hackers and there have been a number of defacement incidents related to external shared hosting or poorly-managed servers in the past. If you can’t host your site on CERN’s central web services for technical reasons, and need to run your own web server, then please note:

  • your web server will have to conform to the Security Baseline for Web hosting services

  • you will be responsible for hardening, maintenance and patching of this server and all the software running on it

  • to make your server visible from outside CERN you will have to request a CERN firewall opening

You can find more information on security here: http://cern.ch/security  

All websites and their technical infrastructures require ongoing administration. If your website is hosted by CERN’s IT department and you work with supported technologies, the level of technical support you will be responsible for will be significantly lower than managing the infrastructure within your team.  However, you will still be responsible for updating any external web applications that you use or Drupal modules you download.

Training and resources

There are many opportunities for training at CERN, including courses in languages as well as managerial and administrative skills. We recommend the following training and resources for sitebuilders:  

Technical training

Try the HR technical training catalogue for courses in Drupal, Sharepoint and other software.

http://cern.ch/go/technical-training

CERN technical training also offers courses on secure software development (general, web, PHP, Perl, Java) that are well worth attending if you develop web applications:

http://cern.ch/security/training/en/technical.shtml

The ENTICE community

The Entice project, led by the IT department, brings together Drupal stakeholders and users from the CERN community. Entice members meet on a regular basis and give input on the Drupal service at CERN and share what they are working on.  http://cern.ch/entice

The forum on the Entice site is a friendly place to ask questions.

Working with external companies

There are many external companies that offer web design and development services. Before you decide to work with external consultants to build your website, consider the following points:

  • When the work with consultants has finished, you will need to actively maintain your website on an ongoing basis. Do you have the resources and skills to do this within your team?

  • Make sure that consultants are aware of the CERN design guidelines that apply to CERN websites (see below).

  • Make sure that the consultants work within the framework provided by supported IT services, and work to computer security guidelines.

Note: When using external development services, you are still responsible for ensuring compliance with CERN Computing Rules [https://security.web.cern.ch/security/rules]. You are also responsible for compatibility with technical standards used at CERN (e.g. Single Sign-On), and for the security of the system.

Design guidelines

CERN’s web presence should feel connected, consistent and trusted. In order to help with this, the design process should follow these principles:

CERN Design principles

Design for people

The design process must start with the needs of the audience who will be using the website. Understanding your users is a critical first step in the design process (see ‘Understanding your users’ section for more information). If your audience falls outside of the core four CERN personas – as they may be more specialist, or smaller niche audience – then it is good practice to conduct research to gather information about their needs.

Understand context

How will your users be using the website? In what environment? Performing what tasks? The context of use is important to understand in order to design the most efficient website. You can establish those needs in close consultation with your users.

Create wonder

The CERN public website is designed to talk to different audiences in different ways. The four main audience groups are:

  1. General public

  2. Students & Teachers

  3. Scientists

  4. CERN People

Each group has a different comprehension level – how much they know about CERN and/or science – ranging from low for general public, to high for Scientists. The content is written to serve this.

The design also tracks the comprehension level in a simple way. For the general public, teachers and students the content can be underpinned with textural, rich imagery designed to inspire. For scientists and CERN people, this imagery is not appropriate and should not be used.

Design system components

Please refer to the CERN web experience library for developers – http://ux.web.cern.ch/assets/ – for guidance on:

Typography

The CERN toolbar

Iconography

Customising the CERN Drupal theme

Understanding your users

Know your users

The most important people on any website are the users. Even the most personalized website is a communication tool - if it does not speak to people they will quickly lose interest and leave the website. Ask yourself:

  • Who are my target audience?

  • What are they looking for?

  • Can they find what they need quickly and easily?

  • Is using the site an enjoyable experience for them?

Find out who your target users are and what they want, and make design decisions accordingly.

Collect data

Collecting hard data about your target audience will help you to make decisions on content, structure and design and explain these decisions clearly to other stakeholders. Try:

  • conducting online surveys - there are many Drupal survey tools available

  • conducting interviews face-to-face or through Skype

  • evaluating analytics data to learn about user behaviours on existing web properties

  • becoming familiar with best practices in user-experience design

  • consulting a professional user-experience designer

Personas and user stories

Once you have collected the data on your target audience, you may find they fall into several categories with different aims and needs. You may find it useful to distil this data into “personas” - simplified summaries of different user needs. Consult the CERN web writing guidelines for more information about personas: http://writing-guidelines.web.cern.ch/audiences

During the design and development process you should commission content and features that are targeted at particular personae. Writing content for a particular persona will help you to write at the appropriate linguistic and technical levels.

For example, your target audience may include students. A high-school student may be more interested in specific information to complete a homework assignment than they would be in highly technical information . For example:

Olivia is a student. She primarily needs to find information on CERN projects for her homework. She looks for this information on the web whilst at home. Her motivations are strong on Curiosity and Education. Olivia is uninterested in the “job search section” of the site.

Test prototypes

Build prototypes of your website and get real people to test them. Though you may think you have built the perfect website, it will not work for everyone. Your testers may find inconsistencies or errors, or have difficulty finding information. Listen to your users and act on their feedback. If you disagree with the feedback explore it a little further and try to understand it. The website is for your users, not for you.

Prototypes can be crude sketches, sticky notes on a wall, or real HTML. Use low-fidelity prototypes when you first begin: you may have to throw them away and start from scratch. As you get more confident in the prototypes you can move towards producing them in code.

Work out from the content and the interactions you want to encourage. Do not start with wireframes: begin with describing and facilitating the interactions that your users need.

Processes

Roles and approval

Not everyone is equal on a website. It should not be possible for an anonymous user who has found your site through a search engine to edit your webpages, for example. And those who build, administer or edit the site have different aims and needs. You should define the various roles that your website will need before you begin to build it.

At CERN all websites and applications should use CERN single sign on (SSO) as their authentication method. Roles and permissions for Drupal sites are tied to the e-groups system:

https://e-groups.cern.ch

Website status

When you request a new Drupal website you must specify its status: development or production. You also need to define its category as: an official CERN website, personal or test website. The status and category of a website may affect infrastructure choices behind the scenes, and to whom your site is available (test websites in development should not be indexed, for example).

Your new Drupal website will come with the module “CERN Dev-Status” enabled. This does several things:

  1. hides the site from non-authenticated users who are not on a CERN IP range
  2. tells search engines not to index your website
  3. puts a banner on pages that clearly identifies the site as being in development

When you are ready to move to production (i.e. launch the site for the public) you will have to disable this module.

Website lifecycles

Think carefully about who will take care of your site, how it will grow, and who will look after it after you leave CERN.

Once you create a website, you become its owner. If you don’t need the website anymore, delete it. If the website is needed but you pass the responsibility of it to someone else, don’t forget to move the formal ownership to that person – you can do this via the service portal.

If a website does become outdated, clearly label it as such: “This website is no longer being updated. For the latest on topic X, click here [link].”

Security

As a website owner, you are responsible for the security of its configuration, access rights and any code that was developed for it. Follow the least privilege rule: do not open up your website any more than is needed. Only people who need to have access to a given document, folder or functionality should be authorized to do so.

Users who have authenticated via SSO should not be granted privileges by default. Authenticated users include external account holders who have registered their own account.

Avoid writing custom code where you can. It is relatively easy to develop simple web applications, but it is less trivial to make them secure. As a result, web vulnerabilities such as Cross-Site Scripting (XSS) or SQL Injection are all too common.  For more information, see:

CERN’s security checklist for software developers

http://cern.ch/security/recommendations/en/checklist_for_coders.shtml

Securing web applications

http://cern.ch/security/recommendations/en/web_applications.shtml

If needed, take relevant training courses, and contact computer.security@cern.ch for help and assistance.



Content

Copyright

When adding content to a CERN website you must respect copyright. Make sure you have the appropriate rights to post all the content you intend to use, and that its use is in compliance with the terms of use stated by the copyright owner.

Terms of use for CERN audiovisual media can be found here:

http://copyright.web.cern.ch/

Content classification policy

CERN’s Data Classification Policy (http://cern.ch/go/DCP) defines different levels of security for content on CERN websites. Make sure you understand where your data is held and how it is classified. Protect it accordingly.

Writing style

A consistent writing style is essential for a unified reading experience across CERN websites. Follow the CERN writing guidelines for all written content in English:

http://writing-guidelines.web.cern.ch/

Follow the Guide de Typographie for all written content in French:

http://guide-de-typographie.web.cern.ch/

Language (translation)

CERN official communications should be in two languages, English and French. Ideally all content on official websites should be in both languages, but this isn’t always feasible. Sometimes your site will target just a single language audience (news in French for local residents for example). Think carefully about if and how you can support translation for you site. Get in touch with the Translation and Minutes group to see if they can support your project:

http://cern.ch/go/translation

Photo / image guidelines

You can use any image on the CERN Document Server (CDS) http://cds.cern.ch/collection/Photos?ln=en as long as you credit the caption with (Image: Photographer's name/CERN)

Contact the Visual Media Office in building 510 for photo requests to CERN's official photographer. They may take bespoke pictures for your story, or point you to existing images on CDS.

If you cannot find what you are looking for on CDS, contact your group leader for permission to use your group budget to purchase images from a service such as Reuters or Getty. You can also find photographs with a Creative Commons license on services such as Flickr - be sure to correctly attribute them.

Cropping images

The “rule of thirds” forms the basis for balanced and interesting images. Imagine breaking an image down into thirds (both horizontally and vertically) so that you have 9 parts. If you place points of interest in the intersections or along the lines your photo will look more balanced.

More information on cropping photos can be found here: http://ux.web.cern.ch/assets/

Trading off: File size versus resolution

It’s a good idea to run your pictures through Photoshop, crop them to size and then “Save for Web and Devices”. This way you can balance file size (and the time it will take a webpage to load your image) against resolution (how sharp the image looks).

Responsive design

Your images will need to look good at all screen sizes on various different devices. Beware of setting minimum image sizes - web pages may fail to resize them if you are too prescriptive in your CSS.

More detailed image guidelines are available here: http://writing-guidelines.web.cern.ch/formats/images

Services

Web services team in the IT department https://webservices.web.cern.ch/webservices/
CERN service portal http://cern.ch/service-portal
Graphic design service http://design-guidelines.web.cern.ch/graphic-design-service
Translation and minutes group http://cern.ch/go/translation

Resources

Drupal https://drupal.org/
CERN computer security http://cern.ch/security
CERN computing rules https://security.web.cern.ch/security/rules
CERN communications strategy http://communications.web.cern.ch/strategy
CERN data classification policy http://cern.ch/go/DCP
CERN design guidelines http://design-guidelines.web.cern.ch/
CERN user-experience guidelines http://ux.web.cern.ch/
CERN writing guidelines for English http://writing-guidelines.web.cern.ch/
Copyright terms of use for audiovisual media http://copyright.web.cern.ch/
E-groups https://e-groups.cern.ch/e-groups/EgroupsSearchForm.do
ENTICE community http://cern.ch/entice
HR Technical Training catalogue http://cern.ch/go/technical-training
Security checklist for software developers http://cern.ch/security/recommendations/en/checklist_for_coders.shtml
Securing web applications http://cern.ch/security/recommendations/en/web_applications.shtml

You are here