On Tuesday Vimeo released their new Universal Player in an attempt to serve up videos to the ever changing landscape of web enabled devices (ie. iPhones, Androids and iPads etc). As we all know video on these small devices has been a bit of a struggle, especially with Apple flat out refusing to support Flash of any sort. Vimeo, like YouTube, is now turning to HTML5 video to try to combat this issue.

The new Universal Player uses an iFrame along with some fancy code to serve up the appropriate type of video file to different devices and browsers.

UPDATE 2: It works… ish

I’m getting sporadic reports of everything from “it works, what the hell are you on about” to “I can’t see the iFrame”. It seems that the videos (from a Plus account with Mobile version activated) works properly on iPad, iPhone 3GS and 4 as well as Android devices running 2.2 (Froyo). On my Rogers HTC Magic which still runs 1.5 due to Rogers’ complete disregard for customer satisfaction it does not work. In the native browser the video still shows up with buttons but nothing happens when you click the buttons. In Opera Mini the iFrame doesn’t even show up. It looks like growing pains and one could argue that backwards copatibility to smartphone firmware which was obsolete a year ago is a bit excessive, but then people with Android devices have very little choice when it comes to their carriers refusing to roll out updates. Until I hear otherwise I’m going to write Vimeo videos not working on Android 1.5 down to outdated firmware and put it on the long list of reasons why Rogers needs to get their act together.

UPDATE: Plus users only (and you have to activate the feature)

A bit more digging lead me to this page where I found that the new Universal Player is only universal for Plus users. If you have a regular old non-paid account your videos won’t play on mobile devices. What’s more, to get the feature to work you have to first activate Mobile Versions in your account. I tried doing this through my web browser but the feature was nowhere to be found. When I logged in using my phone and went to My Videos there was a huge button to activate Mobile Version. I’ve now clicked the button and it says “Mobile versions of your videos are being made right now. Check back here later!” No idea how long the conversion will take.

The good news is that once Mobile Versions has been activated it automatically applies to all future videos uploaded as well. The bad news is, like I said, that it only applies to Plus users. The Q&A on the blog post indicates that the feature might be released to everyone some time in the future so I’ll keep my fingers crossed.

Stay tuned for another update once the videos have been converted properly.

But does it actually work?

I’m working on a large project with a lot of video integration and we needed to find a solution so that the videos would show up on the iPad and iPhone in particular. In the old days (3 days ago), Vimeo videos didn’t work on these devices but the new Universal Player looked to solve these problems. Or rather, it solved the problem for the iPad. On the iPhone (and Android for that matter) it doesn’t work and causes some weird effects (if you have one of these devices you can take a look for yourself by opening this post and playing the video above):

The video iframe is severely cropped vertically and does not play. No matter what I do. And no, it’s not a matter of bad code or an uncompliant server. I’ve tested this on 5 different servers, in different sites, and with different configurations. The videos do not play in the native iPhone browser nor in the native Android browser or Opera Mini on Android. All I get is the cropped (and very wide) frame with the video thumbnail and a play button.

I want this to work, but as of right now, at least as far as I can tell, it doesn’t. If you have a different experience, please drop a line in the comments.

Related posts:

1. Opera still on the fence about Silverlight
2. Video Tutorial: Editing and Uploading the Zufall Side Buttons
3. iZufall Project – From Concept to Design using Expression Design

Replace blog title with a linked image

One of my top 10 pet peeves is sites where you can’t click the logo to get to the home page but have to click the “Home” button. This code block can be inserted in the header.php file and it will insert an image (logo) that links back to the home page and also has the alternate text and link title set to the name of the site.

<div id="blog-title">
	<a href="<?php echo get_bloginfo('url') ?>/" title="<?php bloginfo('name') ?>" rel="home">
		<img alt="<?php bloginfo('name') ?>" src="<?php echo get_bloginfo('template_url') ?>/imageFolder/imageFile.type" />
	</a>
</div>

Add WP 3.0 menus to non-WP 3.0 themes

To add WP 3.0 menus to themes that were built before the new version of WordPress or don’t have them built in you need to activate the menu function in functions.php and then add a call to the menu in your template file.

Add to functions.php:

register_nav_menus(
	array(
		'menuName' =>__('Menu Name'),
		'2ndMenu' =>__('2nd Menu'),
	)
);

Add to template file:

<?php 
	wp_nav_menu(array(
		 'theme_location' => 'primary'
	)); 
?>

Note that the theme_location call points to the name of the menu as set in functions.php. To target the menu name set inside WordPress use this code instead:

<?php 
	wp_nav_menu(array(
		'name' => 'Menu Name'
	)); 
?>

Highlight current page or category in menu

I’ve already written an extensive article on this subject that can be found here. The core of the CSS code is this style:

.current-menu-item,
.current-page-ancestor,
.current-post-ancestor {
	... style info goes here ...
}

Custom page template in 5 lines of code

To create a custom page template simply insert the following 5 lines of code at the top of your template file and give it a name other than “whatever”. Once saved (as something other than page.php) it will appear as one of your template options inside WordPress.

<?php 
 
/* Template Name: Whatever */ 
 
?>

Add Featured Image (thumbnail) functionality to your theme

To activate the Featured Image panel in WordPress admin an enable the function you need to add a small piece of code to the functions.php file. Once this is done and Featured Images have been defined you can call them from within any template file using one of the calls below.

In functions.php:

add_theme_support( 'post-thumbnails' );

In theme file:

<?php the_post_thumbnail(); ?>

