Francois Faubert » Web Design

The Implications of OpenID

francoisfaubert — Tue, 25 Sep 2007 18:40:37 +0000

Through Digg, I found a LifeHacker article explaining the good and bad sides of OpenID. While the article in itself was an interesting read, a video Google Tech Talk titled “The Implications of OpenID” was posted alongside the text.

It’s the best, straight-to-the-point informational source I have stumbled upon, yet.

Oh and you should know that I’ll be adding OpenID support to The Music Tank in the near future.

Learning through mimicry

francoisfaubert — Mon, 24 Sep 2007 20:49:41 +0000

There are several web design projects I am actively working on at the moment. Some are for my real day job but many are personal endeavors I am likely not to finish. Nonetheless, these projects force me into solve interesting problems I knew someone else has already solved before me.

Why reinvent something when you can just “view source”?

By no means am I implying you should copy others like a scanning robot, but you should at least take a few seconds to try and understand the concept behind their solution.

This is a quick, rough list of the things I’ve learned; especially by looking at Apple.com and Google Maps.

CSS Browser validation

If the programming language used permits it, you should have quick access to the surfer’s browser information as the page is loading. By cleaning this string, you can extract a rough approximation of the browser’s type and version.

Afterwards, if you attach this cleaner and shorter approximation as the tag’s id, all of the children nodes can be modified and tweaked using basic CSS rules:

p.box {width:200px; padding:10px;}
#explorer6  p.box { width:180px; }

This should be remembered when you can’t use conditional comments to fix a rendering issue. You can push it by adding a unique identifier to the current page in the class to the tag and continue filtering the rules further:

