Aug 19
Android, Browsers, video 0

Testing the new Vimeo Universal Player

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.

Post a job. Find one. authenticjobs.com
Aug 12
Events, Speaking Engagements, WordPress Themes, WordPress as CMS, wordpress 0

Vancouver WordPress Meetup Talk: Simple Yet Powerful WordPress Hacks

Below you’ll find the code examples for my Vancouver WordPress Meetup group talk Simple Yet Powerful WordPress Hacks held on August 12, 2010. This article will be expanded after the talk but for now it consists only of the code examples themselves.

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.

Aug 11
Book Reviews, CSS, HTML 0

Book Review: Handcrafted CSS: More Bulletproof Web Design

Some context: People keep asking me what books they should read to learn about web design and everything else under the sun. Therefore I’ve decided I’m going to start reading books about web design and everything else under the sun and write reviews of them so you can see if it’s a book you should check out too.

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.

Tagged , , , ,
Aug 09
Tutorials, wordpress 5

Highlight Current Page or Category in WordPress 3.0 Menus

Almost two years ago I published an article on how to create custom WordPress menus that highlighted the current page. It’s still one of the most popular posts on this site, and for good reason: Current page highlighting is vital to ensure a good user experience for your visitors. Without current page highlighting it’s hard for the visitor to know if she is on the correct page or not. Now it’s time to upgrade that tutorial to incorporate the new custom menu functionality in WordPress 3.0 and also add some new functionality.

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.

Tagged , , , , ,
Aug 06
Expression Web, My Book, News 0

Breaking the silence: What I’ve been doing over the summer

If you follow this site and my Tweets you will surely have noticed my relative silence over the summer. Well, there is a reason… more precicely 3 reasons. I’ve been colossally busy dealing with three major projects that as of now are either nearing completion or at a point where I can start focusing on other stuff (like long neglected clients) again. So, to stave off the criticism for my falling off the face of the internet here’s a taste of what I’ve been working on:

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.

Tagged , , ,