Behind the scenes of the Rambling Man redesign
If you’ve been wondering what I’ve been up to of late, the answer can be found over at Rambling Man where I’ve just relaunched the site.
On a casual first glance, not much appears to have changed. The design is very similar to what was there before. But what’s gone on behind the scenes has been a lot more substantial and I thought I’d talk a little about what I’ve done.
But first, why change anything? Well the reason came about six months ago when I realised that the Rambling Man homepage was, to be frank, a bit rubbish. It didn’t really sell the content, didn’t look enticing and needed some improvement.
I decided to do something about it but every attempt looked messy. There was no consistency in the size of the various columns. No easy way to lay out the page to do what I wanted it to. The code was fighting against me.
And there was a reason why it was. Whilst Rambling Man as a site is a mere year old, when I launched it I recycled most of the code from this blog (as, to be honest, I have with all my recent sites.)
Unfortunately there was a snag. The template code was firmly designed for a two column layout, and done about six years ago. It had been hacked a lot since. The code could just about cope with a third, but not nicely. Fourth or fifth? Forget it. I had big ambitions, but my attempts to shoe-horn it in to the existing design were destined to failure.
And that wasn’t all. Across all my sites I’d started to use bigger images to provide a good, bold visual impact. That caused further problems. Suddenly things started breaking on smaller screens. Oh and I had a smaller screen myself – a swanky smartphone where I found myself hating any website that didn’t have a mobile version. Including my own. I’d tried to crow-bar in a mobile version a few years ago but ditched it after a few weeks due to the code being a massive mess.
As I got increasingly frustrated with the code, I decided enough was enough. It was time to start again. I wanted something that would adapt for all manner of screen sizes, something that would be flexible and support my ideas, and something that I could reuse across all my sites with minimal fuss.
All hail the grid
The first thing I decided to do was create an underlying grid structure for the design. After prototyping a variety of ideas, I opted for a underlying grid of 16 columns which could be assembled in various ways.
For example, most of Rambling Man has a two column layout. The sidebar is 5 columns wide, and the main content area is 11. Some pages just have one wide column, whilst the homepage has four equally wide columns. Then there’s listings pages which can have three columns – and some text which spans two of them.
If you’re a web designer all this will make some sense. If not, don’t worry too much about it. It’s just that the grid gives some design consistency. I know the width of everything for the first time ever. This is good.
Responsive Web Design
Once I’d settled on a grid structure, I needed to get the code to work it all out. I initially looked at using one of the many CSS Grid Frameworks that are available for coders, but couldn’t find anything that worked the way I wanted it to. The problem was that my web designs are always “fluid”. This means they adapt to the size of your web browser.
Most CSS Grid Frameworks rely on a fixed width site. The kind that makes you resize your browser window just to view a website. What few frameworks worked with a more liquid layout didn’t work nicely with what I wanted to do for reasons too long and boring to explain. Instead I knew I needed to roll my own. But that could cause similar problems to what I had had before.
And then I came across a book called Responsive Web Design, by Ethan Marcotte. It’s an excellent book and is actually the first book on web design I’ve ever bought.
Ethan’s ideas are simple. Don’t design for fluid layouts – design for fixed layouts. Then make them fluid using some very simple techniques involving maths. Ethan’s book explains this wonderfully, but I’ll try and give you an idea.
What you do is design for a base width – say 800 pixels wide. Now if you want a column that’s 200px wide. That column is therefore 25% of the width of the overall width. Simple. If you increase the overall width, your column adapts proportionally.
There’s a similar technique with font sizes. Say your base font is 16pixels, and you want something that’s 32px, then it’s double the size – aka 2em. 24px would be 1.5em.
Like I say, there’s a lot more to all this, but the entire web design has all this at its core. By making your design to a standard width, and using a standard font size, you can make everything adapt using simple maths.
True, my real code is more complicated than the above. But it’s not rocket science.
Set Some Standards
Whilst designing I set some simple standards to work by. Each column is 45 pixels wide. Each gutter between columns is 30 pixels wide. And the base font is 16 pixels.
But that’s not all. I set standard font sizes across the size for use in most situations. A headline would be 48 pixels high. Some small text would be 14pixels. Image widths would map directly to column widths – so an image might be 3 columns wide on my base grid. That would mean that the margins on the side of it would also the standard gutter width.
By using Ethan’s techniques, I have given a website design that’s the most consistent design I’ve ever made. It looks neat and very tidy. And it adapts nicely too. Result.
With me completely re-writing all the HTML on the site, this seemed like a perfect time to get rid of various hacks and pesky bits that were needed for older, barely used browsers like Internet Explorer 5. This has cleaned up the code no end. It was also a good time to introduce HTML5. Admittedly I haven’t used much of it yet, but if you study the HTML for Rambling Man you’ll see various tags floating around.
To help older browsers understand a batch of tags they were never coded to know anything about, I used a CSS reset script – Eric Mayer’s in fact. This script simply puts a set of default values for every HTML tag, over-riding the browser defaults which can vary. And that includes new tags for HTML5. Very useful.
One of the problems with the old site was that large images had a habit of breaking the design on smaller screens. Not so any more. Now a simple piece of code ensures that when you resize the browser window, all the images and videos resize accordingly. Each one has a maximum width, but they’ll shrink.
It was all part of my plan to make the site work in all sorts of browser windows. Thanks to some use of CSS media queries, there’s several little adaptations that go on depending on your browser window.
For most PCs and tablets, these changes won’t be that visible – the big difference is that on a small browser window the homepage is laid out very slightly differently. Font sizes also change to make sure everything fits.
I’ve put a maximum width on the webpage for some time – this used to be 1000px
But the big difference is for people with mobiles who get a simplified version for use on the small screen – and all from the same web address as before.
Rambling Man is just the beginning…
Throughout the whole process I wanted to make sure whatever I used for Rambling Man could be easily adapted and used elsewhere on my sites. This blog will probably be next. The big question there is whether to redesign completely or not! Well this design has been here for a while…