Ideally, designers would specify the font-file they wanted to use for regular text, and then one for each variation they had at their disposal (so, one for Bold, Italic, Bold Italic, Small Caps, Light, Ultra Condensed, etc.) – all using the same font-family name, so that all variations would be picked up automatically for body text, and, if @font-face isn’t supported by the browser,  all text will still display in the proper font-variant.

To do that, your css would look something like this:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_R_45b.otf) format("opentype");
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_B_45b.otf) format("opentype");
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_I_45b.otf) format("opentype");
font-style: italic;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_BI_45b.otf) format("opentype");
font-style: italic;
font-weight: bold;
}
@font-face {font-family: "Fontin Sans";
src: url(fonts/Fontin_Sans_SC_45b.otf) format("opentype");
font-variant: small-caps;
}

This would ensure proper fall-back in browsers that don’t support @font-face (or only part of it) and compatibility with current stylesheets, making @font-face implementation for designers plug-&-play.

The ideal @font-face rendering (on the left) and fall-back rendering (on the right) would look a little like this (notice the fi-ligature!):

You’ll have guessed by now that browsers haven’t reached this ideal implementation yet. The series will continue with CSS 3 Fonts: The here and now.

Information in this series was acquired while working on the design and css for the site of Standards.next and subsequent tests afterwards.

You’ll notice the logo is a lot smaller. What can I say? My cream ran out, plain and simple. I’m much happier with it, now it’s smaller. I’ve still to update the logos for the inspiration square.

The sidebar still suffers from mixed header styles headers have been updated too. Haven’t managed to add any other colours to the red & gold colour scheme yet though!

Make sure you visit my (on site!) Tumblr page. An upcoming post will describe how I managed to create internal links to the content there – the “latest interesting stuff” links in the sidebar are generated on the fly.

Of course, if you find any quirks, let me know.

The first wallpaper is taken from the beautiful Jason Brooks illustration on the website of Fierce Angels, from their september 2006 re-style. A beautiful dark angel, with a big sword, high heeled boots and a thunderous sky above her. What more could you want?

Next up is a disco girl, taken from the cover of a Fierce Angels CD, Fierce Disco, in stores from 16th of April 2007. Somewhat less dramatic, but still nice to have if you’re a fan of the style.

Download: Fierce Angel 2006 & Fierce Disco. Enjoy!

Full page zoom is important because it means no more mucking about with elastic layouts (em-based) or liquid layouts (%-based). That just leaves fixed layouts (based on pixels), which is good because images, videos and other media are in pixels too!

[1] Update: Safari 4 (beta) has implemented full page zoom too! All major and minor browsers have implemented full page zoom. Until widespread updating of Safari 3 with 4 and (more importantly) IE 6 with 7 or 8, approx. a quarter of visitors will only have text-based zoom available to them. IE 6 users are likely not to know anything about zoom-capabilities however.

One of the most useful things on a 404 page is a direct link to the page visitors were trying to get to. Now we can’t read minds, but we do know the URI (explained in the third paragraph of the previous article) and that’s good enough. The following code is adapted from this archGFX article. The method used to transform the URI into a search query is very simple. If you would like a more advanced please refer to “A better 404 – Redux” at Urban Mainframe, where Jonathan Hollin expounds on his (downloadable!) 404 page code.

There are two parts to this “related posts” code. The first part makes it possible to get from “/wrong/link.html” (the URI) to “wrong link” (the search query).

Here it is:

<?php /* Transforming the URI into search terms */

$search_term = substr($_SERVER['REQUEST_URI'],1);

$search_term = urldecode(stripslashes($search_term));

$find = array (”‘.html’”, “‘[-/_]‘”) ; 

$replace = ” ” ;

$search_term = trim(preg_replace ( $find , $replace , $search_term ));

$search_term_q = preg_replace(’/ /’, ‘%20′, $search_term);

?>

That’s all there is to it. If you, however, don’t want to make “/wrong/link.html” into “wrong link”, but rather just “link” (because the first part of the URI is likely to be useless), use the following on the fourth line:

$find = array (”‘.html’”, “‘.+/’”, “‘[-/_]‘”) ;

The second part consists of telling Wordpress to use the search terms and outputting a list of articles based on the results.

In this case the loop will output a linked title, a line-break and then the date of the article. You can edit out the line-break and the date if you want. Also, you can change OL to UL if you want an unordered list outputted.

<?php /* Use the search terms to run a query */  

query_posts(’s=’. $search_term_q );  

/* check to see if there are posts */

if ( have_posts() ) :  

 ?>  

<h1>Possibly related content</h1>

<ol>