The above call will produce the thumbnail in the size defined inside WordPress admin under Settings -> Media. To call a different size use one of the following:

the_post_thumbnail('thumbnail');
the_post_thumbnail('medium');
the_post_thumbnail('large');
the_post_thumbnail(array(nnn,nnn));

For the last one replace ‘nnn’ with any pixel width and height.

Related posts:

1. Using WordPress in Alternate Configurations – My WordCamp Whistler 09 Presentation
2. Highlight current page in WordPress menus
3. Speaking about WordPress as CMS at WordCamp Whistler – What do you want me to cover?

The One Sentence Review

Handcrafted CSS: More Bulletproof Web Design is a book by and for web designers and developers with a solid understanding of HTML and CSS who want to push things further with standards-based code and progressive enhancements through CSS3 and other bleeding edge technologies.

The author(s)

Handcrafted CSS: More Bulletproof Web Design has one of those weird author listings on the front cover: Dan Cederholm with Ethan Marcotte. If you’ve watched the movie Julie and Julia you know that “with” means that the majority of the book is written by Cederholm while a smaller portion is by Marcotte. For this book I’d say the book itself is by Cederholm and that it features an essay by Marcotte that brings in a slightly to the left but still highly relevant aspect that elevates its overall quality and usefulness.

Dan Cederholm is the man behind Simplebits.com and author of the famous book Bulletproof Web Design of which the last edition was published in 2007. I have not read that book and by now I have a feeling it is too outdated to invest in. I might pick it up at the library but it’s doubtful. But people I know and trust say it’s a great book so I’ll make that assumption. Cederholm has created some truly impressive websites over time, many of which you have probably visited, and he’s one of those people who not only knows what he’s doing and does it better than most but also knows how to communicate that knowledge to others so they can step in his footprints rather than stake out their own way through the wilderness.

Ethan Marcotte is the man behind UnstoppableRobotNinja.com and he pops up as the co-author of several books including Designing with Web Standards which is one of the next books on my long list of things to read. Like Cederholm Marrcotte has worked on some pretty impressive projects over the years and his understanding of how the web works is hard to rival, even for Cederholm.

Both these gentlemen are at the very forefront of web design and development where standards and best-practices are concerned. As such this combo bodes well for the book they’ve collaborated on.

The Book Itself

Excluding front and index matter and preface Handcrafted CSS: More Bulletproof Web Design is a fairly short book of 204 pages. It’s in an unusual square-ish shape and comes in full colour with a nice and easy-to-read page layout. Considering the length of other books on the same subject matter it’s easy to think this book to be a little too light on material and substance. That would be a big mistake. These pages are heavy on real-world examples and applications with very little filler text. Although it has the sub-title “More Bulletproof Web Design” the book does not work as an extension of the original book but rather as an appendix. In other words it stands on its own. As a designer/developer with a firm understanding of HTML, CSS and all that surrounds these two code languages I found the book to be an engrossing and immersive read with bucketloads of valuable input. But I can see that without such a solid platform to stand on I would have judged the matter as both superficial and overtly simplistic. Which is the surprising consequence of Cederholm and Marcotte’s clean-and-simple approach.

Having worked with web design and development for many years I’ve noticed that as my understanding and skill set improves, my code becomes more and more simplistic and clean while the end result of that same code becomes more advanced. Handcrafted CSS latches onto this by providing even more simplistic and cleaner code examples and solutions to create well functioning and æsthetically pleasing websites. This is a huge benefit if you’re well versed in web code and a devestating detrement if you’re just starting out: If you don’t have a firm grasp on the code and understand what Cederholm and Marcotte is trying to do this book will seem like a series of disjointed code examples that at the same time go in too much detail and skim over the important stuff.

Futureproofing, progressive enrichment and clearing floats

Cederholm’s portion of the book concerns itself with three major elements:

• Futureproofing
• Progressive enrichment through CSS3 (in particular rounded CSS corners, RGBA colours and drop-shadows)
• A better model for handling floats and clears

These are all hugely important considerations as both the web and the devices we ingest it on evolve but they are easily overlooked because they seem peripheral or subordinate to the issue of getting the content out and working properly.

Cederholm’s approach (and the root of the name of the book) is that a craftman goes the extra mile to add often invisible but still vital elements to her creations to make them stand out. Those elements, or enrichments, can be anything from a properly wrapping list item to a custom ampersand symbol, a gracefully degrading rounded corner or just introducing a semantically sound solution to float and clear management.

FYI: If you’re considering buying this book and the sentence above made you shake your head or think “what the hell is he talking about” I would recommend getting something else instead.

To me Cederholms chapters were divided evenly between verification, a-ha moments and new information. His approaches to futureproofing – making sure that designed elements are able to handle content that goes beyond the original drafts (i.e. a button with text that spans more than one line or has long words in it) – are ones I have strived to live up to even before reading the book. Thus seeing him applying the same philosophies and techniques in his QA process was a verification that I am on the right track. When I started on the section on a semantic solution to floats and clears and saw his ingenious .group solution I was left thinking “What the hell have I been doing all this time? This makes way more sense!” Needless to say the lessons learned from these chapters are now being implemented in all my current and future projects. And as I worked my way through the CSS3 examples and Cederholm’s pragmatic “progressive enrichment” approach I gained confidence and found a desire to start incorporating drop shadows, RGBA colours and rounded corners in my designs now rather than wait for all the browsers to get with the program.

