Outsourcing HTML/CSS guidelines

Trevor Chinn asked on October 19, 2016 10:51

A rather strange request, but I have been scouring the net for blogs or official Kentico documents, but have been unable to find anything relevant, so I turn to the devnet community for some guidance regarding outsourcing of the html/css/javascript coding to (non Kentico) web design firms.

On projects that exceed the prowess of our in-house designers, or when the workload is getting too heavy, we outsource the base coding for a design to various web design companies, receive a compressed file with all the html/css/javascript and media back, and then our developers can focus on implementing the Kentico based features, which allows us to tackle more projects simultaneously than were it all done in-house.

That being said, we've come across some situations where the web design companies return source code that is rather unpleasant to move over to Kentico, and thus we are in the process of creating a sort of "Front end design guidelines" for the companies that we will be outsourcing to. We already contacted support and while there is a lot of fantastic documentation about the base process for building sites in Kentico, our methodology is quite rare (I assume) and thus nothing was readily available.

Does anyone perchance have similar experience with outsourcing the front-end and then taking that and putting it into Kentico, and if so, did you have any tips/requirements that you passed along to the designers beforehand? Any and all information would be helpful. To give you an idea of what I am talking about, I translated four of the easy ones into English (they're in Japanese ordinarily):

  • (Very simple) Kentico uses Webforms so always include a form tag right under the body while designing the site to make sure that styling doesn't get broken when it is ported over to Kentico.
  • When styling with CSS, rather than using classes or IDs on each element, style by containers (such as a div with a class) and then use sub element styling to provide easy maintenance once the code is moved into Kentico
  • div#exampleID p {aaa:bbb}
  • div#exampleID a {eee:fff}
  • div#exampleID li {xxx:yyy}
  • div#exampleID li a {ccc:ddd}
  • Do not apply style tags or class/IDs directly to image tags as it creates unnecessary work for content creators on the Kentico side to manually add those styles when selecting images from the media library.
  • Where possible, keep HTML tag nesting as shallow as possible to avoid cluttering the Kentico interface with container zones, or causing unnecessary use of "content before/after" sections to move the code to Kentico.


Recent Answers

Laura Frese answered on October 21, 2016 06:55

I find it helpful to request that front end developers create the css in such a way that it flows in the same order as it does on the page (which should be standard but some dont know this), and COMMENT the css for the pages / sections that use that css block with the kentico css comment so that its easy to tab to the sections within Kentico's css app.

For multi site instances, I would also request that css and or js for common things like bootstrap, jquery, carousel sliders, etc use a CDN so that developers for each instance dont keep adding the same things to the cms & cluttering it up.

1 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.