May 15, 2014
Das Referenz: Wikipedia Redesigned for iPad
(A Shipping Product; Not A Mockup)
Let’s get this straight: UI-wise, Wikipedia teleports its audience into the year 2004. Not surprisingly, there has been vibrant discussion recently as to how Wikipedia could be updated to feel contemporary. We’ve seen a few good (and even more mediocre) design ideas, but many feel like eye candy without substance.
On a different note, changing this established platform’s design and selling that to a conservative community is likely to be hard, or even impossible, even if the changes are tiny. Too many stakeholders will always ensure that things never really move forward. Apparently, some people are already fed up with the whole discussion and are begging designers to stop whining. But at Raureif, we don’t think this should be the end of the story.
The good news is that Wikipedia’s license allows anyone to take the great community content and shape it into something completely different. So we figured: instead of joining the crowd of designers who are whining and making sexy Dribbble shots, why not actually build the Wikipedia iOS app we’ve always dreamt of? Why not build a sleek app with Wikipedia’s content, but with a reimagined UI and a typographic treatment that is as thoughtful as the hand-crafted design of 100-year-old encyclopedias? (Digital encyclopedias do not have to look like unstyled HTML from the 90s.)
So build it we did, and we called our app Das Referenz.
Yes, we’re based in Germany.
In this article, we will dive into our design process for Das Referenz and discuss—in detail—a few of the design decisions we made and some of the struggles we had along the way.
For us, it was clear from the beginning that using Wikipedia means reading articles, not just looking at pictures. That’s why we let the text take center stage instead of following that media-centric approach we’ve seen in other Wikipedia redesigns.
Typeface choice
When we approach any UI design problem, we think about appropriate typefaces from the very beginning. Great legibility and readability are essential for any user interface, but especially if the core feature is long-read text—like, say, Wikipedia articles.
Gorgeous details.
Marat has been a favorite typeface of ours since its release in 2008. Marat’s designer, Ludwig Übele, is well-known in the typographic community for his quality text faces. Marat has a balanced texture and no mannered quirks that would distract or stick out while you read. A well-versed expert would surely be able to point out the Dutch design tradition formed in The Hague, and would also notice the unusually deep ink traps in many letters when seeing the letters enlarged. But to the layman’s eyes, the typeface’s shapes disappear and the text content shines. And that’s exactly what a great text typeface must deliver.
For small sizes, for tables, and for UI controls like buttons, we wanted to equip Das Referenz with a sans-serif typeface, too. We didn’t have to look far: There is an official sans-serif companion to Marat called Marat Sans. The proportions match perfectly with its serifed sibling, and the fresh American Gothic-inspired atmosphere makes Helvetica look like a thing from the past (which it is).
We have licensed four styles of each Marat flavor to include in Das Referenz and yes: we use all of them. Not just because we can, but because each style serves a specific purpose in our design (and because Wikipedia articles may contain Regular, Bold, Italic, and Bold Italic).
A few days into designing and coding Das Referenz, we stumbled upon an article about a programming language—and we were not happy with what we saw in the source code: Plain old Courier sitting there with all the dust it has gathered in the past 60 years. (Courier was designed in 1955 for an IBM typewriter.) Fortunately, not long ago Jan Fromm released what we consider the best programming typeface in the world: CamingoCode.
It’s free, and it’s highly legible, modern, and space-efficient. So we added CamingoCode to Das Referenz. And while we were already at the task of optimizing code appearance in our app, we also introduced a decent color scheme for syntax highlighting. Nerdy programming articles—like Erlang or Node.js—now look outstanding, even to code-savvy eyes.
Typography
A perfect typeface is a good start, but typography involves way more than picking fonts.
The classic encyclopedias from 100 years ago went through the watchful eyes and hands of the master typesetters and printers of that time—mostly well-educated craftsmen with attention to detail.
What do we have nowadays? Community-generated text, algorithms, OpenType and web technologies. And—in meatspace—a background in typography and coding. Not bad, so we tried to make the best out of it:
Justified text in automatically flowed columns is a no-go for us, because great full justification cannot be done without quality control by the human eye.
So: Flush-left, ragged right and CSS3 hyphens to the rescue!
Ligatures—replacing a problematic letter combination with a pre-made glyph that connects or separates these letters beautifully—are enabled by default in iOS 7, and fortunately Marat has them. So picking the right typeface has automatically made all headlines and paragraphs more beautiful, out of the box.
We can’t stand dumb quotation marks, and they are everywhere in the English-language Wikipedia. That’s why we run a quote-educating algorithm on every article in Das Referenz. It’s called SmartyPants and was originally written by John Gruber. (We use a rewritten C implementation called Hoedown for maximum speed.) Now, in most cases, quotes and apostrophes look how they’re supposed to:
Color scheme and illustrations
Combine a typeface and a color and you have a brand—didn’t Erik Spiekermann say that? We believe that quote is perfectly true, so we added a stark yellow color to our high-contrast black and white and grayscale typography—and there was our brand.
We wished for the article content to shine in our app, so we were very careful with adding chrome and additional visuals. Das Referenz also desaturates all images in articles so they do not distract while reading.
Layout
It’s no secret that wide columns of text are hard to read. In fact, too wide columns are one of our major gripes with the Wikipedia website. The ideal range of characters per line is something that must be adjusted by a typographer and should never be defined by the size of a browser window.
In Das Referenz, we have two slightly different widths for portrait and landscape mode, and exactly three settings for the font size: normal, larger, and extra large. All of these sizes work well with our specific text column widths.
In a perfect reading environment, images don’t change the text flow too often. For that reason, we decided to keep the images out of the article text and move them to a side column. Some headlines also live outside of the article text: We found that the <h3> headlines in many articles helped best when we were trying to find a specific passage, so we made these headlines even easier to discover by moving them to the left column with the images.
Tables
Reformatting tables in Wikipedia articles is harder than you think. Not only because heavy inline styling via various HTML attributes is common practice on Wikipedia, but also because tables are often used for arranging stuff visually in the layout. This may sound odd to the modern web designer and it brings back memories of 90s web design again, but table layouting is common practice among the Wikipedia community. We don’t want to rant about this—it is great that everyone can edit Wikipedia articles—but it feels like the Wikipedia tools give web amateurs too much freedom to create articles without semantically meaningful markup and the articles often lack unified means of storing information.
We chose to go down the challenging route and reformat tables as carefully as possible. We did not like that other third-party Wikipedia clients could open tables in separate views with the original styling as we wanted to improve the tables, too, and not require the user to tap for every table.
Vertical lines in tables are never ever a good idea. They add clutter and don’t help. Unfortunately our reformatting also removes the right-alignment of the numbers columns.
The result: In Das Referenz, some tables will always look a little odd with our approach, but the majority of tables are easier on the eye after we have applied our styling magic.
We’re still improving how we deal with tables. We could probably spend a few more months just on this.
Interactions
The most important use case for Wikipedia is filling the search field and choosing the correct search result.
We found it important to have the feeling of staying in context—this is why the search results list is always visible in the background. You can always go back to your query and the other results without thinking. And without entering your search query over and over again.
Article panels slide in from the right and stack up, so navigating between articles feels like moving around sheets of paper. This key interaction is playful and natural, so users forget they are using our app while being immersed in it. The same is true for the image zoom—with the spring-loaded animations it feels like picking up photos and holding them up for a closer look.
But isn’t all this skeumorphic? Well—who cares? Some natural paradigms will always work great.
All search terms are recorded in the background and listed as a wordy wallpaper behind the search results. You can tap any word to start a new query for that term.
We often do research in English and German. So Das Referenz always puts your iOS device’s language on top (if it’s not English), followed by English.
Other language versions of an article can be accessed in a handy popover. Instead of just showing languages in a list, we directly show what the article’s title is in all available languages:
Information visualization
The search results visualize at a glance how long each article is:
The longer an article, the taller its row in the list of search results.
We have started experimenting with the Wikidata API. Wikidata is an amazing project by the Wikimedia folks that collects facts of all sorts as semantic, accessible, and comparable data. So, for example, when you look for a celebrity on Wikidata, you will find out when that person was born and, if applicable, when they died. We use that information in Das Referenz to show a simple timeline illustrating when and how long the person lived.
We like the idea of sprinkling traditional Wikipedia articles with bits of visual information pulled from Wikidata, so we will surely add more of these information visualizations in the future.
Executive Summary (TL;DR)
Wikipedia is ripe for a thorough redesign because it’s not 2004 anymore.
We designed and built Das Referenz: an iPad app that changes Wikipedia according to our taste in typography, visual style, and interaction design.
Update May 2017:
Das Referenz is not available any more, but there’s a much improved successor called V for Wikipedia.
