We had a really productive time at the Mark Boulton Design studio last week. In a nutshell, here's what we did:

• Designed a variety of states for the public homepage
• Built a timeline application
• Established a new, scalable architecture for theming
• Worked on responsive image switching
• Built a new directory of CERN websites
• Laid the groundwork for a news section targeted at CERN people
• Moved to a new CSS authoring framework

Mark: This week, my focus was on two things: the differing 'states' on the homepage, and finalising the typographic foundation (grid, typography). The screenshots and prototypes of the homepage we've shown to date show event displays front and centre, with updates appearing in a sidebar. But sometimes a story will require more of a focus and so I worked on describing various homepage states that the editorial team can use to give certain stories more prominence. The result is a system that allows the editorial team – with a simple flip of a switch - to completely change the layout and display of stories.

Silvia: I worked on the technical implementation of the 'switches' for the homepage that Mark describes: how to change the state of the homepage depending up the story; what fields to use to manage the stories; what views, rules and permissions are needed. I also did some tidying up of our version control repositories to make sure that our code is neatly and safely stored.

Alex: I worked on the grey bar and the websites directory. The grey bar now links to directory and includes a way for end users to tweak search (such as opting to search only in the current site). The grey bar has now been optimised for mobile and includes support for high-resolution displays such as the iPhone 4. I reworked the information architecture for the directory, providing a consistent means to locate links spatially and improving the findability of content on that page. To that end I created a fluid page that maintained position all the way down to mobile sizes, and introduced an on-page search helper that highlights keywords on the page as the user types. This allows for links to be indexed, so that a search for 'food' might highlight the link to the restaurants. I'm pretty excited about getting this into beta and testing it out.

Jen: I worked on getting a consistent architecture going at the theme level. There are actually a whole bunch of themes coming out of this project: a default theme for all CERN Drupal websites to use, for the users' section, for the public section, for the timeline application and so on. What we don't want to do is build all these themes separately: they need core theme DNA that can be tweaked centrally as we go forward. So I stripped all theme assets back to a core, shared set of properties - codenamed Pony - and rebuilt the various themes on top. This will mean a few regression bugs over the next couple of weeks, but it will be worth it in the long run. I also convinced the team to move all CSS development to Sass and gave a crash course in Sass / Compass development.

Cian: I spent most of the week working with Nathan, figuring out how to deliver engaging timelines. The history of CERN is not a single narrative - any timeline trying to collect all its scientific and political advances, experiments, and biographies on a single line quickly becomes overwhelmed. In addition timelines can take considerable effort to curate. We needed something scalable, filterable, with a relatively low editorial overhead that would be enjoyable for the end user. So we decided to build a system for making timelines rather than the timelines themselves. I built a website to serve as an editorial database of events. Nathan will harvest a feed from the site and display events on simple, visually pleasing timelines that users can build themselves and embed on third-party sites. So eventually anyone at CERN will be able to log in to the timeline builder site, choose the events they want to display, and embed the custom timeline on their site. I also built views for the new users page, and have come away with a satisfying list of editorial "to-do's" from the exercise. Working out rock-solid rules for when and why stories hit the homepage is just one of the many brain teasers ahead. This will be crucial in order to maintain quality, consistency and avoid land-grabs.

Nathan: I worked on the front-end development of the timeline application, and made a start on the responsive image code. Several interesting challenges came out of these. How to make very cluttered timelines easy to navigate, for instance? I took the test image API that the CDS team set up for us and tested swapping out images (so that we serve mobile-ready images by default and serve higher-resolution versions where appropriate). I looked at ways to measure bandwidth by calculating the download time of the original image in order to determine whether the image should be swapped out, rather than relying purely on viewport widths.

So, a busy week. We're hoping to have another week-long code sprint before the end of May, and we're still aiming to get a beta version out in June.

As always, feedback, comments and questions are most welcome.

Hello! Over the past few weeks, I've been putting together a style guide for the use of English on CERN websites. The aim is to ensure a consistent reading experience across CERN sites, strengthening the CERN brand under a single writing style for English.

To start the ball rolling, I've built the "writing-guidelines" website, available to all at CERN.  The site is intended as a "best-practice" document - a reference tool that I hope will make life easier for writers and editors. The website is in two sections: Language and Formats. The Language section concerns the use of English for all CERN sites. The Formats section is designed with input from the communications team to target specific audiences with the new public website.

