I am writing this blog mainly to share my experience and thoughts on HTML designs which we get from customers when we are implementing Tridion Sites (SDL Web/Tridion). Even though DXA is shipped with layout of web pages, it might not be sufficient enough meet customer’s expectation with respect to look and feel of the website. So far I did work with four implementations for different customer and each time it is different designs or layout expected from these customers.

But, when I say it is different designs from each customer there are somethings which are in common to develop these design when it is used to implement with SDL Tridion sites. Thus, in this blog I am trying to cover such basic things which has to be considered when designs are prepared to be used with Tridion Sites.

• Modular design: Consider each element as a Module
  

  What I mean here is, whenever we adding a div or an element to the page, conceptualize it as module that can be used anywhere else whenever it is required.

  For example consider following HTML page.

  
  
  

  In above HTML code, we have div with class “content-area”. When we look at the highlighted area in above image, this piece of code can be consumed as a component template (Entity view) and same can be used in multiple places. So, when we are adding some styles to these or design something on div make sure that it is generic enough to use it and doesn’t restrict itself to render some specific content.

  Well, with my above suggestion it doesn’t mean you can’t have such specific designs. You can have them, but it will be different component template and it can’t be reused.
  
  
• Avoid inline styles and JavaScript:
  

  As it is recommended from W3 standards, even I suggest to not use inline styles. The disadvantage of such inline styles with respect to Tridion sites is, if there are any changes has to be done in styles, then all component templates(or Entity views) has to be updated. But, if you add such styles, it is easy to do such modification on CSS from a designer itself without the need of Tridion developer or who knows Tridion.

  Also for JavaScript functions, it will be difficult to maintain them when we have them as inline functions.

• Adding JavaScript:
  
  If designs contains some JavaScript functions, it is recommended to load after the page is loaded completely. It can be done using some of the functions like window. Load or etc., depending on designer’s comfort.

  This is because, the content and DOM which is loaded to the pages are dynamic, and your JavaScript function will work only after the DOM structure is loaded completely.

• Don’t use “id” to define the styles:
  
  There were few scenarios where I came across in which ids where used to define the styles. This is not a good practice. Remember, ids are unique. So when styles are applied to HTML elements using them, you can not apply the same styles in some other place since you can use ids. So make sure that styles are defined only with class names. In below example code, you can see what is id and class name and how it is added to html elements.
  
  
  
  

  These are just some basic points which I thought to share. I will be writing another blog with some more points to be considered.