SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Design Tips: Page with Face Cards

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    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?)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    And how would I tell if this is HTML4 or HTML5?
    Look at the DOCTYPE... it's neither HTML4 nor HTML5...
    Code:
    <!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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ronpat View Post
    EDIT: After looking at the WSJ face cards, this one is indeed pretty cool. It's quick and effective.
    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.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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". Personally, I would try to come up with a css solution rather than rely so heavily on JS to present important content.

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    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...



    Debbie

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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)

    Attachment 62508


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

    Sincerely,


    Debbie

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,456
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    CSS drop shadows work fine with an HTML4.01 doctype. The only requirement is that the browser understands the CSS3 box-shadow property.

    Sincerely,
    - not Ralph -

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    Someone is fussy today...
    Four days ago, actually.

    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:

    Code:
    <!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:

    Code:
    -moz-box-shadow: 4px 4px 10px #999;
    -webkit-box-shadow: 4px 4px 10px #999;
    box-shadow: 4px 4px 10px #999;
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,756
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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?!

    Thanks,


    Debbie

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,107
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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?!

    Thanks,


    Debbie
    You're welcome.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •