If your laptop and phone both got stolen – how easily could you conduct online life through the worst browser you have? If you have to file an insurance claim online – will you get sent a simple HTML form to fill in, or a DOCX which won’t render?

What vital information or services are forbidden to you due to being trapped in PDFs or horrendously complicated web sites?

[…]

Go sit in an uncomfortable chair, in an uncomfortable location, and stare at an uncomfortably small screen with an uncomfortably outdated web browser. How easy is it to use the websites you’ve created?

The unreasonable effectiveness of simple HTML - Terence Eden

(Updated 10th December to add the video)

Last night I took part in the final JS Oxford of the year, which consisted of a series of lightning talks on all manner of subjects, from lessons learned in Developer Relations, to an introduction to Kubernetes.

I gave a very brief talk on cat gifs… wait, I mean getting started with CSS Grid (It’s written in Reveal.js so you can view the speaker notes by pressing <kbd>S</kbd>). I started by explaining some of the terminology around Grid, and then ran through the case study of converting this site to a Grid layout.

As always, it was an absolute pleasure to present at JS Oxford. They’re always interested in new speakers, so if you’re thinking about giving it a go, they’re a lovely welcoming crowd.

As it was a lightning talk I didn’t get a chance to link out to further reading, but I can do that here.

• Rachel Andrew’s excellent Grid by Example is full of useful information, examples, patterns, and resources. She has literally written the book on Grid.
• Grid Garden is a fun way to get your head around some of the general concepts.
• Jen Simmons’ has been doing some amazing experiments with Grid, and has also collated a useful list of resources on her Learn CSS Grid page.
• I have a continually growing list of Grid resources on Pinboard.

Today I replaced the Skeleton based layout on this site with a CSS Grid based layout. I've been wanting to make the move for a while and finally found the time after waking up at stupid o'clock this morning.

I wanted to do a like-for-like replacement and stick with the 12 column layout. I'm not quite ready for a complete redesign just yet.

Based on this clever repeating column trick from the Mozilla Developer Network this is how I went about it.

First up, create a 12 column grid I can add to any container I want:

.layout {
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-column-gap: 2rem;
}

Taking a small-screen first approach, set the immediate children to span 10 of the columns, offset by one:

.layout > * {
    /* All grid elements to span 10 cols offset by 1 */
    grid-column: col-start 2 / span 10;
}

Adding my .layout class to the header and footer elements, and then wrapping main and aside in a div with that class gave me my basic layout. Then as the viewport gets wider, I can just do this on the required breakpoints:

@media screen and (min-width: 1000px) {
    .layout-main {
        grid-column: col-start 2 / span 5;
    }

    .layout-sidebar {
        grid-column: col-start 8 / span 4;
    }
}

I could have simplified the syntax and removed the line names by omitting col-start, but named lines are very powerful and I might want to play with them later.

The end result is my CSS payload has gone from around 20k to just under 6k, and my markup is a lot simpler.

It was ridiculously quick and painless. From branching my repository to deploying the final code took just over an hour, and I'm sure fifteen minutes of that was me double checking I hadn't missed something. As Jeremy said :

I think I may need to recalibrate the estimation part of my brain to account for just how powerful CSS grid is.

(Thanks to Mat for pointing me towards to Pun Generator for the title)

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

• Dean Hachamovitch on the IEBlog

This is great news, kudos to the Microsoft team for listening to the community and changing their approach.

(for more background see Jeremy Keith and Jeffery Zeldman's articles in issue 253 of A List Apart)

Markus Mielke has published the final list of CSS changes for IE7 now that they're in lockdown and getting ready for shipping.

In all, we made over 200 behavior changes (bug fixes or new features) under strict mode to improve CSS2.1 compliance.

Some of the fixes include the infamous peekaboo bug, three pixel text jog, and doubled float-margin bug.

As well as the bug fixes there are other improvements including :hover on all elements not just <a>, background-attachment: fixed working on all elements, and support for min/max width/height (finally!!).

I'm disappointed that display: table still isn't in there but there is hope for the future

We are already planning for the next IE release and will continue down the road of improving our CSS support.

Praise where praise is due, I think the team over there has done a great job so far. Now I (and many others) want to see this kept up.

As part of their expanding developerWorks series of articles IBM have decided to use Drupal for a sample IT project entitled “Using open source software to design, develop, and deploy a collaborative Web site”.

They evaluated a number of different Content Management Systems/Frameworks including Ruby On Rails, Typo3 and Mambo, but in the end they went with Drupal.

We did have to invest some time to learn the Drupal way, and the framework just seemed to make sense. We also felt that Drupal provided the right combination of framework and flexibility to break out of the framework when needed to get the job done. With all things considered, we decided to use Drupal. The landscape of open source CMS is continuously changing, and in the future we'll revisit these and any new entries in the field.

Given the extremely high standard of the developerWorks articles I'm going to be keeping an eye on this. I'm always on the lookout for new ways to make Drupal jump through hoops.

Update: The second part of the series has been published, focusing on designing for an effective user experience.

Update: Here's an overview page linking to all 5 articles.

Here's the IEBlog entry or just go straight to the download page. Ho hum, there goes the next couple of weeks while we get some empirical testing done.

Details of the CSS parser fixes can be found on the IEBlog here and here.

Update: a link to the release notes would probably help too.

There's a very nice article over at alt tags about Microsoft and whether web standards fit into their business plans at all.

While Microsoft may pay lip service to web standards, a look at their product line suggests they have no interest in supporting the standards they’ve helped create. Face it, xHTML and CSS just aren’t as sexy as .Net and web services. Microsoft clearly has other priorities and a closer investigation of the facts seems to indicate that support for web standards is hardly a blip on their corporate radar.

This is an extrememly well written piece that should give all of us pause for thought, and with any luck may prompt increased pressure on Microsoft to make standards an intergral part of their offerings.

I'm now off to code up some workarounds for IE5.

Hat tip: Chris & the #evolt spool.