

The future of CSS layouts - tilt
http://www.netmagazine.com/features/future-css-layouts

======
snorkel
Finally we're getting back what <table> gave us years ago.

~~~
fortybillion
Nested tables worked, but they were incredibly hard to write/edit by hand.
This gives us a way of using those layout concepts while still maintaining
some separation of document structure and layout definition.

------
ZoFreX
I'm really not enthused about bringing multiple column layouts to the web.
Yes, they are a staple of print - so is getting newspaper print on my hands.
Should we be building USB fingertip-dirtyers? Multi-column layouts are a case
of humans having to adapt to the constraints of the medium; as we move to the
future, our content should be bending to our will, and not the other way
around.

~~~
mechanical_fish
The problem is that we're not in 640x480 world anymore. We're rapidly leaving
960px-width-world. Our displays are finally getting denser (which lets us use
smaller font sizes successfully) and wider.

And the desire to avoid 120-character-wide columns isn't some arbitrary fetish
of print design. Over-width columns actively hinder readability. Robert
Bringhurst:

 _Anything from 45 to 75 characters is widely regarded as a satisfactory
length of line for a single-column page set in a serifed typeface in a text
size. The 66-character line (counting both letters and spaces) is widely
regarded as ideal. For multiple-column work, a better average is 40 to 50
characters._

 _If the type is well set and printed, lines of 85 or 90 characters will pose
no problem in discontinuous texts, such as bibliographies, or, with generous
leading, in footnotes. But even with generous leading, a line that averages
more than 75 or 80 characters is likely to be too long for continuous
reading._

These typographical rules of thumb are ultimately derived from human
physiology -- limiting the range through which the eye has to skip left and
right makes reading more relaxing, and the mental act of trying to go from the
right edge of a mile-wide paragraph to the left edge without losing one's
place is fatiguing. [1]

Up to now web designers have coped by forcing a single column, forcing that
column to be of limited width, and just padding out the remaining width with
navigation elements or whitespace. But the whitespace begins to look
ridiculous when it's 80% of the width of the screen.

So we're probably going to see more instances of successful multi-column
layouts. This is likely to break continuous scrolling, but on a device which
supports useful multi-column layouts you'll probably be okay with page-by-page
scrolling. Or, well, not. We shall see.

\---

[1] I highly recommend resizing the HN screen if you want to read one of my
doorstopper comments. ;)

~~~
ZoFreX
Oh, I know full well that narrow columns are easier to read. I'm just not
convinced that jumping from the bottom of one column to the top of the next is
easier than scrolling and thus reducing vertical and lateral movement of the
eyes. To me it seems optimal to reduce eye movement, but in fairness I am just
assuming that is the case and drawing my conclusions from that assumption.

~~~
pavpanchekha
Most of the cases where I've wanted to use multi-column layouts were cases
where that would let all my content be on one page. The benefits to all your
content being visible at once are pretty great, so I'm happy newer CSS specs
help.

~~~
ZoFreX
I'll have to have a play with it then :)

------
rglover
As a front-end designer, I'm excited to see the flexible-box model creep into
existence. It'd be nice to do a fluid layout without having to do a bunch of
workarounds. Excited to know that we'll soon be able to escape the dark past
that has been the web (hacks, bloated markup, extra stylesheets, etc). The
only thing missing: Microsoft should make browser upgrades mandatory after a
certain period of time, as should everyone else. Granted, this may cause some
issues but what would the major drawbacks be (extra work for IT depts. doesn't
count)?

~~~
PakG1
The backlash for ending support for Windows XP early and getting everyone to
upgrade to Vista was huge. Microsoft bowed to all the corporate customer
pressure and extended support for XP. Given all the web apps that are made for
older browsers, I can imagine a similar backlash easily, though I don't know
whether it would be on the same scale. But I can definitely imagine it being
enough for Microsoft to back off from such a decision. No harm, no foul is the
safest route for Microsoft to go.

