html - Broken Links Archive

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.

Back in March I wrote about HTML5 Form validation and the problem with the appearance of error messages. I proposed a syntax for styling the error messages, and shortly after I published the post, I submitted the proposal to the W3C via the www-style mailing list.

I’ll discuss quickly the result of that submission, but first I should mention that I’ve since found out that the Google Chrome developers have already implemented their own syntax, and it’s not too far removed from what I proposed. Before I get to that, however, allow me to gripe.

Read the full article

The WHATWG have released the HTML5 Edition for Web Developers, which removes all of the overly-technical details aimed at browser makers and leaves the important stuff you need to learn — and with a nice readable stylesheet applied.

Sometimes the existing HTML attributes aren’t sufficient for describing an element’s content. We can use class, ref, rel, title and more, but even so there are occasions where that’s not enough. HTML5 addresses this problem with the introduction of Data Attributes, which allow you to add simple metadata to individual elements, largely for the purpose of providing information to make JavaScript functions easier.

Read the full article

HTML5 allows the use of block elements inside the a tag, which was not permitted in HTML4. This means that you can wrap a link around whole sections of markup, making all of the child elements of the a become the link. You use it like so:

<a href="http://example.com">
  <div>
    <h3>I'm an example</h3>
  </div>
</a>

You can begin to use this straight away, as every browser supports it — although you must be wary of one rather glaring bug in Internet Explorer.

Read the full article

In my previous post, Making HTML5 Video work on Android phones, I said that you have to encode your videos as .m4v in order for them to work in Android. This isn’t actually correct. The suffix can be either .mp4 or .m4v, what matters is the way the video is encoded.

Now, there are loads of blog and forum posts which give differing advice on presets and parameters, and I’m no expert — so what I’ll do is just show you two quick ways that worked for me (I have a Samsung Galaxy S).

Read the full article