2011 August Archive

Three Practical Uses for Flexbox

The Flexible Box Layout module (commonly referred to as Flexbox, for convenience) is implemented in Firefox, Chrome, Safari, and IE10. I wrote an article explaining Flexbox in detail in .net magazine last year, but thought it worth following up with a short, practical guide on a few things it’s useful for.

I actually don’t think it’s perfectly suited for complex page layouts, but it does some simple things very well, so that’s what I’ll concentrate on. There are three use cases in this article, none of which are impossible using CSS2.1, but all of which are made easier with Flexbox.

Read the full article


On Adobe Muse

Today Adobe released a preview of their new WYSIWYG website creator, Muse. Shortly after, I had a good old moan about it on Twitter. Not, as you may think, because I feel threatened by website creation being made easy – it’s been easy for ages, but ‘easy’ doesn’t always mean ‘good’ – but because it gets a few fundamental things badly wrong.

My code purist side rejected it because the markup it outputs is horrendous; if you don’t believe me, take a look at the code for one of their example sites, ‘Lucid Synergy‘. My educator side rejected it because it teaches you nothing about how a web page is made; I learned to code by using Microsoft FrontPage many (many) years ago, and understood HTML by editing the source of the document and tweaking it until I got it the way I wanted – but Muse has no code view, so this is made very difficult.

But the real problem with Adobe Muse is deeper than that: it’s that all semantic sense is completely removed from the page. There are no headings, no lists, all text is in p elements, inline styles are applied with span rather than em/i/b, etc; this gives no structure, no meaning, no aboutness to your page, which at the very least means penalties for SEO.

And worse still is that there’s no document flow; all the elements you add to the page are positioned relatively to their parent and follow no particular order, which is pretty bad for search engine spiders (and hence your SEO), but absolutely terrible for visitors using assistive technology.

It’s the product of a company that cares only about appearance, and nothing for content. As @paulrobertlloyd said on Twitter:

It’s not that the code Adobe Muse generates is ugly, it’s that it’s meaningless.

The issue with the lack of semantic elements is not insurmountable, it just needs some work by Adobe before the final release. The lack of document flow and content order is more serious, however, and will need a complete rethink; I hope that this happens.


On Mark Boulton’s Grids Proposal

I recently wrote a feature for .net Magazine, The Future of CSS Layouts, which took a look at several proposed CSS modules intended to provide more flexibility for laying out websites. One of those modules, Grid Layout, has been experimentally implemented in IE10 Platform Preview, and it prompted Mark Boulton to propose an alternative approach in his article Rethinking CSS Grids.

While I think the alternative syntax is pretty robust, I did detect a couple of flaws in it which I promised Mark I would write about, and that’s what I’ll do in this article. Before I get to that, I just want to quickly address one of the key points from his proposal.

Read the full article


Primum non nocere

The Latin phrase used in the title of this post, primum non nocere, translates as:

First do no harm.

It’s often said that this is part of the Hippocratic Oath, from the code of ethics followed by medical professionals. While that’s not correct, it’s a rule that’s generally considered important to follow: do good, or at least do no harm.

Although what we do is not as critical to society as the role of a doctor, I think we need to start considering an oath like this for working on the web. Let me explain why.

This week I’ve seen two ‘HTML5’ websites which feature rich interactions and animations; like Flash used to be, but now using open web technologies. This is a very good thing. However, visit them with JavaScript disabled and you get a very different experience: that is, nothing, or next-to-nothing. Literally. On one site I saw a logo and a message telling me I needed JavaScript; on the other, a blank screen.

If all of your content is in HTML, and styled with CSS, but you’re requiring people to use JavaScript before they can see it: you’re doing it wrong.

In order to ensure that we make websites available to everyone, regardless of browser type or capability, I would suggest we come up with our own oath – perhaps something like this:

First make your content accessible.

This isn’t new, of course; this is basic stuff. But so keen are many of us to rush to take advantage of all the shiny newness of devices and features, we’re forgetting to do the fundamentals. We’re doing harm.


Aside

I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment . More Asides.