~~~
rglover
Sure it's safe. But that's because people are lazy. Taking your example of web
apps for older browsers, shouldn't the teams behind those products be
upgrading them anyways or at the very least trying?

~~~
PakG1
When there are better things to do, there are better things to do. When it's
not broke, don't fix it. Spolsky's arguments about why Netscape 6 was a bad
idea applies very easily to enterprise web apps where code bases have no
application outside of that particular organization, and so it's even harder
to modify things.

edit: There's something in many corporations called the hurdle rate. All
projects have to provide a financial return that is above the hurdle rate.
Updating web apps to work on newer browsers does not easily compute to
surpassing the hurdle rate because you did nothing to add new
functionality/productivity. So it's very hard to get funding for this kind of
work in many organizations.

------
macavity23
The 'grid' element is very neat. Basically, it's <table>s, but in CSS, which
is where they should be.

Also interesting is that Adobe is taking a front-and-centre role in the new
CSS. Forward thinking of them to see the writing on the wall.

~~~
Volpe
Did I miss something? How are Adobe front and centre? They don't have a
browser... I'd say Google/Apple/Mozilla are taking front and centre, with
Adobe trying to come up with new tricks to fend off the inevitable death of
flash.

~~~
talmand
How exactly is Adobe making proposals to the CSS standard going to fend off
the "inevitable death" of Flash? One has very little to do with the other. Is
it so easily forgotten that Adobe has tools other than Flash? Ever heard of
Dreamweaver?

Plus there are numerous companies involved in creating the HTML and CSS
standards that are front and center that are not involved in creating a
browser. Take your blinders off.

~~~
Volpe
I'm the one with blinders? - Seriously?

The browsers implement the standards... hence the front and centre. IE defined
the "standard" for a long time (and still does).

Dreamweaver is a horrible example of 'front and centre' of HTML/CSS. It
creates horrible markup.

None of Adobe's other products are at all related to HTML/CSS (Edge aside).

------
nikcub
I love the new grid - this is going to make design so much easier, eg. 'i want
a header, three columns, and a footer' no longer requires 150+ lines of
markup.

and it should be possible to write a shim for it for older browsers and bring
the new syntax to existing browsers now (or, as soon as the standard is
ratified)

the sooner we can do away with the old css layout techniques, the better.

~~~
CoryMathews
150+ line of CSS means you are doing something very wrong. That could easily
be done in a lot less.

------
tilt
I find column layouts useful, expecially for "hacking" purposes. A while ago I
attempted something you can check here

<http://tilt2k.github.com/ressays/>

Point to an Essay from the menu, with a CSS3 compatible browser you'll see an
easy frontend pagination with very little struggle.

------
talmand
I cannot say how badly I want that positioned float.

------
NHQ
the horizontal scroll will finally have its day

------
tomelders
We need to do something big to get rid of old browsers so we can all move
forward and start using this stuff. We need real progress.

If there were a law that mandated upgrading browsers that were _out of date_
(by whatever definition you think works) what would that law look like? How
would it work?

I ask, because if anyone comes up with something that could work, then we can
all start pestering our politicians to put it into action.

It might be a complete non starter of an idea, but I'm so tired of seeing all
these awesome time saving HTML5 tricks I cant use, it's got to be worth a
shot.

~~~
michaeldhopkins
Probably the FCC would regulate browsers. In addition to wasting developers'
time filing reports and talking to government employees, the regulating body
would add more restrictions on browsers, possibly even mandating they be used
to report undesirable activity. I think it's worse than a non-starter of an
idea -- it would slow browser development and turn browsers into weapons
against free use of the Internet.

~~~
tomelders
I don't understand how you can make that jump. Its true that a badly thought
through law could open the door to that sort of activity, but that's not
guaranteed.

Also, I see reason to "regulate" browsers. Lets say the law was this....

"A person may not connect to the internet using a browser more than two whole
number versions behind the latest production version for that particular
browser."

