I learned through my own experience that a font stack based on system fonts is no longer as safe as it was before the mobile device boom. Where system fonts in the major mobile operating systems are concerned, there is barely any consistency at all. For example, the Android operating system only comes packaged with 4 system fonts — none of which appear on iOS or Windows Phone, and those two platforms only share a handful of fonts between themselves. In the process of creating a compatibility table of shared default fonts across these systems for my own reference, what I ended up with was actually more like an incompatibility table. There is no safe native typographic foundation on today’s web.

Jordan Moore explores the possibilities of fallback fonts for mobile devices in a guest post on the Typekit blog.

Sadly I see a lot of websites loading massive amounts of webfont data when they don’t even need all of it. So make sure to only add fonts to your Typekit kits or Google webfonts that you really need.

Over and out, Performance-Martin.

Read this on TheAmazingWeb.net

Well, I’m unashamedly a web person. Long term, I’d bet on the web a million times over against one or two proprietary platforms with their vendor and hardware lock-in. Platforms like Android, iOS, Blackberry are of a time and place. That time is early 21st century and the place is mostly western, developed countries. The web has loftier goals than pushing the business interests of a bunch of large corporates.

Andy Hume, client-side architect for the Guardian, believes in the web in the long term.

Read this on TheAmazingWeb.net

When creating web pages, the only part of it that you can rely upon working is the HTML (and even that can fail, but without it there is no web page and everything else becomes moot). The attitude towards building for the web with this in mind is called progressive enhancement. Briefly, each extra layer (images, styling, behaviour, video, audio) of the page should be seen as optional. If you build pages with the idea that anything other than HTML that you add is optional, you will create a better and more robust web page.

In theory and in a perfect world this sounds great. But you know… that’s almost never the case in a real life project. (via)

Read this on TheAmazingWeb.net

We promise not to screw it up. [...]
The two companies will also work together to create advertising opportunities that are seamless and enhance user experience.

Advertising that enhances user experience. I’m curious to see how this’ll turn out.

Read this on TheAmazingWeb.net

Read this on TheAmazingWeb.net

Imports have actually spiked on the rumors even though it’s Sunday: normally we import 400-600 posts an hour from Tumblr, last hour it was over 72,000

Wow. That’s a massive amount. Seems like a lot of people are afraid of the acquisition, mh? (via)

Read this on TheAmazingWeb.net

According to The Wall Street Journal, Yahoo’s board of directors has approved the company’s widely-rumored acquisition of Tumblr in an all-cash deal worth $1.1 billion.

Just in case you missed that somehow.
I don’t really have an opinion on the acquisition. I’ve never really used tumblr much and don’t plan to do so in the future. But let’s see what Yahoo does with it.

Read this on TheAmazingWeb.net

Rendering performance is critical to users enjoying your application, and you should always aim to keep your paint workload under 16ms. To help you do that, you should integrate using DevTools throughout your development process to identify and fix bottlenecks as they arise.

A few more tips and tricks on what to look out for so that your site renders and feels fast. Fits in line with the post of Addy Osmani regarding the Daft Punk site.

Read this on TheAmazingWeb.net

The difficulty with this styling is that every line has padding on every side which is not really possible with CSS because you can’t target single lines. But somehow we can manage to pull it off with three nested span elements.

After some fiddling I asked Twitter and got a few different solutions from which I came up with this final markup. To be honest, I can’t really explain why or how it works. It’s definitely a hack and should be easier with CSS. Anyway, it works down to IE7, so I think we are good. (Okay, we need a small fix for Firefox…)

<blockquote class="quote">
    <a href="http://theamazingweb.net">
        <span class="quote-lvl1">
            <span class="quote-lvl2">
                <span class="quote-lvl3">
                    Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet delegetur su.m Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet de.legetur sum Lorem ipsum dolor sit amet. Lorem ipsum dolor sit lorem ipsum dolor sit amet delegetur sum.
                </span>
            </span>
        </span>
    </a>
</blockquote>

.quote {
    margin: 10px 0 5px 0;
    > a {
        display: block;
        padding-left: 20px;
        font-size: 14px;
        font-weight: normal;
        color: #fff;
        line-height: 32px;
        &:hover {
            text-decoration: none;
        }
        &:active {
            position: relative;
            top: 1px;
        }
    }
}

.quote-lvl1,
.quote-lvl2,
.quote-lvl3 {
    position: relative;
}

.quote-lvl1,
.quote-lvl2 {
    padding: 6px 0;
    background: $qfmblue2;
    border-bottom: 1px solid #6ec5e9;
    .quote > a:hover & {
        background: $qfmblue2Hover;
        border-bottom: 1px solid #5bbae1;
    }
}

.quote-lvl2 {
    right: 20px;
}

.quote-lvl3 {
    left: 10px;
}

@-moz-document url-prefix() {
    .quote-lvl1,
    .quote-lvl2 {
        padding: 6px 0 5px 0;
    }
}

And here you can see the code in action try fiddling with it yourself:

Check out this Pen!

Now these figures for time taken e.g 514ms are 10-50 times what they should be. Ideally they should be taking <= 10ms. Jank manifests itself when you blow your frame budget – the 16.7ms budget really, 8-10ms factoring in mobile, browser processes you have for JavaScript, layout, image decoding, painting and everything else Chrome needs to do to display your page on screen.

Addy Osmani analysed the animation-rich Daft Punk site on Pitchfork and explains what can be done differently. Another reminder how important performance is.

Read this on TheAmazingWeb.net