Michel Jansen

Almost five years ago, I decided it was time to create myself a place to vent my thoughts. I installed WordPress on my home server and started writing; “Michel’s Exhaust” was born. Quickly after that I registered my own domain “micheljansen.org” and moved my site off-campus. I still used a vanilla WordPress install, with a free theme called Rin. It was clean, it was beautiful, but eventually everything gets old. It was time for something new.

The Needs

There wasn’t necessarily a lot wrong with my old site, but given the chance to start with a clean slate, there were some things I valued more than others. First of all, I love simplicity and clean design; the more chrome, the quicker it gets old. Secondly, I wanted it all to look equally beautiful on mobile phones and tablets; they should not be second grade citizens. Finally, I wanted my website to remain what it is: a home to all my stuff on the web.

The Platform

The decision to stick with WordPress was quickly made: there’s just no other platform good enough to tempt me to migrate all my data to it. I don’t just use it for weblog posts, but for pages and static content as well and it works great. It’s also pretty easy to extend, so rather than going for an existing theme, I decided to roll my design. This way I had full control.

The Design

Any design is good for hours of discussion, but to stick with the essentials, I wanted simplicity and mobile friendliness. I did not want to send mobile users to a separate, crippled site. The regular design should be solid enough to hold up on a small screen as well. As it turns out, if you design with mobile devices in mind, you get simplicity for free.

Using my own iPhone as a leading example for a mobile phone, I was up for quite a challenge: a display resolution of 320×480 is not exactly spacious. As an example of a tablet, I took the Apple iPad, which has a 768×1024 screen. Considering most websites are designed for a width of 960 pixels these days, that’s still not a lot to go with.

To accommodate for these three classes of devices (Mobile: 320,480, Tablet: 768×1024 and Desktop: 960×720) I ended up with a design based on a vertical grid consisting of three vertical columns of 230px each. Together with margins, this results in a total width of 750px: just under what the iPad can display in portrait mode.

Because the content is the most important element in the design, the two leftmost columns are joined to provide 480px of content space. This happens to be exactly the same as the horizontal resolution of the iPhone in landscape mode (in portrait mode it will have to zoom). It is also the default resolution for videos embedded from Youtube and Vimeo. Combined with 16px Helvetica it additionally results in lines of about 70 characters each, which is perfect for readability.

When a page is to be displayed on a screen with a lower resolution than the one it was designed for, the top left corner becomes increasingly important. Any content too far to the right or to the bottom is likely to be cut off. These thresholds are often referred to as “the folds”. I wanted my content to start in the top left corner, with all other stuff tucked aside on the right and bottom. From personal experience in using an iPhone for browsing, it’s nice to have a solid edge when scrolling, so you do not “slip over” the content. Therefore, there are hardly any margins to the left. At the same time, I didn’t want to present those people browsing full-screen on their 1680×1050 displays with a postage-stamp experience in the top left corner. My content could definitely use all that space to breathe, so on large displays it is centred by applying automatic margins to the left and right.

As you can see, the result stands solid on both really small and really big screens. It is not always necessary to design separate mobile sites that lack functionality and I hardly had to make any concessions to the design to make it “just work”. Obviously there is still plenty of room for improvement (think of it as in perpetual draft state) and I would love to hear your comments.