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.

New Theme

For the past year or so I’ve been wanting to design a non-bloggy theme for this site — a beautiful theme with a magazine-like front page showing the most recent post in a handful of categories. But I’m further from it now than last year, so it’s time to move on. Which isn’t to say […] » about 300 words

Detecting Broken Images in JavaScript

We’ve become accustomed to link rot and broken images in nearly all corners of the web, but is there a way to keep things a bit cleaner? K.T. Lam of Hong Kong University of Science and Technology came up with this sweet trick using jQuery and readyState to find and replace broken images: jQuery('span#gbs_'+info.bib_key).parents('ul').find('img.bookjacket[@readyState*="uninitialized"]').replaceWith('<img src="'+info.thumbnail_url+'" […] » about 200 words

Web Design Frameworks?

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.

People Ask Me Questions: Web Design Software (or is it Website Management Software?)

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.

Flickr Goes Gamma

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.

Native To Web & The Future Of Web Apps

Yahoo's Tom Coats was of seven star speakers at <a href="http://www.carsonworkshops.com/">Carson Workshops</a>' <a href="http://www.carsonworkshops.com/summit/">Future of Web Apps Summit</a> last month. As usual, <a href="http://blog.ryaneby.com/">Ryan Eby</a> was pretty quick to point out <a href="http://www.plasticbag.org/archives/2006/02/my_future_of_web_apps_slides.shtml">his slides</a> to me, mostly by way of pointing out <a href="http://jeremy.zawodny.com/blog/archives/006323.html" title="Tom's Future of Web Apps, Translated for Product Managers (by Jeremy Zawodny)">Jeremy Zawodny's translation</a> of them. » about 500 words