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.

We put some fun into the error messages, using vintage illustrations from an old German encyclopedia, Meyers Konversationslexikon.

Layout

27-inch glory

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.

Before & after:

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.