Here we have a rule which leaves browser vendors free to pursue whichever
route they see fit, with no need to supply any sort of reporting or speaking
to government officials. Nor need it be enforced. For example, here in the UK
we have laws which ensure web accessibility as part of the Equality Act:

[http://www.rnib.org.uk/professionals/webaccessibility/lawsan...](http://www.rnib.org.uk/professionals/webaccessibility/lawsandstandards/Pages/uk_law.aspx)

Now this law is not being enforced, but if you work in web design or
development in the UK, you have undoubtedly felt it's repercussions as clients
demand increasingly higher compliance ratings. This has been unquestionably
good for the state of the web, at least here in the UK.

Or perhaps there's a national security angle to take, or even an accessibility
angle (I believe IE6 and 7 can't increase pixel font sizes). Maybe there's an
existing law that is somehow being breached by the mere existence of IE6 &
7....

I suppose what I was asking was "Is there a creative way to mandate modern
browsers in law".

~~~
michaeldhopkins
If you follow US policy regarding the Internet since 9/11, you can should be
able to see how browser regulation could be abused or at least slow
development with red tape...and you were speculating, so it's okay for me to
do that too.

If you really meant that Congress or the FCC should make a suggestion to stop
using old browsers, that is completely different. It would be followed to the
degree that IT departments could afford to upgrade old computers, conduct
training and whatnot.

It's interesting you mention that UK developers are very compliance-conscious.
Perhaps I misunderstand, but every rule that must be complied with increases
the development cost of a project, and I believe the reason you want every
browser to support IE8 is you want to save development time. If I understand
you right, you want to shift your time burden onto browser developers and IT
departments, the reverse of the current UK situation you support where the
compliance burden is shifted from the IT departments to the web developers!

~~~
tomelders
I think you're making some huge leaps of imagination there. It seems your
starting with the assumption that laws can only introduce red tape and slow
things down. While this is certainly possible, it's not inherent. It is
absolutely possible to draft rules, or policies in such a way as to reduce red
tape. Take for example Van Halen's policy on M&Ms

<http://www.snopes.com/music/artists/vanhalen.asp>

While not in the political sphere, it demonstrates perfectly how a well
thought out policy can reduce complexity while still delivering results.

Any attempt to argue that this has no bearing in a political context serves
only to illustrate a complete and utter lack of imagination. _Once people know
the M &M trick, it becomes useless... but M&M's are one example of that
technique. Next time, it could be Alphabet Spaghetti with all the A letters
removed._

Also, what new training would be needed in order to work with modern browsers?
People who need training on how to use a modern browser require training of a
completely different sort. Since when did "borderline-retarded" become our
baseline?

Accessibility laws here in the UK have actually made development easier as it
has created an environment where developers have a much bigger input in the
design process as they can cast an expert eye over concepts and raise concerns
at a very early stage. This isn't about removing features, it's about building
features that work properly.

Nor is it reasonable to class IE8 as a modern browser. IE9 is almost there,
but I don't think IE can be classed as "modern" until IE10.

Nor do you understand me right. I don't want to shift my time time burden onto
anyone, I want to do more in the time I have. IT departments make the call on
what browsers their users can use, so it's reasonable to shift some of the
_support burden_ onto them.

Any talk of "internal systems" that depend on ActiveX and the like demonstrate
a lack of investment in technology. Why should we (the human race) be anchored
to the past by people who are unwilling to invest in the future, despite
reaping the benefits of other peoples investments. It stinks to me. Browsers
are free. Modern browsers are easier to support. modern browsers are more
secure. Modern browsers increase productivity. Modern browsers have low system
requirements. There's no real excuse for not using them.

But lets carry on as we are. It's been working crap so far, but let's soldier
on at a snails pace. With any luck, we'll be able to stop supporting IE7
sometime around the point we all retire. And heaven forbid we explore any new
angles on how to push things forward, even if it's just out of pure interest,
because that's wrong... apparently.

