8 ms·

Fluid Layout from Hicksdesign

157 points by twampss 16y ago

treblig 16y ago
AVC.com should do this. His new redesign lends itself perfectly to this type of implementation.
clammer 16y ago
Font look terrible with Chrome on windows, which is why fluid is so hard to pull off.
- aditya42 16y ago
  They look reasonably better on Mac. But Chrome has known rendering issues. Safari (Mac) makes that page look quite pretty.
- lawn 16y ago
  And it looks great on firefox and uzbl (webkit) on linux. The font problem is hardly the fluid's fault.
- lamnk 16y ago
  Yes font look really terrible with FF, i can barely read the text, but with IE it's a lot better.
- ugh 16y ago
  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!
  - clammer 16y ago
    Why do I fucking bother with HN? You stupid fucks down vote everything, are you a bunch of pre-schoolers? The FONT renders poorly in Chrome on XP which I was using at the time. I don't care what the font is, but that it renders poorly in that scenario. Jesus, you can all go fuck yourselves.
    - castis 16y ago
      I really don't think there was a need for a violent outburst. Acting like that and calling others pre-schoolers makes you look like quite the fool.
      - clammer 16y ago
        God, the whining here is deafening. I didn't call anyone a pre-schooler, I asked if you were all pre-schoolers. Notice the question mark? That means it's a question. Tomorrow we'll cover making statements using the period.
        Robin_Message 16y ago
        Whereas today you've covered making statements while on your period. Also, rhetorical questions aren't questions. Who knew?
        clammer 16y ago
        That was actually funny and still you got down voted (I up voted you). See what I mean about HN? A bunch of over sensitive whiny bitches. Yes, that was a statement.
barrydahlberg 16y ago
This plays very nicely with zoom in / out on Firefox too.
- cmelbye 16y ago
  Doesn't work very well in Safari: http://cl.ly/1SFj 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)
  - bbatsell 16y ago
    You've got a bug in your extension there. Doesn't happen on stock Safari 5, it works perfectly.
    - cmelbye 16y ago
      The extension just changes the font to Helvetica Neue. Here's a picture with the extension disabled: http://cl.ly/1SJe http://cl.ly/1SJe
      - MWinther 16y ago
        I can't reproduce that in my Safari 5 either, so it doesn't seem to be a general problem with that browser.
robspychala 16y ago
rga.com has been doing this on their main site for a while now
- mbrubeck 16y ago
  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).
JoachimSchipper 16y ago
Nice, but is this particularly noteworthy? Also, the hyperlinks are nasty - they lose their bold-ness when clicked, which reflows the text.
- mr_justin 16y ago
  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.
  - silvertab 16y ago
    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...
    - what 16y ago
      Not entirely sure, but it looks he uses some js to fix some things for IE8:  
- Batsu 16y ago
  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.
Tawheed 16y ago
I think this is pretty cool. Are there any frameworks/tutorials out there to create interfaces like this?
- mhd 16y ago
  He specifically mentions this A List Apart article in the post: http://www.alistapart.com/articles/responsive-web-design/ http://www.alistapart.com/articles/responsive-web-design/
- deleted 16y ago
  [deleted]
deleted 16y ago
[deleted]
moultano 16y ago
Beautiful. This type of thing makes me actually _want_ to learn web design, which hasn't happened in a loooong time.
prawn 16y ago
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.
- jurjenh 16y ago
  Now that's what I thought copyright was supposed to mean!
- sbhat7 16y ago
  You missed the footer. The problem with natural selection is that there's no one to blame for the design of testicles
quizbiz 16y ago
How does the layout change based on the width? I wish he talked a bit about the code he is using.
- kevinholesh 16y ago
  He's using CSS media queries, similar to what's being done here: http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html 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 http://hicksdesign.co.uk/css/layout.css
Tiktaalik 16y ago
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.

157 points by twampss 16y ago

treblig 16y ago

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

clammer 16y ago

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

aditya42 16y ago
They look reasonably better on Mac. But Chrome has known rendering issues. Safari (Mac) makes that page look quite pretty.
lawn 16y ago
And it looks great on firefox and uzbl (webkit) on linux. The font problem is hardly the fluid's fault.
lamnk 16y ago
Yes font look really terrible with FF, i can barely read the text, but with IE it's a lot better.
ugh 16y ago
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!
- clammer 16y ago
  Why do I fucking bother with HN? You stupid fucks down vote everything, are you a bunch of pre-schoolers? The FONT renders poorly in Chrome on XP which I was using at the time. I don't care what the font is, but that it renders poorly in that scenario. Jesus, you can all go fuck yourselves.
  - castis 16y ago
    I really don't think there was a need for a violent outburst. Acting like that and calling others pre-schoolers makes you look like quite the fool.
    - clammer 16y ago
      God, the whining here is deafening. I didn't call anyone a pre-schooler, I asked if you were all pre-schoolers. Notice the question mark? That means it's a question. Tomorrow we'll cover making statements using the period.
      - Robin_Message 16y ago
        Whereas today you've covered making statements while on your period. Also, rhetorical questions aren't questions. Who knew?
        clammer 16y ago
        That was actually funny and still you got down voted (I up voted you). See what I mean about HN? A bunch of over sensitive whiny bitches. Yes, that was a statement.

barrydahlberg 16y ago

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

cmelbye 16y ago
Doesn't work very well in Safari: http://cl.ly/1SFj 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)
- bbatsell 16y ago
  You've got a bug in your extension there. Doesn't happen on stock Safari 5, it works perfectly.
  - cmelbye 16y ago
    The extension just changes the font to Helvetica Neue. Here's a picture with the extension disabled: http://cl.ly/1SJe http://cl.ly/1SJe
    - MWinther 16y ago
      I can't reproduce that in my Safari 5 either, so it doesn't seem to be a general problem with that browser.

robspychala 16y ago

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

mbrubeck 16y ago
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).

JoachimSchipper 16y ago

Nice, but is this particularly noteworthy? Also, the hyperlinks are nasty - they lose their bold-ness when clicked, which reflows the text.

mr_justin 16y ago
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.
- silvertab 16y ago
  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...
  - what 16y ago
    Not entirely sure, but it looks he uses some js to fix some things for IE8:
Batsu 16y ago
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.

Tawheed 16y ago

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

mhd 16y ago
He specifically mentions this A List Apart article in the post: http://www.alistapart.com/articles/responsive-web-design/ http://www.alistapart.com/articles/responsive-web-design/
deleted 16y ago
[deleted]

deleted 16y ago

[deleted]

moultano 16y ago

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

prawn 16y ago

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.

jurjenh 16y ago
Now that's what I thought copyright was supposed to mean!
sbhat7 16y ago
You missed the footer. The problem with natural selection is that there's no one to blame for the design of testicles

quizbiz 16y ago

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

kevinholesh 16y ago
He's using CSS media queries, similar to what's being done here: http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html 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 http://hicksdesign.co.uk/css/layout.css

Tiktaalik 16y ago

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.