2620.I don't know if Brad Benites was out to teach web design, but he did.
Brad Benites is a resident of Arizona who's also a DMavs fan. In other words, he's also thrilled that the Mavericks ate the Lakers lunch, but whereas my joy is based on schadenfreude and despair, his is based on his team actually winning the series, an alternative I hope the Blazers explore in future seasons.
Proving it's impossible to predict what will go viral (believe me, I wish I knew that magic bullet (Magic and Bullet being two other NBA squads entirely)) He asked the question "Did the Mavericks Sweep The Lakers" with the website http://didthelakersgetswept.com/.
Go ahead and click the link. Even dialup users can do this one.
Are you back? Good. Since web design intrigues, I ordered up a source view, and wasn't surprised to find out that it included very little: What you see is what you got, except for the visitor tracking javascript. However … the simplicity of the design provided a straight-ahead look at some thoroughly modern web design. Here's what it was:
Of course, first, there was some header information. It's what you might expect. Then, came this bit of text:
<style type="text/css">
.yes {
font-family:Arial, sans-serif;
color:black;
font-size:7.0em;
text-align:center;
padding-top:200px;
}
This is just basic CSS. Since it's in the file itself, it's inline CSS. Specifies font family, color, font size in ems, aligns in the center, and gives 200 pixels top and bottom padding. Good old box-model CSS.
The body (skipping the javascript) looks like this:
</head>
<body>
<div class="yes">Yes.</div>
</body>
</html>
The logic used makes it obvious to even the beginner here.
The first block, which defines the display of the characters, is a class selector. What identifies that, of course, is the period in front of the work "yes". Class selectors, of course, can be used wherever, on single things, large groups of things. The other thing is the ID selector, which is used to style only one element at a time. Each has their strengths. And this could have been styled with either an ID or a class selector, but class seems to be the right way to go here; the most simple approach, as demonstrated by the fact that all you have to do is insert the attribute in the div tag, and the job is done.
This is why CSS is so powerful. All you have to do is change one attribute in the selector definition, and the body text changes automatically. The box model makes positioning the text oh, so very easy - and so browser agnostic, you don't need to care (at least with this application) whether you're going to use Firefox, Opera, Safari, or Chrome to view it.
Moreover, a small task like this is ideal for inline CSS, which is typically eschewed in favor of external CSS. That's not to say that external CSS couldn't be used here: that selector could go into a file of its own, say yes.css, and be attached to the file with the tag
<link rel="stylesheet" type="text/css" href="yes.css" />
It would be rather too much design for this little gem, but it would be utterly valid.
In the meantime … the Lakers are out! Swept by the Mavs! Go Mavs!
3 comments:
Awesome article! I'm really glad somebody took the time to write something like this up. You're officially in the .01% of people who actually care how the site was made ;)
Not at all! It may be a little too "inside baseball" and all, but it really amazed me the way this took about a dozen ways I've been told over the years about how and why to do CSS and just gelled it in a way that made it very accessable.
And, also, we're both glad the Lakers, at last, got their backsides wiped by someone. Only way for me that it would have been better is if it had been the Blazers, but that's life, eh?
Strange. Clicking the link up there opened two new windows for me (Firefox on the Dell). I was led to the second one. When I closed either, they both closed. This happened thrice in a row. Then, after a pause, I tried to reproduce my results. Negative - one click, one window. And here I was going to heckle your link-creation skills...
Post a Comment