Liquid designs - yay or nay?
Once again, I ask another question, so if it's a bit irritating please tell me...
But. Do you think that liquid designs are the future of web design? I read an article somewhere that seems to speak very highly of them and believes them to be the "future" of browser compatibility. No doubt, they do achieve browser compatibility and, when done well, can really be useful to users, but is it worth to sacrifice a bit of "control" over your site to have such compatibility?
I'm toying with the idea of using liquid designs and can't decide really. Would like a bit of advice as to whether or not it is a good idea...
Many Thanks for your help.
Timewell posted this at 19:27 — 16th September 2004.
They have: 344 posts
Joined: Jun 2002
On the subject of liquid designs - how do you get images to follow suit and keep the design?
1 website I've seen that does it well is http://www.onlinegolf.co.uk. To me, all the images seem to fill into the shape and I'd quite like to know how you do this. I may have imagined the image maintaining the correct size across the resolutions...so if I have - please point it out!
Would it be that you set image widths as percentages when making them or am I way off the mark here?
Thanks for the help guys...
no1golfpro.co.uk - High quality golf equipment at competitive prices.
kb posted this at 19:59 — 16th September 2004.
He has: 1,380 posts
Joined: Feb 2002
Thats not even a question...its a definitive yes.
You should design a page for 800x600, and then have it stretch or w/e so it looks good on larger resolutions. A three coloumn layout like alistapart.com with only the central column being used is common practice.
Megan posted this at 20:00 — 16th September 2004.
She has: 11,421 posts
Joined: Jun 1999
Those images aren't resizing, the spacing is just changing. You could do a complicated javascript to serve different images depending on screen res but then you end up with problems with people resizing windows like we discussed in another thread. Setting image widths as percentages is a bad idea - they'll just end up looking distorted.
What exactly are you referring to by "liquid designs"? Do you mean just expanding to fit the screen size or is there more included? Flexible width designs have been debated for as long as I've been designing sites. It's nothing new. There are pros and cons to each method.
However, you mentioned "browser compatibility" so I'm wondering if you mean something else. Do you mean standards compliant? Universal coding?
Megan
Connect with us on Facebook!
Timewell posted this at 20:22 — 16th September 2004.
They have: 344 posts
Joined: Jun 2002
I mean expanding to fit the screen size...yeah...sorry for the confusion.
So how does the spacing changes work?
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Megan posted this at 14:20 — 17th September 2004.
She has: 11,421 posts
Joined: Jun 1999
That site is probably percentage width tables. So the main table is 100% of the page width, all other columns are given either fixed pixel widths, percentage, widths, or no widths. In that case, the right and left columns have fixed pixel widths while the center area has no width. A column with no width, within a percentage width table, will automatically fill the leftover space.
Within that column they have another table with two columns at 50% width.
In CSS a similar effect can be created with a complicated system of floating div's and div's with wide margins to accommodate another columns.
Megan
Connect with us on Facebook!
banners4pennies posted this at 17:05 — 17th September 2004.
They have: 11 posts
Joined: Jul 2004
i personally am not a big fan of liquid designs. they have their place, and don't fit into every layout. i've seen some sites that do it well, and then those where it doesn't fit in and makes it confusing or just plain ugly.
implementing differs though, so it depends on how you're gonna develop the site. html with tables or with css. i think it's more complex with css but it increases accessibility.
kb posted this at 19:20 — 17th September 2004.
He has: 1,380 posts
Joined: Feb 2002
If you're going to make a liquid design, as I would recommend (to a point), by all means use CSS. By now, you should be coding "for the future" because as browsers like Firefox gain popularity with the mainstream, CSS and CSS-positioning has more value than using tables in combination with CSS to get a decent looking website on IE.
So, what I mean, if I wasn't clear, was that you should follow the web-standards. Web-standards say that tables should only be used for tabular data, which is basically like a spreadsheet. Anything else should be using divs, spans, or other techniques to position and design your website.
Megan posted this at 20:23 — 17th September 2004.
She has: 11,421 posts
Joined: Jun 1999
I agree. Forget liquid or not liquid for the time being. CSS is the "future" of browser compatibility (to use timewell's original terms).
sumeiko posted this at 20:55 — 17th September 2004.
He has: 147 posts
Joined: Jun 2004
Personally, I don't like liquid design in a Web page. They don't really give your Web site much character as they are forever resizing to suit the visitors computer and resolution. However, they can be excellent if used well.
Doesn't The Webmaster Forums use a resizable layout?
The most beautiful thing we can experience is the mysterious. It is the source of all true art and science.
- Albert Einstein
Roo posted this at 23:33 — 17th September 2004.
She has: 840 posts
Joined: Apr 1999
I use liquid/fluid design. I'm not a huge fan of fixed width.
To further elaborate:
I'm using tables here, as I haven't gotten into layout with CSS positioning.
To create a fluid design, I'll use a three columed layout as an example.
What I do is set the sidebars on the left and right at a fixed pixel sized, usually between 150-200 px. The center cell where the main content goes I will set to somewhere between 55-68% depending on how I've set my sidebars.
You can do it all with percentages if you choose. Set sidebars to lets say 20%...with two sidebars, that's 40% of your screen already, so a center cell would be 60%..less if you've used any padding or margins.
The best way to control table elements and content though is with your stylesheet.
Roo
Abhishek Reddy posted this at 00:49 — 18th September 2004.
He has: 3,348 posts
Joined: Jul 2001
What I've found is when using major vertical elements like columns as an integral part of the site, it's hard to go liquid -- CSS or not. Resizing and wrapping is a pain, not to mention breaking image dimensions.
So I tried elastic layouts, which work just fine until you want to build a Zen Garden-esque box of eye candy. This time only the images don't work.
Many of my creations slowly degenerated to fixed-width because of this.
On my latest project (an intranet web app), I avoid vertical elements altogether. There's a lateral header, control box, content area and footer. The only things going down the page are lines and rows. And that makes it much easier to make things fluid.
Timewell posted this at 10:51 — 18th September 2004.
They have: 344 posts
Joined: Jun 2002
I did do one CSS design a while ago - but someone on here advised me not to use CSS positioning for some reason...so I didn't...
Come to think of that though, it is a bit of a pain having to constantly redo the "top:" tag in CSS positioning. I want to design in CSS because it just makes things a lot neater but would it cause problems if I was to use something like a PHP CMS alongside the external CSS stylesheet?
no1golfpro.co.uk - High quality golf equipment at competitive prices.
kb posted this at 14:33 — 18th September 2004.
He has: 1,380 posts
Joined: Feb 2002
Timewell,
You only need to be wary of absolute positioning, because if you define by pixel where everything is on the screen...you're gonna screw some people over. Its fine to use relative or even absolute inside relative...
It shouldn't cause problems, especially if you design the CMS yourself.
Timewell posted this at 17:05 — 18th September 2004.
They have: 344 posts
Joined: Jun 2002
Ah ok - cheers for that. Changing from absolute to something else shouldn't be too hard. But I've never heard of absolute inside relative before - how does that work? It certainly sounds interesting!
no1golfpro.co.uk - High quality golf equipment at competitive prices.
kb posted this at 18:14 — 18th September 2004.
He has: 1,380 posts
Joined: Feb 2002
Well
You can have a or or 's width set to "80%" (meaning 80% of the screen), and then have elements inside that positioned absolutely, relative to the relative. So you could have things with "left: 150px" which would move it right 150px, inside the 80% box.
See what I mean?
Timewell posted this at 20:01 — 18th September 2004.
They have: 344 posts
Joined: Jun 2002
Yeah I did that before seeing your reply - so basically would the following be what you are talking about :
<div width="100%">
<div id="top">Content here</div>
<div id="leftpanel">
Content here>
</div>
<div id="content">CONTENT HERE</div>
<div id="rightpanel">Content here</div>
</div>
With CSS being :
#top {
border: 1px solid #ccc;
height: 136px;
}
#leftpanel {
position: absolute;
top: 140px;
left: 3px;
width: 200px;
border: 1px solid #ccc;
text-align: center;
padding-top: 5px;
}
#rightpanel {
position: absolute;
top: 140px;
right: 10px;
width: 200px;
border: 1px solid #ccc;
padding-top: 5px;
}
#content {
position: absolute;
top: 140px;
border: 1px solid #ccc;
padding-left: 210px; /* 20px to play with */
padding-right: 210px; /* 20px to play with */
padding-top: 5px;
}
Thus giving a three column layout with a header (no footer as of yet but it shouldn't be too difficult!). I've tried it out in I.E. and it gives me no problems but I wouldn't know if it is what you are talking about. I think if I was to do absolute in relative, I would have to lose the pixels wouldn't I? But like I say, it works in I.E.
Of course, it may well be a total fluke!
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Timewell posted this at 21:00 — 18th September 2004.
They have: 344 posts
Joined: Jun 2002
Another question - is it worth sacrificing a more professional look by having items such as Navigation menus done by CSS rather than images? I know that you take a hell of a lot off your load time by using CSS rollovers or whatever, but I've never really seen a good CSS rollover. But if you guys know of one, then I'd love to see it - then I'll know it can be done!
It's just that all the "big" sites in the world seem to be heavily centered around image rollovers - thus greatly reducing the sites accessibility.
no1golfpro.co.uk - High quality golf equipment at competitive prices.
Megan posted this at 14:16 — 20th September 2004.
She has: 11,421 posts
Joined: Jun 1999
I don't t hink it's tru at all that you have to have image rollovers to look "professional". In fact, I think sometimes the opposite can be true. Poorly done image menus look worse than text any day. Besides, CSS is a heck of a lot easier to work with, especially when you need to make changes. Here are some examples of nice css menus:
http://www.alistapart.com/
http://www.digital-web.com/ (tabs! probably using the sliding doors method documented at ALA)
most of what's in the CSS zen garden.
Any my own example:
http://www.meganjack.com/uw_courses/template/anth/index.html
I think for a lot of these design decisions it depends on the nature of the work. FOr an information-based site I'm more likely to go with CSS rollovers and flexible widths (more room for content!), but with a site that's more about the experience you can do more with fixed width and image navigation.
Megan
Connect with us on Facebook!
Timewell posted this at 18:49 — 18th September 2004.
They have: 344 posts
Joined: Jun 2002
Actually it wouldn't be -
<div id="left"><div id="leftcontent"><!--left--></div>
</div>
<div id="content">
<div id="contentcontent"><!--content--></div>
</div>
<div id="right">
<div id="rightcontent"><!--right--></div>
</div>
With various bits of CSS would it?
[EDIT] : I didn't see the above post before posting...
no1golfpro.co.uk - High quality golf equipment at competitive prices.
kb posted this at 19:31 — 18th September 2004.
He has: 1,380 posts
Joined: Feb 2002
What you're talking about is just stacking divs...not any absolute positioning within relative, unless you define the stylesheet as such
kb posted this at 21:12 — 18th September 2004.
He has: 1,380 posts
Joined: Feb 2002
Yes, that is a good example of mixing the two.
You can still use images for navigational menus! CSS is meant to separate content and styling...so just use an image tag like normal. No differences there.
Or, if you want, you can use "hacks" to get a "good" CSS rollover. you could do something like this:
<a class="roll1" alt="" href=""></a>with the css
a.roll1, a:visited.roll1 {background-image: url('/locationofun-rolledimage');
}
a:hover.roll1 {
background-image: url('/location-of-new-image');
}
Renegade posted this at 22:53 — 20th September 2004.
He has: 3,022 posts
Joined: Oct 2002
um, don't the psudo classess go at the end?
a.roll1, a.roll1<strong>:visited</strong> {background-image: url('/locationofun-rolledimage');
}
a.roll1<strong>:hover</strong> {
background-image: url('/location-of-new-image');
}
Dragon of Ice posted this at 22:38 — 18th September 2004.
He has: 578 posts
Joined: Jun 2004
Now that I think about it, that would have been a lot better route to go than javascript. It's alot easier rollover. I'll have to bookmark this as a simple rollover.
kb posted this at 23:15 — 20th September 2004.
He has: 1,380 posts
Joined: Feb 2002
I'm not sure actually. The way I learned to do it was
a:hover.roll1I'd look it up, but I'm really busy.
Renegade posted this at 01:47 — 21st September 2004.
He has: 3,022 posts
Joined: Oct 2002
http://www.w3schools.com/css/css_pseudo_classes.asp
kb posted this at 19:41 — 21st September 2004.
He has: 1,380 posts
Joined: Feb 2002
lol ok
well it seems both ways work, it's just that one is valid and one is not
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.