web design

The Loop’s Jim Dalrymple compiled the following numbers for the time it takes various tech sites to load in a browser in late 2011:

• The Loop: 38 requests; 38.66KB; 1.89 secs
• Daring Fireball: 23 requests; 49.82KB; 566 milliseconds
• Macworld: 130 requests; 338.32KB; 8.54 secs
• Ars Technica: 120 requests; 185.99KB; 2.08 secs
• Apple: 46 requests; 419KB; 1.39 secs
• CNN: 196 requests; 269.41KB; 4 secs
• BGR: 368 requests; 2.74MB; 35.33 secs
• AppleInsider: 141 requests; 649.39KB; 5.64 secs
• Facebook: 137 requests; 993.54KB; 11.19 secs
• MacStories: 119 requests; 2.16MB; 2.13 secs

John Gruber started this by calling out The Next Web for it’s slow performance:

• TheNextWeb: 342 requests; 6MB; no time info

More benchmarks can be seen at Browsermob.

Twitter front-end guy Nicolas Gallagher likes both CSS and speech bubbles enough to want them unadulterated by images and non-semantic markup. The lesson from his many examples is that it all comes down to an :after pseudo element that puts the little triangle in there:

.speechbubble:after {
    content:"";
    position:absolute;
    bottom:-15px; /* value = - border-top-width - border-bottom-width */
    left:50px; /* controls horizontal position */
    border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

More examples on Nicolas’ site.

Sara Cannon‘s talk on responsive web design (resizing the page to suit different client devices) was spot on. Her slides are below, but she also recommends this A List Apart article on the matter, as well as Less Framework and 1140 CSS Grid (especially as alternatives to 960.gs).

I’ve long been a fan of CSS3, but Estelle Weyl‘s WordCamp SF talk on it charged me up again. Her slides are not to be missed.

An amusing hacks-conference lightning talk-turned-blog post on web development: “Graceful Hacks” – UX, IA and interaction design tips for hack days. Martin Belam‘s talk at The Guardian’s July 2009 Hack Day must have been both funny and useful:

• Funny: “However, I am given to understand that this is now deprecated and has gone out of fashion.”
• Useful: “the Yahoo! Design Pattern Library is your friend.”

It turns out that there are a lot of differences between Google’s regular web crawler and the Google News crawler. And though very few of us will find our content included in Google News, it still seems like a good idea to make our content conform to their technical requirements. Here are a few of them:

• In order for our crawler to correctly gather your content, each article needs to link to a page dedicated solely to that article. We’re unable to index articles from news sections which consist of one long page rather than a series of links that lead to articles on individual pages.
• If your articles are located in a drop down box, we won’t be able to crawl them. Google News is unable to crawl articles only accessible through a drop down menu.
• Google News does not recognize or follow Flash, graphic/image or JavaScript links which link to articles. Our automated crawler is best able to crawl plain text HTML links.
• Google News doesn’t crawl articles in PDF format, although this content is included on Google Web Search. Our automated crawler is currently best able to crawl plain text HTML sites.

Josh Bush’s Masked Input Plugin and Paulo P. Marinas’ AlphaNumeric are both jQuery plugins to prevent input of invalid data in web forms.

The cool browsers support radius corners, but Safari supports CSS transformations that allow developers to scale, skew, and rotate objects on the page like we’re used to doing in PostScript. And better than that, we can animate those transformations over time — all without any JavaScript.

Fire up Safari or Chrome and mouse over the examples here. The screencast at the top is from the menu on that page. There are, obviously, better uses for these transforms, but it’s easy to see it at work there. Also see this screencast. It shows a rendering error, but it’s a better use of the tech.

Now kick it up a notch with 3d transforms. They only work on the iPhone and iPod touch for now, but they’re quite nifty. See these examples: one, two. Paul Bakaus offers more detail, and Matthew Congrove offers this example of flick navigation.

I’m a fan of the Sandbox WordPress theme because it does so much to separate application logic from design, and a few small changes to the CSS can make huge changes to the look of the site. I think that’s the idea behind Yahoo! Developer Network’s Grids CSS library. That is, well structured HTML allows very sophisticated styling. All you have to do is plug in your content. To wit:

The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

That got Alister Cameron excited; he’s building a Sandbox-inspired, Yahoo! CSS-based WordPress theme he’s codenamed Vanilla.

(via)

I’m a WordPress Partisan, so I agree with Mark Ghosh’s criticism of this WordPress vs Drupal Report. Still, it reminds me that I should point out XXLmag, SLAM Online, and Ford among the very non-bloggy sites built on WordPress.

Etre‘s Colour Check.

The question:

What’s a good user-friendly Macintosh web development program? A friend called. She’s thinking of buying Dreamweaver, but is afraid it will be overkill. She found Frontpage to be easy and needs something similar.

My answer:

If the intent is to design individual pages on an unknown number of sites, then I don’t have a recommendation.

If the intent is to build a site (or any number of sites), then I’d suggest looking at WordPress. It’s an open source CMS, and there’s a hosted version that makes it easy to try out at WordPress.com.

What I didn’t say, well, it was buried in my answer, was that I see a big difference between designing a page and building a site. The tools are very different.

Just when we started wondering how much longer flickr would be beta, they announced gamma.

The new design had me scratching my head for a bit, but I’m coming to like the changes. The menu/toolbar in the header has direct links to a lot more stuff, while the stuff in the footer has many fewer links. I can’t really tell if there are any links missing there, or if they’re just organized better, as I really only used one or two of them anyway.

Searching is improved, and now there’s a fancy menu that pops up when you mouse over a buddy icon. Go take a look at it all.

Overall, it’s a nice improvement to my favorite online application.

“Web Pages That Suck: learn usability and good Web design by looking at bad Web design.”

37signals takes on Google and suggests some improvements.

I stumbled across the sometimes funny How To Live Your Life and got curious about the theme. Turns out it’s by Sebastian Schmieg, who keeps things real at kingcosmonaut. The theme is Blix, but the kingcosmonaut site is much cooler.