The following is a guest post by Jon Yablonski. Jon is going to show us an example of how we might approach markup such that one component is particularly versatile. It works as-is, and has a standardized way of making variations (adding a single class) that allow the design to be altered to fit the situation.

Our design team didn't have any design principles and it was difficult to determine design success. My job is to design and improve/redesign a legacy CRM system for real estate professionals. We often ran into design limitations because we didn't have any principles to refer to.

We've all heard that when it comes to form user experience, shorter is better. But this guideline fails to account for other factors such as which fields are used, how they're designed, and how engaging the form experience is. That's why Mike Madaio is here to show us the new rules of form design.

If you've made an ice cream sundae before, then you can understand CSS positioning. Your divs are zooming around the screen like Roman candles. They're diving deep into their container, then coming back up to the surface like a whale. They're pushing the other elements out of the way, then leaving the container entirely like an impatient businessman.

Daily deals for creative professionals. Get amazing limited time offers.

Interactive music-making. Build synths & sounds all in the browser, and share your creations. Chrome recommended.