Design Tips: Page with Face Cards

HTML & CSS
1

I just stumbled across this really cool page in the Wall Street Journal…

The Second-Term Shakeup

Based on what I could gather from FireBug, it looks like they just used a lot of DIVs and maybe some HTML5?

Can you give me some pointers on how to accomplish something similar?

And how would I tell if this is HTML4 or HTML5?

Sincerely,

Debbie

2

It’s powered by a bunch of JavaScript that’s not very accessible—a design fail. I’m surprised you call it “cool”, as I thought you shunned this kind of stuff. But that concept of “cool” is what lures many a designer into creating confusing, inaccessible junk like this all over the web. Users don’t need cool; they need accessible content.

Here’s a nice site I found yesterday that takes a realistic look at another silly, “must have” feature on every second site—those really cool carousels: http://shouldiuseacarousel.com/

(Bleh. C’mon, it moves, so it must be cool, right?)

3

Look at the DOCTYPE… it’s neither HTML4 nor HTML5…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

and ditto Ralph’s sentiments about carousels. Big turn-offs, every one.

EDIT: After looking at the WSJ face cards, this one is indeed pretty cool. It’s quick and effective.

4

At the end of the day, though, I wonder if that kind of structure really helps anyone, or whether it’s just cool to us web designers. Turn off JS and the content disappears on that page, which is design from hell, IMHO.

5

Agreed. I thought about my quick edit after-the-fact and realized that I didn’t reinforce the simple fact that the fancy effect breaks if JS is turned off. Too much reliance on JS for layout, IMHO. The “coolest” part of that “slider” to me was that the elements were shifted very quickly… no gradual transitions or time consuming moves… ie, nothing “slid”. :slight_smile: Personally, I would try to come up with a css solution rather than rely so heavily on JS to present important content.

6

News to me its JavaScript.

It looks like a a static page…

And from what I could see in FireBug, it looked like it was done with HTML and CSS only. (If you open that page in FireBug, you can see a style that apparently gives a drop-shadow to the DIV. I just figured that was maybe HTML5 since I don’t think you can do that in HTML4/CSS2? Are you sure that you are correct on this one, Ralph?)

But that concept of “cool” is what lures many a designer into creating confusing, inaccessible junk like this all over the web. Users don’t need cool; they need accessible content.

My entire website is HTML and CSS so I’ve hardly went to “the dark side”…

Here’s a nice site I found yesterday that takes a realistic look at another silly, “must have” feature on every second site—those really cool carousels: http://shouldiuseacarousel.com/

(Bleh. C’mon, it moves, so it must be cool, right?)

Someone is fussy today… :wink:

Debbie

7

Ralph,

After re-reading my OP, I think what I wrote was too vague, and that you completely misinterpreted things…

What I liked about the page was how each person represented on the page looks like a “Playing Card” with a drop-shadow that makes things look 3-dimensional.

(I had no clue that if you clicked on a person you got all of that JavaScript jazz?! And, NO, I don’t want or care about that…)

And to my original point, I am 95% certain you can get the effect I liked with just HTML and CSS, although I’m not sure which version of HTML and CSS you need to do that.

Here is what I was after… (see screenshot)

Again, I just like the drop-shadow and how it takes an otherwise FLAT looking page, and makes it jump out at you. (Even if you disagree…)

BTW, my entire website is JavaScript-free…

It is all either hard-coded HTML4 or dynamic HTML4 - via PHP - along with CSS2 (I think?!), and it looks awesome without all that JavaScript crap… :cool:

Sincerely,

Debbie

8

CSS drop shadows work fine with an HTML4.01 doctype. :slight_smile: The only requirement is that the browser understands the CSS3 box-shadow property.

Sincerely,

  • not Ralph - :slight_smile:
9

Four days ago, actually. :stuck_out_tongue:

What I liked about the page was … drop-shadow

O, right. Yes, that’s a CSS3 property, as ronpat says, that is supported in all modern browsers (down to IE9). Here’s a simple example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
	width: 200px; 
	height: 200px; 
	border: 1px solid #222; 
	box-shadow: 4px 4px 10px #999;
}

</style>
</head>
<body>

<div></div>
			
</body>
</html>

A lot of CSS3 properties still require vendor prefixes, but a few, like border-radius and box-shadow, really don’t need that now. If you did want to support some older prowser versions, you could do something like this:


-moz-box-shadow: 4px 4px 10px #999;
-webkit-box-shadow: 4px 4px 10px #999;
box-shadow: 4px 4px 10px #999;
10

Ralph,

1.) Are we in a better mood now?

2.) Do you approve of my desire to maybe want to use drop-shadows using CSS3?

3.) And can I please be restored to the top of the “I don’t care for JavaScript” stack?! :wink:

Thanks,

Debbie

11

You’re welcome.