<?php /* start the loop */  while ( have_posts() ) : the_post(); ?>  

<li><a href=”<?php the_permalink() ?>”><?php the_title() ?></a>

<br>

<?php unset($previousday); printf(__(’%1$s’, ’sandbox’), the_date(”, ”, ”, false), get_the_time()) ?>

</li>  

<?php /* end the loop */  endwhile; ?>  

</ol>  

<?php else : endif; ?> 

That’s all there is to it! Once you’ve added this code your 404 error page should look a little something like this. 

To conclude, add the following to your 404.php, wherever you think it fits best, to add :

<?php /* Transforming the URI into search terms */

$search_term = substr($_SERVER['REQUEST_URI'],1);  

$search_term = urldecode(stripslashes($search_term));  

$find = array (”‘.html’”, “‘[-/_]‘”) ;  

/* If you only want the last term of the URI, use the following instead: 

$find = array (”‘.html’”, “‘.+/’”, “‘[-/_]‘”) ;  */

$replace = ” ” ;  

$search_term = trim(preg_replace ( $find , $replace , $search_term ));  

$search_term_q = preg_replace(’/ /’, ‘%20′, $search_term); 

?>

<?php /* Use the search terms to run a query */  

query_posts(’s=’. $search_term_q );  

/* check to see if there are posts */

if ( have_posts() ) :  

 ?>  

<h1>Possibly related content</h1>

<ol>

<?php /* start the loop */  while ( have_posts() ) : the_post(); ?>  

<li><a href=”<?php the_permalink() ?>”><?php the_title() ?></a>

<br>

<?php unset($previousday); printf(__(’%1$s’, ’sandbox’), the_date(”, ”, ”, false), get_the_time()) ?>

</li>  

<?php /* end the loop */  endwhile; ?>  

</ol>  

<?php else : endif; ?> 

If you’ve any questions, don’t hesitate to ask!

Four-Oh-Fours are hot again! Just recently came a across the article A Better 404. I remember reading the A List Apart article “A Perfect 404″ ages ago, but had never done anything about it. Time to improve. 

First some quick vocab: the part after your .com (or .co.uk) is called the URI, so if www.google.com/analytics/provision/ is the address,  /analytics/provision/ would be the URI. The URI is the part that’s wrong when someone’s followed a outdated link which means we can use the URI to create a more helpful 404 page. To create a 404 page for your Wordpress theme just create a 404.php file in the directory of your theme (/wp-content/themes/default/ is the default).

The default wordpress 404 page code looks something like this:

<?php get_header(); ?>

<h1>Nothing Found (Error 404)</h1>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Which I suppose is functional enough, but doesn’t actually help the user much, depending on the content of your sidebar. The first thing to do is to tell programmes visiting  (browsers and more importantly search engine spiders!) that the page is a 404 error page.

You do that by adding the following to the top of your 404.php:

<?php ob_start(); ?>

<?php header(”HTTP/1.1 404 Not Found”); ?>

This “HTTP/1.1 404 Not Found” message tells spiders exactly what they need to know.

Next up, adding useful things for human users! There are three main things you can do to be helpful. Telling the user exactly what’s wrong, giving them a list of related articles and listing your recent articles. Related articles requires some URI magic which I haven’t figured out yet, but Jonathan Hollin has, so stay tuned for an article from him which I’ll link to when the time comes.

Telling the user exactly what’s wrong goes a little something like this:

<blockquote>

<?php // When the visitor is linked through by another site or page

if ($_SERVER['HTTP_REFERER']) { ?>

<p>The link at <em><a href=”<?php echo $_SERVER['HTTP_REFERER'];?>”>

<?php echo chunk_split($_SERVER['HTTP_REFERER'], 25);?>

</a></em> is incorrect or <em><?php echo $_SERVER['REQUEST_URI'];?></em> has been moved, renamed or deleted.</p>

<?php } // When the visitor isn’t linked through (most likely a bookmark)

else { 

echo “<p><em>” . $_SERVER['REQUEST_URI'] . “</em>”;

?>

has been moved, renamed or deleted.</p>

<?php } ?>

</blockquote>

As the comments in the code make clear, there are two situations to tailor for: when people come in from another site and when they don’t. A nice addition is “echo chunk_split($_SERVER['HTTP_REFERER'], 25)” which echo’s (outputs) the HTTP_REFERER (the site where the user was linked from) in little blocks of 25 characters. This way long URLs still wrap nicely. I chose 25 characters as that’ll put “http://james.gameover.com” all on one line.

That just leaves a list of some recent posts to add:

<h1>Recent Posts</h1>

<ol>

<?php $postslist = get_posts(’numberposts=6′);

