mindgarden

People writing html should all be aware by now that the html heading elements (h1 – h6) should be used in a semantic manner. Meaning you shouldn’t use an h2 element without using an h1 first for example. This is quite important for search engines and assistive technologies as well as the overall semantics of your markup.

headings in html5

html5 will treat headings a wee bit different to what we’re used to. Any section (section in this does not necessarily have to mean the section element but rather ‘sectioning element’) will be able to have its own hierarchical order. Meaning that you can use h1s at the start of each section. As all sections will be aware of their own hierarchy in the document the heading element will be treated accordingly.

For example in a section element with an h1 heading containing a nested section element with its own h1 that nested h1 would be treated as an h2. Because it’s lower down in the overall hierarchy. Look at this example by Bruce Lawson to get a better understanding how that works.

It becomes even clearer if you look at the generated outline for Bruce’s example

Without question this will add a lot of complexity to how we use headings (think of the CSS we will have to write for that). The benefit on the other hand will be that you can include markup from other sources into you document more easily.

There’s an accessibility issue here as well. The current html5 spec has this to say about the usage of headings:

Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section’s nesting level.

If we were to start using just h1 elements for all our headings without makers of screen readers and other assistive technologies first preparing their software for it, we’re basically destroying the semantic value of headings for these tools.

the hgroup element

Another novelty in html5 concerning headings is the hgroup element

There has never been a good way of just adding a subheading to an h1 element for example. If you use an h2 for that you’ll be having trouble setting that apart from the other h2s. You can’t use an h3 either because that would mean skipping one level.

So the brainy people working on the html5 spec came up with hgroup:

The rank of an hgroup element is the rank of the highest-ranked h1–h6 element descendant of the hgroup element, if there are any such elements, or otherwise the same as for an h1 element (the highest rank).

This means that in this example

<hgroup>
<h1>main heading</h1>
<h2>sub heading</h2>
</hgroup>

the entire hgroup would be weighted as an h1 (if it is in the root, otherwise the weighting will be done according to the nesting level of the parent element of the hgroup).

Personally, I don’t think that’s necessarily a bad idea. The html5 super friends on the other hand would rather see this in the spec:

We don’t see the added value of this element and would instead add a boolean attribute to the heading element which allows content authors to specify if that particular heading should be included in the outline.

Further reading and sources

• http://dev.w3.org/html5/spec/Overview.html#the-hgroup-element
• http://dev.w3.org/html5/spec/Overview.html#headings-and-sections
• http://www.brucelawson.co.uk/2009/headings-in-html-5-and-accessibility/
• http://www.mattryall.net/blog/2008/10/html-5-headings-and-sections
• http://www.zeldman.com/superfriends/guide/

For the new mindgarden layout I’m using the CSS3 module called Multi-column layout in combination with Media Queries.

This means that if you have your browser at a relatively small size you are presented with one regular content column. If you resize you browser window to more than 1008px though this changes and the column is split into two. For window sizes wider than 1440px the content is split into three columns reminding a bit of a newspaper layout.

the media query part

This is how the W3C spec (rather elaborately) describes media queries:

By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

Sounds more complicated than it really is. Here’s the CSS that I’m using for my layout:

Firstly I’m setting my default styling for my element.

.entry-content { ... }

Nothing unusual or surprising here. But then I want to specify some styling for larger window sizes.

@media all and (min-width: 70em) { .entry-content {... } }

I’m using “@media all” as I want to apply my rules to all output devices (screen, print, etc.). The min-width part is used so it only effects windows that have a minimum width of 70em.

Then I’m doing the same again for even larger windows.

@media all and (min-width: 100em) { .entry-content { ... }}

multi columns

So far so good. Now we have the means to differentiate between different browser sizes. Let’s use this to do some column-magic. Let’s add some style rules:

.entry-content {
font-size: 1.2em;
line-height: 1.8em;
color: #444;
}

Again, no surprises. Alas, here come the columns:

