Liquid Layouts?
dim...@gmail.com
it's brilliant :).
I'd like to know how people cope with different page widths though?
I'm doing some work for someone who has 800x600 screen resolution (by
choice) at the moment, and I'd like it so that his blueprint based
site was fine for him (i.e. no horizontal scrolling) at this
resolution, but also taking advantage of all the available screen real-
estate on people with resolutions up to say 1024x768 without having
different css files for different resolutions.
Has anyone else had to deal with this stuff? What's the best way? If
more than one css file is needed, how do people approach this?
Kieren
Cal Wilson
I had a crack at putting a liquid version of Blueprint together last
year. Basically, things work fine for Firefox, Opera et al, but fall
over with IE. This is due to IE being unable to cope with percentages
with decimals.
It appeared as though IE rounded the percentages up to the next whole
number, and when added together, came to more than 100%, thus columns
would bump down. Very annoying.
It would be a fantastic thing to have though. If anyone is keen to work
on this, I can send you the files I have (they are from a very old
Blueprint version though).
cal.
GPA
Blueprint doesn't work with fluid layouts.
It depends if you want automatic detecting of widths. I would simply
have a choice of two different css files and employ a javascript
switcher.
You can also use javascript to detect the width of the current
window. If the window width is wider than a certain pixel size you
can show more content or make the content area wider.
With blueprint, it's fairly easy to generate two different widths....
just keep the column count the same and make each column wider using
the blueprint generator of your choice.
google for "javascript stylesheet switcher" and you'll find some
javascript you can plug into your page.
In the end, just remember that you CAN'T account for all resolutions
that people have. Some people use dual screens and triple screens
and resolutions are increasing all the time.
I would recommend to your client that you go with 1024 x 768 as it is
by far the most commonly used resolution and people using 800x600 are
used to surfing the web with this limitation in mind.
Gary
Matthew Nuzum
> It depends if you want automatic detecting of widths. I would simply
> have a choice of two different css files and employ a javascript
> switcher.
> In the end, just remember that you CAN'T account for all resolutions
> that people have. Some people use dual screens and triple screens
> and resolutions are increasing all the time.
>
> I would recommend to your client that you go with 1024 x 768 as it is
> by far the most commonly used resolution and people using 800x600 are
> used to surfing the web with this limitation in mind.
Hi Kieren,
I was in the same boat as you. I designed my website with a fluid
layout because the stakeholders in my project felt it was important to
include 800x600 screen width users but they themselves felt the
content region was too narrow at that width (since they all had
high-res screens).
Therefore we concocted a solution that allowed the width to scale from
aprox 700px wide to up to about 1,000px wide.
This has caused nothing but problems though. In a nutshell, it is very
difficult to make an attractive and usable website with this much
variance.
I know I am possibly about to spark a great debate so I will qualify
my statements:
* Newspaper columns have been narrow for a century - why do you
suppose that is? There are a number of reasons but one is that it's
easier for your eye to scan narrow columns of text.
* When you optimize your graphics, you do so for a set resolution. If
your layout will accommodate both wide and narrow columns of text you
will have to choose to either optimize for the wider width (which is
probably most of your users) and have it be inaccessible (or worse to
break your site) when people have smaller resolutions, or optimized
for the small screen and have it look poor for most of your users.
I did some research and found that about 90% of my users have a screen
resolution width between 1000 and 1300 px. Of those remaining most had
larger than 1300px and a very small percentage (about 3% iirc) less
than 1000px. Some of those 3% were 800x600 users and some were
MID/iPhone/etc users.
Therefore my next site revision will be a fixed width design based on
blueprint using a target browser width a little under 1000px wide. The
site's content region has been sized so that it will be readable and
navigable for those with a screen width down to 600px wide though
parts of the page will be obscured.
I did see an interesting layout recently that had the navigation
divided into two sections, an "essential" navigation and a "helpful
but not required" navigation. On all windows the essential navigation
was visible above the content region. On wide browser windows the
secondary nav was to the right but below the content on narrow
windows.
The benefit of such a layout is that you get the best of both worlds -
fixed width and therefore constancy for designing your layout and
graphics without hurting either your narrow or wide screen width
users.
--
Matthew Nuzum
newz2000 on freenode
Aaron Barker
layouts in IE? Seems they must have run into the same problem.
Aaron
Jon Trelfa
Has anyone investigated how YUI Grids is able to accomplish fluid
layouts in IE? Seems they must have run into the same problem.
Aaron
Aaron Barker
files it looks like they choose to round down for everyone by having a
49.1% for their 50/50, 32% for their 33/33/33, etc. I hadn't
recognized that before and I may have to take some time to see if I am
loosing pixels here and there on pages currently using YUI.
I ran into another major problem with a fluid layout in the blueprint
world that I haven't seen documented anywhere... so I figured I'd
write it down for others to find.
The problem comes with each level deeper you go, the percentages are
wrong.
If on the first level I had a "span-12, span-6, span-6" the percentage
equivalent would be "50% 25% 25%"
If inside the span-12 you then broke it into "span-6, span-6" again,
the span-6 would now need to be 50%
If the span-6 was in a span-18 instead, it would need to be 33%
Basically I would need to figure out the correct percentage of a span-
# when it is inside any span-# that is larger then itself. When I
move an additional level deeper, I would need to refigure yet again.
As you can see this ends up with hundreds of permutations and that
will naturally make the filesize grow significantly. I bounced this
off of a few others and we couldn't find any way around it... so
please call us on our stupidity if we are missing something.
So, while the above can techincally be overcome, the filesize would be
very prohibitive. Then there is still the sub-pixel rounding problem
initially identified.
Hopefully this is helpful for others looking into a fluid blueprint
layout.
Aaron
On Feb 27, 9:42 am, "Jon Trelfa" <jtre...@gmail.com> wrote:
Kyle
Andrei Herasimchuk of Involution Studios found a method for
implementing a liquid layout with BluePrint. I haven't tested it
myself, but it might be what you're looking for:
http://www.ixda.org/discuss.php?post=23298&search=blueprint
Hope that helps,
Kyle
dim...@gmail.com
way to go is with the javascript style switcher. 6x800 for people
with width of less than 1000 and 1024x768 for everyone else.
Cheers
Aaron Barker
looked a little closer. Unfortunately he did run into the issue I
described above about it getting complicated as you move additional
levels deeper.
His large left column is a span-15. Lower in the page he shows a 50/50
split which you would think should be a span-7 and span-8 (yes, not
really 50/50). He instead had to use a span-11 and span-12 to create
the layout he wanted because those are the span-* selectors that have
the 50%-ish width. So while yes, this got the job done... it's not
the nice and easy blueprint we know and love as you need to continue
to reference back to the CSS to see which span matches up with the
percentage you want a given block to take.
Props for getting that far and finding a way to make it work, and I
guess it's a good thing to have in the back pocket, but not a silver
bullet by any means as I can't just switch from fluid to fixed if I
wanted.