Web Design

Site Load Performance Benchmarks

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.

CSS Speech Bubbles

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 {
    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-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */

More examples on Nicolas’ site.

Sara Cannon On Responsive Web Design At WCSF

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).

Notes To Self: Twitter’s Website Rocks On Mobile Devices

Twitter’s mobile site rocks on my iPhone. Especially worth noting: they’ve figured out how to pin their header to the top while scrolling the content in the middle. They’re also using pushState() and other cool tricks to make the experience feel very native, but the scroll behavior is rare among web apps on iOS. Kent […] » about 200 words

GigaOM Mobile Site Launched

This week we launched a new mobile theme at GigaOM.com. It was out for just a day or two before Dennis Bournique surprised us with a review on WAPReview.com. I have no way of knowing if I would have linked to the review if it wasn’t positive, but I would likely have found a way to […] » about 300 words

Martin Belam’s Advice To Hackers At The Guardian’s July 2009 Hack Day

An amusing hacks-conference lightning talk-turned-blog post on web development: “Graceful Hacks” – UX, IA and interaction design tips for hack daysMartin 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.”

Tips To Publishers From Google News

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.

CSS Transformations in Safari/WebKit (and Chrome too?)

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.