A web front-end for Epitomy Solutions

The Brief

Epitomy Solutions are a Sheffield-based business that provide a number of software products in the PIM market place, specifically catering for clients that have an aftermarket for spare parts.

They were looking to advance one of their web-facing products and invited Techware One to work on the project and see what extra value could be added.

The Solution and Strategy

The strategy had already been largely defined when Techware One joined the project.  The data was held within Microsoft SQL Server, the logic was contained within a series of configurable dot net c# libraries and the solution would be bound together by Orchard CMS.

They also had a collection of screen comps, produced in Photoshop PSD format that they wanted implementing as a series of stand-alone responsive HTML files. This is where Techware One were asked to flex their web-muscles.

The Implementation

For web projects with a number of different teams involved, working simultaneously on different areas of the solution, the best approach is to have a separation of concerns, where each team follow clearly-defined standards and have integration points where their work will merge with that from the other teams.

For our contribution, we broke the task down into different stages:

  1. Produce pure HTML with no styling applied. This allowed focus on ensuring the correct HTML5 tags were used and appropriate WAI-ARIA attributes applied to each.
  2. Implement Javascript for client side functionality.  Again, the lack of presentation at this stage enabled clear vision on behaviour to ensure goals were met.
  3. Apply broad positional-layout to ensure that each of the screen elements was in the correct location on the screen at each resolution.  It was at this stage that we applied a layout framework, with Bootstrap being the preference.
  4. Apply precise styling for exact positioning, colours, graphics, font sizes and weightings.

Breaking the tasks down like this allowed stages 1, 2 and 3 to be completed very quickly and delivered to Epitomy for approval. "Deliver Early, Deliver Often" as the Agile ethos says.

Task 4 was where the meat of the task was involved, but the clear foundations laid in previous stages meant that virtually no difficulties were encountered, allowing a smooth run from start to finish.

Epitomy Project Beacon Home Screen

The Outcome

The work produced by the Techware One team was delivered for integration as the front end on Orchard CMS. With the structure of the HTML being sufficiently modular and cleanly-nested, conversion to an Orchard Theme very simple.

The stand-alone nature of our deliverable also meant that the Epitomy design team had the opportunity to apply some further refinements to their designs. They were even able to try them out directly on the HTML and see the results in a web browser at different screen resolutions, without having to get neck-deep in CMS abstractions.

What the client says

"Epitomy asked Techware One to join one of our B2C web development projects for a long-standing customer, particularly to contribute to the setup and early stages of the project. Their work which involved the production of responsive HTML & CSS templates, ready for integration with our CMS platform was invaluable. Techware One were an important part of the team that successfully delivered a final product on time to the customer that exceeded all expectations. We look forward to continuing our working relationship in the future!"