After reading everyone’s questions, I thought it would be good to create a knowledge-base using them:

 

1.       What are 3 best practices for creating quick loading web experiences?

2.       What are the pros and cons of cufon/Sifr/@font-face as font-display mechanisms?

3.       What are the best practices for implementing transparencies throughout a site?

4.       What are the advantages of html5 and how is it handled across different leading browsers?

5.       Are you a proponent of graceful degredation or progressive enhancement?

 

 

Starting with late loading techniques, reducing http requests(http://yuiblog.com/blog/2006/11/28/performance-research-part-1/http://css-tricks.com/css-sprites/using css sprites (this is a must have tool http://spriteme.org/) and image compression

http://css-tricks.com/css-image-replacement/

 

As far as sIFR, Cufon, @font-face: ( http://www.solidstategroup.com/what-we-think/a-comparison-between-sifr-cufon-and-font-face)

Images with
text
replacement
sIFR Cufon “@font-face”
Dynamic Text No Yes Yes Yes
Browser
Compatibility
All modern
browsers, inc IE6
All modern
browsers, inc IE6
All modern
browsers, inc IE6
Limited
supoirt in IE
Needs Plugin No Yes(Flash) No No
Rendering Speed Fast Slow Fast Fast
Selectable Text No Yes No Yes
Relative ease of
implementation
Easy Difficult So-so Easy
Suitable for
hyperlinks
Yes Eventually Yes Yes

 

PNGs or Gifs for transparency? Well when it comes to IE6 => http://www.assault.it/2008/06/16/web-graphic-transparency-tutorial-gif-png/

 

 

Advantages of HTML5 (http://oshyn.com/_blog/General/post/Advantages_of_HTML5/) & Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. (http://caniuse.com)

 

So, graceful degradation is the practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers. This lower level is not as nice to use for your site visitors, but it does still provide them with the basic functionality that they came to your site to use; things do not break for them.

Progressive enhancement is similar, but it does things the other way round. You start by establishing a basic level of user experience that all browsers will be able to provide when rendering your web site, but you also build in more advanced functionality that will automatically be available to browsers that can use it.

In other words, graceful degradation starts from the status quo of complexity and tries to fix for the lesser experience whereas progressive enhancement starts from a very basic, working example and allows for constant extension for future environments. Degrading gracefully means looking back whereas enhancing progressively means looking forward whilst keeping your feet on firm ground.

(For More: http://dev.opera.com/articles/view/graceful-degradation-progressive-enhance/)

 

1.How would you implement the @font face property?

 

2.How would you write a jQuery script to produce a styled modal web form?

 

3.How do you implement a IE 6 PNG Transparency Fix?

 

4.How do you make a “Sticky Footer”?

 

5.How would you create a header navigation with CSS Sprites and Dynamic Drop down Menus?

 

 

@Font-Face Implementation (http://www.font-face.com/#green_content):

Initially you define the rule, “font-family” is what you want to call the font, “src” is where it can be found, include a “font-weight” (not needed for normal, but required by everything else, bold, thin etc).

@font-face {

font-family: DeliciousRoman;

src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);

font-weight:400;

}

Then just use it like any other font in any other style rule.

p {

font-family: DeliciousRoman, Helvetica, Arial, sans-serif;

}

 

MODAL WEB FORM (http://jquery.com/demo/thickbox/)

 

dynamic solution for IE6 PNG transparency issues http://koivi.com/ie-png-transparency/

 

Sticky Footer(http://ryanfait.com/sticky-footer/)

 

* {
        margin: 0;
}
html, body {
        height: 100%;
}
.wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
        height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

 

 

To  create a header navigation with CSS Sprites and Dynamic Drop down Menus, I would recommend developing the page with separate image files then using SpriteMe to create the sprites then use Son of a Suckerfish drop downs here is the csshttp://www.cssgirl.com/examples/suckerfish-sprites.css

And a tutorial http://www.cssgirl.com/resources/2008/06/22/how-to-use-css-sprites-with-son-of-suckerfish-drop-downs/