Actually, Cederholm’s attitude toward progressive enrichment deserves special mention here. Whereas a large majority of web professionals have made Internet Explorer bashing into a competitive sport Cederholm proposes a more pragmatic approach: Rather than designing for cutting edge browsers and being frustrated by older browsers not keeping up he creates designs that incorporate rewards for more forward-thinking browsers while incorporating clean and simple solutions for the older generation. This is the only reasonable approach and one I’ve been promoting myself for years so it’s good to see I’m not standing alone on this.

The Fuid Grid

Although Ethan Marcotte’s contribution to the book is only a singular chapter it is a hugely important one. As the title suggests it concerns, and solves, what has been a bit of a mystery for many: The Fluid Grid. Grid-based layouts have been a pillar of print design since the early 1920s and have started making their way onto the web. There are many reasons for this, none of which I will cover here. The challenge with grids on the web has always been that they are either entirely static or at the very least have static elements. This becomes a problem when visitors use devices with unusual or small screen sizes (think a phone, an iPad or a vertically oriented screen) because they are often forced to scroll left and right to access the information on the screen. Marcotte sets out to create a proper fluid grid layout and manages quite well through the use of relative sizes like em and % combined with a fair bit of math. The resulting fluid grid is quite ingenious and introduces flexibility to sites that previously were confined to rigid structures. And practicing what they preach both Marcotte and Cederholm use these types of fluid grid layouts on their own sites. Open them and resize your window to see for yourself.

The Bottom Line

The red line running through Handcrafted CSS: More Bulletproof Web Design is the attitude that a little extra refinement and forethought will bring rewards, in functionality, æsthetics and simplicity. And this attitude is one that can be applied to pretty much every aspect of life, not just web design. Cederholm and Marcotte are both living examples of how well this approach works and their sites stand as testaments to the techniques and parctices.

This book is for the seasoned designer / developer who already has a firm grasp on HTML and CSS but wants to take it further. It is also an excellent introduction to the world of CSS3 and fluid grid layouts for those that want to push their sites and designs into the future. The book is best read while sitting in front of your computer, preferably with a project on hand where the techniques can be implemented immediately. It is when you see the examples take shape and improve your own designs you realize where the value lies in this book. It’s not as much a list of good code examples as a guide to improving your own work. As such the seemingly disjointed code examples actually make a lot of sense: Rather than presenting pre-packaged functional content they are laid out in such a way that they can be slotted into pretty much any project for instant effect. This falls well in line with the theory that new knowledge is best retained when immediately applied to something that matters to the person learning it.

I wholeheartedly recommend this book wihtin the parameters I just set out and look forward to learning more from both Cederholm and Marcotte.

Related posts:

1. Introducing Design is Philosophy
2. In rewrite mode: New version of my book on the way!
3. My book is finally here!

WordPress 3.0 menus simplify everything… once you understand them

One of the major improvements shipped in WordPress 3.0 was the custom menu functionality. In the past menus were restricted to either simple page or category lists, hard-coded menus stored in the theme files or cumbersome 3rd party plug-ins. No such trouble any more. Custom menus are now available from right within the WordPress admin panel, found under the Appearance tab. And even if you have an older theme that doesn’t support the new menus you can still use them in your sidebar as widgets.

I’m not going to cover how to use the menus from within the admin panel. For that I recommend you read this WordPress Codex article that explains it quite well. Instead I’m going to talk about what you can do with these menus styling wise.

Dissecting the stock menu output

To see what’s possible with these new menus let’s first take a look at the code output from the stock menus. In this example I’ve created one menu with the name “My First Menu” and added it to the site using a sidebar widget. The menu has three buttons; Home pointing to the home page, About pointing to the About page and Contact pointing to the Contact page. (To make the code easier to read I’ve removed the sidebar <ul> and <li> tags so you only see the actual menu output.)

<div class="menu-My-First-Menu-container">
	<ul id="menu-My-First-Menu" class="menu">
		<li id="menu-item-37" class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-37">
			<a title="Home" href="http://mysite.com/">Home</a>
		</li>
		<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-38">
			<a title="About" href="http://mysite.com/about/">About</a>
		</li>
		<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-39">
			<a title="Contact" href="http://mysite.com/contact/">Contact</a>
		</li>
	</ul>
</div>

The key information for this tutorial can be found on line 4:

The first list item has an ID attached to it and then a huge array of classes. They are: “menu-item”, “menu-item-type-custom”, “current-menu-item”, “current_page_item”, “menu-item-home” and “menu-item-37″. Of these the three that matter to us are “current-menu-item”, “current_page_item” and “menu-item-home”. Using these custom classes you can create custom styles that highlight or otherwise affect only certain elements:

.current-menu-item { } targets only the menu item the visitor pressed to get to the menu. This goes for categories as well as pages.

.current-page-item { } targets only the current menu item if that menu item is pointing to a page and the visitor is on that page.

.menu-item-home { } targets only the menu item that points to the root or home page of the site.

So, to answer the question from the original artice: How do I highlight the current page in my menu? The answer is create a custom class style with the name .current-menu-item.  As a bonus this style will not only target your pages but also your category index pages and your home page. In the past you had to create separate styles for these.

Going deeper with child pages

But this is just the beginning. With the new WordPress menus you can create custom styles that target more than just pages and category indexes. It turns out the code output for these custom menus is highly dynamic and it interacts with all the content on your page whether you actually use the menus or not. The code output above was generated after clicking on the home page and thus resulted in the three classes listed above (notice those three classes are not present in the two other list items). But what if you went to a page that was a child of one of the menu pages? In the past that would mean the parent page would not be highlighted in the menu. But now it can.

