Designing in the open

Open journalism is fundamental to the Guardian. It emphasises a two-way relationship between journalists and readers that shapes our editorial strategy. This principle of openness extends to the development of the next incarnation of the Guardian on the web and native applications. This approach to design has given us a huge amount of valuable feedback from many of you already and I hope this piece will answer some of the questions raised.

As a piece of design and development this is one of the most complex we have undertaken, and there are some key design principles that shape our direction of travel.

Currently our mobile web, desktop and native apps all look and feel very different, so our goal is to create a consistent and cohesive design across all platforms.

Key to this is a new responsive modular grid system. This will be the design ‘substrate’ across all platforms. Fundamentally the hierarchy, spacing and relative sizing of content components should be consistent across all breakpoints. It also allows us to display more content on bigger screens while keeping a consistent look and feel on whatever device you choose to enjoy the Guardian.

For the first time we will be using our unique typography consistently across all platforms. The font at the heart of this is Guardian Egyptian. Created for the newspaper and so far only implemented in our iPad app. You can know more about its origins, key elements of its character and its aesthetic strengths here.

We are also looking really hard at the reading experience, both in terms of comfort and accessibility. The focus of this work has been around the layout of articles, the impact of additional content around the text, and of course the text size.

The latter has been the cause of some wonderfully passionate feedback from those of you who have been exploring and using the beta site. Lots of you think the text is too big and the page very sparse. Text is currently larger than on many sites and the article presentation is much cleaner but there is good thinking behind this which I will explain.

The web has always been a challenging medium for really enjoying long-form writing. There are a number of interesting questions that arise when one begins to look for ways to improve this. Is it the physical experience? As adaptable as we are most of the people reading this I assume will have first learnt and then continued to read using hand held technology, book, newspapers, magazines. These all provide clear focus on the text and the physical proximity provides an experience that is less interrupted by peripheral distractions. Mobile technologies (phones, kindle, tablets) provide a similar experience. The proximity of desktop/laptop screens are at arms length and there is a lot more peripheral interference from both the environment and from the screens themselves (browser chrome, other open on screen windows and on page clutter surrounding a piece of text). Could it also be an issue of presentation? Would less clutter help? Apple Safari’s reader mode and programmes such as Instapaper are attempts to deal with some of these issues. The adjustments we have made to text size and layout, across both mobile platforms and desktop, is a test to see if we can provide a more comfortable reading experience and to try and answer some of these questions. We are not alone in exploring this. Some of you may be familiar with a product called Medium. This has been widely praised for its clear simple design that presents the written word in an elegant easy to read form.

I thought it would be valuable to show you a quick visual comparison.

Text on our current site

Text on our current site

Text on our beta site

Text on our beta site

Text on Medium

Text on Medium

As you can see, Medium has gone even further in increasing both text sizing and line spacing. One of the key challenges that have emerged from feedback from our test so far has been how to get the balance right between ease of reading and not making it feel as if one has to scroll too much. As regards scrolling, this is another interesting area where the difference between touch screen technologies and mouse/trackpad driven has an impact on reading. I would be interested to know if like me, you feel that proximity and disconnected way of scrolling with mouse/trackpad feels more jarring than the more tactile touch screen experience, and has an effect on comfort of reading and orientation in the text.

Explorations of text sizing and adding additional elements on the articles and section pages are ongoing. These are not the final designs, just the beginning, and over the coming weeks you will see the design of the site evolve. One of our current areas of focus is an improvement to the navigation. You will no doubt by now have seen the first iteration of this. We are designing this from the ground up and evolving a site as fluid and challenging as this needs your input so please continue give us feedback to help us shape the future of the Guardian.

There is also the comment thread below, which will be open for the next few days.

Comments


Click here to see the comment page on theguardian.com.