The future of CSS layouts

http://www.netmagazine.com/features/future-css-layouts

by tilt • 15 years ago

121 37 15 years ago

macavity23• 15 years ago

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.

olavk2• 15 years ago

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.

StrawberryFrog• 15 years ago

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.

Volpe2• 15 years ago

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.

talmand2• 15 years ago

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.

ZoFreX3• 15 years ago

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.

simanek• 15 years ago

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.

mechanical_fish• 15 years ago

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

ZoFreX3• 15 years ago

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.

nikcub2• 15 years ago

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/

iaskwhy• 15 years ago

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

ColinWright• 15 years ago

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

fortybillion2• 15 years ago

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.

nikcub2• 15 years ago

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• 15 years ago

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

rglover2• 15 years ago

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

PakG12• 15 years ago

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.

rglover2• 15 years ago

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?

talmand2• 15 years ago

I cannot say how badly I want that positioned float.

snorkel• 15 years ago

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

fortybillion2• 15 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.

olavk2• 15 years ago

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.

intellection• 15 years ago

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>

tomelders4• 15 years ago

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.

michaeldhopkins2• 15 years ago

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.

tomelders4• 15 years ago

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

jessriedel• 15 years ago

This frightens me.

notatoad• 15 years ago

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.

tomelders4• 15 years ago

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.

tilt• 15 years ago

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.

NHQ• 15 years ago

the horizontal scroll will finally have its day

The future of CSS layouts

Related Stories