The code below was grabbed from the same site as before after I opened a page for which the About page is the parent:

<li id="menu-item-38" class="menu-item menu-item-type-post_type current-page-ancestor menu-item-38">
	<a title="About" href="http://mysite.com/about/">About</a>
</li>

Look closely at the class array and you’ll find this new class: “current-page-ancestor”. This class is activated every time the visitor opens a page that has a parent page that is featured on the menu. That means you can use this class to highlight the parent in the menu. The easiest way to do this is by simply adding the new class to the style of the original .current-menu-item class:

.current-menu-item, current-page-ancestor { } targets either the menu item for the current page or the menu item for the parent page if a child page is visited.

Category highlighting for single posts

It gets even more interesting when we look at category menu items. Like in the past you can create menus that point to category archives. And you can use the .current-menu-item class to highlight the current category in the menu if you’re on the category index page. But what if you want to highlight the category (or categories) of a particular post when that post is open? Again there are custom classes for this:

<li id="menu-item-40" class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-40">
	<a title="Commercials" href="http://mysite.com/category/commercial/">Commercial</a>
</li>

Here the three classes “current-post-ancestor”, “current-menu-parent” and “current-post-parent” are what matters. Either of the three will allow you to highlight the category (or categories) the current post belongs to, but they each work in different ways:

.current-post-ancestor { } targets the menu item as long as the category the menu item points at is an ancestor of the post (so regardless of whether the post is in the category or in a sub-category under the category)

.current-menu-parent { } targets the menu item if it is the parent of the menu to which the post belongs (yes, it’s confusing).

.current-post-parent { } targets the menu item only if the category is the direct parent of the post (menu item will not be highlighted if the post only belongs to a category that is a child of the category the menu item points to).

Bottom line: The style that highlights pages, categories and parents

Because of how this new menu system is set up, and because it works so well you only really need to create one custom style if you want to highlight the current page, current category, page parent and category parent in your menu:

.current-menu-item,
.current-page-ancestor,
.current-post-ancestor { }

To get more advanced you can also create separate highlighting styles depending on what type of menu item it is or what relationship it has to the page, post or index. And if you have multiple menus you can create entirely separate style sets for each of these, complete with current page, post and category highlighting. The posibilities are if not endless then at least quite extensive.

Upon first inspection the code output of the new WordPress 3.0 menu system may look quite messy but now that you see what it’s all for I think you’ll agree with me that this heralds in a whole new age of menu customization for theme developers.

If you want to see this stuff in practice head on over to the website for the 12×12 Vancovuer Photo Marathon where I’ve implemented tons of custom menu highlighting.

Related posts:

1. Highlight current page in WordPress menus
2. Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks
3. New WordPress based site: The Reader’s Companion

Sams Teach Yourself Microsoft Expression 4 in 24 Hours

Earlier this summer Microsoft released version 4 of Expression Studio. The new version brough major upgrades to Expression Web and as a result my hugely popular book Sams Teach Yourself Microsoft Expression Web 4 in 24 Hours had to be updated. That meant I had to go through every nook and cranny of the new version to find all the new goodies, come up with new examples to show them off and then rewrite whole chapters to reflect these changes. It may come as a surprise, but revising a book like this is almost as much work as writing it from scratch. Which means once v5 comes out I am likely to do a complete rewrite. But that’s a different story.

The new book, scheduled to be released end of October, features updated and extended examples, new features, removal of deprecated features. New content worth noting is an extended chapter on the new and improved Expression Web SuperPreview which now includes full support for IE6, 7, 8 (compatibility mode) and 8 as well as a new feature called Remote Browser Testing that allows for testing on external browsers like Safari for Mac and an entire chapter on the new Search Engine Optimization (SEO) Checker tool.

Expression Studio 4 and Expression Web 4 comes as a free upgrade if you already own version 3. That means if you have version 3 you should upgrade right away. And if you alredy have my version 3 book you should get the new version once it comes out. I’m not saying this because I want to sell more books but because there are some new features in there that are important to understand and get the full use out of.

Microsoft Expression Web 4 LiveLessons (Video Training)

In addition to the book I’ve also created a colossal 27 lesson video series clocking in at around 5 hourscalled Microsoft Expression Web 4 LiveLessons (Video Training) for those of you who either don’t want to read a book or who want more hands-on training using Expression Web. The LiveLessons series features an entirely new example project based on the 12×12 Vancouver Photo Marathon website and provides a best-practice model for how to create professional, rock solid and stylish websites using standards-based HTML and CSS. The LiveLessons series is complementary to the Sams book so there are things that are covered in the videos that are not covered in the book and vice versa. Thus even though you’ll get a lot out of each item alone you’ll get a much better and more in-depth understanding by getting them both. Again, this is not a sales pitch – I’m being honest here. The combo really is the better deal.

The video series will be available on DVD early October and I believe it will also be available for download or online viewing on InformIT’s website (tba).

12×12 Vancouver Photo Marathon 2010

Because I don’t already have way too much on my plate I decided to start a huge photography event/contest last year called the 12×12 Vancouver Photo Marathon. In a nutshell it’s a contest where 60 photographers show up on a set date, pick up a 12 exposure 35mm film and then at the top of every hour for 12 hours are given one theme to interpret in one photo. At the end of 12 hours the films are returned, developed, judged and finally put up in a huge exhibit. In the end we end up with 720 photos divided into 60 sequences of 12 consecutive themes. The 2009 event was a massive success with over 300 people showing up for the gallery exhibit and we expect this year’s event to get even bigger.

