One small step for man, one giant leap for mankind.
~ Neil Armstrong
I come from a design school with a focus on exceptional magazine design. I love the beauty of a well designed periodical, and I've become disappointed with the internet's attempts to meet that caliber of design. I see two reasons why a typical online article doesn't measure up to a well designed print version. 1) Features in a magazine are specially designed each month with the content in mind, whereas a blogpost is only a holding place to be recycled for diverse topics and content. 2) Current web development doesn't naturally lend itself to the use of text columns. One of the most important aspects of a magazine design is it's use of the grid, without the ability to use columns, a designer has little room to create outside of typography and image choice.

So I decided to take a break from my normal work of simplifying the user's experience of complex data and features in a web app, to creating more interest in a static article. This project encompasses two objectives. 1) Take a normally bland article from Wikipedia and use what I know about magazine design to make it beautiful on the web. 2) Develop a system to accommodate this form of design on multiple screen sizes through the internet.

The most challenging part was finding a way to incorporate those oh-so-important text columns without developing a different site for each screen size/number of columns. My approach was to treat everything that could be seen on screen, without scrolling, as a magazine spread. I call each of these spreads a "panel". Each panel should contain one step in the story that the article tells, ideally accompanying the introduction, conflict, climax, and conclusion. By limiting a section of the article to a screen-filling panel, I created a set height for columns to work in. The user simply views one panel at a time, scrolling to the next when they've finished viewing all the columns. The key to distributing text across an undefined number of columns is to keep the designer involved. When the designer places text in a panel, they specify breakpoints appropriate for the differing number of columns the article may be viewed with. They place a 2-column breakpoint about half way through the panel text, and they place two 3-column breakpoints wherever would be most appropriate for a 3-column layout. This allows the designer to not only prevent text from jumping to the next column at an inappropriate place, but also to define columns to be used as whitespace. The column-flow.js file I created does the rest.

Click here to view the site