@media all and (min-width: 70em) {
.entry-content {
-moz-column-count: 2;
-moz-column-gap: 4em;
-webkit-column-count: 2;
-webkit-column-gap: 4em;
}}

First of all, notice the namespaces used for Firefox and Safari. CSS3 is not a finished standard yet and for the time being this is how browser manufacturers like to implement CSS3 features. If Opera supported the multi-column module there would be something like “-o-column” as well. Unfortunately this feature hasn’t made it into Opera 10.

Creating our columns is quite simple. column-count marks the number of columns specified and column-cap the with of the spacing between them. The available space is distributed accordingly. Notice how the copy text flows from one column to the next when you resize this browser window.

I could have uses column-width instead to get a fixed with for my columns. Then the browser would have generated the number columns for me. There’s also column-rule which I haven’t used. With column-rule you can create a border in between you columns.

@media all and (min-width: 100em) {
.entry-content {
-moz-column-count: 3;
-webkit-column-count: 3;
}}

For really large window sizes I’m adding another column here. I don’t have to repeat my rules for the column-gap because if my window is wider than 100em, it is also wider than 70em and those rules get inherited.

Done!

Safari cutting off the images

Unfortunately, Safari isn’t playing along entirely with my cutting-edge-css3-goodness-showcase. Browsers that don’t understand media queries or multi-columns will just degrade gracefully and show the one default column. Safari on the other hand will display the columns just fine as long as you don’t use images or embedded flash content.

If you use images or flash in your columns Safari sometimes has the nasty habit of cutting them in the middle and showing one slice in one column, the other in a second.

There’s already a ticket created for this in the webkit ticketing system So far I couldn’t a workaround for this so let’s hope it will get fixed soon.

No support for column-span

A good way to prevent the Safari bug from happening would be to use column-span that is part of the CSS3 spec. Similar to col-span for tables column-span would make it possible to say for example

h2 { column-span: all; background: silver }

(example from the W3C document)

Unfortunately column-span is not supported in any browser yet.

...and so can you.

Last week I went to see Tim Berners-Lee speak about the past and the future of the web at the London Science Museum. Although there wasn’t much in his talk that would be new or surprising it was still a very inspiring presentation. After all he is the guy who invented the web.

Although there is no recording of last weeks presentation (that I’m aware of) he did give a very similar one at the TED copnference. And that means you can watch it too:

With the new mindgarden we also started using Feedburner to get a better idea how many people are reading our feeds.

Feedburner comes with a service called PingShot and Google (who own Feedburner) have recently connected PingShot to a brand new hot thing called PubSubHubbub. PubSubHubbub, next to RSSCloud which basically does the same but different, is quite the hype recently. It was created to make RSS part of the Real Time Web. Meaning that your RSS feed is no longer passive but gets pushes to a hub which then along with all the contents of your feed pushes it on to subscribed clients (if they are capable of receiving pushed feeds).

So if you’re already using Feedburner, you can simply activate PingShot and make use of PubSubHubbub yourself.

If you want to know more about PubSubHubbub Pubsubhubbub: Feed-Push für Alle (German) does a good job in explaining the whole thing in a lot more detail.

So I recently moved this website onto a new server swapping Textpattern for Habari

The biggest road block that I had to deal with was keeping my old crappy textpattern URLs that I had never changed to nice URLs functional. Which sounds easy enough using some regular expressions to do some mod_rewriting in the .htaccess file (if that in itself sounds easy to you).

The URLs that I was using with textpattern and that are now indexed by google are as follows:

http://www.mindgarden.de/index.php?id=123

which had to redirect to something like

http://www.mindgarden.de/?id=123

The problem being that habari does some heavy rewriting in the .htaccess itself. The guys in the habari IRC channel were incredibly helpful and helped me figure it out. So in case someone out there tries to do what I did, here’s what worked for me in the end:

RewriteCond %{THE_REQUEST} ^w+ /index.php?id=(d+)
RewriteRule ^(.*)$ /?id=%1 [R=301,L]