This draft document summarises recommendations from the CERN web team in the communications group. Comments and feedback welcome.
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.
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
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.
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.
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:
Try the HR technical training catalogue for courses in Drupal, Sharepoint and other software.
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:
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.
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.
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.
The CERN public website is designed to talk to different audiences in different ways. The four main audience groups are:
Students & Teachers
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:
The CERN toolbar
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.
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.
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.
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:
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:
- hides the site from non-authenticated users who are not on a CERN IP range
- tells search engines not to index your website
- 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.
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].”
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
Securing web applications
If needed, take relevant training courses, and contact email@example.com for help and assistance.
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.
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:
Follow the Guide de Typographie for all written content in French:
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:
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.
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).
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
|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|
|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/|
|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|