Current time: 04-20-2014, 09:33 PM Hello There, Guest! (LoginRegister)

Post Reply 
How to make a good liquid design
02-06-2006, 01:06 PM
Post: #11
How to make a good liquid design
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
Visit this user's website Find all posts by this user
Quote this message in a reply
02-06-2006, 01:53 PM
Post: #12
How to make a good liquid design
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
Visit this user's website Find all posts by this user
Quote this message in a reply
02-18-2006, 11:05 PM
Post: #13
How to make a good liquid design
Simon, nice clean style sheet/site. Question .. what OS CMS or Blog Solution are you running?
Find all posts by this user
Quote this message in a reply
02-19-2006, 10:18 AM
Post: #14
How to make a good liquid design
Quote:Simon, nice clean style sheet/site. Question .. what OS CMS or Blog Solution are you running?
I hand-built the application from scratch. I prefer not to use any turnkey solutions for things.

----------------
Simon Jessey
Keystone Websites | si-blog
Visit this user's website Find all posts by this user
Quote this message in a reply
02-19-2006, 02:32 PM
Post: #15
How to make a good liquid design
Well done.

/s
Find all posts by this user
Quote this message in a reply
02-23-2006, 08:15 PM
Post: #16
How to make a good liquid design
Code:
<div id="sidebar2">
"sidebar2" isn't very semantic Smile

Personally, I'd write:
Code:
<div class="column left"><p>Content</div>
<div class="column right"><p>More content</div>

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

Also, liquid is nice, but elastic is cooler. Designing with
Code:
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).
Visit this user's website Find all posts by this user
Quote this message in a reply
02-24-2006, 05:40 AM
Post: #17
How to make a good liquid design
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
Visit this user's website Find all posts by this user
Quote this message in a reply
02-26-2006, 03:38 PM
Post: #18
How to make a good liquid design
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/...toracle.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/...54?pf=true
table on compatibility.

http://www.thenoodleincident.com/tutoria...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 }
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump: