Smoother Loading Typekit Fonts: A nice approach by Joni Korpi

For lovers of Typekit webfonts: If you want to guarantee that your pages load for all users without glitches, you’ll want to use Typekit’s asynchronous loading script. Advantage: pages will load fine for all users even in the event of a font network outage. Disadvantage: you’ll notice a flash of unstyled text (FOUT).

Joni Korpi, designer of the Golden Grid System and the Frameless grid system, has proposed a nice solution, which involves creative use of:

  • loading classes provided by Typekit
  • CSS3 transitions for fade-in
  • a base64 animated image to indicate that fonts are loading

As you’ll notice while perusing his blog, it provides a nice effect. I’m contemplating this method.

Read Joni’s post about this method

How does it strike you?

Related Links

A Little CSS3 Media Query Reporter

A Little CSS3 Media Query Reporter

For your responsive web designing pleasure, I’ve put together a little CSS3 Media Query Reporter.

UPDATES

Get the latest version on github

Media Query Reporter on Github

  • Version 1.01: includes 320px through 1440px in increments of 160px

Ruby Gem!

Christopher Moeller has created a ruby gem to add the latest version of the Media Query Reporter to your Rails App.

Original code below

Get the latest at Github.

/* ======================================

    Media Query Reporter Styles
      by David Cochran
      aLittleCode.com

========================================= */

body:after {
    content: "less than 320px";
    font-size: 200%;
    line-height: 1;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 5px 0;
    text-align: center;
    background-color: hsla(1,60%,40%,0.7);
    color: #fff;
    z-index: 9999;
}
@media only screen and (min-width: 320px) {
    body:after {
        content: "320 to 480px";
        background-color: hsla(90,60%,40%,0.7);
    }
}
@media only screen and (min-width: 480px) {
    body:after {
        content: "480 to 768px";
        background-color: hsla(180,60%,40%,0.7);
    }
}
@media only screen and (min-width: 768px) {
    body:after {
        content: "768 to 1024px";
        background-color: hsla(270,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1024px) {
    body:after {
        content: "1024 to 1360px";
        background-color: hsla(360,60%,40%,0.7);
    }
}
@media only screen and (min-width: 1360px) {
    body:after {
        content: "1360 and up";
        background-color: hsla(90,60%,40%,0.7);
    }
}

Live Demo

See a live demo of a previous version of this little CSS3 Media Query Reporter in action over at Webdesigntuts+

Online Tutorial

For a quick tutorial on the rationale and process of building this — as well as the first steps toward creating a responsive grid system — see my tutorial at Webdesigntuts+.

 

Behind The Scenes Of Nike Better World — Smashing Magazine

Nike Better World Screenshot
If you appreciate an excellent parallax scrolling interface, don’t miss this:

In this article, we’ll talk to the team behind Nike Better World to find out how the website was made. We’ll look at exactly how it was put together, and then use similar techniques to create our own parallax scrolling website. Finally, we’ll look at other websites that employ this technique to hopefully inspire you to build on these ideas and create your own variation.

via Behind The Scenes Of Nike Better World – Smashing Magazine.

Design for 3 Screens — Make That 5: Jakob Nielsen’s Alertbox

Summary:

Mobile use will rise, but desktop computers will remain important, forcing companies to design for multiple platforms, requiring continuity in visual design, features, user data, and tone of voice.

via Transmedia Design for 3 Screens — Make That 5: Jakob Nielsen’s Alertbox

Aloha WYSIWYG Editor and Front-End Editor Plugin for WordPress

Aloha Editor makes browser content editableI was excited today to stumble across the Aloha Editor after seeing in mentioned in the HTML5 Boilerplate discussion list.

It’s point? Enable users to edit content in their website right from the front end — by simply clicking into the desired element, editing, and submitting.

THEN I discovered that some savvy coders have integrated it into a nice little WordPress plugin, called Front-End Editor. I’ve now tried it out and have to say that I like it.

Kudos to these teams of coders!

Aloha Editor – HTML5 WYSIWYG Editor

“The world’s most advanced browser HTML5 based WYSIWYG editor lets you experience a whole new way of editing. It’s faster than existing technologies and offers unprecedented WYSIWYG functionalities.”

Front-end Editor — WordPress Plugin

“Lets you make changes to your content directly from your site. No need to load the admin backend just to correct a typo. Goals: save as many trips to the backend as possible; compatible with any theme, out of the box; light and fast.”