hi there and welcome everybody i'm going to give a little talk about fixed and fluid today glad you could join us.
fixed design and fluid design
How do i lay out a page when i don't know how wide the page is, but i have to put some images (which do have a specific width) into it?
most sites on the INTARWEB answer this question by either opting to use a fixed design (where the design has a specific pixel width on the page) or opting to use a fluid design (where the design element's width is proportional to the page). curiously this really only seems to matter for horizontal width, because people find it completely acceptable to have to scroll vertically (they're used to that) but totally unacceptable to scroll horizontally (that's so un-TV).
when you're designing a website, and you come from a page design background, this will probably strike you as completely dumb. that's OK, you're getting paid so just accept that it's dumb and take the money and make the client happy, that's why they gave up tooling around with stupid dreamweaver anyway.
back to the topic at hand
a successful fluid-width site is trademe.co.nz. you can see this "fluid design" in action by visiting the site and changing the width of your browser window. here's what it looks like at (roughly) three dfferent common screen sizes:



you need to click these to view them; they show trademe.co.nz at 800x600, 1024x768 and 1152x864 pixels. hold mouse over and look at URL/hover thingy to see which is which if you can't see already. note how the trademe page adjusts itself to this; the header is less dominant on a larger screen (because the header graphic has a fixed width of less than 800 pixels) and the white centre column expands more than the sidebars do, because it's got the "juicy" bit.
a very successful fixed width site is google.com the front page at least. but i didn't think of that in time, so i took some screenshots of dogandlemon.com, which is another quite nice fixed width site. notice how at various browser widths the design remains constant; instead the fixed width design sits comfortably inside an expanding ocean of tasteful grey.



if you're used to PAGE design, where the paper is a nice stable platform for arranging letters and images, this is nuts. but on the web ... well, you've got people seeing your site on a webpad, a laptop, a cellphone, a screen reader, or maybe - maybe - an identical desktop computer and monitor to what you're using ...
anyway this is important if you're implementing design and i wanted to explain what it's all about. but i'm not going to give you any practical advice in dealing with it, oh no. haha. maybe i will later but that's it for now. just think about how it'll look at various sizes ... that's all :)
oh if you google for 'fixed versus fluid design' i'm sure you'll turn up some nice articles
anyway you don't need to think about this stuff too hard, it's not the nineties any more, but it might help to understand