MightyMeta

Embedding YouTube Within iPhone Apps

James Brocklehurst — Fri, 07 Oct 2011 23:21:54 +0000

Here is a method I recently devised for getting YouTube videos to work in a useable and clean way within iPhone Apps. It assumes a basic familiarity with Xcode 4 and Objective-C.

Sample Video “Cycles” by Cyriak Harris

Download Source (.zip package, 33KB)

What This Method Does

There are several offerings out there for embedding YouTube into your app, most of which are variations on the code provided by YouTube themselves, and this is no different. What is new about this approach is that it positions the thumbnail centrally in all device orientations using some tweaked CSS, places the thumbnail against a black background (which is trickier to work out than it sounds), and enables you to pass a video URL dynamically to the embed code.

The example I give launches the video in a modal view, which is useful if you are working with a Tab Bar application or Navigation Controller stack with a portrait-only orientation, but still want to have videos displayed landscape. Using a modal gets around the issue of all views in a Tab Bar application needing to adhere to the same orientation as outlined by Matt Long, or any other orientation problems. You could, of course, adapt the code to remove the use of a modal if you so wished.

The Launcher View

In this example I am using two view controller classes, one that manages a XIB with some ‘view video’ buttons, and then one for the display of the actual video.

First, create a UIViewController subclass with an associated XIB called “VideoLauncherViewController”. In the interface file, add the following:

#import 
#import "VideoViewController.h"

@interface VideoLauncherViewController : UIViewController {

    NSString *videoURL;

}

@property (nonatomic, retain) NSString *videoURL;

- (IBAction) launchVideo;

@end

Nothing too complex here, just a property to hold the URL for the video and a method declaration. Once the property has been synthesized and released, this is how the method should be implemented in VideoLauncherViewController.m:

- (IBAction) launchVideo {

self.videoURL = @"http://youtube.com/embed/-0Xa4bHcJu8";

VideoViewController *videoViewController = [[[VideoViewController alloc] initWithNibName:nil bundle:nil] retain];

videoViewController.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
videoViewController.videoURL = self.videoURL;

[self presentModalViewController:videoViewController animated:YES];

[videoViewController release];
}

You’ll get an error about videoViewController not having a videoURL property, but this will get sorted out once it is added in the next step.

The last section of the URL string, found directly after youtube.com/embed/, can be substituted for that of any YouTube video. Just use the ‘share’ button on the YouTube page to get the relevant code:

Passing this URL value to the next view in the way shown above means you could extend the class to make the choice of video user selected, or altered programatically, for instance.

In the XIB, make a button, and bind it to the method, as shown below (click to enlarge):

The Video View

Now create a second UIViewController subclass and XIB called “VideoViewController”. Here’s the interface:

#import 

@interface VideoViewController : UIViewController {

    IBOutlet UIWebView *videoView;
    NSString *videoURL;
    NSString *videoHTML;

}

@property(nonatomic, retain) IBOutlet UIWebView *videoView;
@property(nonatomic, retain) NSString *videoURL;
@property(nonatomic, retain) NSString *videoHTML;

- (void) embedYouTube;
- (IBAction) closeModal;

@end

Again, synthesize and release the properties in the implementation, then add these methods:

- (void)embedYouTube {

videoHTML = [NSString stringWithFormat:@"\
\
\
\
\
\
\
\
", videoURL];

[videoView loadHTMLString:videoHTML baseURL:nil];
}

- (IBAction) closeModal {
[self dismissModalViewControllerAnimated:YES];
}

Lets go through some of that.

First of all we assign a string of HTML code to the videoHTML property, which will be used to embed the video within a UIWebView. The HTML contains some inline CSS for centering the video correctly on the screen. Note that some characters in the string need to be escaped, notably double quotation marks with a backslash ‘\’ and the percent sign with an extra ‘%’. New lines also need to be preceded with a backslash.

Because this is a stringWithFormat, we can also insert dynamic values, so the %@ symbols found within the src=”" attribute are replaced by whatever value is held by the videoURL property, as sent through from the Launcher view, and identified there at the end of the message.

The next step is to add the following to the - (void)viewDidLoad method:

videoView.backgroundColor = [UIColor blackColor];
videoView.opaque = NO;

[self embedYouTube];

This code sorts out the black background mentioned earlier (trying to achieve this is Interface Builder doesn’t work), plus there is a message to run the embed method.

Finally you need to alter - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation so it is simply returning YES to allow for all orientations:

    // Return YES for supported orientations
    return YES;

VideoView XIB

Open the VideoViewController.xib, and drag a UIWebView instance from the library onto the canvas. It should scale to fill the full width and height of the canvas.

Next, download and unzip this button graphic, and add both sizes of the ‘close-dark.png’ image to your project.

Drag a Round Rect Button from the library and place it roughly in the top left corner of your main view.

In the Attributes Inspector, set the Type to ‘Custom’, and the background image for the button as ‘close-dark.png’. Also change the Title to ‘Close’, the text colour to white and the font size to 14.0.

In the Size Inspector, set the X position to 36, the Y position to 24, the width to 60 and the height to 30.

Select File’s Owner and bind the videoView outlet to the UIWebView instance and the closeModal action to the ‘Close’ button.

When you are done, it should look like the example below (click to enlarge):

The Result

This should work both in the simulator and an actual device.

When you build and run and tap the button on the launch screen, the modal view is presented with the static video thumbnail.

Tapping the thumbnail will play the video fullscreen, which can be viewed in either landscape or portrait orientations. Pressing the blue ‘Done’ button will return the user to the thumbnail screen. Pressing the ‘Close’ button on the thumbnail screen will dismiss this modal view.

Conclusion

This method provides a clean and extensible way of embedding YouTube videos in your apps, which should work in most situations.

The source code is released under the BSD 3-Clause License.

If you have any problems with the code, or have improved it in some way, feel free to leave a comment below.

SuperSlicr: Ditch the Slice Tool!

James Brocklehurst — Tue, 23 Aug 2011 11:11:55 +0000

This is an update to the Photoshop action that I created in May 2010 to speed up my Photoshop to Web/Mobile workflow. It allows you to select any combination of layers (which may contain layer styles, vector shapes, text layers or smart objects), and automatically crops, merges and then passes them to the the Save for Web and Devices dialogue.