Most importantly, the guide is intended to stimulate discussion. It is a fluid resource - I anticipate changes and additions as new points of style or writing scenarios come up. In any style guide there will be some arbitrary decisions; some uses of English are neither correct nor incorrect (how you format dates, for example). Consider the current guidelines a "stick in the ground" to stimulate discussion.

There are challenges to a unified English style at CERN. The translation team deals with a wide variety of printed document types, each with their own conventions and levels of formality. They are currently working on a document for (non-web) printed material, which I will make available on the writing-guidelines site when it is ready.

Please use the writing guidelines when you write in English at CERN, and spread the word that the site exists. If you find any errors or omissions, let me know - the guide will only work with help and debate from writers and editors. For use of French for websites and printed materials at CERN, refer to the translation section's comprehensive Guide de Typographie.

In addition to the writing guidelines, I'm building a site for Fabienne Marcastel's design team, who are finalizing CERN's design guidelines – a set of rules to establish CERN's visual identity. The design guide includes rules on how to use the CERN logo for example, or how to mark CERN vehicles. I will let you know as soon as this site is available.

These two resources will complement the ‘GEL’ guidelines that we are working on to define common content objects (such as slideshows or menus) for websites. GEL will describe a global experience that all CERN websites (Drupal or not) can align with.

I look forward to your feedback in the comments below, and the discussions I hope these sites will stimulate!

Cian, Silvia and I will be joing Mark Boulton's team in their studio next week for a code and content sprint. One of the main objectives is to build out the prototype of the users' page (both the 'news' or 'updates' section and the 'directory'). We want to get the authoring and workflow tools into the hands of the communications group's editorial team as soon as possible, ready for a beta launch of the site. What else will we be doing?

Responsive image switching. We want to be able to serve small (240px) images by default and then switch to larger images where appropriate (based on screen size and, if possible, connection speed). There is a lot of work behind this and it's one of those 'invisible' tasks that may make people wonder why this site is taking so long to build. We also want to be able to store images directly in CDS, so Silvia and Ludmila are working on modules (on the Drupal side) and APIs (on the CDS side) to make all this happen.

Alternate font serving. We are using PT Sans for both the new website and the 'cern' Drupal theme. At the moment we're serving this directly from the Google font API, but our colleagues in computer security have pointed out some possible concerns with this so we are going to switch to local font serving for pages on 'https'. This will require some care to make sure that users aren't hit with slow page loads.

Toolbar injection. The grey bar you see at the top of this page (on larger screens) is served at the moment through a Drupal module that Silvia built. We want to move this into static HTML so that it can be injected across many sites on the server side. This will eventually become a key unifying branding and way-finding element across many CERN web properties. 

Design alternate states for the homepage. Sometimes we'll want to highlight big stories or events via the homepage. What's the best way of doing this?

Build timelines. One of the key tools for the 'About' section is timelines: CERN's history, the story of the web, CERN's DGs, the building of the LHC and so on. There are many time-delineated stories that we want to tell, and we need a system for telling them.

Beyond this, of course, we have a myriad bug fixes, feature enhancements and plain old tasks to get on with. Many of these have been informed by the information that we have gathered during calls for feedback: thank you to all those who took the time to do some testing. I look forward to showing the next releases: possibly another alpha in May, or if we're feeling very confident then straight to beta in June.

The redesign of the users' page - the site that we see when we access cern.ch from the CERN site and that many of us call 'the CERN homepage' - is going to be a crucial part of the new website, and we've been working hard over this past month to define how this will work.

The current users' page provides several distinct functions:

1. a directory: links to other sites and applications;
2. 'actions' such as finding a phone number or a building, booking a room or raising a service portal ticket;
3. updates and editorial content: information about what is happening in the CERN community and the wider HEP community.

At the moment these functions all coexist in the same place and we have a noisy page - albeit one that we are used to and in many senses performs rather well. This page is under some strain, however - if you want to announce a conference, for instance, your event has tough competition for exposure - and we think that these functions (directory, actions, editorial content) would be best if they were separated.

We want the 'actions' to move to a configurable dashboard that is available to you whenever you are logged in. As I've said on this blog before, we're splitting this off into a separate project; but it's still very much in our minds through this design process.

The 'directory' is going to be a key jumping off point for CERN people, so we are thinking of including a link to this in the toolbar - the grey strip you can see at the top of this web page.

And finally, the editorial content needs more space and needs to be integrated with the Bulletin. Scientific information also needs to be separated from community information - we see the former going in to the 'scientists' section. Below is a screenshot of a prototype that Mark and the team produced a week or so ago that shows the type of content that could appear on the editorial section. We'll be working with the Bulletin team to refine this over the coming weeks.