In the runup to the even (and to kill two birds with one stone) I developed a new site for the marathon and used this site as the demo project for the Expression Web 4 LiveLessons series. As a result the site features some pretty fancy elements like a transparent CSS-only drop-down menu with multiple in-button styles, CSS3 drop-shadows and rounded corners and tons of other fancy schmancy style elements.

The 2010 12×12 Vancouver Photo Marathon takes place on Sunday September 12 from 8am to 8pm in downtown Vancouver with a home base at Blenz Coffee in Yaletown. Tickets for participation (60 in all) are $24 per person and cover all expenses. Tickets go for sale Thursday, August 12 at 8pm and are expected to sell out fast. The following art exhibit will be held at Vancouver Photo Workshops on the 16th of October.

Related posts:

1. In rewrite mode: New version of my book on the way!
2. My book is featured in the Canadian User Experience Blog
3. This is Expression Web 3

Social media killed Google Wave. Or at least social media was instrumental in its demise.

Why? Because the people who fell over each other and sold their grandmothers to get an invite to this much hyped communication invention were not the people it was intended for and they did not need it, want it or know how to use it. As a result it was left, like an unsolved Rubik’s Cube, by the wayside to die a slow death – not because it was faulty or lacked uses but because those of us who had it didn’t understand it, grew tired of it and simply forgot about it all together.

So how did this happen? Winding the clock back to last year and you’ll be sure to remember the insane frenzy that was the battle to get a Google Wave invite. Everyone and their grandmother (before she was sold) wanted in on this revolutionary “real-time communication platform” from Google. The video demos were awesome. Silicone Valley was all abuzz. The gadget blogs, geek blogs, dev blogs, social media blogs, tech blogs, mom blogs and cute-dog blogs were talking about it. The Twitter Fail-Whale got face time over it. Facebook became a trading ground for invites. It was truly crazy.

The description tells the story

But why? All the videos, the writeups and the demos showed the same thing: Google Wave was a real-time collaboration platform that allowed groups of people to work on the same project at the same time – in real time. Which is something that’s done. In organizations. And in companies. And that’s about it. Normal people, like me and the vaste majority of the social media herd, do not need nor use such collaboration platforms because we don’t work on projects where they are needed. And before you say “oh, but Google Wave was something new and different that I needed in my life” remember that there are already several services out there that do part of what Google Wave did that you rarely, if ever, use.

I remember sitting at my desk in those days and thinking “what the hell are people going to do on Google Wave anyway?” I kept seeing Facebook and Twitter updates like “I’m on Google Wave right now! Anyone want to chat?” and I thought “Why? You’re already on a different platform chatting about chatting somewhere else.”

Don’t get me wrong here. I was part of the frenzy and I got my invite and peddled invites to all that asked. I was just as bitten by the bug as everyone else. And I’m to blame for Wave’s demise as everyone else.

Don’t knock it ’till you’ve tried it – for real

When I finally got my invite it was for a reason. We were in the process of planning the first 12×12 Vancouver Photo Marathon and needed a way for the 6 members of our team to work together on a pile of disjointed odds and ends. My partner in crime Angela decided that Wave might be a good platform for this collaboration so she set up a wave for us to play around with. After watching some videos and reading some of the documentation she quickly became proficient and set up a really impressive wave with images, documents, videos, chat and map integration. The problem was noone else in the group had time to get familiarized with the app so Angela ended up working on it pretty much on her own while the rest of us just watched in awe.

What I saw was huge potential – if there was a huge project with a multi-tiered team in several locations involved. What I realized was that this thing was not made for me, my company, my coleagues or anyone I knew really. It was made for large corporations or groups with highly complex projects that require real-time data and content management.

And that was, and is, the crux of the problem: The people on Google Wave were not the people who would benefit, or even find useful the functionality of Google Wave. Thus it was discarded as a neat looking but useless Beta.

Too much, too soon and to the wrong people

In the wake of Wave’s demise a lot of people are saying it buckled because it didn’t have enough to offer, that it was too complicated and that it didn’t have an actual use. I disagree. Google Wave was something truly remarkable that introduced a whole new way of collaborating and creating content. The problem was the people who would actually use it were already using other more established platforms or were drowned out by the masses that were so eager to jump onto the newest and shiniest bandwaggon that they didn’t realize the band was playing atonal black metal jazz with clarinets. Sure, it has it’s followers, but those were not the ones hitching a ride.

Additionally I think Google Wave was a bit too forward thinking. In a nutshell Wave introduced a type of non-linear stream-of-counsciousness workflow that is hard for people to wrap their heads around unless they are already used to it. Although real-time collaboration might sound cool it takes time to get used to writing a document while watching someone else edit it. And it takes even more time getting used to having multiple conversations in multiple streams at the same time. Sure, social media is pushing us in that direction but we still have a long way to go. We are still too stuck in the linear task-oriented way of doing things to be able to incorporate this type of workspace into our lives and offices. It’s coming but it’s still a few years away. Google simply pushed the envelope a bit too far and it fell off the table.

What can we learn