Since using it quite heavily on a recent iOS project, I have made a few tweaks to how it works (detailed below) and now can’t live without it! Go on, give it a whirl!

Download ‘SuperSlicr’ Action (Photoshop CS2 +)

Installation

Unzip the package and double-click on the ‘superslicr.atn’ file. It should launch Photoshop and add itself to your Actions palette automatically. If this doesn’t work, install it manually by choosing ‘LOAD ACTIONS’ from the Actions palette’s contextual menu:

Then browse for and select the file.

Instructions

1. Select the layers that you want to export as a single graphic. Note that they do not need to be adjacent to each other in the layers palette and can even exist in different groups.

2. Select which export format you require (JPEG, PNG-24 Standard or PNG-24 iOS Scaling) in the Actions palette.

3. Press the play button in the Actions palette or CMD-SHIFT-F8 for JPEG (High) / SHIFT-F8 for PNG-24 / F8 for iOS Scaling.

4. Your selected layers now appear merged, cropped and ready to export in the save for web dialogue window!

When you return to your document after saving, a new document containing your cropped and merged image will be active. Your original document will also be there, inactive, and in its original state.

Features

Crops selected layers to pixel bounds – no slice tool required!
Can select any combination of layers (don’t need to be adjacent in layers palette).
Works with any layer type, including layer groups, text layers, vector shape layers and smart objects.
Non-destructive. Creates new document from selected layers and leaves original layers untouched.
New document remains open at end of process so can be saved as additional format.
iOS Scaling, PNG-24 (Alpha Transparency) and JPEG (60% compression) flavours.
Can be activated using F8 function key (this can be altered if needed).

1.0 Release

I haven’t fully tested this on different platforms, Photoshop versions, etc, and although it seems to work without a hitch for me, you may find it it does something strange when used in your particular setup.

UPDATE 24th Oct. 2011: After using SuperSlicr a bit more extensively I have ironed out a couple of bugs that existed and have also added an ‘iOS Scaling’ setting that produces both a Retina Display and Standard version of your selection.

Use the download link at the top of the article to get the latest version, and look at the readme file to see exactly what has changed.

If you experience any bugs, let me know in the comments, explaining what the bug was, what you were doing when it happened, and what OS and Photoshop version you used, so I can have a go at fixing it.

Licence

BSD 3-Clause Licence

Essentially you can do whatever you want with this, but can’t redistribute the code without including the original licence (i.e. you can’t sell it or pretend it’s yours).

CSS Noise

James Brocklehurst — Wed, 03 Aug 2011 14:40:03 +0000

This post looks at a way to add a subtle noise effect to HTML elements using CSS. Using this technique is of interest because it doesn’t require use of an image editor, weighs in at just a little over 2K and doesn’t generate any extra HTTP requests.

Demo
Download (CSS code snippet, 2.2K)

How To Use It

The simplest implementation is to paste the code into your existing CSS, then give any HTML elements that you want to apply noise to a class="noise" attribute. Yes, I know that’s an unsemantic use of markup, but there is a workaround that I will detail later.

If you want to apply noise to the body element, use class="body-noise" instead.

How It Works

A quick look at the source will reveal that the trick here is a simple one, namely a data uri. This has been generated from a 50 x 50 pixel repeating tile PNG image of monochromatic noise that I made using Photoshop.

It is layered over elements using the :before pseudo selector using the technique outlined by Nicolas Gallagher and the opacity property. This means that no additional elements are required, and the noise is placed over the top of any existing background colour or image that the element might possess, but sits behind the element’s nested content.

Because the properties used are CSS 2.1 and not 3 then there is pretty good browser support too (breakdown below). Yet because this added progressively, browsers that aren’t supported won’t break, they just don’t get any noise.

Why ???

Adding a subtle amount of noise to aspects of an interface design is becoming more common, since it gives the designer the ability to create a more natural and less ‘digital’ looking aesthetic for interface elements that can be apparent when working with flat colours and gradients alone. Using noise also allows for an enhanced contrast in texture between figure/ground and between distinct areas of a layout.

This of course is already possible using sliced image files, but requires use of an image editor and some experience to create a tile in-keeping with the design in question, and generates an additional HTTP request for each linked image used.

There is a JavaScript based alternative, but this needs to create an additional element for it to work, and is quite processor-intensive if used a lot, so although interesting, isn’t that practical.

Adding noise using CSS could be seen as an extension to the popular practice of dynamically adding drop shadows, rounded corners and gradients, etc, using the new CSS3 properties.

Using noise may be just a current ‘trend’, but is generic and understated enough (unlike, say, ‘brushed metal’ or ‘grunge corners’) for me to believe it will here for a while and warrants some sort of CSS solution.

As a side-note, I first tried to see if this was possible using CSS3 gradients, as inspired by Lea Verou’s CSS Pattern Gallery. I thought perhaps that it could be done using a combination of gradients and Alex Walker’s Cicada Principle. As you can see below, things didn’t quite work out as a ridiculous amount of code is required for something that looks less than satisfactory:

Better Semantics

As mentioned above, including a “noise” class to your HTML elements is convenient, but no better than adding color="red" or font="bold" attributes, in terms of semantics and the separation of content and presentation.

If you want to avoid this, then group the selectors of the elements that you want to add noise to, like so:

#myFirstElement, #mySecondElement, #myThirdElement {

position: relative;
z-index: 1;

}

#myFirstElement:before, #mySecondElement:before, #myThirdElement:before body:before {

//noise code here...

}

Grouping selectors avoids you having to declare the noise code more than once. This approach is slightly harder to set up since you need to work out the selectors for each element, but still isn’t that onerous.

If you want to add the body selector to the list, only include it in the second :before declaration, as demonstrated, because giving body a relative position and z-index messes things up.

The code shouldn’t interfere with or break any other declarations being called on the selected elements, unless you are heavily using generated content already. You could theoretically put this anywhere in your stylesheet, but because it’s so big and ugly it makes sense to put it at the bottom for ease of maintainability and bug-testing.

Don’t be tempted to separate out the code into it’s own stylesheet though, or you’ll be generating another HTTP request and defeating the point of the whole exercise.

Make Your Own

