Daily Sucker - Current examples of bad web design from Web Pages That Suck - Learn good web design by looking at 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.

Thinking for a Living – Not the Daily Sucker for Monday, March 1, 2010

March 1st, 2010 4:04 am by Vincent Flanders

Submitter’s comments: Now this is nice! It has a beautiful horizontal navigation, which you can control by keyboard, too. Needless to say that it breaks my favorite hotkeys Alt-left and Alt-right to navigate backward and forward in my browser.

Just tried to click some post called “Rethink. Redefine. Redesign.” Would be a great idea. When you’re at the utmost left or right position, which you cannot tell as there’s no horizontal scrollbar visible, you automatically jump to the next/previous article. And as you can see at the upper right corner, you can also press the letter ‘s.’ No idea where that brings me, but at least it does something. You can even point with your mouse at the letter ‘s’ and my browser says that I can click on it. I do not dare, as no url shows up on my status bar, so I don’t know what happens.

Oh wait! The ‘s’ was the last letter of ‘Issues’. I just had to make my browser window a bit wider. Lucky me that I have a screen capable of 1280 pixels horizontally. But everybody has wide screens, nowadays, don’t they? (And lucky me I know how to turn off Javascript, which disables this crap and results in a normal, vertical page.)

Vincent Flanders’ comments: This site conveniently classifies itself as “experimental,” which disqualifies it from being a WPTS Daily Sucker — no matter how much the site sucks. And the site sucks much.

The site’s content consists of articles. Articles are composed of words. Words need to be presented in a linear fashion and that means top-to-bottom — not horizontally, which necessitates scrolling (or, in this case, clicking). The navigation goes batshit crazy on the feature pages. This is an information site and people expect to see content presented conventionally. Remember: it’s experimental; it sucks; and it isn’t the Daily Sucker.

There are a lot of contrast problems, as this screen capture by the Juicy Studio Contrast Analyzer demonstrates. Remember: it’s experimental; it sucks; and it isn’t the Daily Sucker.

I hate writing that looks like it came out of dack.com’s Web Economy Bullshit Generator. The modus operandi page of today’s not-the-Daily-Sucker has the following phrase:

We tried to think ahead and create a site that was a paradigm shift in interactivity and turn the traditional blog format on its head – or in this case, on its side.

Paradigm shift? Bullshit. If I want a paradigm shift, I’ll stand in front of the San Andreas Fault and wait for the big one. (Yes, I’ve used the phrase twice on WPTS, but it’s used sarcastically). Remember: it’s experimental; it sucks; and it isn’t the Daily Sucker.

Thinking for a Living

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

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:

Browser Performance Problem with CSS “print” Media Type (December 2009)
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.

</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 |

Found an animated GIF that makes sense.

November 11th, 2009 4:04 am by Vincent Flanders

I’d say that 99.92% of all animated GIFs should not be used on a web site. However; there are the .08% that are acceptable, but they’re hard to find. Of course they are. Here’s an animated GIF whose use actually makes sense.

Posted in Not a Daily Sucker |

An interesting email about architects

November 2nd, 2009 9:09 pm by Vincent Flanders

Your understanding of architects (Architecture — An Industry With Sucky Web Sites) is way off, which is understandable as most everyone views architects incorrectly. Sadly, us structural engineers do nothing to change that perception. Well, some of us do, but few.

“I don’t know what the deal is with architects. For an industry that depends on accuracy and stability, they seem wildly inaccurate and unstable.”

Architects don’t have much to do with accuracy and nothing to do with stability. It’s the structural engineers who provide this for them. It’s no surprise that when they attempt to provide this themselves, in say a web site, they fail miserably at it. They haven’t consulted with a structural engineer for this part of the project.

“They love, love, love, love Mystery Meat Navigation, which doesn’t make sense because they wouldn’t use this technique on their buildings.”

Yes they do love it. And, believe me they try to use it on “their” buildings. Structural engineers manage to squeeze out as much of this as they can before concrete and steel hit the site.

“When it comes to their web sites, architects seem to be one floor short of a complete building. They all need to be redesigned.”

Their buildings wouldn’t be much of a building without structural engineers as well.

I enjoyed the architect bashing. ;-)