Fluid Layout from Hicksdesign | Hacker News Reader

Fluid Layout from Hicksdesign

hicksdesign.co.uk

157 pointstwampss31 comments

Bravo:

  Hello source code curious person from the INTERWEBS!
  What you're doing is (in my opinion) the BEST way to learn and advance, that is, viewing the source. It's how I learnt, and how I'm still learning.
  
  So go ahead, dig away and ask any questions. (see the contact page)
  
  Techniques used on this site are all in the public domain, but the unique combination of CSS and images are what make this site's design. 
  
  Please don't steal wholesale, thats all I'm saying.

Now that's what I thought copyright was supposed to mean!

You missed the footer.

    The problem with natural selection is that there's no one to blame for the design of testicles

Beautiful. This type of thing makes me actually _want_ to learn web design, which hasn't happened in a loooong time.

This plays very nicely with zoom in / out on Firefox too.

Doesn't work very well in Safari: http://cl.ly/1SFj

(The font is a result of a Safari Extension that changes the default font to Helvetica Neue; it's not a rendering problem)

You've got a bug in your extension there. Doesn't happen on stock Safari 5, it works perfectly.

The extension just changes the font to Helvetica Neue. Here's a picture with the extension disabled: http://cl.ly/1SJe

I can't reproduce that in my Safari 5 either, so it doesn't seem to be a general problem with that browser.

Absolutely brilliant. Everyone needs to be designing this way.

In the late 90s as higher resolution monitors became prevalent users gained the ability to have more usable workspace. Unfortunately we saw greedy webdesigners simply grab more space and browsing the web remained a full screen experience. We should be able to tile multiple web browser windows but due to many websites' designs this isn't really possible.

Hopefully this is the start of a new trend in space saving options in web design.

Nice, but is this particularly noteworthy?

Also, the hyperlinks are nasty - they lose their bold-ness when clicked, which reflows the text.

It shows a great knowledge of CSS that is not readily seen today on many, if any, websites.

I see no such unboldedness when said links are clicked. Regardless, not the point of the article at all.

Very nicely done indeed! Does it play nice with IE? (Can't test it because I don't have a Windows machine at home). CSS would be much more pleasant to work with if it was consistent across different browsers...

Not entirely sure, but it looks he uses some js to fix some things for IE8:

I find it particularly noteworthy due to fact that this blog has one page for desktop and mobile, and it fits damn near perfectly in both.

In Android 2.1, the only things that don't stack up exactly right are the "Social Club" section in portrait (vertical) mode, and the Pipe graphic at the top in landscape mode, which creeps over the dotted line slightly. There is no horizontal scrolling, and the least important stuff (that on the right, in a desktop browser) falls to the bottom.

How does the layout change based on the width? I wish he talked a bit about the code he is using.

He's using CSS media queries, similar to what's being done here:

http://broadcast.oreilly.com/2010/04/using-css-media-queries...

Check out the code he uses to make this happen near the bottom of his main CSS file:

http://hicksdesign.co.uk/css/layout.css

I think this is pretty cool. Are there any frameworks/tutorials out there to create interfaces like this?

He specifically mentions this A List Apart article in the post: http://www.alistapart.com/articles/responsive-web-design/

AVC.com should do this. His new redesign lends itself perfectly to this type of implementation.

rga.com has been doing this on their main site for a while now

They are using a JavaScript "resize" handler though, not pure CSS. And the layout is much less fluid (it seems to toggle between just two fixed widths).

Font look terrible with Chrome on windows, which is why fluid is so hard to pull off.

They look reasonably better on Mac. But Chrome has known rendering issues. Safari (Mac) makes that page look quite pretty.

And it looks great on firefox and uzbl (webkit) on linux. The font problem is hardly the fluid's fault.

Yes font look really terrible with FF, i can barely read the text, but with IE it's a lot better.

I’m reasonably sure that this wasn’t submitted so you can critique the font choice. The font has not a damn thing to do with the fluid layout – I think? You could use freaking Verdana!

Reply on news.ycombinator.com