The Fluid Web

Well… this week Chris and Nick are at build and we have been set free! Well, we have no lectures or lab classes, so I thought I would catch up on something that the guys were talking about a few weeks ago, the Fluid Web. The fluid web is something which 5 years ago wasn’t really deemed that important as most browsing was done from computers where space wasn’t a big issue. Nowadays however, pretty much everyone has a smartphone (if you don’t, why not?) and we are using them not only for the facebook and twitter but, believe it or not people are looking at other sites when they are on the go! It is for this reason why creating responsive websites has become a key part of web design, I haven’t made the leap to a responsive site yet so I am going to have a look at a few techniques used and try implementing them into my site!

Frameless Design

Trawling through the web I found that there are a lot of frameworks out there that aim to make your change to the fluid web a breeze.

Fluid 960 Grid System

Fluid 960 gs

Skeleton

Skeleton

Columnal

Columnal

Tiny Fluid Grid

Tiny Fluid

The Goldilocks Approach

Goldilocks Approach

Frameless

Frameless Design

The Golden Grid System

Golden Grid System

As you can see, this is a fairly sizeable list, and this is only a small portion of what is out there. The first thing I noticed when looking into the frameworks was that because they are all CSS based, they all have one thing in common, the use of media queries. Media queries are basically a small snippet of code within CSS3 which allows the web page to preform different actions when the screen size is within a certain width or height, thus allowing us, as designers to create responsive websites fairly easily. Before the introduction of CSS3, this wasn’t possible, CSS2 only supported interchangeable stylesheets for different media types, e.g. media=”screen” or media=”print”. These were all well and good for their time, but nowadays, with so many different screen sizes, on so many different devices, media queries are a god send!

Another trend in some of the frameworks I found was that a lot of them used a fold-able column system, Frameless, Golden Grid and Less Framework in particular making use of this. I liked the idea of this, the way it works is that every column adjusts to a point and will fold once it reaches a particular width. Another method is that the columns are set up with a fixed width and simply disappear as they are adjusted, eventually leaving you with a nice little 4 column grid.

Having looked at all of the frameworks I decided it would be a toss up between; The Golden Grid System, Frameless and the Goldilocks approach. I decided in the end to go for the Golden Grid System, the reasons being that I liked the jquery feature which allowed you to overlay the grid onto the top of the page so that you could make sure everything was perfectly lined up. The reasons for not picking the goldilocks approach was simply because it didn’t have the jquery feature and as for the frameless framework I wasn’t to keen on the smaller columns being fixed.

After trying to wrap my head around the Golden Grid System, to be honest I was a bit underwhelmed by it. The layout of the CSS files in these Frameworks are usually well thought out and easy to follow, however the Golden Grid was a bit of a nightmare, it seems as if it has been developed really well but no UI taken into consideration (below), and has over 300 lines of code before you even start, not exactly ideal when I’d be doubling that, so I decided to ditch it.

Golden Grid System

I then defaulted to my second choice, the Goldilocks Approach, and even though it was slightly different in its approach, the basis was the same and I noticed an immediate difference. The layout of the two CSS files has been well thought out and is quite familiar to the way I would layout my own CSS files. The first thing I had to set up was the typography to reflect the current site, this was fairly easy, I just had to make sure it reflected the current site. The main thing with the whole layout was changing the current was of using pixels and instead using “em”. 1em is equivalent to the current system font size, this becomes very useful because it will adapt to the users system default and screen resolution. The standard system font size is 16px so it is easy to convert the current sizes on the site to “em”… you just divide it by 16! That is really the biggest hurdle over, the final stage is just stating the media queries, what I want to change whenever the windows are resized. Because my home page if fairly stripped back, it only required around 30 lines of code per media query, this was done for 960px, 480px and 400px, all of which being responsive at same time.

Goldilocks

All in all that’s about it, im making the tweaks now to this blog, so I will have both up in the coming weeks, just to keep everything consistent!