Font licensing: a plea to designers

So, far be it for me to tell designers which fonts to use in their creations.  They have constraints I can't even begin to understand - brand, communication, etc.  But if they expect me to be able to take the lovely design and create a website out of it, especially for a high profile (read 'sueable') client, then I am going to have to be able to use any font they've chosen with the appropriate license.

Because we're all about @font-face these days, are we not?

Recently I get a design through - gorgeous design - using a font that's so expensive to use on the web that we have to substitute it for a cheaper alternative.  All good - client agrees.  Get to UAT (user acceptance testing) phase and suddenly it's all 'but the font doesn't look the same as on the PSD'.  DISASTER!!!

Yes.  That's correct.  Because it's NOT THE SAME FONT.

So.  Designers of the world?  Please check the licensing of the fonts you use.  It will make my job much easier and ultimately the client much happier.

And isn't that what we all want?

(the happy client)

(although my job being easier is good too)

Why I hate !important

So you're dealing with legacy code.  You've got to apply a new skin, and that's what CSS is all about, right?  Applying a new stylesheet and whaboompf you have a new spanky site with little to no HTML changes (see Zen Garden for a good reference).  Fabulous.

Occasionally you come across a site that's been built by a developer who hasn't figured the semantic thing out, and you find you're making declarations like:

.blue{color:red;}

Always a bit uncomfortable.

But nothing, nothing is as bad as:
p{color:green!important}

Oh bane of my life!! Oh curse you developer!!

My p.blue (which is supposed to be red - work with me here) is green.  Everything is green.  And now I have to start liberally sprinkling !importants all over the place.  The natural cascade is lost.  The very notion of !important is lost.

And I have a crazy urge to hunt down and pummel the lazy f-wit that decided green text was aaaall that site was gonna get.

That's why.

Mobile stylesheets

I’ve found that the Android phones I've been testing on, in landscape view has a width of something like 533px – not the 480px everyone seems to be talking about. This was confusing. But I ended up using the following code to make the site work:

 <link href="css/screen.css" media="only screen and (min-device-width: 534px)" rel="stylesheet" type="text/css"></link>

<link href="css/mobile.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px), only screen and (max-device-width: 533px) and (orientation: landscape)" rel="stylesheet" type="text/css"></link>

 This removes the main stylesheet and only displays the mobile stylesheet on devices. iPad just gets the regular site. Another media query might be necessary for an iPad site.

I’d really strongly like to discourage the use of:
maximum-scale=1

This will mean the user can’t zoom into the page which is really bad for accessibility reasons.

 Oh, and there’s a resize bug in mobile Safari nicely described by Jeremy Keith: http://adactio.com/journal/5088/ If you go from Portrait to Landscape the page ends up being too big and the user has to double tap to bring it back to the right size.

But it’s a well documented bug, so we just need to point this out and hope that Apple fixes asap!!

CSS3 is a misnomer?

According to the W3C:

"CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1 specification as its core. Each module adds functionality and/or replaces part of the CSS2.1 specification."

So there will be no CSS3, just a more enhanced CSS2.1.

Seems weird to me..

Input field toggle (badly written - needs re-writing)

fieldToggle = function(i){

__defaultVal = $(i).attr('value');
__inputField = $(i);

$(__inputField).bind('click focus', function () {
if ($(this).attr('value') == __defaultVal) {
$(this).attr('value', '');
}
});

$(__inputField).bind('blur', function () {
if ($(this).attr('value') == "") {
$(this).attr('value', __defaultVal);
}
});

}

Quick toggle based on select box changing

Quick way to make a field toggle enabled/disabled based on changing a select box.

JavaScript

var fil = '#filter';
var filSub = '#subFilter';

$(fil).change(function(){
($(this).val() != 0) ? $(filSub).attr('disabled','') : $(filSub).attr('disabled','disabled');
});

HTML

Filter by type
All Type 1 Type 2

Quick 'n dirty Mobile site

Summarised from the Smashing Magazine article. Because sometimes you just want the bare bones, not the explanation.

1. Add in a mobile stylesheet:
   
   
   
   
   <
link
rel
=
"stylesheet"
type
=
"text/css"
media
=
"only screen and (max-device-width: 480px)"
href
=
"small-device.css"

/>

   
   
   If you want to use ProtoFluid (an excellent testing tool), use this one:
   
   
   <link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="css/small-device.css">
   
   
   


2. Add in the meta tag to help the iPhone out:
   
   
   
   
   <
meta
name
=
"viewport"
content
=
"width=device-width"
/>

   
   



3. Redo styles!