Like I said, the problem with Google Wave was never the app itself but the people who (didn’t) use it. This begs the question “Why were these non-users involved in it to begin with?” The answer is social media hype, pure and simple. Everyone was talking about it. It was touted as the hottest thing since an overheating MacBook Pro. Everyone just had to have an invite. People actually paid money for invites. But noone (myself included) ever took a step back and asked themselves “Am I actually going to use this thing? Is it even for me?” It’s pretty clear that Google had asked, and answered these questions and that both answers were “No!” Which is why the Beta was closed. Unfortunately the closing of the Beta seemed to have the unintended effect that people thought it was cool to get an invite, that they were part of something new and revolutionary, so rather than the Beta staying closed within the groups that were actually going to use the device it started spreading out to nerds like myself who just wanted their share of the fun.

Regardless of how it actually happened the result was an almost vertically accellerating growth in users followed almost immediately by a vertical drop in actual use. Not because the app was crap but because the people enrolled in the Beta testing were not actually Beta testing or doing anything else with it.

The conclusion? Hype is just hype. It is not a measure by which you should make decisions on whether or not to participate or buy something. And closed Betas are usually closed for a reason: To get actual results from actual users. And maybe most surprisingly: Social Media has the power to destroy great things simply by overloading them with massive interest followed by complete abandonment.

Rest in peace Google Wave. We hope to see you again in another time.

Related posts:

1. Social Media: Revolution or the End of Objective Reason?
2. Mastering Social Media Part 1: Treat Your Blog Like a TV Show
3. Anny gets shortlisted for the Best Job in the World proving the power of social media

No related posts.

The nagging question remains why Rogers has been keeping their customers in the dark about this process until this point. There is no good reason for this silence and it has lead to an uproar in the community and a lot of people, me included, seriously considering bailing on them all together and moving to a different carrier. More than anything this whole story has been a study in media and customer mismanagement and I’ll probably use it as a cautionary example of such in future presentations on how to use social media technology to further your business.

Hats off to Mary Pretotto for staying with it through all the angry tweets she’s gotten over time, but there is something seriously wrong with the way Rogers thinks about communication with their customers and if anyone higher up in the system has their witts about them there should be a policy change and probably a shakeup in management as well. Someone made the decision not to inform the customers about the progress of this update and as a result Rogers lost not only credibility and loyalty, but clients.

Update July 14: Rogers just announced that Rogers has indeed received the “draft 2.1″ software from HTC and that it will be rolled out “end of August”. First off that makes Rogers Management office look like they have no clue what’s going on and secondly it shows that they are dragging their feet. I think it’s time to start sending angry letters to Rogers to let them know how we feel about being given the runaround.

I realize this issue (cell phones and carrier behaviour) is a bit off-topic from what is generally posted on this blog, but this issue is something I’ve been mulling over for some time now and I feel it’s time to share what I’ve discovered with the world.

Last year my wife and I became the proud owners of two sparkling new HTC Magic phones from Rogers. The Magic was the newest and greatest Android powered touch-screen phones at the time and we were hugely excited to get them. The phones worked great and although the user interface felt a bit basic compared to other more refined user experiences we were happy in the knowledge that as Android phones the firmware (or Operating System) was in a near constant state of development and that in short order new firmware would be rolled out and the experience would improve.

Which is what would have happened had it not been for the fact that we are in Canada and our phones are running on the Rogers network.

Upgrade? What Upgrade?

Things started to go sour in late 2009 when Google rolled out the Android 1.6 firmware (the phones were originally running 1.5). Subsequently the hardware manufacturer HTC rolled out a new handset with the Sense user interface and all of a sudden our baseline Magics were starting to look really old and outdated. “Fret not” we were told, “Sense runs fine on the Magic and HTC will make it available in short order”. Or so we were lead to believe. Then came the crushing news that for unknown reasons Rogers had decided that the 1.6 upgrade with Sense in tow would not happen. There was no official reason given but rumours indicated that Rogers wanted to build in custom branding in the operating system but didn’t want to pay HTC to do it. Rumours, OK. I have no idea if that’s the case. The only word from Rogers was that no 1.6 would be released and the next release would be 2.0 “some time in the summer of 2010.

Regardless, the upgrade did not arrive and as we watched our European and American friends get the upgrade we, the people of the Android Nation of Canada started getting really pissed. So much so in fact a campaign was started to force Rogers to roll out the 1.6 upgrade, spearheaded by the I Want My One Point Six website. But it felt like the message was falling on deaf ears. Maybe Rogers was testing out some new noise cancelling headphones or something.

Upgrade, or else!

Then all of a sudden out of nowhere Magic owners across Canada got a weird text message saying they needed to upgrade their phones to the new Sense user interface immediately or lose data access. If I remember the message arrived on a Thursday and the cut-off point was the following Monday or Tuesday. At first it looked like a weird change of heart but then it turned out the 911 features in the Magic phones were completely screwed up and the upgrade was necessary to fix the issue.

And true to their word, a few days later all internet service was cut from the phones and we were forced to do manual upgrades. Which deleted a whole pile of data and caused major headaches for a lot of people. But in the end we got our Magics upgraded to Sense so everything was fine.

Rogers, realizing they screwed things up for a lot of people, relented by offering up one month of free data for all Magic users. Good on them.

But then people discovered that the upgrade was purely cosmetic. Even with Sense the Magics were still running 1.5. Which was weird because only months before Rogers had argued Sense could only be installed on 1.6 and that’s why we wouldn’t get it.

Something was definitely rotten in Denmark.

2.1 is coming… in the summer… or something

So the debacle continued: Magic owners kept asking Rogers why the phone was still on 1.5 and Rogers kept saying the 2.0 upgrade would come some time in the summer. Which still made no sense at all. No explanation was ever given as to why the 1.6 upgrade was not released. The problem compounded when app vendors started writing apps that only work on 1.6 and higher and the frustration grew and grew.

