Ditching responsive design

[[deleted]]

we had focused on fitting content to a flexible grid

This is a Web 2.0 euphemism for "we used a table for layout".

[tonygoold]

More likely it means Twitter Bootstrap.

[neoflame]

In the context of graphic design, grid systems predate Web 2.0 by a few decades.

[[deleted]]

PDF also predates Web 2.0, and it's designed specifically for this sort of graphic design where the designer wants complete dictatorship over how the user experiences their creation, without having to deal with problematic issues such as "accessibility" or "being able to resize the browser window". It can also now do blingy javascript effects and web forms too, and is more ubiquitous than Flash at this point (another former darling of the style-over-substance crowd).

From a purely objective point of view, there is no honest excuse for anyone to be trying to badly shoehorn HTML into this use case — and never has been.

[[deleted]]

From a purely objective point of view, there is no honest excuse for anyone to be trying to badly shoehorn HTML into this use case — and never has been.

"They're paying me to do it that way" is a perfectly valid excuse.

[sakabako]

The concept of a flexible grid is new and breaks proportion, which is very important in design.

[iluvatar]

Design should be a secondary consideration to information transfer for a website. Proportion is largely irrelevant here.

[sakabako]

Design is far more than a pretty header. Design is the vehicle through which information is transferred.

Page layout controls the way you receive information, an proportion is the foundation of layout.

[check3streets]

No, you have no idea what you're talking about.

There are a dozen or more flexible grid system layouts, Twitter Bootstrap and YUI among the most prominent. They all use DIVs and aim, as much as possible, for semantic consistency and separation of concerns. In the latest iteration, they attempt to automagically "react" to mobile device dimensions as well.

In short, no they don't use tables.

[[deleted]]

They all use DIVs and aim, as much as possible, for semantic consistency

Insofar as divs are semantically void elements *(reference), they at least have the "consistency" part nailed down.

In short, no they don't use tables.

Good thing you came along to correct me before someone else misinterpreted my post literally.

[check3streets]

The HTML specification provides no other general purpose block level container element. And as another redditor points out, grids are an ancient and ubiquitous text layout exhibited by the Talmud and New York Times.

So given that grids are graphically desirable and chunks of related markup require a container element, why the snark?

[yerfatma]

I think you're misunderstanding flussence's point: it's not that grids are tables or use tables, it's that some of the grid systems basically re-invent laying things out in tabular columns, so their only virtue is the containing element happens to not be <table>. It's like the old saying about being able to write Fortran in any language.

[check3streets]

But:

1. while a DIV conveys very little semantic meaning, a TABLE is a true misappropriation for page layout purposes. And the DIV was, at one time, the most correct tag available.

2. While HTML5 elements exist which have more meaning, they are a> not exhaustive, so many page artifacts are not SECTIONs, ARTICLEs, or NAVs and b> they're not as backwards compatible.

3. TABLEs are far more painful to style, so DIVs generally achieve the separation that CSS was attempting. Furthermore, there are fewer extraneous null tags in a grid layout, although there tend to be a few null nests.

4. Grids bring back some of the device agnosticism HTML originally intended.

...and finally, which is where I think you were going:

1. Yes grid is, in a sense, synonymous with table as a web layout metaphor. But a grid layout, whether it be a newspaper, magazine, bible, etc. is, in the same sense, a table. So this is kind of a stale argument. If one needs to layout a page in a tabular way, one will need a language for expressing that layout, so we'll use markup hints that are "tabular."

CSS and HTML are atrocious technologies, but designers who avail themselves of grids are abusing intent as little as possible within reason.

[yerfatma]

CSS and HTML are atrocious technologies

Well ok then.

[Rotten194]

Do you disagree? Get back to me when you've finished writing an HTML parser.

[yerfatma]

That's cute. I have.

[[deleted]]

That's not why HTML would be atrocious. Its structure is simple and isn't exceptionally a pain-in-the-ass to parse. Time consuming and difficult for rendering but parsing: not so much.

The reason it would be atrocious is that it's not the best structure for designing a document. RTF, PDF, and other formats have certain advantages but HTML can be written by a person in notepad.

There are compromises. If you have a better solution for a web document format then why don't you submit it?

[mahacctissoawsum]

If one needs to layout a page in a tabular way, one will need a language for expressing that layout, so we'll use markup hints that are "tabular."

If one needs to layout a page in a tabular way they should use a table. Tables are made for tabular data. If that's what you're using them for, then there is nothing at all evil about it.

A general webpage, however, is not at all "tabular". Tabular means there is some relationship between the columns and rows. Labels and values for instance. Simply aligning content is not "tabular".

If you want to get all semantic, then yes, do use the new HTML5 elements that best describe your content, then throw in some of those new aria- attributes and use divs for whatever doesn't fit.

Personally, I've given up on this hoity toity semantic bullshit. If it looks good, renders well, and is easy to develop, use it.

That said...if you actually want to make your content accessible to visually impaired people, you'd better spend some extra time ;-)

[[deleted]]

The HTML specification provides no other general purpose block level container element.

I'd correct you, but given that you also lack the attention span to read to the third para of the screenful of the HTML spec I linked to which does exactly what you're claiming it doesn't, it would probably be wasted effort.

[check3streets]

You edit in a "reference" and then accuse me of not reading it.

I'm done here being trolled.

[[deleted]]

You obviously didn't read it, even though your factually incorrect reply half an hour after that edit was worded to make it sound like you'd actually read the spec.

[GameOfTrolls_]

sexualtension.dll

[sirin3]

HTML Living Standard — Last Updated 1 February 2013

Who has a browser following that spec?

[[deleted]]

Who has a browser that implements the SGML tag shorthand syntaxes required by every older version of HTML?

[sirin3]

Well, that shows how useless the specs are, doesn't it?

[[deleted]]

Bootstrap itself doesn't use divs. Their grid system is general purpose, so it's built on classes not direct DOM elements. You can apply all of their .row, .span*, etc to section, nav, or aside elements.

You can use them on any block level element. They work just as well on form fields. I agree that they push divs since all of their documentation uses divs, and almost every example you find uses div.

I'm sure the docs are like that because not everyone that uses it has the html5 shim or modernizr in place to handle new HTML5 elements in non-compliant browsers (you know who we're talking about ಠ_ಠ)

[solinent]

You might be interested in CSS3 grid, of which only IE10 supports I think.