foreach ($postslist as $post) :

setup_postdata($post); ?>

<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>

<?php endforeach; ?>

</ol>

This code simply outputs a linked title of the 6 most recent journal entries in a numbered list. Simple!

So, to recap, you’ll end up with something like this as your final code in the 404.php file:

<?php ob_start(); ?>

<?php header(”HTTP/1.1 404 Not Found”); ?>

<?php get_header(); ?>

 

<h1>Nothing Found (Error 404)</h1>

 

<blockquote>

<? if ($_SERVER['HTTP_REFERER']) { ?>

<p>The link at <em><a href=”<?php echo $_SERVER['HTTP_REFERER'];?>”>

<?php echo chunk_split($_SERVER['HTTP_REFERER'], 25);?>

</a></em> is incorrect or <em><?php echo $_SERVER['REQUEST_URI'];?></em> has been moved, renamed or deleted.</p>

<?php } else { 

echo “<p><em>” . $_SERVER['REQUEST_URI'];

?>

</em> has been moved, renamed or deleted.</p>

<?php } ?>

</blockquote>

 

<p>Don’t worry, just try again!</p>

 

<h1>Recent Posts</h1>

<ol>

<?php $postslist = get_posts(’numberposts=6′);

foreach ($postslist as $post) :

setup_postdata($post); ?>

<li><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></li>

<?php endforeach; ?>

</ol>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

You can visit the final 404 error page here. Many thanks to Jonathan M. Hollin for much of the code and ideas, and to the Wordpress Codex and php.net for being such handy recourses.

Update: Added “Possibly related content” to my 404 pages, followup post will come later.

1. Space Cowboy – Crazy Talk (Pique & Nique You Will Miss Me Remix)
2. Justin Timberlake – Like I Love You (Basement Jaxx)
3. Polyphonics – Nightlights (Seamus Haji Vocal Mix)
4. Jamiroquai – Love Blind
5. Gadjo – So Many Times (Club Mix)

Candy Volume 2 (3.23 mins) Download audio file (candy-volume2.mp3)

1. M&S Presents The Girl Next Door – If You Wanna
2. Basement Jaxx – U Don’t Know Me
3. Faith Evans – Mesmerized (Freemasons Radio Edit)
4. Mint Royale – Singing In The Rain (FuzzyGroove Mix)

Candy Volume 3 (3.16 mins) Download audio file (candy-volume3.mp3)

1. Michaele Buble – Feeling Good
2. Air – Universal Traveler
3. José González – Heartbeats

If  you enjoyed these, you might also like DJ Cruze’s podcast or Defected’s podcast (iTunes Podcast directory link).

A lot of open source projects use Bugzilla (of Mozilla origin) to track bugs and make discussion of those bugs possible. Shouldn’t Bugzilla make it possible (and easy!) to include images and video in bug reports?

If Buzzfeed can do it…

Originally made for the July Crescendo, a month and a few name changes later, the podcast and accompanying artwork go live today.

It’s quite fun to do podcast artwork; well recommended. Thanks for the chance Si!

Sites in Wordpress (WP) have “posts” which go into categories and “pages”, which are independent. My cunning plan was to name pages exactly the same as the categories I wanted them to describe, and then insert them into the archive page. It has been quite a search to get all the right code, even though the end result looks quite simple!

The first thing you do, is create a category (”One & One”) and create a page (with the title “One & One”). Secondly, you open up your archive.php template file.

You should see something like the following in it:

<?php if (have_posts()) : ?>

And also, further along:

<?php while (have_posts()) : the_post(); ?>

Those two statements start off “The Loop”, which is wordpress lingo for the php-statements which produce the desired output (like posts or lists of them) in a template. We’re going to put our blurb above it. You can also put it under “The Loop” (the “main” loop really) if you so wish – no extra code needed.

Simply put:

<?php

$getcategory = $wp_query->get_queried_object();

$pagetoget = ‘pagename=’ . $getcategory->category_nicename;

$seperate_query = new WP_Query($pagetoget);

/* Next…we start our own Wordpress Loop, based on the seperate query (as seen above). That way we can still use the main query! */?>

<?php while ($seperate_query->have_posts()) : $seperate_query->the_post(); ?>

<div id=”blurb”>

<h3>Standard blurb for: <?php echo single_cat_title(”, false); ?></h3>

<?php the_content() ?>

</div>

<br style=”clear:both;”>

<?php endwhile; ?>

<?php rewind_posts(); /* This “rewinds” the loop, so we can use another loop after it safely.*/ ?>

Infront of the start of the main loop in your archive.php, so above of the following line:

<?php if (have_posts()) : ?>

And that’s all the code that’s needed!