Then in the spring Rogers announced that they would release 2.1 “by the end of June”. That was still months after everyone and their dog who lived outside of Canada would get the upgrade, but at least it was a step in the right direction. Or so we thought.

With the end of June comes … nothing!

As June started getting into the double digits a lot of Magic owners were starting to get anxious. Not only was there no word on when 2.1 would actually be released but Google was rolling out 2.2 while we were still stuck in 1.5 land. The heat only increased when, after brushing off hundreds of requests for info, Rogers’ Twitter customer rep @RogersMary informed everyone that Rogers would receive the HTC version of 2.1 by the end of June and that the firmware would then undergo “testing” before being released. In other words there would be no end of June release of 2.1. This was further compounded when it was announced that both American and French Magic owners were getting the 2.2 release.

Things were indeed rotten. In Rogers headquarters. And that brings us to today.

Who cares about moneybags customers anyway?

Needless to say at this point we are all fed up. Not only are we still running software that is now over 1 year old and 2 generations behind (just imagine what would happen if Rogers did the same to iPhone owners. Wait, who am I kidding. That would never happen) but the complete lack of information from Rogers on the topic is mind boggling. One would think that a company that prides itself on being “committed to Android” would care enough about their customers to tell them why they are stalling the firmware releases. Or at least announce when the firmware will be released. But I guess that’s too much to ask. As of right now there is no official word on when or how 2.1 will be released other than that it will be done “once it is finished”. This in spite of HTC rolling out both 2.1 and 2.2 to other carriers in other countries.

To put it plainly, this whole situation stinks of corporate greed and negligence. I wouldn’t be surprised if it turns out this lack of upgrading is actually some sort of convoluted plan to get people to buy new phones. Again, just a theory.

“The information will be released when the software is released”

So, being totally fed up with this mess I called Rogers Customer Service and asked to speak to someone in charge. The Customer Service Representative told me that I was the 3rd caller in the last hour to ask about the upgrade. One would think Rogers would take that as a warning sign. But that would mean they actually care. Which as far as I can tell they don’t. But I digress.

I was passed on to Rogers Management Office and after about 15 minutes someone actually came on the line. Her name was Rokhaya. And she did not appreciate my business.

After a lengthy round of questions turned discussion turned arguments I asked her three simple questions:

• When will we get information on when 2.1 will be released?
• Why is there no information about the 2.1 release or why it is being delayed?
• Can you confirm that Rogers has received the HTC version of 2.1 for testing?

The answers were truly astounding:

When will we get information on when 2.1 will be released?

“Right now as far as we (the employees) know we don’t have any information to release to our customers. That information will be released when the software is released”. (direct quote)

Why is there no information about the 2.1 release or why it is being delayed?

“We have no obligation to release such information to consumers. That information will be made available when the software is released”. (again, direct quote)

Can you confirm that Rogers has received the HTC version of 2.1 for testing?

Rokhaya: “I can not provide you with any such information. There is another representative here who can answer this question but he is currently on another call”

Me: “Can you get him to call me back with that information?”

Rokhaya: “He will not call you back because you are on a call with me.”

Me: “Ok, can you ask him and then call me back?”

Rokhaya: “No, I will not call you back.”

Take your consumer rights and shove them!

My conclusion after this rather surprising conversation should be that Rogers does not care about their customers. But I’ll give them the benefit of the doubt and assume instead that this is a systemic failure in which information is not moving freely within the company. It is quite clear that someone has decided that Android, or at least the Magic, should not get first-rate service and should be treated like an unwanted step-child. Who knows why that is. It is also clear that when it comes to informing the consumer about what is going on the Rogers policy is “The consumer does not have the right to know.”

I’ll be more than happy to revise that stance if Rogers provides me with answers to the above questions, answers that should be pretty easy to obtain and just as easy to release. In fact, answering these questions will undoubtedly calm down the furore that is currently brewing over this issue on the web.

Right now Rogers is doing exactly what I tell people not to do: Ignoring customer complaints and losing control of the discussion. A simple firm date, confirmation of receipt of the HTC upgrade or even and explanation of why the upgrade is taking so long would do wonders. Because right now the best option seems to be sending the phones back and going with a different carrier.

Related posts:

1. Testing the new Vimeo Universal Player
2. WordPress 2.8 upgrade woes
3. WordPress 2.7 to be released Dec. 4th

Guest post by Ole Rand-Hendriksen.

So my brother Morten came to me with this idea about making a pivot project for the 12×12 Vancouver Photo Marathon 2009 where he basically wanted to be able to sort the images in categories, photographer, gender, winners and so on. He hadn’t really looked into how pivot works, but he thought this could be something that I could probably figure out in a couple of hours or something.

I followed the links he gave me to the pivot site and some instructional demo videoes. But i didn’t really have the patience to go through them all. So I did what i normally do;  which is take half a look at the specifications and then just try it out.

I started by downloading pivot from www.getpivot.com and looking at how it works, which is still a bit confusing to me because of the seadragon technology and the image sorting, but I’ll get into that later.

Then i started reading about how pivot works, and the data part is actually quite straight forward. It’s basically just xml files where each item has some properties, and in the beginning of the file, it says what kind of properties and if you should be able to use them to sort by.

The more confusing part is the deep zoom collection part, which is the part that makes all the trouble. Basically deep zoom collections aren’t dynamic at all (someone please prove me wrong), which is very anoying. Since it means that you have to host all the images locally on the server where you have the pivot collection.

