Meta Refresh 2014

On the construction of user interface on the web

Benjamin Lupton


DocPad. Streamline your web development process. Integrate your team.

Submitted Dec 20, 2013

DocPad Logo

This talk will show how DocPad, a decoupled web architecture, is streamlining the web development process, while keeping your team integrated throughout. It’ll cover:

  • Technical aspects of the decoupled architecture (watching, pre-processors, templating engines, database querying, dynamic abilities, and the new admin-interfaces).

  • High-level demonstrations of how DocPad allows your designers to prototype in HTML with mock data, the developers to add real data and interactions, and the marketers to do up content, all fluidly, all together, as a single part of a single streamlined and integrated workflow. Rather than seperate, non-backtrackable, segregations.

  • Real-world case studies of how companies such as Myplanet Digital, one of Canada’s largest web development firms (they work with Fortune 500 companies), have embraced DocPad throughout their entire company as a strategic decision to streamline their complete web development process, from their code all the way through to their team!


2013 was a big year for DocPad. We hit 500 daily users, travelled across the world, got funded ever since July, and developed a new decoupled admin interface called Web Write’s InlineGUI allowing for Content Creators to work directly on highly custom DocPad websites.

2013 brought together the original vision of decoupled content creation experiences into DocPad. We now have workflows for each step and role throughout the creation experience, separated by only which plugins you have installed:

  1. Designers work with the team on scoping out the design, or you pick a free pre-existing DocPad website
  2. Implementors (and designers if they wish) start coding up the design together in HTML, CSS, and JavaScript, assisted by DocPad’s pre-processor, templating engine, and livereload support
  3. Developers start working directly with the templates, making them live and responsive, adding in dynamic abilities, database queries, and custom functionality
  4. Bloggers continue writing their content in the best experience for them like Tumblr, or Wordpress, while having DocPad pulling in the remote data directly into its database for rendering
  5. Marketers and Clients use the DocPad adminstration plugins for tweaking the copy of the website

All the while, still using the same website, the same project, for everybody to fit-in. To truly appreciate the simplicity of this, lets take a step back and imagine how corporate websites are traditionally implemented in big (and even small) firms:

  1. Designers work by themselves on implementing a design, or you pick a free template online
  2. Implementors code it up in raw/plain CSS, HTML, and JavaScript without templating engines, layouts, pre-processors, etc — designs are now incredibly difficult to change from hereon
  3. Junior CMS Developers then implement the implementor’s templates into their content management system, adding things like layouts and pre-processors to the mix — implementations are now incredibly difficult to change from hereon
  4. Senior CMS Developers then update the templates with live data and dynamic abilities — cms implementations are now incredibly difficult to change from hereon
  5. Bloggers, Marketers and Clients all must wait for the Senior CMS Developers to finish writing the custom modules for the admin interface (that they now all must use, rather than the interfaces they were use to before), or they will simply find it too difficult and call the web firm to implement the changes for them instead

If that drag sounds familiar, then do vote up this talk, as there is a better way.


This proposal is a work in progress. I’d love for your feedback on how to make it even better! on how you can get the most value from this! What would you like to see?!? What problems are you facing in this area?!? Could DocPad possibly help you address them?!? What specifically would you like me to cover?!? Let me know! and I’ll see what I can do in implemtning this feedback to make sure this talk adds the most value to you!

Also, if you believe in this talk, and want to make it happen. Remember to vote up this talk by using the links at the top of this page.

Speaker bio

Benjamin founded DocPad 4 years ago. He spoke at MetaRefresh 2013 on why the next big thing sucks, a tale of his personal struggles as a creator making the next big thing, with tips on how to stay focused for such a long time, while dealing with big things being created all the time in our highly competitive field.

Today, he leads the DocPad community full-time thanks to the sponsorship and donations of the DocPad community. He believes firmly in the vision of decoupled content creation experiences, and sees many years of innovation left in it.


{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more