The downside of using a Data URI is that it is fairly inflexible; you can’t edit the visual characteristics of the noise on-the-fly. For the sake of compatibility, you can’t even play around with it’s opacity either, because IE8 won’t apply it’s proprietary alpha() filter to generated content (I’m guessing MS filters only work on DOM elements?).

So, if you want a slightly different looking noise, you need to create a new Data URI. As a reference, here’s how to replicate the one I created:

1. In the bitmap-editor of your choice, create a new 50×50 px document (Through experimenting I discovered that anything larger than this tends to make the resulting URI too large to make it beneficial over using a linked image. Making it any smaller tends to create a noticeable repeat in the tiled pattern, so 50×50 seems the optimum size).

2. Create a new layer and fill it with 50% grey. In Photoshop this is achieved by selecting EDIT > FILL. from the main menu.

3. Apply a noise filter. In Photoshop this is found by selecting FILTER > NOISE > ADD NOISE from the menu. I found that uniform, monochromatic noise of about 5 – 6% works best.

4. Increase the contrast of the noise slightly. I did this in Photoshop by adding an Adjustment Layer and increasing the contrast by ’50′ with ‘Use Legacy’ selected.

5. Because noise is randomly generated, you will find there are some overly dark or light ‘clumps’ in the pattern. When the tile is repeated, these will become noticeable, so they need to be smoothed out as much as possible. I did this by using the Clone Stamp to copy over the offending areas with other bits of noise that were more uniform.

6. Reduce the opacity of the noise and delete any unwanted background layers so that the image is translucent. I did this by grouping the adjustment layer and the noise layer together and changing the opacity of the group to 25%.

7. Save for Web. You must use the PNG-24 format to retain the translucency and because it’s compression is lossless. In Photoshop, make sure that the ‘Transparency’ tick box is checked.

8. The resulting PNG can be compressed further by running it through Opti-PNG. On a Mac you can use the excellent ImageOptim which I first wrote about back in April 2010 and provides a nice drag-and-drop GUI for Opti-PNG and some other PNG compressors. It should reduce the file size by about half. It also tells you the size of the resulting image file, which is useful for step (10).

9. Turn the image into a Data URI using one of the many online tools available. I used the one found on dopiaza.org but there are plenty others out there.

10. Data URIs will contain more data than the binary of the original image. Check the size of the resulting URI using bytesizematters.com. You should be trying to aim for a size as close to the original image as possible, otherwise the benefits of saving an extra HTTP request or two will be cancelled out.

Browser Support

A good range of browsers support this, specifically:

Internet Explorer 8+, FireFox 3.5+, Chrome 1+, Safari 4+, Opera 9+

Final Notes

This project is a bit rough around the edges and could definitely do with some further tweaking, so if anyone has any improvements to contribute, please let me know.

The concept could be applied to other frequently-used textures too, such as paper, stone or cloth. I’m certainly going to have a go at some of these and if anyone has some examples of their own, leave a link in the comments.

Using Photoshop Vector Tools to Create Interface Elements: Part 1

James Brocklehurst — Tue, 07 Jun 2011 16:19:28 +0000

Both Fireworks and Illustrator have a superior feature set but I find myself using Photoshop’s vector tools for almost all interface design tasks. The main reason for this is personal familiarity (I’ve been using PS since version 2.5), but I also find there are workflow benefits from having less applications running at once.

There are some things that you simply can’t do with Photoshop’s vector tools, but there is a surprising amount that you can, with a few caveats. This post gives an overview of some useful techniques and workarounds.

Vectors in Photoshop

For those who don’t know, vector graphics are ideal for creating interface elements since they are resolution independent and so can be scaled and manipulated without loss of quality, unlike their raster graphic counterparts.

Vector objects in Photoshop differ from their implementation in FireWorks and Illustrator however, since they are made from a solid colour layer that is masked by a vector path, rather than being a discrete object in it’s own right. The layer and the vector mask can be manipulated separately in the layer palette, plus the path can be selected independently using the Path or Direct Selection tools:

This can consequently lead to confusion in terms of knowing quite what to select when editing – the layer? the path? the vector mask???

This has remained the same since vector shapes were introduced in version 6.0. Maybe it will be improved in a future release, but for now we have to grapple with these different elements when working with vectors in Photoshop.

Resizing Rounded Corners

Most designers will be familiar with Photoshop’s Rounded Rectangle Tool, which creates (unsurprisingly) a rectangle with rounded corners, and possibly a core component in the creation of modern interface elements. The Options bar allows you to specify a corner radius value in pixels before you begin, but unfortunately this can’t be edited on-the-fly once the rectangle has been created. Worse though, is the fact that when you transform your rectangles, the corners are transformed as well. If you are, for instance, adjusting the height of a rounded rectangle, the corners become distorted:

Fireworks gets around this problem by offering a ‘nine-slice’ option that allows you divide the shape into a 3×3 grid and keep corners intact whilst other areas are transformable. This is similar to an approach used by the Flash authoring application and also the new CSS3 border-image property.

No such feature is offered in PS, but there is a fix, which I will explain below:

1. Create a shape with the rounded rectangle tool.

2. Choose the Direct Selection Tool and drag a selection area over the bottom two corners of the rectangle, as shown below:

3. With the Direct Selection Tool still active, drag the selected corners down to increase the height of the rectangle:

4. The rectangle has now been transformed, whilst keeping the shape and size of the rounded corners intact:

Quick Triangles

The provided shape primitives do not seem at first to include triangles, one of the more useful shapes, if you wish to break out of ‘block monotony’ in your interface design…

To create an equilateral triangle you must select the Polygon Tool and type ’3′ in the ‘sides’ field in the Options Bar:

Holding SHIFT on the keyboard whilst drawing the triangle keeps it nicely aligned to the horizontal or vertical axis. Once created, you can use the Direct Selection Tool to manipulate the triangle’s anchor points and define different triangle types:

Combining Shapes

PS provides some primitive shapes that when combined can create more advanced and useful objects. The act of fusing the paths of two shapes together is far from intuitive however.

The two paths that you want to combine must be present on the same vector mask in the Layers palette. This can be achieved by holding SHIFT when creating vector shapes, but if they already exist on different layers, they can be moved onto the same mask.

Here is how to create a tabbed content area by combining two shapes:

1. Create two vector shapes, a large rectangle to form the main body of the content area, and a smaller rounded rectangle to form the tab as shown below:

