Module 4 has an optional assignment to validate three websites in the W3C’s HTML validator, CSS validator and Mobile OK checker. I decided to give a few mobile-friendly WordPress plugins instead of checking different websites.

I checked four plugins - WordPress Mobile Edition, MobilePress, WordPress Mobile Pack and WP viewMobile. I didn’t test any plugins that required API keys or used third-party applications, primarily because I’m interested in learning as much as I can from the code.

For each plugin, I give an overview of how the plugin works and a screen shot of the plugin in the iPhone and Opera Mini Simulator. I’ll try to cover any installation issues, where the themes are stored and where to find the configuration. No two tests were the same, so I also give some quick notes on changes I made to the plugin or the validators in order to make the tests work.

Finally, I give the results for each validator with some notes.

No Plugins

First, here are the results of this website without any mobile plugins, so you have something to compare to:

HTML Validator

This document was successfully checked as XHTML 1.0 Strict!

CSS Validator

This document validates as CSS level 2.1 !

mobileOK

70/100

Page Size - 120KB (document: 35KB - images: 85KB)

Network - 11 requests (document: 1 - images: 10)

6 Errors

• [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.
• [severe] The total size of the page (123359 bytes) exceeds 20 kilobytes (Primary document: 36118, Images: 87241, Style sheets: 0)
• [medium] The size of the document’s markup (36118 bytes) exceeds 10 kilobytes
• [low] The embedded image or object is not of type image/gif or image/jpeg (image/png)
• [medium] The document is served without caching information (”Expires” or “Cache-Control” header)
• [low] HTTP status code 4xx other than 404 (Not Found) or 401 (Unauthorized) received

WordPress Mobile Edition

To install WordPress Mobile Edition correctly, you have to manually move the default theme into the WordPress themes directory.

The configuration options appear under “Settings > Mobile”, and allow you to set the User Agent strings for mobile and touch devices.

The default theme (carrington-mobile-1.0.2) will serve a different CSS file for touch devices (iPhone, Android, WebOS, etc). The theme places both navigation and a search box at the bottom of the page.

Aside from presenting a cut-down theme, WordPress Mobile Edition doesn’t do any advanced content adaption, such as image resizing or dividing pages into smaller chunks.

Testing Notes

I modified the plugin settings to include “W3C-mobileOK” in the list of Mobile Browser User Agents.

I passed the &user-agent=mobileok query string to the HTML Validator, as outlined in the User Documentation for the W3C Markup Service.

Passing a user-agent URL query string doesn’t seem to work on the CSS Validator, so each of the three stylesheets was validated by passing the URL directly to the CSS Validator.

Testing Results

HTML Validator

This document was successfully checked as XHTML Mobile Profile 1.2!

CSS Validator

• style.css - 4 errors (all border-radius errors, as it was validating against CSS 2.1)
• css/touch.css - 1 error (Property -webkit-text-size-adjust doesn’t exist)
• css/advanced.css - 39 errors (all appear to be CSS 3 related: :last-child, text-shadow, border-radius)

mobileOK

88/100

Page Size - 11 KB (document: 5KB - stylesheets: 6KB - images: <1KB)

Network - 3 requests (document: 1 - stylesheets: 1 - images: 1)

3 Errors:

• [low] A length property uses an absolute unit (CSS)
• [low] The inputmode attribute of this input element is invalid.
• [medium] The document is served without caching information (”Expires” or “Cache-Control” header)

MobilePress

MobilePress’s configuration options appear under their own “MobilePress” top-level heading.

Like WordPress Mobile Edition, it swaps your theme for a mobile-friendly theme when it detects a mobile user agent; however, it doesn’t allow you to edit the list of user agents used for device detection. It does allow you to treat the iPhone, Windows smartphones and Opera Mini as a regular website. I’m not sure how useful this is, however. It also allows you to force the mobile site for the whole site, which comes in handy during testing.

Themes are kept in a separate themes directory inside the mobilepress plugin directory, which makes installation pretty straight-forward. You can install other themes in this directory, and the plugin will allow you to choose between these themes from the WordPress admin interface.

In the default theme, both search and navigation are placed at the bottom of the page.

Like WordPress Mobile Edition, there is no advanced content adaptation.

Testing Notes

As with WordPress Mobile Edition, I passed the &user-agent=mobileok query string to the HTML Validator. No changes to plugin were required, as it seems to recognize the W3C-mobileOK User Agent.

To test the CSS, “Force Mobile Site?” was set to “Yes” in the MobilePress configuration screen.

Testing Results

HTML Validator

Errors found while checking this document as XHTML Mobile Profile 1.0!

These were due to input tags being direct decendants of the form tag. A well placed div or p tag would resolve the issues.

CSS Validator

This document validates as CSS level 2.1 !

mobileOK

98/100

Page Size - 7KB (document: 7KB)

Network - 1 request (document: 1)

1 Error:

• [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.

WordPress Mobile Pack

The WordPress Mobile Pack from dotMobi is fairly fully featured, and includes a device switcher, device adaptation (e.g. resizing images, partitioning pages), removing large media and more.

Configuration appears under “Appearance > Mobile Theme”, “Appearance > Mobile Widgets”, and “Appearance > Mobile Switcher”.

It is slightly more complex to set up due to the fact that the plugin needs write permission to move the themes to the WordPress theme directory and to cache the images optimized for mobile.

It comes with four themes: WordPress Mobile (base), WordPress Mobile (blue), WordPress Mobile (green) and WordPress Mobile (red). The themes all include navigation at the top of the page, but no search box.

Testing Notes

For the purposes of testing, the WordPress Mobile (base) theme was used.

As above, I passed the &user-agent=mobileok query string to the HTML Validator, and pasted the CSS URL directly into the CSS validator.

Testing Results

HTML Validator

Error found while checking this document as XHTML Mobile Profile 1.1!

Caused by an empty <ul> (with no child <li>s) tag in the sidebar. Probably due to me not setting up any widgets.

CSS Validator

This document validates as CSS level 2.1 !

mobileOK

98/100

Page Size - 6KB (document: 6KB)

Network - 1 request (document: 1)

1 Error

• [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.

WP viewMobile

WP viewMobile fairly easy to install. The configuration screen is found under “Plugins > viewMobile”.

The viewMobile “default” theme is in a themes directory inside the viewmobile plugin directory. The theme places navigation at the bottom of the page, but has no search box.

In addition, viewMobile is able to resize images (though it doesn’t have a cache folder so I’m assuming it’s doing this on the fly).

Testing Notes

I added “W3C-mobileOK” to the comma separated list of User Agents in the Options.

As above, I passed the &user-agent=mobileok query string to the HTML Validator, and pasted the CSS file’s URL directly into CSS Validator.

Testing Results

HTML Validator

Errors found while checking this document as XHTML Basic 1.1! (4 Errors)

duplicate IDs

badly formatted lists

CSS Validator

This document validates as CSS level 2.1 !

mobileOK

97/100

Page Size - 10KB (document: 10KB)

Network - 1 request (document: 1)

2 Errors

• [low] The document does not validate against XHTML Basic 1.1 or MP 1.2.
• [low] The size of the document’s markup (10265 bytes) exceeds 10 kilobytes

Conclusion

In terms of the number of features dotMobi’s WordPress Mobile Pack is clear winner. Unless I run into any major issues, it is the plugin I’ll use on this blog, as it gives me much more to play around with.

Nevertheless, the themes that come with the WordPress Mobile Pack are less than ideal. They feel a bit clunky, and I prefer the navigation on the bottom (out of the way) on a mobile site.

As a part of the W3C Mobile Web Best Practices course, I’ll create a custom mobile theme for this site. I suspect I’ll be basing this heavily on the Carrington theme that comes with WordPress Mobile Edition. It’s nicely done, and the CSS3 features work well on the iPhone.

I hope this gave you an idea of the mobile functionality that is available for WordPress. If you have any questions, or if there’s anything you think I missed, let me know.

Moonfruit are running a twitter campaing. If you tweet the #moonfruit hashtag and the link to the campaign, you can win a MacBook Pro. So far, the campaign has been fairly successful. This isn’t entierly new, since Squarespace started a similar campaign in early June.

However, David Whittle decided it was WRONG, and claimed that it will eventually make twitter less useful. Others obviously agree, as he’s been widely retweeted.

My initial reaction was definensive (I’d love to have a MacBook Pro), but I’m starting to think he’s right.

Much of what I do on twitter involves filtering and scanning tweets to find the informaiton I find useful or interesting. Nevertheless, two or three of these campaigns running consecutively would make twitter very hard to use.

I’m not presuming to tell companies whether or not they should run this type of campaign. I think it’s probably too late for that now.

What I’m trying to decide is whether or not to take part in these campaings. I try not to worry about whether or not my tweets will appeal to everyone who follows me. If I did that I’d quickly find myself paralyzed, and I wouldn’t use twitter at all.

Nevertheless, I’ve come to the conclusion that participating in these hashtags campaigns is bad twitter etiquite. This is not because of my tweets might be annoying to some people, but because my tweets add to an accumlated effect that make twitter much less enjoyable for everyone.

In the immortal words of George Castanza: “We’re living in a society here!”

I’d be interested to hear what you think. Leave a comment below or reply to me on twitter.

This time, Justin Cormack of Squiz UK will be leading a discussion on Structuring CSS.

He’ll be covering techniques for creating modular, maintainable CSS. Along the way, he’ll be talking about Squiz’s mashable design, Nicole Sullivan’s Object Oriented CSS and dynamic CSS generation techniques, such as SASS.

It sounds like it’s going to be a fantastic presentation and should lead to the usual lively discussion.

If you’d like to join us, please RSVP on the meetup site.

What a ride

It was a fantastic ride. My favorite part was Slugwash Lane, which is a typical English country lane. Hedgerow alternated with small woods, where the bluebells were in bloom. It was lovely.

But the most rewarding part of the ride is the ride down to Brighton after climbing Ditchling Beacon. I stopped very briefly (~10 seconds) on the way up, but I pretty much managed to climb the whole thing. And it seemed much less grueling than last year.

It seems that Charlie enjoyed the ride to Brighton, as well. So much so, that he cycled back on his own.

Braver than me

For me, this was just a ride to Brighton on a lovely sunny day. For both Charlie and James, this was a preparation for a much longer ride. Both of them are going to be riding from London to Paris in the Big Issue London to Paris Bike Ride. That’s 240 miles in 3 days. Impressive.

James has a great post on why the Big Issue is worthy of your support, and Charlie has a similar post on why the London to Paris event is important for the Big Issue.

They invited me along, but I declined. I didn’t feel that I would be able to raise the money. What a wimp!

Show your support

So, to make up for my wimpiness, I’m going to urge you to support James and Charlie, even it’s just for a couple of pounds / dollars. Both of them deserve your support, both are very near their target and it’s for a great cause. Here’s how to support them:

• James’ Just Giving page
• Charlie’s Just Giving page

I know both of them (and the Big Issue) will appreciate any support you can give.

We’ll meet on Tuesday the 14th and discuss Joshua Porter’s Designing for the Social Web.

I’ve started reading the book over the long Easter weekend, and I’m impressed. I’ll be posting a full review after the meetup. I’m halfway through the book, and it already feels like another Don’t Make Me Think: one of those books that I want to give to anyone that has anything to do with a website. It’s about more than just design, and his advice applies to every website. After all, like it or not, we’re all a part of the social web now. We always were.

If you’d like to join us, please RSVP on the meetup page.

I’ll see you there.

Fortunately, a number of dedicated people have spent a considerable amount of time to make the event happen.

I’m quite excited about this year’s WordCamp UK, as a number of announcements have been made in the past week or so:

• Most importantly, Tickets are on sale (organized by Joe Quinlan). I’ve booked mine already.
• The WordCamp UK 2009 blog has been launched, thanks to the efforts of Simon Wheatley and Laura Kalbag.
• It has recently been announced that Matt Mullenweg, WordPress founding developer, will be attending. (I’m assuming this came about because Tony Scott was working his magic behind the scenes, as always.)

Last year’s conference was superb, and I’d highly recommend it. It was great to get a chance to meet and learn from people that are using and developing for WordPress on a daily basis. If you do decide to attend, I’ll see you there!

I’m participating in CSS Naked Day. It is an effort to promote web standards by exposing the underlying structure of a site. The easiest way to do this is to simply remove all styling.

The fact that CSS Naked Day even exists shows how much things have improved. In the bad old days of font tags and table-based layouts, the presentation of a site was tightly bound to the content. These days, all you should have to do on a well-designed site is comment out any calls to external stylesheets. Such is the wonder of separating presentation and content.

Interestingly, removing the style makes me realize that the way I implement CSS has changed over the past few years. For instance, I would no longer use an h1 for the logo / site name. And thanks to the overflow:auto self-clearing float technique, I can get rid of those unsightly "clearboth" divs. In other words, this site is long overdue for a redesign.

I’ve come across a strange behavior in Safari, which I’m pretty sure is a bug. When an element’s display is set to “table,” it appears that Safari calculates with width of the box by subtracting the border width. When an element is set to display:block, Safari behaves normally, add the border width in addition to the set width of the box.

I’ve set up a quick demonstration to make this clear.

So far I’ve only tested this in Safari 3.2.1 (Mac) and Safari 4 beta (Mac).

FF3 (Mac), Opera 9 (Mac) and IE8 (Win) all seem to be behaving as expected.

I’ll give it a try in Safari 4 beta when I get home tonight.

I retrieved the calculated width using Safari’s Web Inspector.

I’d be interested to know if anyone else has seen this, or if anyone knows of a way to code around it, aside from adding additional divs. For the moment, I’m just going to fall back on a floated layout.

I ran my second 10k race today in Bushy Park.

I ran my previous (and first) 10k in 1:00:10. When I started training for this run at the beginning of the year, I was hoping to get around a 50:00 time. That may have been slightly overambitious. At any rate, I certainly overtrained. Towards the end of last month, I was feeling a lot of pain in my butt and hips. Turns out it was piriformis syndrome. I spent a a week and a half not running at all and another two weeks running on a elliptical trainer and then a treadmill.

I spent the week before the race road running again. Mostly taking it easy, so as not to injure myself again. Given that I had spent time out being injured, I’d revised my expectations. I was hoping to run the 10k in 55:00.

The race went fairly well. I knew I was pushing myself hard, and had to adjust my pace a few times before I hit my stride. After about 5k, my back was feeling a bit tight, but that seemed to disappear after I concentrated on my breathing for a while. At the end of the race, my watch showed 52:36. When the results (284KB Word file) came in, my official time was 52:45 — over a seven minute improvement over my last 10k time. I’m pretty pleased with that.

Still, I’m hoping my next 10k will be a sub-50. I’m thinking the trick will be not to overtrain.

Think of 15 albums that had such a profound effect on you they changed your life or the way you looked at it. They sucked you in and took you over for days, weeks, months, years. These are the albums that you can use to identify time, places, people, emotions. These are the albums that no matter what they were thought of, musically shaped your world.

1. The Police - Synchronicity - 1983 (1983-1984)
2. Led Zeppelin - Led Zeppelin II - 1969 (1985, 1987)
3. Paul Simon - Graceland - 1986 (1986-1987)
4. REM - Fables of the Reconstruction - 1985 (1988)
5. Beastie Boys - Paul’s Boutique - 1989 (1991, 1995, 2000, 2009)
6. Sonic Youth - Dirty 1992 (1992)
7. The Master Musicians of Jajouka - Apocalypse Across the Sky - 1992 (1993)
8. My Bloody Valentine - Loveless - 1991 (1993)
9. David Byrne and Brian Eno - My Life in the Bush of Ghosts - 1981 (1994)
10. John Coltrane - Blue Train - 1957 (1995)
11. Stereolab - Transient Random Noise Bursts with Announcements - 1993 (1995)
12. David Bowie - Hunky Dory - 1971 (1996)
13. Radiohead - O.K. Computer - 1997 (1997-1999)
14. Mississippi Fred McDowell - The First Recordings - 1997 (2001)
15. Of Montreal - Hissing Fauna, Are You the Destroyer? - 2007 (2007-2008)

I feel badly for not including too many albums from the last 8 years. The problem is I just haven’t had enough time to determine whether or not they have a profound effect on me. These are the albums that I keep going back to time and again.

Update: I’ve created a Spotify playlist with 8 of my 15 favorite albums (the other 7 aren’t available on Spotify).