FontFriend 2.2 Update

April 21, 2010 – 11:36 am

This is a two-fold small update to FontFriend, the typographically obsessed web designer’s best friend. A request came in over Twitter for inline styles in the Font Family section. Good idea, and it’s now in there.

Non-present fonts show up as monospace

It’s also a small update because FontFriend is even smaller - I’m now minifying it (using YUI Compressor), which brings the total size from 12.5K to 10K. Not a huge savings, but every bit helps, and I made my first build  script in the process.

Because it pulls directly from Google Code, there’s nothing to do other than see the new version show up. (Clear your cache if you keep seeing 2.1.)

Tagged , , , , , | By Matt | Comments (1)

Smarter Custom Post Types in WordPress 3.0

April 20, 2010 – 10:06 am

NOTE: I’ve moved this into its own project page, where you can now find the download link and leave comments. This post will no longer be updated and comments are now off.

WordPress 3.0 is almost ready for prime-time, and with it full support for custom post types. You can read about the technical details of adding a custom post type, or why you should use them. The WP team have done a great job with bringing this functionality into the upcoming 3.0 release, but one thing that’s puzzled me is (current) lack of good support for 1) custom URLs for that particular post type only (something like http://yourdomain.com/movies ) and 2) custom templates for that post type. (I’ll be using this to move portfolio items to a “portfolio” post type.)

But, that’s nothing a little code can’t fix. With the helper class I’ve made, the following is possible:

  1. Custom URLs for a landing page for your post type, with full pagination & feed support. (eg http://yourdomain.com/movies/, http://yourdomain.com/movies/page/2/, http://yourdomain.com/movies/feed/ )
  2. Custom landing page templates: if you registered “movie” as your post type, you can use movie/index.php or movie.php in your theme directory (falls back to index.php if they don’t exist)
  3. Custom single page templates:  WP already looks for single-movie.php (and falls back to single.php). This function allows you to use movie/single.php - great alongside movie/index.php for better theme organization.
  4. adds classes to body_class() and post_class() for that post type.

Usage

After including the SD_Register_Post_Type class and the helper function sd_register_post_type(), all you need in your functions.php file (or wherever you choose to run this) is the following line:

sd_register_post_type( 'movie' );

That’s it. Call it again with a new argument for another post type. Repeat as many times as you need post types. I’ve set good default arguments to pass to register_post_type(), but you can override them with your own. (Read more about the $args here, here and here.)

sd_register_post_type( 'movie', $args_array );

Also, grammar pedants know that adding an “s” suffix is not appropriate for all plurals. In the case of post type “movie”, our URL landing structure is http://yourdomain.com/movies, which works fine. But, for irregular plurals, the function accepts an optional third argument:

sd_register_post_type( 'person', $args_array, 'people' );

The above URL structure would then be http://yourdomain.com/people for the post_type “person”.

One note that’s very, very important: your custom URLs won’t work until you go to Options → Permalink in wp-admin and re-save your current URL structure. This will flush WP’s current URL structure and add our new rewrite rules. This is computationally expensive and you don’t want it happening every time, which is why I’m leaving it as a manual operation. You’ll only need to do it once (or after changing the third plural argument).

Tagged , | By Matt | Posted in WordPress | Comments (44)

Realistic Looking CSS3 Buttons

April 19, 2010 – 11:06 am

A while back Mike Rundle posted the terrific article Crafting Subtle & Realistic User Interfaces. He clearly articulates design details which make buttons look realistic and therefore push-able. If you haven’t read it, go there, spend lots of time looking at his excellent diagrams, and then come back. Go even if you forget to come back.

Then Jay on the Inference blog shared his CSS3 implementation of Rundle’s buttons to great effect. He also explicitly shows the design details (with excellent diagrams) that make for press-able buttons. But, sadly, there was very little “3” in the CSS3, only making use of border-radius and rgba colors. Also, he resorted to 3 layers of nested <b> elements inside the <a> elements to implement his effect. I knew that this could be done with leaner markup, more CSS3 goodies, zero images, and way more flexibility. (Note: this isn’t a critique of Jay’s good work - just an instance where someone inspires you to try to do better.)

The end result uses markup that looks like this:

<a href="#" class="button">Pushit</a>

And looks like this:

States: Normal, Hover/Focus, Active (left to right)

Well, it looks that way in Firefox (3.6+), Safari & Chrome. I haven’t even tested in IE and don’t care to. I’m sure that it’d be possible to do this in with proper progressive enhancement, but this was about testing the boundaries of CSS3.

I’m not going to break down the code here. That’s what Firebug/Inspector/View Source are for. But here are some notes:

  • The biggest weakness by far is that I needed to set an explicit width on the buttons. I couldn’t find a way around this and maintain my no-extra-markup challenge. Consistent widths might actually be an advantage in certain contexts. (There are some classes to provide for different widths.)
  • CSS3 gradients galore. Not an image in sight.
  • The extra borders are created using :after and :before pseudo-elements.
  • The CSS3 gradients use rgba color notation with alpha values so that you can have different coloured buttons by changing only the background-color. (I assigned a few colour examples to extra classes)
  • Real <input type="submit" /> buttons don’t allow :after and :before pseudo-elements. Form elements are weird.
  • CSS gradients are currently avoided by -webkit/-moz-transition. Brief googling indicated performance concerns. If you wanted the ooh shiny™, you could change the background-color on the :hover/:active states instead. I avoided this because I only wanted to have to declare a single background-color for color classes, but tried it in the obviously-labeled button.

Tired of reading? Look at some realistic looking CSS3(-only) buttons. And if anyone has any ideas about how to overcome the fixed-width requirement, do share!

Tagged , , , , , | By Matt | Posted in Design | Comments (10)

The Erudite 2.5 Released

January 30, 2010 – 10:18 pm

The Erudite 2.5 has been released, with a couple of really nice new features. I had a request to include epigraphs in the theme, which perfectly matches The Erudite’s emphasis on typography and content. Have a look at the image or check the demo site:

I also learned this month from WP core team member Andrew Ozz that it’s possible to style the visual editor. Now you’ll have a much better idea of how your prose will look before you press Publish:

You’ll also note above how easy it is to add an epigraph to your posts.

Finally, thanks to Dennis Meulensteen for providing a Dutch translation. If you have a translation you’d like to contribute back to The Erudite, let me know in the comments or get in touch.

To download, go to the WP Themes Directory or, if 2.5 isn’t available there yet, to the project page.

By Matt | Posted in WordPress | Comments (10)

On the iPad and Web Design

January 29, 2010 – 10:33 am

As usual, Apple’s newest creation has produced opinions. The rhetoric of those for and against it is predictably strong and, occasionally, ridiculous. I don’t care to add my voice to the din. My attention is more fixated on the fact that if the iPad is successful, we’ll have to say goodbye to a whole host of assumptions as we say “hello” to a new era of touch computing. What does this mean for web designers?

Goodbye Mouse, Hello Hands

How much of your site depends on mouse hover states? Hopefully none, if you’re committed to accessibility. But, chances are there are parts that labour under the assumption that everyone is—and always will be—using a mouse. If touch computing replaces the mouse + keyboard paradigm that’s dominant today, there’s going to be a lot of scurrying to retrofit websites to be usable by folks getting their hands on your site. I know that I’m not going to make anything rely on mouse hover states from here on out.

But that’s merely a technical hurdle. There’s a fundamental difference between an interaction with your screen mediated by a mouse and reaching out and touching something. Your website will no longer have clicks; it will have users touching, pinching, swiping, rotating. In short, the touch experience is flush with potential for a richer, more textured interaction paradigm in our websites. Touch might be as large a paradigm shift beyond today’s web as the web has been over print.

Goodbye Landscape, Hello Portrait

Gruber viewing Daring Fireball in the iPadComputer monitors have always had a landscape orientation. This has only become more prominent in recent years as we moved from ubiquitous 4:3 ratios to various widescreen formats. In short, we’ve had ample width and short heights. (Thus the religious wars over “the fold.”)

But here we have a 3:4 orientation. Portrait. Does portrait encourage vertical scanning instead of horizontal? What does it mean to relax about how high on the page our central content is? How many assumptions about how the web works do we have that are based on the landscape orientation?

You might wish to inform me that the screen can just as easily be used in landscape, but my money’s on people using it in portrait more often than not. But even that ability to choose has big implications for our assumptions about designing for the web.

Goodbye Flash, Hello Web Standards

Virtual ink is being spilled with abandon over the iPad and Flash support. Flash gained traction because web standards were deficient in 2 core areas: video and animation. HTML5 has the video element, and animation via canvas, SVG, CSS animations, and plain ol’ JavaScript can do 98% of the things that Flash is currently used for.

More importantly, web standards can do 100% of the desirable things that Flash can do. Those technologies aren’t yet supported by every browser, but they are supported by Safari, and that’s all that matters here. And are you really going to miss those punch a monkey banner ads?

The two things preventing Flash’s demise are 1) momentum and 2) authoring tools. The former is shifting thanks to the iPhone and iPad, and the latter is bound to change.

Goodbye Fringe, Hello Mainstream

Browsing on the iPhone can be frustrating when the content you’re looking for is all Flash. Other times the site has simply been overly optimized for the desktop and/or Internet Explorer. Some may blame the device, but as the iPhone continues to grow and the iPad emerges, it’ll be business suicide to have a poor experience in the mobile sector. Let’s face it - users with enough money to spend on an iPhone and/or an iPad are exactly the types of people that most businesses want to appeal to.

In short, web designers who understand how to design good web experiences for these platforms will only become more sought after. And this just might allow me to justify an iPad as a business expense.

Tagged , , , , , , , | By Matt | Posted in Design | Comments (14)