form { background-color:#000;}
body.contact form { border:1px solid #333; }
body.register form { border:none;}

Customizing recurring styles

When you have a global theme but each single page has a very different style for its content area, you can still use general styles and customize what you need at the lowest level.

For instance, column-based design is often used on webpages nowadays. You can define a reusable column set using these rules :

.col_1_2 { float:left; width:60%;}
.col_2_2 { float:left; width:40%;}

With this is mind, you can build a widget or any sub-designed area with two columns. If this rules needs to change in only one page, you can override the rule to reflect new sizes using custom CSS identifiers.

It’s common sense and good use of CSS to try and sort out all the global widgets or recurring design types that way. On big projects using exhaustive imbrication of templates, using predefined global styles as building tools will really save you some time.

Yahoo! as Standard Makers

francoisfaubert — Mon, 11 Jun 2007 18:41:28 +0000

Long time indifference

Yahoo! is not a place I like to hang around. I guess it has all to do with how they handled the presentation of their search results back in the day. I never was a fan of categorized results — at least wasn’t ready to try harder to use them at that time.

So, for years I’ve been using AltaVista and then Google instead of Yahoo! search; Hotmail, then GMail instead of Yahoo! mail. Since I don’t like to be overrun with data, I don’t even read the news on their portal. The NY Times‘ and Radio-Canada’s RSS feeds suit me better.

In other words, I am not part of the gazillions of people that help make Yahoo! the most important website on the Internet at the moment, according to Alexa. I didn’t have much of an opinion on Yahoo! until they got so useful for the web developer I am.

YUI

Yahoo! Developer Network is a priceless resource for information on popular web technologies. What I’m more interested in however is the YUI section — the Yahoo! User Interface Libary.

Javascript

YUI is said to be built around Yahoo!’s own Javascript library. Similar to jQuery and Prototype, the YUI library helps writing Javascript code that is more efficient more quickly. At the time of this writing, Yahoo!’s library has proven to work faster than its competitors when working on the DOM. A massive advantage on its competitors is its structured verbose that seems closer to more classic programming languages.

Notably, you can create namespaces for your scripts as well fire as custom events. Obviously, you can create visual effects of custom controls for your interface using objects the community is developing. Broken down in many files, you can import only the libraries you need in your application from Yahoo!’s servers. No hassle in storing multiple version of the files.

Templates

The section supplies a collection of pre designed templates for anyone to use. Whether you need a 3 column fixed layout, or fluid 100% wide 5 columns templates, you will find the XHTML and CSS files in the YUI section completely free. Free as in no charge, but also free as in open source.

Cross-platform

Most importantly, the library is guaranteed to be working the same on any Grade A browser. Other libraries don’t always live up to that mention as the script gets more complicated. This guideline is to be followed religiously, no matter if you are using Yahoo! products or not. The chart provides great arguments when you need to justify your decision to you employer when asked to design for IE3.

Standard Pipes

While the tools themselves are incredibly useful and time saving, it’s not the best thing about the YUI. Through guidelines, tutorials and free files, Yahoo! is lowering the pain of doing web design for people who don’t know about standards, don’t want to dig in or who just don’t care. If an important company like Yahoo! continues providing resources and using their influence in the developer’s community and the software makers building the browser, the Internet can standardize fairly quickly.

Yahoo! seems to be pushing towards a better Internet and the same cannot be said of everyone in the top-most influential websites.

Page encoding can stop the PHP parser

francoisfaubert — Thu, 23 Nov 2006 15:54:23 +0000

The main PHP Class file of The Music Tank stopped loading altogether yesterday. After scanning lines after lines of code trying to guess what what generating an error I still hadn’t found the problem until late last night.

What made it nebulous was that instead of having a message from PHP describing a known error like ” ‘)’ expected on line 64 “, I was triggering an Internal Server Error on Apache when loading the website and the parser was outputting unicode garbage when I tried to load the class directly from the browser (instead of nothing at all because I don’t print data right from the class).

I have to admit I could have been a bit keener on the issue just by looking a the garbage the file was making. It turns out that my code editor, TextWrangler, had changed the encoding type of the file from UTF-8 to the Macintosh charset when I inserted the © character straight in the document without using it’s HTML counterpart ©.

The change of charset and/or the use of special characters in the source code stopped the PHP parser. I can’t explain why as I don’t have much access to the configuration files to my server’s PHP version nor do I know how PHP reads the .php files, but I think it was due to the use of multiple charsets in the same rendering call. For instance the main class was using the Mac charset while the subclasses it was importing used UTF-8 encoding.

The frustrating part is really how this whole deal was created out of laziness. Apple offers a wide selection of special characters by doing a [alt + most keys] combination. I thought I’d save some time by using their copyright sign instead of sticking with ©.

At least, this episode forced me into cleaning the quote quite a lot by splitting my pages into modules which reflect the content’s architecture. The Tank should show a light performance boost now. Very light though, hehehe.

Accessibility Vs. The Real World

francoisfaubert — Fri, 25 Aug 2006 16:02:52 +0000

Jeff Croft, not afraid of being lynched by the new wave of accessibility-aware Web 2.0 designers, has posted a new article asking if accessibilty has been taken too far.

While I’m guessing his opinion may have been toned down on the way from his head to his hands, I do believe he has a point. To paraphrase and sum his opinion: “Accessibility is cool and all because it’s bad to ignore people with disabilities, but you can’t expect a company to spend all their web design budget for 0.5% of their customers. Therefore, some site aren’t 100% accessible on purpose.”

And it’s true. In real life, my employer gives me, say, 4 days to finish a website. It’s good enough if I can be satisfied with the semantics of things in that period of time. Odds are I won’t have any time left to make separate style sheets with high-contrast colors, one with big text, etc.

All can agree that it’s a good thing that there’s a lot more awareness around the accessibility of online content at the moment.

However, just like in any trend, it’s all too easy to pick on those who don’t follow it, never considering all the reasons for them not doing so.

Today’s links

francoisfaubert — Mon, 14 Aug 2006 13:59:19 +0000

Here are a the few links that caught my attention this morning:

Mark Simonson published his first article on typography on his blog.
A List Apart has been updated with issue #221.
in obscuro posted a tutorial entitled Optimizing images for web which is worth reading if you use Photoshop or if you’d like to understand a few image compression concepts and lexicon.

History of accessibility

francoisfaubert — Wed, 26 Apr 2006 13:48:37 +0000

A lot of people at the moment are doing websites that follow the Strict XHTML 1.1 guidelines but don’t even know why they do so or why they should do so. Juicy Studio published an article on the history of accessibility because knowing we’re you’ve been can tell you a lot on were you’re going.

Removing the dotted border around links

francoisfaubert — Fri, 21 Apr 2006 13:16:59 +0000

Did you know you could remove the dotted border around your links? I didn’t. You just have to specify the outline CSS property. You can read a more in-depth explanation at Sonspring.

a { outline: none; }

Soooo… AJAX really does save bandwidth…

francoisfaubert — Fri, 17 Feb 2006 14:58:48 +0000

It’s quite obvious that not having to load a page countless times will save you bandwidth. Even I was aware of that. It’s just nice to see people making concrete tests to prove the concept.

Keep in mind however that this is not the best case scenario for rendering all of a website’s content because of the infamous back button problem.

By using AJAX to update the HTML content of an html template, these guys managed to save more than 60% of the necessary bandwidth using traditional methods.

Now someone on the web only needs to make the same types of benchmarks from the database’s perspective and I’d be really happy.

Eureka Follow up

francoisfaubert — Tue, 07 Feb 2006 16:38:19 +0000

As I mentioned in my last post, the Delegate class is quite useful even if I couldn’t pass parameters as easily as I would have wanted. While looking around today, I stumbled on this method which also makes things much easier. I don’t like how it’s written because of the in-line functions, but it really does solve the problem. Here’s the code, which I took the liberty to customize a little bit:

class Utils {
// Desc		:	Usually, when you attach a function to an event, you can't pass
//			parameters, using this function instead of the Delegate class
//			will allow you to do the same thing but with unlimitted parameters
// 			Window: General Information.
// 			http://www.person13.com/articles/proxy/Proxy.htm
public static function delegateEvent(oTarget:Object, fFunction:Function):Function {
    // Create an array of the extra parameters passed to the method. Loop
    // through every element of the arguments array starting with index 2,
    // and add the element to the aParameters array.
    var aParameters:Array = new Array();
    for(var i:Number = 2; i < arguments.length; i++) {
        aParameters[i - 2] = arguments[i];
    }
    // Create a new function that will be the proxy function.
    var fProxy:Function = function():Void {
        var aActualParameters:Array = arguments.concat(aParameters);
        fFunction.apply(oTarget, aActualParameters);
    };
    return fProxy;
}

And you can call it like this:

private function someFunction():Void {
    this._xml.onLoad = Utils.delegateEvent(this, xml_onLoad, "GeneralInformation");
}

private function xml_onLoad(success:Boolean, nextStep:String):Void {
    if(success)
    // Get the contents of xml
    switch (nextStep) {
        case "GeneralInformation" :
            this.open_GeneralInformation(); break;
    //etc...
    }
}

This was a huge time savor and suits how I like to write code.