A Designer's Guide to Prototyping Ajax
By Kevin Hale2007-11-23
CSS Skills
|
|
Being a designer’s guide, I recognize that this is probably your forte. I’ll try to keep this brief—linking to better sources where appropriate. But yes, you’ll definitely need those CSS skills. In addition to your normal layout shenanigans, here’s what you’ll want to catch up on:
The Display Property
First, you’ll want to know exactly how the display property differs from the visibility property. If you think the display property is only good for making elements appear and disappear, you’re barely scratching the surface. The display property controls how a browser renders the fundamental structure (the box) of every element on a page. It is is an all-powerful property. In addition to making things disappear, the display property can fix a majority of IE rendering problems and even make divs and spans behave exactly like a list element or even a table cell. Specifically, you’ll want to know with confidence the difference between block, inline, inline-block and list-item. PPK always tells this story best.
Controlling Box Generation
While you’re looking up the display property, review the visual formatting model and specifically the section on how to control box generation. The visual formatting model dictates that each element in the document tree generates zero or more boxes according to the box model. You’ll want to know which elements by default are inline and which elements by default are block. You’ll also want to take a look into Internet Explorer’s peculiar responses to “hasLayout.”. Make sure you’re familiar with what elements have “layout” by default and the style properties needed to invoke “layout.”
CSS Specificity
I’ve seen too many stylesheets covered with unnecessary !important
rules that prevented many a developer from changing an element on the
fly. These were usually the result of an incomplete understanding of CSS specificity.
Specificity is used in a browser’s secondary sort to help determine
cascading order. Translated: If you have two (or more) conflicting CSS
rules pointing to the same element, there are some basic rules that a
browser follows to determine which one is the most specific and
therefore applied to the markup.
A selector’s specificity is calculated as follows:
- Count the # of ID attributes in the selector (= a)
- Count the # of other attributes and pseudo-classes in the selector (= b)
- Count the # of element names in the selector (= c)
- Ignore pseudo-elements.
For Example:
* {} /* a=0 b=0 c=0 -> specificity = 0 */
li {} /* a=0 b=0 c=1 -> specificity = 1 */
ul li {} /* a=0 b=0 c=2 -> specificity = 2 */
ul li a {} /* a=0 b=0 c=3 -> specificity = 3 */
a:hover {} /* a=0 b=1 c=1 -> specificity = 11 */
ul li a.red {} /* a=0 b=1 c=3 -> specificity = 13 */
li a.red:hover {} /* a=0 b=2 c=2 -> specificity = 22 */
#candy {} /* a=1 b=0 c=0 -> specificity = 100 */
For more information, check out what Eric and Molly have to say about specificity.
Image Replacement
You will use this probably infinity times. Good thing there’s like a million ways to do it. Know this cold. For Ajax applications, I recommend avoiding a JavaScript method for this. Personally, I love text-indent:-9000px.
More Information
Alright, that does it for our introduction and cursory XHTML and CSS review. Next Monday, come back for DGPA Part 2 : Ajax Wireframing, where we’ll go over several techniques we’ve developed to prepare our markup and CSS for the protoyping process. Until then, please read up on what other developers have to say about the benefits of wireframing and prototyping and let us know some of your thoughts on the topic as well.
Just Build It: HTML Prototyping and Agile Development · Clearly, jumping into HTML sooner isn’t always the answer, but it is a perfectly reasonable option that clearly deserves consideration. Determining whether it’s right for you and your project depends on many different factors.
Getting Creative With Specs: Usable Software Specifications · An effective, usable spec serves two main purposes: First, it elicits feedback early, which helps to avoid problems and misunderstandings later on. Second, an effective spec ensures the software stays in line with the designer’s intentions.
HTML Wireframes and Prototypes: All Gain and No Pain · A great introduction to wireframes and a list of benefits they provide to the workflow process.
How do we do HTML wireframes? · An outline of a conversation between a few intelligent and experienced developers on their wireframing tools and methods.
Prototype Techniques in the Web Design Workflow · Molly briefly goes over a number links to various techniques that can be used to build wireframes and prototypes.
Prototyping With Style · Answers the following two questions: What tools should I use for prototyping? What technologies do I need to know?
Prototyping with Standards and Ajax · Blue Flavor actually incorporates Ajax right into their prototypes. They take various “Ajax includes” and insert them dynamically as needed. Definitely, check out the demo.
Tutorial Pages:
» Introduction
» There are No Heroes in Prototyping
» Relationship Skills
» XHTML Skills
» CSS Skills