Let me explain what the code actually does. The first two lines — $getcategory = $wp_query->get_queried_object(); $pagetoget = ‘pagename=’ . $getcategory->category_nicename; — ask WP for the “category slug” or the “nicename” of the category. That’s the sanitized version of “One & One” in this case, which is “one-one”.

This “category slug” is handy, because “one-one” will also be the “page slug”, so it’ll match the sanitized name of the page we want to insert into our category archive. We get our page by doing — $seperate_query = new WP_Query($pagetoget); while ($seperate_query->have_posts()) : $seperate_query->the_post(); — that starts a new, completely seperate loop from the main loop that will follow.

Then all that’s left is to insert the page’s content like so — <?php the_content() ?> — and then end and rewind the loop with the following statements — <?php endwhile; ?> <?php rewind_posts(); ?> .

You can see I’ve added a div around the content-insertion and <br style=”clear:both;”> after it. That prepares you for any floating-images that may be part of the inserted page’s content. The <h3>Standard blurb for: <?php echo single_cat_title(”, false); ?></h3> is there mainly to know what I’m doing (when working on it) and to seperate it out from the listing of category content that will follow after the blurb. I’ve left it in the example so you know how to get both the sanitized “category slug” and the regular “category title”, which this produces.

This code works in the standard Wordpress 2.6 template based on K2 and should work in pretty much all other templates too. Many thanks to Joen and Google for their help.

There are three main ways to define your layout in web design: fixed, elastic & liquid. Having written about the differences between them before, I’ll suffice with stating that fixed layouts are defined in “px” (pixels) and liquid ones in “%” (percentages).

Using a fixed layout means your web page is the same width irrespective of the viewers’ screen width, like so:

Using a liquid layout however, means your web page scales along with the viewers’ screen width, like so:

Liquid layouts used to have an edge over pixel layouts in the sense that they increased use of the screen real estate, thus providing more room if the viewer increased their text-size. Line-lengths are hard to control with liquid layouts, because of varying screen-sizes obviously, but also when the viewer increases (just) the text-size. Jason Kottke posted a good warning about line-lengths in liquid layouts a while back:

Attention liquid designers: take a gander at this portion of an ancient Egyptian parchment on papyrus from the Louvre. Even the ancient Egyptians knew not to make columns of text too wide.

Now, however, most browsers have adopted full-page zooming over text-size zooming. Most provide both, but full-page zooming is the new default. Full-page zooming gives users with a wider screen (for example) the chance to increase the size of text and images, while still preserving the ratios of fixed layout pages, like so:

As you can see, full-page zooming means fixed layouts also provide increased use of screen real estate, but only when needed. In addition fixed layouts keep line-lengths relatively stable, and are easy to work with as they are based on pixels, just like images, videos and other objects you may have on your web page.

So back to the subject of this post: wallpaper. I regularly feature wallpaper of house music I like, or rather wallpapers based on the artwork of house music that I like. Now apparently, I have the need to create a wallpaper out of everything I open in photoshop. I was supposed to be creating a cover for an upcoming podcast of One Phat DJ, when I realised I wasn’t busy creating a cover at all – it was a wallpaper! So while that means I had to go back to the drawing board, I still thought it’d be nice to share it with all of you.

The “One Phat DJ – Pro” wallpaper is based on a Sam Hardacre sketch of the One Phat DJ character as featured on the April ‘08 Warm Up cover. While it’s obviously inspired by the NBA logo, this style seems to be used for a lot of pro sports now, even pro gaming!

It’s available for download in both wide-screen and square format. Feel free to use this wallpaper at home or at work, but please don’t redistribute.

Enjoy!

You see, when a picture loves another picture very much, they get together and do something very special. Son, I’m going to use a word I’m sure you’ve heard before – they get Photoshopped together. And this is how a disaster comes into the world; it’s a beautiful thing.

From Photoshop Disasters, a site which I enjoy, especially since I dabble a bit in Photoshop too.

Now with full-page zoom being implemented (as default!) in Internet Explorer 7, Firefox 3 and Opera 9*, it’s a different story. Full-page zooming means your easy px-based layout will be fully flexible. Even more flexible than most em-based layouts in fact, as images will scale along too.

So I’m asking myself, why bother with hard-to-keep-from-breaking em-based layouts?

[update] I don’t think liquid layouts are relevant anymore either.

[update 2] * And now Safari too! That’s all of the major browsers.

PS. This still leaves percentage-based layouts of course, but they maximise screen real estate. Which is very different from maximising readability (line-lengths and all that jazz). As far as I can see, %-based layouts are good for some web-apps (like gmail) but aren’t optimal for other uses.