In my time working on a wide variety of different solutions I have developed boilerplates and all kinds of frameworks that make my life easier but none that make the entire production teams and customer’s lives easier… until I joined ClearPeople.

As a front end developer our task is usually the same from project to project… 

Get the awesome designs from the designer and bring them to life using our standard arsenal of wizardry, HTML5, CSS3, JQuery etc. Then we hand over the HTML files to a .NET or PHP developer and they perform their own brand of magic to integrate the CMS solution. 

Simple… right?

As I am sure any experienced developer, no matter what your discipline is, will know it is never that simple!

There are so many factors that can make the integration of your HTML into the CMS solution your client has chosen a nightmare. 

“One cannot just simply hand over their files with thoughts of moving on to the next project and succeed.”

One thing that we produce for customers here at ClearPeople that I haven’t seen in other places I’ve worked in, is a fully functional front end prototype! No CMS solution but a fully navigable “site” none the less, to be used for user acceptance and usability refinement. ClearPeople primarily develop .NET solutions, so a fellow developer of the .NET persuasion and I put our heads together and developed a .NET prototyping platform, the likes of which I have never come across before, that makes for almost seamless integration into a multitude of .NET CMS solutions. 

We wanted to keep it simple and easy to use for any kind of developer to pick up and use it, we defined a few requirements:

  • Semantic and valid HTML
  • Easy page creation
  • .NET outputted markup for controls
  • A masterpage and sub layouts
  • Simple folder structure
  • Basic XML based page properties
Once we had our requirements we (I say we but I mean one of our senior .NET developers) set to work creating the backbone for the platform, the “database”. We wanted the ability to create pages and to be able to drop our controls effortlessly in-page. We developed an XML file for the application to use for adding and placing controls on the pages we had assigned them to.  We defined some tags that the prototype would pick up to define pages, child pages and the controls therein with a few added extras like body classes, menu name (for breadcrumbs), and page titles etc.

front end development coding

Example of XML “database” file

After a 2 hour crash course in .NET and the difference between .aspx pages and .ascx controls I was able to build my controls and pages effortlessly in a matter of hours.

Creating a control is as simple as adding the markup to an .ascx file and then using the xml file to assign that control to a placeholder which we have defined within a page (our .aspx file).

front end development work

Example of in-page placeholder for assigning controls

On top of the “backend” functionality we added a front end framework to deal with presentation. This consisted of our foundation grid, a 12 column grid we use in both design and front end development. The grid is fully mobile optimised and set up for either a fluid, responsive or adaptive front end solution. It also includes our standard set of custom jQuery functions for interactivity, enabling native mobile functionality including gesture support.

The prototype has become a real time saver, is a great point of reference for developers to ensure front end always replicates the designs throughout the build, and is incredibly useful for the QA team too. All our teams have now adopted this as the standard development process and it has stopped much of the hair pulling around integration issues.

Author bio


comments powered by Disqus

Related Articles

Sign up to our ClearThought newsletter

Get inspired and learn something new by subscribing to our FREE newsletter. It’s full of ClearPeople's thought-leadership whitepapers, blogs, events, and much more. We promise to not use your email for spam.

Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.