CSS+Javascript power. Fancy menu. Really nice Flash look-and-feel in JavaScript, which means “I have something that looks cool that will degrade gracefully.” Very bouncy and round. I was right when I thought it used the famous Sliding Doors technique for its stretchiness, which means I follow A List Apart too closely. (via Molecular colleague Paul Irish.
technorati tags:mootools, menu, stolenlink
For all you obsessive designers that feel the need to style every possible form input (thus making the web browser look and feel exactly like the Mac’s Aqua interface).
File inputs (
) are the bane of beautiful form design. No rendering engine provides the granular control over their presentation designers desire. This simple, three-part progressive enhancement provides the markup, CSS, and JavaScript to address the long-standing irritation.
Styling File Inputs with CSS and the DOM // ShaunInman.com
I’m all for making things pretty. However, users have been trained for a long, long time to expect things like file inputs to look and feel a certain way. Are our designs worth retraining users or bending users’ expectations for how these things should behave?
(via Ajaxian).(Also, the top Flash thing on that site with the trick makes me sea-sick, in a “wow, that’s cool” way. :-)).
technorati tags:design, forminput, css, javascript
Protoscript is a simplified scripting language for creating Ajax style prototypes for the Web. With Protoscript it’s easy to bring interface elements to life. Simply connect them to behaviors and events to create complex interactions.
Wow, this is awesome. I like how it sits on top of both jQuery (for the quick and dirty syntax) and YUI (for the heavy lifting).
technorati tags:prototscript, javascript, prototyping
With thumbalizr you can take screenshots of any webpage you want.Use it for your presentations, documentations, visualisations or your webpage.
thumbalizr - a website thumbnail creator
So much for the old ALT+Print Screen.
technorati tags:screenshot
Adobe’s running a bus tour to introduct/promote its new AIR framework to developers like you and me. A bus tour? With an API? Very Web 2.0.
Larry from work pointed out DENIM, a tool for early stages prototyping. This tool looks like it has a lot of potential for those initial "sit and sketch ideas" sessions that start off every project and are often the most difficult to capture. ("Does anyone have a camera to take a picture of this whiteboard filled with our ideas?")
technorati tags:denim, rapidprototyping, design
In some cases, a design calls for a column with a background color blending into a gradient (or blending into gradient fading into white for a little "fade out" effect). That’s not terribly difficult to do when you’ve got a column with a fixed height: just cut a one-pixel-wide background image and use background-repeat:repeat-x in your CSS. That will create the effect you’re looking for: a full column width and column height gradient. But, what if you’re trying a background gradient in a column with a liquid height?
Here’s an example of what we’re trying to do, with CSS and HTML created by yours truly at the day job. Check out the left column. Essentially, we’re using the two-column layout described here and we’d like one of our liquid height columns to have a background gradient (or, in TheLadders example, a solid background color moving into background gradient fading out to solid white). It’s easy to do in four lines of CSS. This is the basic premise:
What does all that code look like? Something like this:
div#leftColumn{
background-color:#333;
background-image:url(images/gradient.gif);
background-position:bottom;
background-repeat:no-repeat;
}
Pretty simple, eh? background-position ensures our gradient sits at the bottom of our column no matter how tall it is, while background-repeat ensures we only see it once. You’d like a top-down gradient? Use background-position top. As the example shows, we get a pretty little visual from some pretty short code.
How do you make product specifications comprehensive enough for AJAX, Web 2.0 apps? Simple boxes and arrows aren’t going to cut it: your spec must talk about complex interactions and behaviors, timings (of updates or polling), and application states. In short, you’re not just writing a document that talks about how code should work; you’re writing a document that talks about how people should work with your code.
Adaptive Path took a stab at the Web 2.0 spec and what’s beyond wireframes and came up with a three-pronged approach to documenting Web Twenty apps. Their approach is as comprehensive as any I’ve seen. However, cranking out specs like this seems like a product of having a lot of time (read: billing clients for hours worked) and may only play out will on large, highly interactive projects. (On short projects, these specs might take longer to build than the actual end product).
Specs really do help development, and Adaptive Path’s spec helps capture all of the important pieces of end-user interaction that make or break an app. Ultimately, these things are only as good as your product team: the people responsible for building the spec must have comprehensive knowledge of what can happen in an application for them to document that behavior or they must be willing to work with, and adapt their ideas to, the knowledge of practicing developers or designers whose knowledge of possibilities is greater. In all, writing specifications should be an iterative process with input coming from across all disciplines, a change advanced web applications are forcing to happen.
Don’t Click It is an interesting slant on the user interface: what would the UI be if clicks weren’t allowed? As a trained clicker, it’s amazing how navigating through this interface using only gestures feels both intuitive and wrong: the years of training almost invalidate the ease of movement. It’s a very odd experience that led me to wonder if this is what navigation is like for people who cannot, for whatever reason, click a mouse button.
Update: Thinking about this more, I’d call the interface itself "natural but wrong": the gestures feel like both at the same time, as ease of use runs into convention and learned behavior.
technorati tags:mouse, gestures, dontclickit, navigation
