Web Pages That Suck - learn good web design by looking at bad web design

 

Worst Websites of the Year

Worst Websites of the Year: 2012-2005

bad websites are like sinking shipsWorst Websites
of 2012

Worst Websites of 2011

Worst Websites of 2010

Worst Websites of 2009

Worst Websites of 2008

Worst Websites of 2007

Worst Websites of 2006

Worst Websites of 2005


Daily Dose of Bad Design (Daily Sucker)

Current Examples of Bad Web Design Presented Daily (direct link)

Bad Web Design

Overview (direct link)


Good Web Design


Web Design Checklists


Subscriptions

opens in new window
My Google + Page

subscribe to my rss feed
Subscribe to RSS feed

Follow me on Twitter
Follow me on Twitter

Articles


Everything Else

The Daily Sucker - Current examples of bad web design

The Daily Sucker

Sites featured in articles like Worst Websites of 2010 often are redesigned, which explains why some sites mentioned in my articles don't match their current look. The Daily Sucker features current examples of bad web design which haven't been fixed (yet).

If you see a site that you think sucks, email the URL to me. No personal pages (personal pages are supposed to reflect the individual's personality and artistic freedom) or web site designers (it would look like a conflict of interest), or others of their ilk.

If I think there's some merit to your selection, I may post it along with some commentary. If you know of a site that qualifies, let me know.

Not The Daily Sucker – Your print.css file is hurting you

February 16th, 2010 4:04 am by Vincent Flanders

I ran into two articles about problems in using a CSS file for printing:

  1. Browser Performance Problem with CSS “print” Media Type (December 2009)
  2. 5c media=print stylesheets (February 2010)

It turns out that if you’re using a print stylesheet (shows up in the format <link href=”print.css” type=”text/css” rel=”stylesheet” media=”print” />), every other file has to wait to load until print.css finishes loading.

To get the full effect of the delay, I created a 583Kb print.css file — which may be the world’s largest print.css file — and placed it in the head of this HTML file. Notice how long the page takes to display (I’ve turned off caching and file compression.).

The following picture shows what happens (click graph for larger example):

The page took 7.42 seconds to load. Page Speed gave the page a score of 81. Yslow gave it a “B,” with a score of 84. These two tools are extremely important and should be in your arsenal.

Optimizing the page. I removed the CSS from the <HEAD> of the document and inserted the Javascript code from Article 1 just before the </BODY> statement.

<script>
window.onload = function() {
var cssNode = document.createElement(‘link’);
cssNode.type = ‘text/css’;
cssNode.rel = ‘stylesheet’;
cssNode.href = ‘print.css’;
cssNode.media = ‘print’;
document.getElementsByTagName(“head”)[0].appendChild(cssNode);
}
</script>

</body>
</html>

As you can see in the graph below, the document loads much faster (click on the graph for larger example). All files load in 5.97 seconds, but the whole page (everything but the print stylesheet) loads in 2.11 seconds — the visitor quickly sees the page and doesn’t care that the print stylesheet loads last because s/he may never want to print the page and if s/he wants to print the page, it won’t happen immediately.

Page Speed gave this version of the page a score of 85. Yslow gave it a “B,” with a score of 83. Page Speed liked the page 4 points more, but Yslow liked the page 1 point less.

Since nobody on Planet Earth is going to print a document immediately after it loads, it’s safe to use Javascript to load the print stylesheet. What if they don’t have Javascript enabled? See Article 1 for the answer.

Yes, it’s true that nobody is going to have a print stylesheet that’s this large (it’s composed mostly of comments) and the improvements aren’t as important as caching and compressing your site’s files, but it’s good to be aware of what causes roadblocks in displaying your web pages.

Posted in Not a Daily Sucker, Usability, Web Design |