A lo-fi prototype version of the editorial page aimed at the CERN community. Note that we're trying out the 'At CERN' label instead of 'CERN people' - what do you think?

The CERN core website redesign is a project that is running in parallel with several initiatives:

1. building a new configurable 'dashboard';
2. defining a pattern library and branding guidelines that all websites can use;
3. building a new Drupal theme for CERN.

You may have noticed the site looks a little different now: this is the beta version of the theme in action. There are some problems to address before it's ready for the wild: we're going to fix things up iteratively before 2 April. I'd appreciate your help in picking up bugs - feedback form available here: https://change-surveys.web.cern.ch/cern-theme-user-feedback

Thanks!

The intent for the first alpha was to get theming in Drupal and to test out the integration of event displays into the homepage. We're going to freeze this first alpha now and move on to the next iteration where we'll be working on getting the content workflows in place and begin to build out the 'CERN people' and 'Scientists' sections. We'll try and get this second alpha out by the end of March before we move on to the next phase. I hope we can get to a beta in May, where we can start running this website in parallel with the current public website.

Thank you to all those who gave feedback after the first alpha.

In the context of the new and exciting changes foreseen for the CERN website based on Drupal, the Multimedia Service acts as the store for all the multimedia data presented (images, movies, lectures, ..), serving the streaming and downloading needs. The Multimedia Service is part of the CERN Document Server, and lots of work is going on behind the scenes in CDS to make its multimedia resources available for easy integration. Our main focus for now is making images and movies easily integratable in Drupal pages. More work to facilitate the embedding of other types of resources, like lectures or publication lists (that can use RSS feed for now) should follow.

As one of the first steps in the CDS-Drupal integration, we have been working on improving the support for embedding videos. This feature is still being enhanced, but a stable API is now available and accessible to everyone. The embed code for a particular video can be found on the video's CDS page, under the 'Embed this video into your page' button.

Example of embed code:

<iframe src="http://cdsweb.cern.ch/video/CERN-MOVIE-1967-001 " allowfullscreen="" frameborder="0" height="360" width="480"></iframe>

What did we improve?

• Integration and accessibility: we are now offering a clean and short embed code, using the <iframe> tag (similar to YouTube, Vimeo, and other video sharing websites).  This gives us the possibility to offer device-specific embedding code. Based on the formats available for a video in CDS and on the viewing platform, one of the following modes is selected: either HTML5 (especially useful for iPad, iPhone and Android), or Flash, or if neither are possible, as a fallback, the download. Also, we are offering an easier way to customize the size of the video on the page.
• Persistence: The <iframe> tag points to a persistent URL, meaning, that even if the internal links of a video change (ex: the streamer server technology gets updated, formats get regenerated at a different location, a record gets deleted and re-uploaded with different metadata) or if we need to modify the configuration of the player, the URL in the embed code will never change, guaranteeing the availability over time of the resource.  
• Sharing and connectivity: Inside the embedded video frame we are offering two cool features that can be very useful for the viewers of the embedded video: 1) Share: provides a link to the original record in CDS, the code for embedding, and buttons for quick sharing on Facebook and posting on Twitter. 2) Related: a list of related videos, computed on the CDS Videos collection, based on metadata such as title, keywords, and description.

The embed code is currently available on all the CDS video pages.
If you get the chance to test it, it would be great to get your feedback!

The first alpha version of the new website is here. But before you have a look, just a few words on what this release is, and what it is not.

This is not a finished, working website. There are content gaps, broken things, things that are plain wrong; it is the first step of getting our designs into real code, and there is a long way to go in this process. It is a hint of what the website will be like. So why show you something that is not ready? Why not wait to reveal the gleaming, finished product?

At the very outset of this redesign process we realised that we would need to work in an open, consultative way because CERN is a community, not a corporation. Lots of people have different and valid needs and opinions, and we have been listening and talking with as many of you across the community as possible. This has led to us adopting an open process throughout the research, prototyping and testing phases so far. The current production phase is no different: we are showing you what we are working on so that you can give us feedback.

This first alpha release was created to answer the following questions:

• How can we get events and updates from the experiments in to the homepage?
• What are the issues associated with getting the designs into code - into Drupal?
• How does the basic information architecture and navigation stand up in a working website?
• What is missing from our designs?

This release is primarily designed to answer questions that arose within the design team. There are some notable things missing from this release, including:

- The dashboard. The idea to create a configurable 'dashboard' of widgets for authenticated users had a really positive response in testing. But this is a big project in its own right and it is currently being discussed by management; it has been 'carved off' the web redesign as a separate project. 

- Three of the main sections are missing completely: 'Students & Teachers', 'Scientists' and 'CERN people'. These are in the pipeline and you will be able to see these in subsequent releases.

- Search. When we tested the current web experience there was a lot of feedback that CERN's search tools were inadequate. We know that search is core to building a good web experience. The alpha uses Drupal's native search; IT is working on integrating this with CERN's search in a later version.

- CDS integration. We are working with the CDS team to make sure that videos, images and other resources are served and embedded directly from CDS. This integration work is not yet done, so in this alpha we are using placeholder images and video.

- Machine status on the homepage. There will be a widget showing which experiments currently have beam. We are still working on this with help from colleagues in the Beams department.

- History timeline. We realised early on that an interface for displaying timelines (the building of the LHC, for instance, or notable events in CERN's long history) would be important. We are still working on this.

So here it is:

The layout is responsive: it will appear differently on viewports of different sizes. Note, for example, how the primary navigation changes when the viewport is reduced in size - the example to the far right is representative of what users of mobile devices might see:

As I explained in a previous post, we are building this out from static prototypes in HTML5. You can see these here:

http://www-dev1.web.cern.ch/sites/www-dev1.web.cern.ch/files/static/

The content you see on the static versions should be completely ignored, but you can get a hint of what some of the sections that we have not yet built out in Drupal might look like. The front page, for instance, has two widgets that are missing from the alpha1 version: 'accelerator status' and 'where's beam'. I think these will be merged into a single widget in future builds.

And here is what we've built out in Drupal so far: http://www-dev.web.cern.ch/

There are known issues with Internet Explorer (even version 9) that we are working to fix now before moving on to the next iteration. I thought it was important to post this alpha as I had announced rather than have you waiting longer for it. I will update this link with an updated version as soon as we have it. In the meantime you will have a better experience if you try it out with Firefox, Chrome or Safari.

As ever, your feedback is appreciated - and necessary. You can use the comment form below for general feedback and comments about the redesign process, but if you have feedback about this alpha release please use this survey form (sign in required).

After several development iterations and tests we finally managed to fix a workflow and a format to import event displays and their metadata on the new CERN home page.

We will collect and manage the events from the experiments via a JSON feed on the CASA website and then expose them to the home page where they will be displayed.

The format we propose that the experiments can use to feed their events is documented on the CASA site. Please note that there are some requirements that you need to follow carefully if you want your feed, and your events, to be accepted (maximum length for title and caption; size, format, background color for the event image, …).

Another possibility you have to upload your events is doing so manually via the CASA interface. This way could be handy if you don’t have many events to upload.

At the moment we are already collecting data from several experiments (CMS, LHCb, NA61), if you wish to collaborate you can get in touch with me via mail or this contact form.

Your feedback is welcome.

Before the Christmas break I promised an alpha version of the new website in February, and we're busy working on this now. It's always an interesting phase of a project: you've done your research, you've tested prototypes, you have your content strategy and you already have some markup; all that's left is to build the thing, right?

There are always challenges at this point. Connections to other systems, fighting with your content management system to make it produce the HTML structures that you want for your clean code, architectural and perfomance issues.

Here is a screenshot, for example, of what the homepage currently looks like:

That gorgeous event display from the NA61 experiment is coming through from the 'Casa' application that Silvia has developed to manage events on the homepage. But wait, it's in landscape mode and is pushing the rest of the content off the bottom of the page! We hadn't thought of specifying image orientation or manipulating it. So that's a little problem that we have to solve, and the more we get into this building phase, the more of these little problems we're facing and solving.

So this first alpha release is taking time, and we're learning a lot, but we'll try and have it ready for 23 February for you to look at. In this first alpha release the focus will be to have homepage available so that experiments can see what kind of data we're looking for in terms of events. We will also have a fair chunk of the 'About CERN' section that is targeted at the general public (Joanne is the persona we created to represent this audience). The sections targeting the scientific community and the CERN community will not be ready at this stage. 

We'll be working with Drupal's native XHTML output for this release, and the focus of the second release will be to rebuild in crisp, clean HTML5 as well as building out the other sections.

Behind all this work we in the communication group are also working on the editorial workflows that will support the new site.

As always, we welcome your questions and comments.