2. Use the Path Selection Tool to select the path belonging to the rounded rectangle:

3. CUT the path ( EDIT > CUT from the menu, CTRL-X on Windows, CMD-X on Mac.

A dialogue box will appear, select ‘delete layer’, and click OK.

4. In the Layers Palette, single-click on the thumbnail of the vector mask you wish to move the path to:

5. PASTE the path into the selected layer mask (EDIT>PASTE, CTRL-V (Win), CMD-V (Mac):

Now this kind of looks okay, but each path is still a separate object and will behave strangely if we try to apply transforms or layer styles. To make these behave as expected, we need to combine them to create a new, single path.

6. To combine paths, both paths must be selected. With the Path Selection Tool active, hold SHIFT on the keyboard and click on the paths until both are selected. You can tell if you have both shapes selected by looking to see if all their anchor points are visible:

7. Now click on the COMBINE button found in the Options Bar:

We now have a single shape!

You may have noticed that to the left of the COMBINE button were different operators for combining paths; ‘add’, ‘subtract’,'intersect’ and ‘exclude’:

These are not unlike those found in the Pathfinder palette in Illustrator and most other vector drawing applications. Using the technique above with these functions allows us to create a range of complex vector objects without ever having to leave Photoshop or launch additional applications. Here are some basic examples of what is possible:

Since these are single objects rather than a collection of separate vector paths, they can be transformed easily and layer styles will behave in the way you would expect.

Ensuring Additional Anchor Points Are Linear

Another method for creating more complex shapes is to append additional anchor points to a primitive shape. Again, this should be straightforward, but Photoshop tries to catch us out by making any new anchor points produce bezier curves by default. Quite often, you will want your path points to be linear, not curved. Here’s how to make that happen using a breadcrumb navigation design as an example:

1. Create a shape with the Rectangle Tool and then select it with the Path Selection Tool.

2. Switch to the Pen Tool (P on keyboard)

3. Move the cursor over the centre of the rectangle’s left-edge until a small ‘+’ appears next to the cursor icon (as shown below):

4. Clicking here will add a new anchor point to the path, albeit a bezier curved one. To convert the point to a linear one, ensure the Pen Tool is still selected, then hold ALT on the keyboard and click the point again.

5. With the Direct Selection Tool, select the new linear anchor point and move it to the right, creating the following shape (using Snap To Grid helps with positioning):

6. By performing a similar action on the right edge of the rectangle a ‘chevron’ shape can be created.

7. Duplicating the shape several times enables you to create this breadcrumb-style design:

Conclusion

In this post we have looked at some techniques that can be employed to create basic interface elements using the vector tools found in Photoshop. Although fiddly at times, it is possible to achieve a wide range of results, with the right know-how.

In Part 2, coming soon, we will look at some more advanced techniques and apply them to real-world examples.

Feel free to ask questions or give your opinion on using Photoshop over Fireworks or Illustrator for these kind of tasks in the comments.

WordPress 3.1 to a Client Friendly CMS in 7 Easy Steps

James Brocklehurst — Wed, 18 May 2011 14:29:50 +0000

In July of 2010 I looked at a quick way to turn a vanilla install of WordPress 3.0 into a easy to use CMS. This post revisits that original article and updates it to make it compatible with changes included in the 3.1 release.

Although WordPress is very much geared towards blogging ‘out of the box’, it can easily be converted for use as a basic CMS website, with all the SEO goodness of a dynamic ‘latest news’ area, and a back end interface that is arguably more approachable for non-technical users than other open-source CMS offerings.

This tutorial assumes a familiarity with the WordPress admin interface, installing plug-ins, and messing around with PHP files on the server. You will need a clean install of WP 3.1 with the default Twenty Ten theme, then for good measure should set up a duplicate or child theme from this and use this as the basis of your changes. If you are not sure how to create a child theme here are some clear instructions.

Let’s get started!

1. Create Some Pages

The first thing to do is create some pages.

As you probably know, WP gives the author the option of creating either dynamic blog ‘posts’ that can work in several contexts and taxonomies, or ‘pages’, which behave much more like standard, fixed, web pages. Since we are interested in setting up a CMS, we will focus mostly on page creation.

For this tutorial we are going to use page titles of ‘Home’, ‘About’, ‘Staff’, ‘News’ and ‘Contact’:

Add some preliminary content to ‘Home’, ‘About’, ‘Staff’ and ‘Contact’, but leave ‘News’ blank, and disable comments on all of these pages.

2. Change The Permalink Structure

By default, WP creates silly URLs for pages such as ‘?page_id=3′. If we want the URLs of our pages to reflect their titles, which is much better for SEO and client understanding, we need to go to SETTINGS > PERMALINKS and insert:

/%postname%/

into the ‘Custom Structure’ field:

By doing this, the ‘About’ page will now have a URL of http://www.mysite/about, ‘News’ will have http://www.mysite/news, and so on.

NOTE: This is no longer considered a good idea and may affect the performance of your site. To find out why and what it is suggested you do instead, please check out this post by Chris Coyier : http://digwp.com/2011/06/dont-use-postname/

3. Make the Home Page Static

By default, the ‘Home’ landing page will contain the main WordPress blog, with a reverse-chronological list of posts. To make the site less blog-like and more like a standard website, we will need to move the blog to the internal ‘News’ page, and make the landing page static.

To do this go to SETTINGS > READING and under the ‘Front Page Displays’ section, change the settings to how they appear below:

4. Create a Custom Menu

This feature is new to WP 3.0+. Similar functionality is available for older versions of WordPress using the My Page Order plug-in, but this gives us a few more options.

Go to APPEARANCE > MENUS

Type ‘Main Nav’ in the menu name field, then click on the blue ‘Create Menu’ button:

You can now add your pages to it:

and can arrange their order by dragging and dropping them into place:

A particularly good feature of this is the ability to nest pages within pages, which automatically generates a drop-down on the menu:

Infact, if we take a quick look at what we have got so far, we already have a fully-fledged standards compliant, SEO-friendly CMS site up and running, with editable fields for the content on our four main pages, a fully-functioning ‘latest news’ section, and a dynamically generated menu:

Yes, that sidebar needs removing but we’ll come to that a bit later.

5. Tweak the Admin Interface

The order of the items in the main admin toolbar don’t make a lot of sense to clients if they aren’t using WP as a blog. The focus is clearly on blogging, and the ‘Pages’ section, which is most relevant for our purposes, appears fourth on the list:

There is a nifty plug-in called Admin Menu Editor by W-Shadow which can quickly resolve this. I tried once to manually edit the PHP files for the toolbar, it was very time-consuming, and was problematic when it came to upgrading. This method is much less of a headache, in my opinion.

Install the plug-in, go to its settings and move the ‘Pages’ tab to the top of the toolbar, above ‘Posts’ but below the ‘Dashboard’ tab and its divider :

This makes much more sense when using WP a CMS, and will confuse clients less, I believe.

Additionally, by creating a user account with an ‘Editor’ role for the client, access to many of the other tabs is removed and you get a much more intuitive and easier to use interface for less confident clients.

the resulting toolbar looks like this:

That’s much better. Of course, admin users will still get full access to appearance, plug-ins, settings, etc.

Another admin tweak you may or may not want to consider is disabling the new admin bar (added in 3.1) that is by default presented over the top of your site when viewed by a logged in user. I personally don’t like the admin bar and feel that it may confuse clients, who could think that their visitors will see it too.

To remove it, go to USERS > (USER NAME) and uncheck the ‘when viewing site’ tickbox under ‘show admin bar’.

You will have to do this individually for each user you have created.

6. Create Additional Editable Content Blocks

One standard feature of most CMS’s that WP lacks out of the box is the ability to set up more than one editable region for a page. More complex layouts might require different blocks or columns that you need to make independently editable for the client. We also have that sidebar with all the blog-related widgets appearing on every page at the moment, and this should only appear in the ‘News’ section. How do we do these things in WP???

First we need to install the Secondary HTML Content plug-in by Jake Goldman. This allows us to add up to four additional editable content blocks to each page. On it’s settings page, you simply choose how many extra blocks you want to add (for this tutorial we’ll just add one), and check the ‘add media buttons’ tickbox*.

* ‘Add Media Buttons’ allows clients to add images via buttons added to the MCE editor (by default they can only create and format text). This feature doesn’t currently seem to work in WP 3.0+, but presumably will be fixed by the author of the plug-in soon.

We now need to edit a theme file on the server to include the secondary content code. This sounds like it might be fiddly, but is actually very straightforward.

The file we need to edit is called loop-page.php which can be found in your theme’s directory (if you are using a child theme, place a copy of this file in your child directory – it will override the original).

Open it in the editor of your choice and paste in the following code:

Put it after (the end of the first editable region), but before comments_template(); like this:

We could just insert the PHP function, but wrapping it in a div allows us to give it an id (or class) attribute and therefore style and position the block using CSS.

Save loop-page.php then go back to the WP admin area. Refresh your browser, then start editing one of your pages.

You will now notice that you now have two WYSIWYG editors to play with:

Content entered into the second editor will be published onto the page, in a discrete block wrapped by a div with an id of content2.

By default, the second content block is stacked underneath the first, but with a bit of CSS magic, these two areas can be positioned anywhere that you want on the page.

7. Removing the Sidebar

To remove the blog sidebar from your static pages, select ‘one-column, no sidebar’ from the template input in the ‘page attributes’ box when editing a page:

Update the page for the new template to take effect.

That’s It!

Finished Home Page, with two editable content areas and no sidebar:

Finished ‘News’ section, using regular blog layout with sidebar intact:

With these quick steps, which shouldn’t take you more than fifteen minutes, we can change a brand new WordPress install into a fully functioning CMS website that contains multiple editable regions, a dynamically generated drop-down menu, a dynamic ‘news’ section, and a streamlined admin interface. The Twenty Ten theme is plain enough to form the basis of a unique design that can now be styled by simply editing the main CSS document.

Happy ~~blogging~~ CMS-ing!

No More Need For Some CSS3 Vendor Prefixes

James Brocklehurst — Fri, 01 Apr 2011 16:24:43 +0000

Now that Firefox 4 and IE9 have finally arrived and users upgrade their browsers in healthy numbers, applying the latest cutting-edge techniques to real-world sites becomes more of an option. One perk is that the latest versions of all browsers are beginning to drop need for vendor prefixes on some CSS3 properties. This post gives an overview.

Why Prefixes?

Prefixes were introduced because the CSS3 specification is still in development. Both the proposed syntax, and the way that browser manufacturers (or ‘vendors’) implement the proposals is in a state of flux. But because some of the proposals were so darn cool, nobody could wait. Prefixes provide a way of adding in what are, in essence, experimental and unfinished properties in a way that (A) won’t harm or affect the rest of your code, (B) can be overridden once the spec is finished and implemented, and (C) avoid any confusion over what is unfinished and what isn’t.

The Multiple Declaration Issue

Each vendor providing a different prefix to use has a side-effect however. Your CSS documents soon get littered with this sort of thing:

-moz-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
-moz-box-shadow:1px 1px 8px #999;
-webkit-box-shadow:1px 1px 8px #999;
-ms-box-shadow:1px 1px 8px #999;
-o-box-shadow:1px 1px 8px #999;
 box-shadow:1px 1px 8px #999;

This can be a pain to type out by hand and in large quantities may affect page load times. LESS, SASS and CSSPrefixer offer solutions using variables, mix-ins and server-side preprocessing, but require Ruby or Python plus learning some new syntax or running console commands. Chris Coyier suggests that we should stop moaning, start cutting-and-pasting, and just include prefixes for everything.

While I agree with this view for some properties, there are times when we really can start doing something like this, removing the need for hassle and bloat in our stylesheets:

border-radius: 5px;

Really?

Yes! Although the CSS3 spec is still in development and won’t become an official recommendation for several years, some of it’s ‘modules’ are near recommendation stage, leading to vendors removing the need for prefixes in the latest versions of their browsers.

The main properties that I suggest can now be considered ‘prefix-safe’ are border-radius and box-shadow. These join the handful of other properties that never needed prefixes in the first place, such as @font-face, text-shadow, opacity, and multiple background declarations.

Don’t believe me? Here is a table.

Browser	Version	`border-radius`	`box-shadow`
	3.5, 3.6	-moz-	-moz-
	4+
	5+
	5+		-webkit-
	10.5+
	9+

Ticks mean no need for a prefix, in case that isn’t clear.

As we can see, we’re in pretty safe territory now with these two properties. I’m surprised that Safari (5% of global share) still requires a prefix for box-shadow when it’s Webkit stablemate Chrome has dropped it, but as both Mozilla and Microsoft push for their users to upgrade, this will become less of a concern. Generally though, things are looking pretty good and IE9′s general lack of a need for -ms- has got to be celebrated.

Hopefully some of the other more exciting CSS3 properties such as transform will follow suit soon.

Some links to the current available info on prefix implementations can be found here

If you like the idea of dropping prefixes, or perhaps know of some reason as to why this would be a bad idea, please leave your views in the comments.

CSS3 Animated Vignette Buttons

James Brocklehurst — Tue, 08 Mar 2011 17:35:06 +0000

Here I have another go at tinkering around with background images that fade on hover. This time I’ve used a patterned background and placed vignette-style .pngs over the top which are animated using transition.

Demo (Works Best in Firefox 4, Chrome or Safari)

Download Source

background image derived from one of BittBox’s Retro Wallpapers

Tutorial

The Set Up

Each example in the demo is a single element, so the HTML is about as basic as it gets:

A Button!

Next up, we add in some standard styling that will work in all browsers.

.button {
display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
background: url(images/background.png) no-repeat center -100px;
}

.button:hover {
background: url(images/background.png) no-repeat center 0px;
}

You’ll notice that I’m using a sprite, it looks like this:

The declaration positions the darker image in place first, then moves the brighter version into view on hover.

To finish the set up, we sprinkle on a bit of CSS3 goodness for those browsers that have joined the party.

.button {
display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;       
border-radius: 25px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
background: url(images/background.png) no-repeat center -100px;
}

Result, one baroque looking but unremarkable button, with a basic hover effect:

Example One – A Simple Fade

The first example uses a technique similar to that used by Jonathan Snook, the difference being that we are using CSS3 instead of JQuery and layered, semi-transparent backgrounds instead of just one.

The additional image used is this:

This is placed over the background using the CSS3 multiple background syntax. By moving the original background declaration to the top (rather than replacing it) means that browsers that don’t support multiple backgrounds will parse the first and simply ignore the second. For those that do, the second declaration overrides the first.

.button {

/* Fallback for browsers that don't support multiple bgs*/

background: url(images/background.png) no-repeat center -100px;

/* Style for the rest */        

display: block;
width: 5em;
padding: 30px 40px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;       
border-radius: 25px;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-o-box-shadow: 2px 2px 10px #000;
box-shadow: 2px 2px 10px #000;
background: url(images/linear-gradient.png) no-repeat 0px -400px, url(images/background.png) no-repeat center 0px;
}

.button:hover {

/* Fallback for browsers that don't support multiple bgs*/

background: url(images/background.png) no-repeat center 0px;

/* Hover style for the rest */        

background: url(images/linear-gradient.png) no-repeat 0px 0px, url(images/background.png) no-repeat center 0px;

}

So, what’s happening here is that the dark part of the gradient is placed over background pattern, then the gradient is moved on hover to a more tranparent position, revealing more of the pattern underneath.

Now we have this set up, we can animate the change of gradient position using CSS3 transitions by adding this code on to the end of each rule:

-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

Transitions are only supported by Webkit browsers and the upcoming Firefox 4, but those that don’t will still show the hover effect, it just won’t fade in. You could always supply a JQuery fallback of course.

Example Two – Peek-A-Boo!

This is a simple variation of the first example, the difference being that the gradient is reflected, giving the impression that you are peeking through some sort of spy-hole when it moves into place. ease-out is used on the transition to give it extra ‘springyness’.

Image used:

CSS:

.button {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -105px;

 /* Style for the rest */        

 display: block;
 width: 5em;
 margin: 0px 20px;
 padding: 30px 40px;
 text-align: center;
 font-family: Arial, sans-serif;
 font-size: 18px;
 color: #fff;
 text-decoration: none;
 text-shadow: 1px 1px 0px #000;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -o-border-radius: 25px;       
 border-radius: 25px;
 background: url(images/stripes.png) no-repeat 0px 0px, url(images/background.png) no-repeat center -8px;
 -moz-box-shadow: 2px 2px 10px #000;
 -webkit-box-shadow: 2px 2px 10px #000;
 -o-box-shadow: 2px 2px 10px #000;
 box-shadow: 2px 2px 10px #000;       
 -moz-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 transition: all 1s ease-out;

 }

 .button:hover {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -5px;

 /* Hover style for the rest */        

 background: url(images/stripes.png) no-repeat 0px -200px, url(images/background.png) no-repeat center -8px;
 -moz-transition: all 0.5s ease;
 -webkit-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;        

 }

Example Three – Iris

This uses a different approach during the transition, animating background-size, rather than background-position. If we create a radial gradient with a transparent hole in the middle, this can be stretched to become larger, revealing more of the patterned background underneath on :hover.

Image used:

CSS

.button {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -105px;

 /* Style for the rest */

 display: block;
 width: 5em;
 padding: 30px 40px;
 text-align: center;
 font-family: Arial, sans-serif;
 font-size: 18px;
 color: #fff;
 text-decoration: none;
 text-shadow: 1px 1px 0px #000;
 -moz-border-radius: 25px;
 -webkit-border-radius: 25px;
 -o-border-radius: 25px;       
 border-radius: 25px;
 background: url(images/radial-gradient.png) no-repeat center center, url(images/background.png) no-repeat center -8px;
 -moz-box-shadow: 2px 2px 10px #000;
 -webkit-box-shadow: 2px 2px 10px #000;
 -o-box-shadow: 2px 2px 10px #000;
 box-shadow: 2px 2px 10px #000;       
 -moz-background-size: 200px 200px, 180px 200px;
 -webkit-background-size: 200px 200px, 180px 200px;
 -o-background-size: 200px 200px, 180px 200px;
 background-size: 200px 200px, 180px 200px;       
 -moz-transition: all 0.75s ease;
 -webkit-transition: all 0.75s ease;
 -o-transition: all 0.75s ease;
 transition: all 0.75s ease;

 }

 .button:hover {

 /* Fallback for browsers that don't support multiple bgs*/

 background: url(images/background.png) no-repeat center -5px;

 /* Hover style for the rest */

 background: url(images/radial-gradient.png) no-repeat center center, url(images/background.png) no repeat center -8px;
 -moz-background-size: 1000px 1000px, 180px 200px;
 -webkit-background-size: 1000px 1000px, 180px 200px;
 -o-background-size: 1000px 1000px, 180px 200px;
 background-size: 1000px 1000px, 180px 200px;       
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 -o-transition: all 1s ease;
 transition: all 1s ease;

 }

Conclusion

I can see there being a lot more possibilities with this technique, using different background images, gradient shapes and position/size animations. If you come up with some, feel free to drop a link in to the comments.

And Finally…

This post is part of a personal challenge to try and create buttons that fade between two background images, without requiring lots of unsemantic absolutely positioned elements.

I’ve found a way to do it using CSS generated content, after reading this post by Nicolas Gallagher, but currently only Firefox 4+ will animate generated stuff using transition. Yes, and before you ask, JavaScript won’t do it either.

Anyway, here is a link to what I have come up with so far (remember, FF4+ only). It’s one step closer, and if the WebKit team get on board with animating generated content, then we’re almost there.

A CSS Proposal: Background-Opacity

James Brocklehurst — Thu, 03 Feb 2011 15:54:40 +0000

In my fantasy CSS3 world, a background-opacity property would exist, and this is why I think it would be a good thing to have.

What Would it Do?

Currently, we have a background property, that can take a number of arguments, which can be chained together using a shorthand syntax, or declared as separate properties. Some of these include:

background-color (set background as a flat colour, which can contain alpha-transparent values)
background-image (set background as single or multiple images)
background-position (set position of background image/s within element)
background-repeat (specify tiling of background images along x and y axes)

We also have an opacity property that allows us to specify a value from 0 to 1 to control an element’s transparency.

background-opacity would take an approach similar to opacity, and allow us to specify a 0 to 1 value for background images. It would be able to work with single or multiple backgrounds.

The Current Situation

At present, if you want to make background-images semi-transparent, you have two options, either create a semi-transparent PNG in an image editor, or use the opacity property. Both approaches have significant shortcomings.

There is a ‘third way’ using RGBa, but this only works with CSS generated colours or gradients, not images.

The PNG Problem

Semi-transparent PNGs are great, but to include them requires a string value for the url declaration. This means they can’t be animated using JavaScript or CSS transitions, other than by using other properties that contain numeric values. Therefore, it is possible to animate the position of a background image (like in this set of examples by Jonathan Snook), but not it’s opacity.

The Opacity Property Problem

opacity has been around for a while, but works in a singularly frustrating way. The opacity value is applied to the entire element and any corresponding child elements. There are some workarounds for this, but they have drawbacks. The bottom line is that you can’t override opacity inheritance, and if you want to make an element’s background image transparent, but keep it’s content opaque, you’re out of luck.

Proposed Syntax

myElement {
background-image: url(image1.png), url(image2.png) url(image3.png);
background-opacity: 0.25, 0.5, 1;
}

Using a comma separated array to target multiple images within a single rule is a convention already present within the CSS3 spec that can be used with the existing background properties. You can do a similar thing to this using background-position as is demonstrated here

Why Would This Be Amazing?

Because those opacity values could then be incremented/decremented over time using JavaScript or the CSS3 transition property. This would allow for a background image to fade in and out on mouse-over or hover event, and could work in varying amounts with multiple images applied to a single element. This in turn would enable some very neat visual effects and event-based transitions and animations.

Here is a link to the W3C Background and Borders Module Level 3 specification. Unfortunately, the last call on this was back in June 2010, but it may be worth contacting the editors to see what they think.

http://www.w3.org/TR/css3-background/

If you like the sound of background-opacity, please feel free to put forward your views in the comments.

Test Your Website Across iOS Devices Using The iPhone Simulator

James Brocklehurst — Thu, 06 Jan 2011 00:13:00 +0000

As the mobile device market expands and looks set to increase exponentially in 2011, it is no longer an option for web developers to test just for the desktop. Testing for Apple’s iOS devices is probably a good start, but obtaining an iPhone, iPhone 4 and iPad just for this purpose is not practical for everyone.

If you develop websites on a Mac, however, there is a simple, reliable and free way of doing this without leaving OS X. In this post I’ll show you how.

The iPhone Simulator

Apple’s Developer Suite, which is used to create applications for OS X and iOS, comes with an excellent iOS simulator, which in turn runs a fully functioning version of Mobile Safari. With it you can test how your pages look and work using the iOS screen dimensions and orientation, rendering, and you can see whether your CSS @media queries are being called. The following instructions show how to get hold of it.

Requirements

You’ll need a Mac running Mac OS X 10.6 (Snow Leopard) or above. A fast and ‘Unlimited’ internet connection is also recommended, since the download is pretty huge.

Obtaining the Simulator

1. Register As An Apple Developer

To download the iPhone simulator requires you to download the entire development suite. To do this you must first register with Apple as a developer. There are different registration options, with different pricing plans, but if you aren’t planning to develop your own actual apps to upload to the app store, you can choose the free option.

Click on the following link http://developer.apple.com/programs/register/ and click on the blue ‘get started’ button:

Go through the registration process. If you already have an Apple ID, perhaps from using iTunes, then you can skip a few steps.

Download the SDK

Once registered, you will be taken through to the main Apple Developer website. Click on the link labelled ‘iOS Dev Center’ to be taken through to the page show below. The URL for this page is http://developer.apple.com/devcenter/ios/

Click on the ‘download’ link as indicated. You will then jump to the following section. Click on the ‘XCode and iOS SDK’ link to download the disk image. It’s several Gigabytes so you’ll have a bit of a wait before the next step.

Install the SDK and Locate The Simulator Application.

Once the SDK is installed, you will find the simulator tucked away deep within a series of directories. The path to it is:

HD > Developer > Platforms > iPhone Simulator Platform > Developer > Applications >

Once found, you can either make an alias to it or place it in your Dock for easy access.

Using The Simulator

Launching the simulator will give you by default an iPhone 3G running iOS 4.0. From here you can open Mobile Safari and start browsing the web:

What is really great is that you can also connect to a MAMP install and view webpages running on your local host.

If you have any mobile specific stylesheets set up these will be called.

Pressing Command and the left and right arrow keys will rotate the orientation of the simulator by 90 degrees so you can see how the page looks both in portrait and landscape mode.

Clicking on the screen with the cursor simulates touch events and hold-dragging with the mouse does what you’d expect. Behaviour is pretty close to the real thing, the only thing that you can’t do is multi-touch actions, which of course means no page zooming.

Visiting the ‘Hardware’ menu gives you further options. Here you can change the simulated device and iOS version. With the device submenu you can choose between the iPhone 3G, the iPhone 4 and the iPad:

The iOS versions let you roll back to 3.2 or forward to the most recent iteration of version 4.

Conclusion

Although Apple states that there are subtle differences between the simulator and the actual hardware (it is a ‘simulator’ after all and not an ‘emulator’) this is the closest you are going to get to the real thing without leaving OS X.

The ability to view draft pages on a local host without needing to upload to a remote server tips it for me, as this is not possible with an actual handset and is really handy in the early stages of development.

If anyone knows of similar solutions for other mobile platforms, or a way of doing this in Windows, feel free to leave info in the comments.

Web Safe Fonts Cheat Sheet v.3 – With @font-face Fonts and OS Breakdown

James Brocklehurst — Sun, 12 Dec 2010 13:51:26 +0000

This is the third major overhaul of the Web Safe Fonts Cheat Sheet, which now includes examples of fonts suitable for the CSS @font-face property, along with revised CSS font stacks, font installation breakdowns by operating system, and some of the new Google Font API fonts.

Download Links

Download (A3 CMYK PDF, zipped, 6.8 MB)

Download (A4 RGB PNG, 1.1 MB)

Printing

It comes in A3 and A4 sizes and should print without difficultly on most domestic or office printers without cropping or readability issues. It can be printed in greyscale or colour.

If you want to accurately preview the quality of fonts when aliased it is recommended that you go for the A3 version using some good photo-quality paper.

Statistics

As explained in previous articles, the overall installation percentages are calculated by combining results from the CodeStyle Font Survey and worldwide operating system statistics. On this last point, there are a few competing sets of figures out there and in the past I have used those provided by NetMarketShare After looking into how the statistics are gathered I have to say I have now ‘seen the light’ and have moved over to StatCounter primarily because it draws from a significantly larger sample than its competitors.

Font	Windows	OS X	Linux	iOS	Total
Courier	99.71	99.24	67.62	100	98.7
Times	99.71	98.48	67.91	100	98.6
Arial	99.71	97.73	69.05	100	98.6
Verdana	99.71	97.98	67.05	100	98.6
Trebuchet	99.32	94.95	65.33	100	98.0
Georgia	99.03	95.71	66.19	100	97.8
Lucida	98.83	100	68.25	0	97.7
Impact	99.03	91.92	64.18	0	97.3
Tahoma	99.9	84.6	0	0	97.2
Palatino	98.83	81.06	96.28	75	96.9
Arial Black	98.25	94.44	65.62	0	96.8
Arial Narrow	88.74	90.4	0.95	0	87.3
Century Gothic	87.88	39.39	97.99	0	84.1
Garamond	86.65	31.82	7.11	0	81.7

You’ll notice that Garamond almost made it in at just under 82%. I think it’s kind of cool that a typeface designed nearly 500 years ago in the early days of the moveable type printing press can still work perfectly well on the web.

Operating System Stats

I have now included a separate breakdown for Operating Systems:

The Windows, OS X and Linux percentages come from CodeStyle, the iOS details come from this useful summary by Nick Forge.

What About The Other Mobile Platforms?

If you are wondering why no other mobile platform is included, even though Symbian, Blackberry and Android have similar or better worldwide market share compared to iOS, this is because there are no standard font installs on any of these platforms. Each handset manufacturer puts whatever fonts they see fit on a device, making it impossible to generate any meaningful statistics. The iPhone, iPad and iPod Touch on the other hand are limited to a fixed range and Apple doesn’t even let end users install additional fonts! There is some deviation across iOS devices, as can be seen here, but I have only included fonts common to all.

You may also notice that the OS percentages don’t add up to 100% The missing 1% consists of the ‘other’ OS’s, including the remaining mobile platforms.

Revised Font Stacks

Not much to say here, other than I have tidied them up a bit based on various people’s suggestions, something I have been meaning to do for a while.

I also discovered some common Linux fonts that simulate the look of Palatino and Century Gothic, so have included those in the stacks.

@font-face Fonts

There is now a box containing a sample of what I subjectively consider to be well designed fonts that can be used commercially with the CSS @font-face property without any licencing worries. All of these, with the exception of GrauBlau Web (which can be downloaded from here) are available from the Font Squirrel website, along with a ‘bulletproof’ generator that creates all the necessary CSS code and provides you with the formats required for each browser. Each font has it’s own licence so remember to read through and abide by the terms before use :)

A quick look on the Font Squirrel website reveals that they have catalogued over 600 fonts, and there are many more out there, yet I have only included twenty. As I said, these are my favourites, and I have loosely tested them on different browsers and platforms, at different scales, with and without anti-aliasing, with generally good results.

Google Font API / Font Directory Fonts

This has been available since April 2010 and has had a chance to ‘bed down’, but is still disappointing, in my opinion. I have only included the fonts that, after testing, seem in any way useable.

For those unfamiliar with how it works, the API is essentially @font-face but with Google hosting the fonts rather than you having them on your own server. This is beneficial since it saves you a bit of bandwidth, plus if the end user has been to another website that used the same font, their browser will have it already cached. Google also provide some fancy JavaScript that is supposed to help with FOUT.

In principle it is a great idea, but the choice of fonts is lousy. My main contention is that most probably look fine when printed, but do not appear to have been designed for the screen at all. They can look awful at the smaller sizes and often become messy or illegible when aliased. Here’s a reminder of the issue from Google’s own preview as viewed in Windows XP (52% worldwide marketshare!) with the default ‘no ClearType’ setup:

If anyone wants to lobby Google to get their act together please feel free.

Licence

Creative Commons Attribution-Non-Commercial-Share Alike 3.0 unported Licence

Conclusion

I hope people find this useful and as ever any suggested improvements are welcome in the comments below.

I am planning one day to make a web app version, which will give more space for a better range of previews (different browsers, OS’s, font variants, etc), when I find the time. Perhaps if I clone myself first…