How to make a good liquid design

design

#1

What is the best way to make a good liquid design? Meaning you use percentages for everything, so the website looks the same in any resolution. I’ve always made fixed layouts that look great in 1024x768, okay in 1240, decent in 1600x1200, but gross in anything below 1024. So would the best way to do things for a liquid design is to design for 1600x1200 so if you go to a smaller resolution (or bigger depending on how you look at it), the images don’t distort, or to start at a middle range so it doesn’t distort too much one way or another? From my stats, I’ve found that most people that browse my website are using 1024x768, 1240 is next, 800 being the third most. The small majority use something like 1600x1200, but when I’m on a large monitor, I do use it, and I HATE looking at soooo much blank space.

Click here to go to MICruisin.com


#2

Take a look at this article on the DreamHost Wiki. It will satisfy both your fluid and fixed-width needs. You can see an example of it on my personal website.


Simon Jessey
Keystone Websites | si-blog


#3

Simon, your article is really great! Do you have a similar css solution for a 3-column?

~jenny~


#4

I don’t have another article for 3-column layouts, but it is actually quite a trivial task to adapt the 2-column layout. You essentially have two choices:

  1. Split the “sidebar” into 2 columns.
  2. Create another sidebar

Assuming you want option 2, add some markup to your page:[code]


…sidebar content goes here

[b]


…sidebar2 content goes here
[/b]
...footer content goes here
[/code]Then add a bit more CSS, and change some of the percentages:[code]#content { width: [b]60%;[/b] float: left; } #sidebar { width: [b]20%;[/b] float: right; } [b]#sidebar2 { width: 20%; float: right; }[/b][/code]I've created [url=http://keystonewebsites.com/tests/3-col.php][b]an example for you to see[/b][/url]. If you want to change the order of the columns, you will need to experiment with swapping the direction of the float rules. Of course, things will get somewhat more complicated if you are putting in false columns and stuff, but you should be able to get the general idea.

Simon Jessey
Keystone Websites | si-blog


#5

In addition to what Simon posted, here are a few more layout examples you can check out.

In addition to that, browsing the Wordpress theme browser at AlexKing.org is a fast/easy way to check out a bunch of designs, some good, some not so good.

The one advantage fixed width still has in some cases would be readability, since it’s generally easier on the eyes to read a narrow column. It doesn’t bother me too much, though. It just doesn’t look too great on big/high-res monitors where complete paragraphs stretch out into one long line.

I don’t really think narrow fixed-width designs look bad in higher resolutions if they’re centered and have a decent background.


:stuck_out_tongue: Save $96 at Dreamhost with the 96DOLLARSOFF promo code.


#6

Thanks guys, that helped me out a lot. I can design the template/theme just fine in photoshop, then once i chop it up, I always have a lot of unnecessary tables, many of them with an absolute position which just ends up looking absolutely horrid in most resolutions besides 1024x768. My problem is I never took the time to understand code. I learned HTML about 6 years ago just by viewing sources of pages, and then just picked up some random php, java, css, dhtml here and there. I’m really making an honest effort to make not only a nice design, but one that looks and functions well in many different browsers/settings. Anyways, I really appreciate the help.

Click here to go to MICruisin.com


#7

If you’re already familiar with CSS, it shouldn’t be too hard for you to stop using tables for layout. It really makes things a lot neater and browser support isn’t really an issue anymore.

That was a bad time to learn HTML from source code. :wink: I try to forget what I learned back then by viewing the source of pages that validate as XHTML.

You should check out the CSS and web design forums at places like Sitepoint.com, WebmasterWorld.com, etc… if you don’t already.


:stuck_out_tongue: Save $96 at Dreamhost with the 96DOLLARSOFF promo code.


#8

I recently went through the ‘pain’ of learning proper xhtml and css stuff.

Its a way of thinking, and its fairly different to the ‘old days’ of nested tables.

You can’t hack. A little bit of genuine understanding will go along way (particularly understanding ‘the box model’).

Don’t read the CSS2 spec though, its an exercise in pain.


#9

