Designing in the browser — Divya Manian

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

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.

Related presentations

4 responses to “Designing in the browser — Divya Manian”:

    • By: Graham
    • July 17th, 2012

    As a designer I don’t think I’ll ever be using Jekyll or Docpad. We talk and plan, work together with developers in tandem but we never need to do there work for them.

  1. […] Divya Manian got creative with CSS3, showed us how to be active web developers and also how to design in the browser. […]

  2. Divya, I’ve watched two of your presentations and find your guidance to have been extremely valuable as we’re really still all figuring out how to adapt to this new era of designing for multiple form factors, mobile first, RWD, etc., etc. So thanks!

    So I’ve developed an in browser sort of alternative to style tiles called ditbi: https://​github​.com/​r​o​b​l​e​v​i​n​t​e​n​n​i​s​/​d​i​tbi (get it? no? Design In The Browser Interactively). The github has a link to 4 min video demo.

    You open a style tile like web page, interactively pick colors and font stacks, and export. After export you’ll see values for CSS, Zurb Foundation (it’s optimized for this), Sass, LESS. You can use with Bootstrap too if you wish. If you happen to use Foundation you can copy over the values to _settings_overrides.scss and immediately view a kitchen sink like page which should reflect your color/​font choices.

  3. […] http://​www​.webdirections​.org/​r​e​s​o​u​r​c​e​s​/​d​e​s​i​g​n​i​n​g​-​i​n​-​t​h​e​-​b​r​o​w​s​e​r​-​d​i​v​y​a​-​m​a​n​i​an/ […]

Your opinion:

XHTML: You're allowed to use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>