Sent to the office colleagues:

Very nice interface and use of technology (javascript libraries Behavior and Prototype). The design really supports the interface (note how all columns are even and each panel has a solid top edge which scream "draggable," to promote and invite users to drag items around the page, yet dragging things around keeps the newspaper column feel in tact). Of particular note is the introductory steps they present to take you through initially building your page, which are a great, unobtrusive wizard. In all, it’s a pretty nice take on the "AJAXy homepage."

Josh, one of the guys I work with, pointed out how well the screen resizes, which is very true. Fonts scale pretty well, too. Very "scalable" design, in terms of screen size and what’s on the screen.

technorati tags:espn, redesign, ui, interface, design, ajax, behavior, prototype

The final release of IE7 is fast approaching … and I mean really fast … and will be delivered to customers via Automatic Updates a few weeks after it’s available for download. We want to ensure that you are ready and the information below will help get you there.

IEBlog : IE7 Is Coming This Month…Are you Ready?. I hope that IE7 site-wide audit I’ve been pushing for at work gets bumped up super-high priority…

There’s also a lot of complaints about MS pushing out this update to everyone. I, for one, am actually in favor of it. Why? Because it means there will be a lot more uniform distribution of browsers: we won’t have
to worry designing and developring for a staggering amount of stragglers that never upgrade, because they’ll all be pushed to the new product at one. That said, I’ll echo the words of one commentor on the MS blog I’m citing: my job is about to get harder.

technorati tags:IE7, cross-browser, web development

I’ll admit it: I’m a closet designer. Yeah, writing code is great, but there’s absolutely nothing like writing code to build something you designed. It’s like the best of both worlds: you’re really building from scratch everywhere, and you have complete artistc freedom to create. (Plus, you have a great opportunity to design for implementation: you can build a design with code in mind, instead of just making something that looks cool than passing it over the wall).

Here’s one of my designs that made it live. Stone is my big big boss’s (my company’s CEO) blog. The design is straight out of my head and, I think, looks pretty good (and let me make copious use of my Photoshop skills). Note the free benefit of that textlink on the right-hand side. Thanks Marc!

Ever need a character code for that one goofy character you have to stick in your HTML? TnTLuoma.com has one of the most-comprehensive character code lists I’ve ever seen (and I’ve seen a lot of them). I keep this one bookmarked at all times.

While on this topic, here are a couple tips for when and how to use character codes:

• If you’re building an email, always use a character code and make sure to substitute character codes for non-standard characters when pasting from a Word Doc. Read that last part again. You cannot paste from a Word Doc into an HTML file and expect it to work. MS uses special, decorated qutoes and apostrophes that wind up (most often) as ? in your HTML code.
• Use the numerical code equivalent, because textual code equivalents are not always supported. While numerical codes are not guaranteed support, they are better-supported than their textual equivalents (and every textual code’s numerical equivalent is supported while the reverse is not true).
• Always preview your HTML when it contains character codes. It’s very easy to forget that last ;, the code istelf might not work, and these items look better and different font sizes (generally a larger size than your document’s base font). Preview, preview, preview!

technorati tags:html character codes, ascii, ascii codes, html, web development

The CSS background-color property makes things look nice and pretty. But, they don’t play well with margin in a block-based layout where the body tag’s background-color is different from your content’s background-color, especially when you’re using a liquid height layout.

Let’s say you’re stacking three divs on top of each other for a nice stack. That middle div has a background-color. Now, adding a block-level element with built-in margin (like a p or h1) to that middle div will cause a big huge band of color where the element’s enforced margin pushes down the block beneath it. (Is it a bug? Nope. Just doing what it’s supposed to.)

How in the heck to you get rid of that band of color? Simple: add something below that block-level or margin-enforcing element, or add padding to the block-level element’s container. The margin is enforced on the item below, which gets pushed down, but also stretches the container’s height, keeping the color in tact. Ditto with the padding: the padding forces a height on the container, keeping the background in tact and delightful.

Feel like playing with margins? Give a margin-bottom of 0 to that problem element. Or, give a margin-top of a negative value to the block that’s being pushed down (it’s roughly the line-height or specified font-size that’s in effect on the container).

There’s four simple, friendly ways to make margins play nice. The third is probably the cleaneast; the fourth the dirtiest (especially if another developer doesn’t see that negative margin, and wonders why blocks are overlapping after he’s made a change to the code). But, all do the job.

technorati tags:css, background-color, margin, html, liquid layouts

To officially have a Web 2.0 compliant site, you have to make rounded corners part of your design (and big text, and bright colors, and …). How do you make them?

Well, until all browsers support the W3C CSS rounded corner spec, you’re probably stuck designing them for yourself. But, if you use Photoshop, you’re in luck: Colin Smith, at Photoshop Cafe, has a quick-and-easy guide to Photoshopping rounded corners.