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.