This site has been around, in one form or another, since 2006. It started out on GooglePages, then Google Sites, then moved to Blogger and finally a couple of months back I decided to move it to my own domain, along with a complete reworking of the site. That's the when and here is the why and how of the new Parallel Transport.
Using the right tools
For a good many years Parallel Transport existed as a blog on Blogger; a collection of some random scribbles, art and photography, and it was quite sufficient.
But, the process of blogging itself was dull, uninspiring, and frankly, quite boring. I wanted to do more. I wanted to make and post new kinds of things. I wanted to design each post, rather than just put words in a static template. I wanted to play with the typography. I wanted the website to be responsive. I wanted to experiment with these new web design ideas that I was reading about.
The root cause of my troubles was the very restrictive templating engine and CMS. The organisation of content, structural data and themes in Blogger is very simplistic.
The main structure is the template, which contains everything from the raw visual styles for the theme, to the templating code needed to build all of the different pages, along with scripts. The secondary structure is the posts. Here the metadata chunk consists of the title, labels, and a search description. All other things including a thumbnail, a snippet, custom styles and scripts needed only for that post, go into the content chunk. All these different and independent pieces of data are then naively dumped into the final page.
This final page is not only messy and redundant, but also needlessly large.
The main organisational idea in the new system is to separate different types of data that are related to an article or post into modular units. For instance, the Archives page only needs the metadata about an article, but the page for a particular article needs the content, visual style and more. It is easier to manage and customise these different views if they can pull the appropriate chunks of data as and when needed.
The content of each article is stored in an HTML file while the metadata like title, thumbnail, labels are all stored in a database. Additionally, each article can have its own styles and scripts stored in separate CSS and JS files. This way the content, the metadata, visual styles and interactive parts are cleanly separated and can be handled individually.
Putting it together
To build the final page, the appropriate data needs to be pulled and put together in a page. To accomplish this content jugglary I used the powerful templating system of Django, a Python-based webframework.
In Django, each kind of view has a template that can access the data it needs to render the requested page. It can ask for metadata about an article, some global visual styles, maybe more styles for specific parts of the article, some scripts for the interactive elements. The template then puts these chunks of data in their appropriate places to build the final page.
Django’s templates can inherit properties from each other and so the templating code for a particular structure can all be written in one place, and reused. This principle of Don't Repeat Yourself (DRY) makes the code very manageable and easy to experiment with.
This is pretty much what Blogger templates do, but they put everything into one big messy file. And now I have complete control over what gets put in a page. I can make the website small, fast and clean, all the while keeping the code modular and reusable.
In order to make the process of posting more interesting, I decided to tailor each article as a stand-alone. The idea, inspired by magazine design, is that the visual design of each article is adapted to suit its content. This allows me to be more creative with the presentation of the article. A lot of web-designers write this way and the results are amazing.
Having already organised everything in the backend, I can now easily play around with the layout, the typography and colours of every article. This seems like a lot more work than just writing something into a template, and it is. But, I think it is very rewarding. I am not constrained by a visual theme anymore and can actually adapt the look and feel of an article to its message and content.
Now with my new neat and clean system, this is much, much easier than before. I do not have to rewrite some piece of script or style into every post. I write it once and then insert it into any page that wants to use it. To do this for styles, I use SASS which is pretty much a templating language but for CSS.
Though I wanted the freedom for each article to potentially have its own visual design, every page should seem like a part of the same website. I have kept some elements the same across all the pages; the header on top, including the Parallel Transport logo, and the footer on the bottom remain consistent throughout the site. All the visual juggling takes place in the main region in the center. Even so, there is an invisible structure holding the entire layout together.
This is a vertical layout grid designed in Gridset.
You can see the grid in overlay using the switch in the footer. Every element, on any page, is anchored to the lines of this grid. Pages like the Archives, use this grid to tile the list of articles, sometimes into an asymmetric pattern. Individual articles arrange the content in their own ways all the while following the gridlines.
Another common theme through the site is the typography. Though each article can introduce its own typefaces into the page, the default typefaces I've used are Quattrocento for the common body text and Josefin Slab for headings and such. Though they are both serif fonts, I think they work well together; I won't pretend to be an expert on typography by analysing this choice. I just like it.
Responsive design, first espoused by Ethan Marcotte, is the idea that a webpage should respond and adapt to the device accessing it. Since the layout on this site is tethered to a grid, making the grid responsive automatically translates to the entire the site. On smaller screens the grid is simple with three columns, and keeps the layout neat. While on larger screens it becomes more complex and allows for more interesting layouts. You can see the details of my grid over at Gridset.
Enhancing the content
I mainly did this redesign, for myself. To be more creative, learn new things about the web and work with the fascinating ideas that I had only read about. Because of this the redesign is very much a work in flux. I will continue to play around with this website. Here are a few things I am thinking about:
- Some sort of commenting system would be good. I don't like third-party systems as they all rely on scripts to work and seem very slow. A very exciting proposal I just read about in this context is webmention.
- I want to improve the feeds. Right now, feeds only contain the thumbnail and description with a link to the original article. I want to send entire articles through feeds.
- Implement some kind of search tool.
Now that most of the redesign is done, I am looking forward to writing/doing more here. There have been quite a few ideas that I wanted to write about and now I have a constraint-free place to put them. So …
In the beginning …