The future of CSS layouts | Hacker News Reader

The future of CSS layouts

netmagazine.com

121 pointstilt37 comments

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

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.

CSS2 (from 10 years ago) is equal in power to HTML tables. (The display:table-* properties are based directly on the layout model of HTML tables. For better or worse - they are also somewhat underspecified like HTML tables was.)

These new proposals are much more powerful. Most notably they allow you to visually place elements in a grid independent of the source-order. CSS2 (and HTML table markup) does not allow that, ie. visually adjacent cells must also be adjacent in the HTML.

Stable Tables ♥ Datatree structure

Why is my CSS/webdesign intellectualized into a math problem?

Is it wrong tables work and feel like building blocks?

WYSIWYG enabled full sight.

Some walls privilege CSS.

Internet anyone can build?

Anyone can build a table.

</tables>

<div style"TL;DR">Tables fit WYSIWYG whereas CSS abstracts. Coding more WYSIWYG could ease.</div>

</body>

</html>

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.

As far as continuous text goes, you're right. These features probably will get used in horrible ways. But even without these features available there are already many well-designed column-based layout examples out there.

Not to mention, "constraints of the medium" could take on a whole new meaning as the wide array of display sizes continues to increase. It will be more and more necessary for web designers to create designs that easily adapt to various displays. They call this "responsive web design" and if you are practicing it right now you are an exception. Soon it will be a necessity and these new CSS capabilities look to be well suited to this purpose.

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. ;)

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.

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.

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

newspapers don't display text in columns not just because it is easier to layout, but also because it is easier and faster to read.

the optimum display settings for reading speed is two columns of an average width of 14 words.

there has been a ton of research in this area[1] [2]

[1] http://edlab.tc.columbia.edu/files/eye-tracking%20article.pd...

[2] http://www.springerlink.com/content/03310aej5bx4lekk/

Why is it faster to read two columns instead of just one? I can think of a reason: getting your head lower and eventually turning the page makes it slow to be only one column but on a screen you just scroll and scroll...

(I cannot read the articles right now, if the answer is there just ignore me.)

I long for multi-column text. I hate scrolling, but worse, I hate getting to the end of a screen-width of text and then having to flick back to the left and work out which line to start on. Text should be in 8 to 10 word lines for optimal readability - much longer and it slows down your ability to read quickly and effectively.

Your mileage will vary, and I'm not saying that everyone has the exact same preferences or requirements, but I can't wait for easily rendered, reliable multi-column text.

Some references:

http://baymard.com/blog/line-length-readability

http://www.456bereastreet.com/archive/200509/line_length_and...

http://psychology.wichita.edu/surl/usabilitynews/72/LineLeng...

http://www.bastoky.com/KeyRelations.htm

The issue with columns in web browsers is the variance in screen height. Clearly it would be worse to render an entire long-form article in 3 columns, forcing the user to scroll back up to the top of the page to start reading the next column.

This forces the designer to break the content up into multiple column blocks based on a target screen height... so now we have the same problem, only on a different axis.

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)?

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.

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?

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.

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.

Actually, the display:table-* properties in CSS2 is the CSS equivalent to html tables. 'grid' seem to allow positioning of elements in a grid independent of their ordering in the html, which is very nice, and more powerful than either html or CSS2.

The grid element is one of the inputs from Microsoft. This is not very surprising - it uses the basic concepts from the grid in WPF and Silverlight. It's pretty a cool way to lay things out.

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.

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.

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).

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.

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

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.

I cannot say how badly I want that positioned float.

the horizontal scroll will finally have its day

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.

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.

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...

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".

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!

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.

This frightens me.

and who is going to implement this law? surprisingly enough, countries outside your own also have the internet.

if you want users to drop old browsers, write web apps that require new browsers.

I don't know. How about you make a suggestion?

The original comment was about exploring a concept, yet it seems to have been dismissed completely out of hand without even a moments thought. Im genuinely disappointed with the complete lack of imagination.

Reply on news.ycombinator.com