Grid Frameworks and why I’m not keen on them…

I’ve written a post for 12 Devs of Xmas on Grid Frameworks.

After spending months whining about grid frameworks, 960.gs and Bootstrap, I’ve finally backed up my tweet-sized complaints with some context and examples.

I knew it would be contentious and that some people would feel antagonised by my saying that developers who don’t consider accessibility shouldn’t be on the web. And possibly also that I suggest some developers lazily fail to customise frameworks to appropriately suit their needs. So far, the reasons behind these feelings seem to be a lack of control over their own work, blaming clients or bosses. I don’t know what to say to be helpful in these situations

Me, I would refuse to do a job that wouldn’t fit my idea of quality development. If there’s not enough time to make a site accessible (the idea of this still baffles me as I consider accessibility part of core development) then there’s not enough time to finish the project. It does feel rather unhelpful telling someone that, if their boss/client is forcing them to do things in the wrong way, they should quit their job, and I probably care about these things a lot harder than many, but honestly, that’s what I’d do.

Anyway, I’m sure I’ll be dealing with more accessibility-related issues in the future. It’s far too easy for me to go off on a rant and a ramble, I just want more people to care.

6 comments

  1. I appreciate and agree with your sentiment about semantic markup, and accessibility, but I think you may have jumped the gun in Day 7: Grid Frameworks by implying grid frameworks are inherently inaccessible.

    I argue against front end frameworks in my day to day job. The reasons I cite are:

    1) developers need to learn the framework, not the underlying technology
    2) our web standards require semantic markup, which frameworks often lack out the box
    3) frameworks look like a framework – sometimes as much work is required to theme it as there would be to build from scratch
    4) frameworks often mean extra bytes – superfluous markup contradicts my requirements for mobile first / every byte counts

    I get where you’re coming from and agree in most parts. I’m not saying I’ll never use a front end framework, but I do campaign for refining and building our own internal boilerplates.

    It’s important to be careful when choosing arguments to protect accessibility. To say using a grid framework would introduce a risk to the accessibility of the site would be careless if not untrue, thus risking the importance of the accessibility argument. Like all things, the devil is in the detail. If those grids had semantic class names rather than grid_whatever they’d be no more accessible. You rightly point out some basic semantics required for a good accessible build – lists, heading levels, good anchor text – but these are separate from the structure provided by a grid framework. (Of course, all this goes without mention of landmark areas, aria, skip to main content etc)

    (As an aside, is it terrible to use a grid as the structure and object orientate the theme with semantic classnames alongside the grid_whatevers?)

    I agree accessibility and semantics are both important, but I think there’s a lot of detail missing to get from point A to point B in your post and subsequent comments, which is very dangerous when promoting the cause to senior stakeholders and those who need to understand the cold hard facts without emotion.

    Reply

    • Laura

      Thanks Craig, there’s some great points in there, and I think you’re right in saying that I was making a bit of leap, here’s my explanation why:

      I was really trying to create an argument around your point 2. “Our web standards require semantic markup, which frameworks often lack out of the box.” But then I came to ask myself: why do semantics matter? Why bother making anything semantic? I know that I think that semantics are important, but how do you explain it to someone who just thinks that semantics are about being fussy?

      So I went one level deeper. Why are semantics so important to me? Chiefly, accessibility. Then reusability, maintenance etc. Thus my post became about these things, brushing over the semantics that people often disregard as purist.

      I’m sorry if I didn’t convey the point well enough, and you’ve definitely given me some food for thought in terms of how I represent accessibility.

      Reply

      • No apology necessary Laura, any constructive discussion on accessibility is good discussion.

        I too am incredibly passionate about semantic markup and accessibility, but the reason I need to be careful is there’s always someone ready with a counter; a supplier, external developers, project managers… I push back on poorly structured content all the time. As you mention, the basic but big ticket items like heading levels, form inputs, lists, good anchor text are all essential – but would I push back on someone for using a grid framework? Probably not, as the site can be completely accessible whilst using a grid system, just as much as a more semantic site can be inaccessible.

        If I’m honest, I would actually have to pay more attention if a supplier uses HTML5 sectioning elements to structure the document “semantically”, as these cause problems with the document outline when not implemented correctly:

        HTML5 sectioning elements, headings, and document outlines

        HTML5 document outline revisited

        Reply

  2. Marc

    I largely agree with your opinion on inaccessible, non-semantic grid systems. However, your post would have been more balanced if you had paid some attention to the existing alternatives. More semantic grid systems, such as Susy, Singularity and Zen Grids make it very easy to apply a custom grid to your own semantic HTML structure.

    Reply

    • Laura

      I would if I were more familiar with the alternatives! That’s why I cautiously tweeted that Sass is probably the answer. And whilst I do use Sass, I still write all my grids from scratch. This might be foolish, or because I’m a creature of habit having done that with CSS since I started out……I’m not sure which!

      Reply

Leave a Comment

Your email address will not be published. Fields marked with * are required.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>