What's wrong with grids? Everything I have read about design seems to advocate laying things out in the fashion.
The nice thing about bootstrap is it enables things like having say, 2 columns at the top of the page then 3 columns underneath then finally going to a single column for the footer very easily.
Doing these things in manual CSS if you don't know about all the various browser quirks and tricks can be a pain.
So awesome in fact, that I created DesignGridLayout, a Java Swing layout manager. Jean Francois Poilpret has been the project owner for years and extended far beyond my original vision.
I didn't say grids were bad in general, I said they are bad in web design. The problem of tightly coupling content and presentation, and the hiding semantic meaning that goes with it, doesn't exist in a desktop GUI environment, or in a print ad or flyer, etc. Grids are perfectly fine in those uses.
Grids are fundamentally the exact opposite of good design. They are a cludge to make it easier to lay things out the way you want, but do so by tightly coupling content and presentation. I see it advocated too, but not by design gurus, by people who want to just have it work and don't care about doing things correctly or having reusable, modular components.
> Grids are fundamentally the exact opposite of good design.
As a former designer, I cannot overstress how stupid this sounds. It's the equivalent of a designer walking up to a bunch of programmers and saying "what's the big deal with functions?" Some things are opinion, and some things are just wrong. This is the latter.
Here's the longer response:
Grids are fundamental to good design. Have you ever wondered why some sites just look right? GRIDS. Ever noticed how many people try to emulate famous designs but never seem to get it quite right? What are they missing? GRIDS. If you start designing without a grid, guess what? You've already resigned yourself to mediocrity, even if you don't realize it. Here's an analogy: you are building a house, and you decide to "just wing it" with the foundation and fix it as required as you go along. You have already failed before you even started. The grid is the design equivalent of a home's foundation. Everything you design will build on top of that grid.
When you say things like
> I see it advocated too, but not by design gurus
there's really no coherent response you will get except NO. STUPID STUPID STUPID.
Edit: Here's what one of my designer friends responded with: "And it's always good to write a line of code (at least) twice, in case it isn't noticed the first time."
And no, I won't show you an example of a guru who advocates grids. Stay ignorant.
Show me a respected design authority who advocates grids then. "STUPID STUPID STUPID" is not an argument. The fact is, grids tie content to presentation, and are entirely unnecessary. The fact that you think grids is the reason some websites look right and others look wrong is astoundingly ignorant.
> Purchasing my copy of grid Systems in Graphic Design, by Josef Muller-Brockmann, was the best money I've ever spent on a design text. I was a relatively seasoned designer with 6 years of pro-experience when I was fortunate enough to find a copy of this masterpiece. I was largely self-taught however, and while I knew from working in various layout programs about grids, I had no idea how powerfully they could be utilized. Within a weekend of reading and absorbing this book, my designs had improved substantially.
The fact that I recognize your name solely because you seem to constantly deliberately misrepresent what people say so you can respond with nonsense is rather depressing. That is graphic design, not web design. See how I pointed out that tightly coupling content and presentation is the problem with using grids for web design? Notice how that book never even touches on the subject? Web design is not just graphic design, it is a different medium, with different needs.
You'd be a more compelling troll if you chose a different one of my comments to attach this to, since the comment you're replying to is literally just a link to a book.
Every university visual communications program (graphic design) teaches grids ... for a reason.
* http://departments.risd.edu/registrar/web/1112cat.pdf (a number of classes focus on grid systems. this is one of the most respected design programs in the country)
* http://graphicdesigntheory.net/Images/DT/Armstrong_GDTsyllabus.pdf
* http://pacificgraphicdesign.wordpress.com/courses/graphic-design-ii-2/graphic-design-ii-syllabus/
That is precisely how it is different. We're not talking about content that is just consumed with our eyes. It is consumed by computer programs also. And we need to convey information in a way that those programs can understand. Hiding semantic meaning in classes is bad, as is pushing presentation information into markup. A screen reader has no way to understand that a div with a class of "errormsg" is anything at all. It is just a generic meaningless item. A screen reader can understand that a paragraph tag with a role of "alert" has a specific defined meaning, this is text content indicating an error or warning message. Just as a div with a class of "navbar-fixed-top" is completely meaningless, and a nav tag conveys the specific meaning of "this is a container holding navigation items".
I'm not sure how using a grid system or something like bootstrap is "pushing presentation into markup".
Regardless of whether you use bootstrap or not you are always going to be specifying CSS classes which describe the presentation of elements, not sure how else it can be done?
Screen reader software will generally ignore anything that it doesn't understand or deem irrelevant.
Whenever I have tried screen readers they will say "ok, there's 3 divs with content here. Let's read them out one at a time or just read the headings and wait for the user to select one". How they are arranged in a grid will be irrelevant to the software.
Does bootstrap present some particular problem for screen readers?
You are yet to explain what you think best practices should be here.
>Regardless of whether you use bootstrap or not you are always going to be specifying CSS classes which describe the presentation of elements, not sure how else it can be done?
>Screen reader software will generally ignore anything that it doesn't understand or deem irrelevant.
Yes, that's the problem. Putting useful information in places where software has no way to understand it.
>Whenever I have tried screen readers they will say "ok, there's 3 divs with content here. Let's read them out one at a time or just read the headings and wait for the user to select one".
And if you had the appropriate tag instead of a meaningless div, it would know what to do. That's the point. Google for semantic html.
> Yes, that's the problem. Putting useful information in places where software has no way to understand it.
You aren't putting "useful information" in the classes, you are putting presentation related information in there, if you are displaying the content non-visually it is irrelevant and can be safely ignored.
Writing semantic HTML is nice for bots and browsers, but there is nothing stopping you from doing this whilst using bootstrap or whatever. Another thing to consider is that bootstrap aims for backwards compatibility so you are going to be restricted by tags that can be supported by old versions of IE etc.
Even if you could write perfect semantic HTML I don't see how that would make it bad practice to organise your pages using grids?
>You aren't putting "useful information" in the classes, you are putting presentation related information in there, if you are displaying the content non-visually it is irrelevant and can be safely ignored.
"This is navigation" is not just presentation, it is real, meaningful information.
>Writing semantic HTML is nice for bots and browsers, but there is nothing stopping you from doing this whilst using bootstrap or whatever
The contortions it would take to make bootstrap work with proper markup would consume far more time than simply writing correct CSS to begin with.
Navigation is not something that is done via CSS.
You provide navigation information inside the HTML itself, via <a href="/whatever.html">Link Title</a>.
If you disable CSS in your browser you can still view the page and it is still perfectly functional and should work fine with a decent screenreader.
I'm hugely confused by what you mean by "proper markup", bootstrap does not do markup itself, you create the markup and apply bootstrap's CSS classes to make it look a certain way.
Could you provide a link to a page that you would use as an example of how it should be "done right"?
It is really unclear what you're talking about. You seem to be suggesting that designing to a grid means somehow disguising your navigational menus, but that is just flagrantly untrue, so jiggy is trying to inquire as to what you actually mean. Rereading your comments will not clarify it, because your comments are either unclear (if you do not mean that grids = disguised nav menus) or very poorly substantiated (if you do mean to say that grids = disguised nav menus).
Grids are fundamentally the exact opposite of good design.
From a software perspective, perhaps. From an aesthetic design perspective, grids are a common tool used widely outside of web based design.
by tightly coupling content and presentation.
CSS has always been a hack that disallows completely or properly separating content and presentation, except in toy cases. Thus, frameworks like Bootstrap.
>From an aesthetic design perspective, grids are a common tool used widely outside of web based design.
Yes, we're not in 1996 anymore. We're beyond the "lets pretend the web is print" phase finally. That means separation of content and presentation matters.
>CSS has always been a hack that disallows completely or properly separating content and presentation
What? People (deliberately?) not understanding how to use CSS correctly certainly caused problems like that. And I'm certainly open to blaming much of that on the design of CSS. But it by no means disallowed it separating content and presentation, that is the entire point of it. Stop littering your markup with classes and you can get the benefits of that separation.
The nice thing about bootstrap is it enables things like having say, 2 columns at the top of the page then 3 columns underneath then finally going to a single column for the footer very easily.
Doing these things in manual CSS if you don't know about all the various browser quirks and tricks can be a pain.