Web Directions Year round learning for product, design and engineering professionals

Divya Manian designs in the browser. See below for full session description and more resources.

Got a taste for it? Be there for the dev track at Web Directions South 2012.

This presentation was recorded at Web Directions Code in Melbourne on May 24 2012.

Session description

Each website is a product used daily by people to take actions, not just read the content on it. Your product is amorphous, it takes the shape of whatever container it fills: a mobile browser, a touch enabled desktop browser, or a 30″ iMac that is connected to the Internet via tethering. Photoshop is just one of the means to an end in this new age of utilitarian web sites. The new technologies available in HTML5 already allow you to create prototypes quickly in the browser. Learn how to create a prototype from start to finish using these new technologies while taking advantage of quick prototyping tools.

Resources from this presentation

• Slides from this presentation
• A related presentation from Stephen Hay
• Docpad
• Jekyll
• HTML5 Boilerplate
• Sass
• LESS
• Stylus
• BEM: Block, Element, Modifier
• Mustache
• Eco
• HAML
• Faker.js
• Bootstrap
• Codekit
• LiveReload
• Docco
• Style Docco
• Lorem Pixel

About Divya Manian

Divya Manian works for the Adobe Web Platform Team in San Francisco. She made the jump from developing device drivers for Motorola phones to designing websites and has not looked back since. She takes her duties as an Open Web vigilante seriously which has resulted in collaborative projects such as HTML5 Readiness and HTML5 Boilerplate.