Layout and responsive design

Continuing my series explaining the decisions I made while designing this website, this article looks at the process of creating the layout and working on a responsive design.

Ruling out a fluid design

As part of the responsive design bandwagon, there has been a lot of talk about how fluid layouts are the only way to go. I disagree for one simple reason: fluid layouts are demonstrably less usable.

Research shows that the optimal line length for reading is somewhere in between 50 and 75 characters. I often use ‘two alphabets’ (52 characters) as the rough rule of thumb. Any shorter and the text becomes cramped and the reader becomes more tired because they need to move their eyes more. Any longer, and the reader becomes lost because it is more difficult to move from one line to the next.

I have always found the fluid design of Wikipedia to be truly infuriating for this reason. I could never read Wikipedia if I had my browser window maximised, because a line can contain more than 250 characters.

So, for me, a fluid design was a non-starter.

Experiments with (Twitter) Bootstrap

When I first started working on this design, I experimented with using Twitter Bootstrap as the foundation of the design. It ticked a few boxes for me:

  • It looks pretty good straight out of the box.
  • It is written in HTML5.
  • It has a responsive design.

However, after some experimentation, I decided that Bootstrap’s style of responsive design was not what I was looking for. In Bootstrap, the columns resize according to the viewport width, until it reaches a certain point at which everything collapses into one column. For me, this is not much better than a fluid layout.

I was looking for something more than a design that just makes columns narrower as the viewport gets narrower. I wanted a design that’s a bit smarter about what happens to elements at different viewport sizes.

I also wanted to avoid falling into the trap of my website looking too much like the standard Bootstrap design. The whole point of designing my own website is to design it myself. So I dropped Bootstrap and worked on the responsive design from scratch.

Responsive design

This is by far the biggest responsive design project I have ever undertaken. Despite working on it from scratch, I still took inspiration from Bootstrap’s clean layout. The fact that is uses a 960 grid-style system also made me feel like I was in familiar territory.

I am not using a grid system on this design. At least, not in the sense that leads to you having loads of div tags with class names like span-6 and so forth.

Instead, I have created an imaginary grid where the column widths remain the same no matter what the viewport width is. What changes is where the content appears. So I have fixed-width layouts of 14, 12 and 8 imaginary columns, then one fluid column for smaller devices.

The differences between the designs are not too radical. I have big blocks of content that progressively shift to appear beneath each other rather than alongside each other.

Since this is my first real attempt at a proper responsive design, I have found it a challenge to keep on remembering to test my changes in all of the possible versions. But due to the minimalist nature of the design, nothing ever looks too out of place even if I have forgotten to deal with it.

Mobile was one of the reasons why I have chosen to go minimalist, and my experiences of developing a mobile design have certainly justified this approach.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.