And then i started to read up on how to make pivot collections. There are according to the pivot site 3 ways of making them;

1. by using the commandline tools
2. by using the excel tool
3. by making the tool yourself.

Since i concidder my self proficient in excel i decided to use that method on this project. So I downloaded the tool and installed it (link).

Then i went on to figure out how to get all the data I wanted from the 12×12 Vancouver Photo Marathon Flickr sets. The easiest way i could think of was to use the rss feeds and try to parse them in some way or other. I ended up using a rss parsing library for python from http://feedparser.org/ and i wrote a very simple script that went through all the set feeds and parsed them into a more usable .csv file.

The print lines were just for debuging.

# -*- coding: utf-8 -*-
import feedparser
import codecs

url = [ *list of urls*]

f = open(” *path to file* “, “w”)
for u in url:
print u
d = feedparser.parse(u)
name = d.feed.title.split(“- “)[1]
print name
num = d.feed.title.split(” “)[2]
print num
for entry in d.entries:
h = entry.links[2].href
print h
t = entry.title
print t
s = num+’, ‘+name+’, ‘+h+’, ‘+t+’\n’
u = s.encode( “utf-8″ )
print u
f.write(u)
f.close()

then i imported the data into a new excel file.

The pivot plugin for excel is a bit buggy, so you can’t really import data directly into the fields, but when you have the data in another document, you can just copy each column in where you want it. It takes some time for the previews to load though when you are working with a few hundred images that are all online, so be prepared to spend a few hours doing something else if you try.

Another bug that’s nice to be aware of, is that if you by accident make too many rows in your collection, you won’t really be able to remove it. When you’ve added all the data you want, you just push the publish pivot button, and then save it where you want to. This can also take a few hours. When it’s done, pivot will open and you can view your collection.

Since pivot utilizes Deep Zoom and Seadragon, the images are sorted into a gazillion small files that will take forever to upload to a webhotell by ftp. so make sure you are using as many connections as you can. Also it’s very annoying that deep zoom is almost completely static unless you trick seadragon by using the api like Lang Deng did for deep zoom images with his project, though i don’t know if there’s an easy way of doing something like that for deep zoom collections.

I’ve got some ideas for further pivot projects but I don’t know if they are possible to make yet.

Related posts:

1. Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks
2. Expression Web 2 Beta Bug Report

New in Expression Web 4

There is a long list of new features in Expression Web 4 but here I’m only going to mention three – because they are the most important ones.

In-app SEO reporting

Like the name suggests Expression Web 4 provides a full SEO report for selected pages or the entire site. Gone are the days of trying to remember all the SEO rules or using 3rd party apps to make sure your site gets listed on Google and Bing. With the click of a button Expression Web 4 will give you a list of everything you forgot to add to your site, like a title tag, proper description, keywords or broken links. But more interestingly it also gives you tips, in the form of warnings, that are not so obvious. During beta testing I ran the SEO reports on some of my existing sites and got feedback like “title is too general” and “description is too general”. This might seem like weird error reporting but it’s actually vitally important if you want your site to be noticed in the search environment: To be noticed your pages need proper titles that tell the visitor what’s on them. And the descriptions have to be specific enough to stand out. There are tons of other such warnings that, if heeded, will not only increase your SEO but will also teach you to write your code in an SEO friendly way the first time around. Which is exactly why I like Expression Web so much – it teaches you through its use to do things the right way.

More SuperPreview

I’ve raved about SuperPreview – the in-app or stand-alone cross-browser compatability tester that was introduced with Expression Web 3 – before. With Expression Web 4 SuperPreview has been enhanced and improved to include more browsers (IE 6, IE 7, IE 8 Compatibility Mode, IE 8 etc), more file inputs and most importantly an online component that lets you test your pages against the Mac version of Safari. It’s the same application with onion skinning, active areas, DOM view and all that great stuff, only improved for broader functionality.

I’ve said it before and I’ll say it again: SuperPreview by itself is reason enough to buy Expression Web.

Publish Current Page

For people like me who tend to work on multiple disjointed pages and do live updates to sites all the time the process of saving a page, going to the publishing panel and then uploading the pages to the external server is extremely cumbersome. The obvious solution to this problem would be to have a button or function that lets you publish the current or all open pages to the server right away. I requested this feature at some point in the pre-beta process of Expression Web 4 and I’m happy to say it’s now included in the app making publishing of your latest and greatest errors updates a one-click process. It may seem like a small and insignifficant upgrade but it really isn’t: After working with an early beta and going back to Expression Web 3 I kept swearing at my computer because I couldn’t just push my files straight to the server but had to go through the publishing panel. That quick one-click or shortcut process is a huge timesaver and a hugely important addition to an already excellent application.

If you have version 3, version 4 is a free upgrade

Yes, that’s right: If you already purchased Expression Web 3 or Expression Studio 3, Expression Studio 4 is a free upgrade. That means you get all the cool new stuff at no cost. Very cool.

More to come

I’m hard at work writing tutorials and other stuff (TBA) about Expression Web 4 so stay tuned to this blog for all the updates and other useful tips!

Further reading

I’ll try to compile a list of all the news on this exciting new app as they get in. If you have a link, dump it in the comments below and I’ll post it:

Microsoft Press Release
Official Microsoft Expression site
Paul Laberge’s post
Tim Heuer
Yahoo! News

Related posts:

1. This is Expression Web 3
2. Introducing Expression Web SuperPreview – Cross-browser testing at your fingertips
3. Expression Web 3 Service Pack 1 now available