Actually, I disagree. The specification is written for browser manufacturers, and therefore it describes what stuff is supposed to do. If you want to code to the standard, this is the definitive work. Once you’ve mastered it, you can move on to learning how to cope with the differences between specific browsers.


Simon Jessey
Keystone Websites | si-blog


#10

two quick thoughts.

Unless you truly know your audience, and know they are all using hi-resolution monitors, they might be having trouble seeing all your content if you design for 1024 resolution. At least make sure your content is visible by making sure it is no wider than 700-800 pixels. When I see sites with fixed designs for 1024+, they are often awkward to read (long line lengths, small text, etc.) So it is great that you are looking into liquid design. You’d be amazed at how many people prefer 800x600 resolution. I find this in academia and business.

Also, You can use ImageReady (which it sounds like you are using, embedded into Photoshop) to create CSS instead of tables. Just change the drop-dowm menu. I can be a good way to learn about positioning, etc. Especially if your design is built with a good underlying grid.


#11

Thanks, guys. You know I’ve had ImageReady forever, but never really went too in-depth in to it, I just kinda fiddled around with it. I hate the way Photoshop writes HTML with tables with all the colspan and cellspacing, it’s so weird.

My stats tell me that 70% use 1280x1024 (I was surprised by that), 23% use 1024x768, 4% use 800x600, and 2% use 1600x1200. So I guess it’s kind of a bummer for those 4%, although the news should be just fine in 800x600, and you’d only need to scroll over to view some miscellaneous things. It is a car website, mostly tuners, which is mostly a younger audience which I think is more interested in resolutions more like 1280x1024.

But thanks for the tips, and also thanks for those links. They were useful reading.

Click here to go to MICruisin.com


#12

I don’t know why you are worried about the resolution. It seems clear from your statstics that a fluid layout would be better than a fixed-width layout for your site.


Simon Jessey
Keystone Websites | si-blog


#13

Simon, nice clean style sheet/site. Question … what OS CMS or Blog Solution are you running?


#14

I hand-built the application from scratch. I prefer not to use any turnkey solutions for things.


Simon Jessey
Keystone Websites | si-blog


#15

Well done.

/s


#16

<div id="sidebar2">“sidebar2” isn’t very semantic :slight_smile:

Personally, I’d write:

[code]

Content

More content

[/code] and then CSS: [code].column{width:20%} .left{float:left} .right{float:right}[/code][code]max-width[/code] and [code]min-width[/code] [i]would[/i] solve the issue of liquid layouts going too far in either direction (IE6 sucks).

Also, liquid is nice, but elastic is cooler. Designing with em is the path to righteousness :wink: I can’t wait until CSS3 is implemented so that we loose these hacks (yes, floated layouts are hacks too).


#17

Neither “column”, nor “left” are very semantic either. Both words describe layout, rather than structure. I agree that elastic is cool, but it is much harder to make that work with faux columns.


Simon Jessey
Keystone Websites | si-blog


#18

I’m in the middle of learning CSS and here are some useful links that I’ve ran into.

http://css.maxdesign.com.au/selectutorial/
shows how to match selectors with the properties you’d want to change.

http://penguin.theopalgroup.com/cgi-bin/css3explainer/selectoracle.py
enter in your own or give it a link to a css file and it’ll explain the selectors in use.

http://www.devx.com/projectcool/Article/19813/1954?pf=true
table on compatibility.

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
Here’s a bunch of layouts. I don’t find the multi-column layout too pleasing but here it is. Might be outdated.

One really useful tip I use now is to set the base font size to 62.5% inside a “body” selector and from there set all other font sizes in em’s. 62.5% is close to 10pixels in most browsers so with that nice even number you can set 1.4em for 14 pixels. Remember, em’s are relative to it’s parent in this case it’d be the body. This is important for keeping things relative and letting the user adjust the font size if necessary.

Oh, and this is really neat.
http://typetester.maratz.com/

I just made this as I was learning. Try to resize the fonts and everything scales cuz I used em’s for the width of the content. Not the best thing for most sites but it’s fairly narrow to begin with. Works well if you have a big screen. Would be cool if a script detected the screen size and scaled it automatically.

work in progress…
http://216.117.145.247/gianmarcomillburn/menu/

-Joon
{ dvessel }