Image shows the iteam magazine of Swisscom IT Services on different screens

Revolutionary evolution: the redesign of Swisscom IT Services' iteam magazine

05.08.13

Swisscom IT Services‘ brand new iteam magazine: an excellent viewing experience on every device.

A revolutionary overhaul

In 2007, Nothing Interactive was responsible for creating the first version of Swisscom’s iteam magazine, an electronic magazine for the staff of Swisscom IT Services. Five years later, we are the ones taking the magazine to the next level: replacing the old Flash-based solution with an autonomous CMS, we revolutionised the magazine for the mobile age.

Keeping up with the increasing importance of mobile devices as terminals, our mission was to find a state-of-the-art, multi-lingual and fully responsive solution which enables the users to access the magazine from any device. We were to completely overhaul the magazine and produce a new version based on the content management system Drupal. Thus, we were able to create a complex solution with many sophisticated features.

A magazine for any device

For the new, Drupal-based iteam magazine we used Drupal’s book-module, which is part of the core, and made some custom additions so as to fit it into the multi-lingual setup. The key was to optimise the magazine for the mobile age. Not only is the new iteam magazine accessible from any device, it also uses media queries to detect which device is being used to access the site and chooses the right display accordingly. Creating three different layouts, we made sure that the viewing experience for tablet, mobile device and desktop remains optimal - and no matter which device you use, you will always be able to access all available content.

Responsive in the minutest detail

Another nifty feature of the magazine is that pictures will resize automatically according to the accessing device. Using modules such as breakpoint and pictures, we are able to deliver alternative image sources based on device capabilities. Thereby, it is possible to prevent an unnecessary waste of bandwidth on mobile devices while optimising the display for desktop users. Additionally, Retina and other high density displays will get their specific image size.

Even the typography is as responsive as possible, so that the reader is given the most comfortable experience possible, regardless of the screen size of the device. What we did was more than simply shifting around the elements which are on screen, our design attempts to breathe the right amount of space into the layout as well. No matter what device you use, the design will be adapted to create an optimal viewing experience of the magazine.

A future-proof solution

Having Drupal as the magazine’s base construct will also allow for a better handling of past content. For instance, it is possible to implement a search function which allows the reader to search for magazine articles on a specific topic. This would also allow to assemble a constellation of existing articles for special issues on a topic, for instance for a best of issue. There are lots of new options, and further improvements are sure to come.