August 2011 - Broken Links Archive

Three Practical Uses for Flexbox

The Flex¬≠i¬≠ble Box Lay¬≠out mod¬≠ule (com¬≠mon¬≠ly referred to as Flexbox, for con¬≠ve¬≠nience) is imple¬≠ment¬≠ed in Fire¬≠fox, Chrome, Safari, and IE10. I wrote an arti¬≠cle explain¬≠ing Flexbox in detail in .net mag¬≠a¬≠zine last year, but thought it worth fol¬≠low¬≠ing up with a short, prac¬≠ti¬≠cal guide on a few things it‚Äôs use¬≠ful for.

I actu­al­ly don’t think it’s per­fect­ly suit­ed for com­plex page lay­outs, but it does some sim­ple things very well, so that’s what I’ll con­cen­trate on. There are three use cas­es in this arti­cle, none of which are impos­si­ble using CSS2.1, but all of which are made eas­i­er with Flexbox.

Read the full article

On Adobe Muse

Today Adobe released a pre¬≠view of their new WYSIWYG web¬≠site cre¬≠ator, Muse. Short¬≠ly after, I had a good old moan about it on Twit¬≠ter. Not, as you may think, because I feel threat¬≠ened by web¬≠site cre¬≠ation being made easy ‚ÄĒ it‚Äôs been easy for ages, but ‚Äėeasy‚Äô does¬≠n‚Äôt always mean ‚Äėgood‚Äô ‚ÄĒ but because it gets a few fun¬≠da¬≠men¬≠tal things bad¬≠ly wrong.

My code purist side reject¬≠ed it because the markup it out¬≠puts is hor¬≠ren¬≠dous; if you don‚Äôt believe me, take a look at the code for one of their exam¬≠ple sites, ‚ÄėLucid Syn¬≠er¬≠gy‚Äô. My edu¬≠ca¬≠tor side reject¬≠ed it because it teach¬≠es you noth¬≠ing about how a web page is made; I learned to code by using Microsoft Front¬≠Page many (many) years ago, and under¬≠stood HTML by edit¬≠ing the source of the doc¬≠u¬≠ment and tweak¬≠ing it until I got it the way I want¬≠ed ‚ÄĒ but Muse has no code view, so this is made very difficult.

But the real prob¬≠lem with Adobe Muse is deep¬≠er than that: it‚Äôs that all seman¬≠tic sense is com¬≠plete¬≠ly removed from the page. There are no head¬≠ings, no lists, all text is in p ele¬≠ments, inline styles are applied with span rather than em/i/b, etc; this gives no struc¬≠ture, no mean¬≠ing, no about¬≠ness to your page, which at the very least means penal¬≠ties for SEO.

And worse still is that there’s no doc­u­ment flow; all the ele­ments you add to the page are posi­tioned rel­a­tive­ly to their par­ent and fol­low no par­tic­u­lar order, which is pret­ty bad for search engine spi­ders (and hence your SEO), but absolute­ly ter­ri­ble for vis­i­tors using assis­tive technology.

It’s the prod­uct of a com­pa­ny that cares only about appear­ance, and noth­ing for con­tent. As @paulrobertlloyd said on Twit­ter:

It’s not that the code Adobe Muse gen­er­ates is ugly, it’s that it’s meaningless.

The issue with the lack of seman­tic ele­ments is not insur­mount­able, it just needs some work by Adobe before the final release. The lack of doc­u­ment flow and con­tent order is more seri­ous, how­ev­er, and will need a com­plete rethink; I hope that this happens.

On Mark Boulton’s Grids Proposal

I recent­ly wrote a fea­ture for .net Mag­a­zine, The Future of CSS Lay­outs, which took a look at sev­er­al pro­posed CSS mod­ules intend­ed to pro­vide more flex­i­bil­i­ty for lay­ing out web­sites. One of those mod­ules, Grid Lay­out, has been exper­i­men­tal­ly imple­ment­ed in IE10 Plat­form Pre­view, and it prompt­ed Mark Boul­ton to pro­pose an alter­na­tive approach in his arti­cle Rethink­ing CSS Grids.

While I think the alter­na­tive syn­tax is pret­ty robust, I did detect a cou­ple of flaws in it which I promised Mark I would write about, and that’s what I’ll do in this arti­cle. Before I get to that, I just want to quick­ly 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, pri¬≠mum non nocere, trans¬≠lates as:

First do no harm. 

It‚Äôs often said that this is part of the Hip¬≠po¬≠crat¬≠ic Oath, from the code of ethics fol¬≠lowed by med¬≠ical pro¬≠fes¬≠sion¬≠als. While that‚Äôs not cor¬≠rect, it‚Äôs a rule that‚Äôs gen¬≠er¬≠al¬≠ly con¬≠sid¬≠ered impor¬≠tant to fol¬≠low: do good, or at least do no harm.

Although what we do is not as crit­i­cal to soci­ety as the role of a doc­tor, I think we need to start con­sid­er­ing an oath like this for work­ing on the web. Let me explain why.

This week I‚Äôve seen two ‚ÄėHTML5‚Äô web¬≠sites which fea¬≠ture rich inter¬≠ac¬≠tions and ani¬≠ma¬≠tions; like Flash used to be, but now using open web tech¬≠nolo¬≠gies. This is a very good thing. How¬≠ev¬≠er, vis¬≠it them with JavaScript dis¬≠abled and you get a very dif¬≠fer¬≠ent expe¬≠ri¬≠ence: that is, noth¬≠ing, or next-to-noth¬≠ing. Lit¬≠er¬≠al¬≠ly. On one site I saw a logo and a mes¬≠sage telling me I need¬≠ed JavaScript; on the oth¬≠er, a blank screen.

If all of your con¬≠tent is in HTML, and styled with CSS, but you‚Äôre requir¬≠ing peo¬≠ple to use JavaScript before they can see it: you‚Äôre doing it wrong.

In order to ensure that we make web¬≠sites avail¬≠able to every¬≠one, regard¬≠less of brows¬≠er type or capa¬≠bil¬≠i¬≠ty, I would sug¬≠gest we come up with our own oath ‚ÄĒ per¬≠haps some¬≠thing like this:

First make your con¬≠tent accessible. 

This isn‚Äôt new, of course; this is basic stuff. But so keen are many of us to rush to take advan¬≠tage of all the shiny new¬≠ness of devices and fea¬≠tures, we‚Äôre for¬≠get¬≠ting to do the fun¬≠da¬≠men¬≠tals. We‚Äôre doing harm.


I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.