What's your front end workflow when building new cms pages / content?

Hello,

Simple question but I still haven’t found a perfect workflow in terms of converting psd’s to html and then integrating into a cms.
Recently I’ve been building directly into the cms, currently I’m building into an MVC application powered by EpiServer 7.

In the past I’ve made pages outside of the application and then integrating in, but the downside is you have to rework you HTML for a second time.
At the request of my employer I’ve been building directly into the CMS but this comes with quite a heavy time penalty, things slow down development such as having to ask a backend developer to tweak their code to produce the correct markup or just simply waiting for the page to refresh which can take a while sometimes after recompiling a project.

Has anyone found their prefect workflow, or just found ways to make things less painful and time dependant?

I’d love to hear how you do things.

Cheers,
Stefan

Hi Stefan,

I guess a lot of this depends on the templating engine that’s available in EpiServer 7. I primarily use Drupal with the PHPTemplate engine which allows me to define regions and then use the CMS to place things like headers, banners, navigation, search fields, logins and all other items within so that they can be styled for format and placement.

My process is actually quite quick. Before I get to the design, I’ll populate the site so I have something to work with. Even if I don’t have copy, I’ll create pages and sections so I can click through it while it’s coming together using whatever the base theme is.

For applying the design, I’ll review the PSD and divide the design into regions (and sub regions). A typical site will have a header, banner, left, right and center areas plus a footer. Below is a stripped down version of a theme template page from a recent project:



<div id="header">
    <?php if ($page['header']): ?>
      <?php print render($page['header']); ?>
    <?php endif; ?>
  </div>
  
  
  <div id="banner">
    <?php if ($page['banner']): ?>
      <?php print render($page['banner']); ?>
    <?php endif; ?>
  </div>
  
  <div id="main">

    <div id="left">
      <?php if ($page['left']): ?>
        <?php print render($page['left']); ?>
      <?php endif; ?>
    </div>

    <div id="center">
        <h1 class="title" id="page-title"><?php print $title; ?></h1>
        <?php print render($page['content']); ?>
    </div>

    <div id="right">
      <?php if ($page['right']): ?>
        <?php print render($page['right']); ?>
      <?php endif; ?>
    </div>
    
  </div>
  
  <div id="footer">
    <?php if ($page['footer']): ?>
      <?php print render($page['footer']); ?>
    <?php endif; ?>
  </div>


All regions will be styled position relative so I can use relative and absolute positioning for the elements that will reside within them. I’ll upload the template and basic CSS files to my development server and then I’ll use the CMS and my Browser (with FireBug or developer tools) to write the CSS and jQuery that will eventually become stylesheets and include files for my theme. It’s really efficient and makes it fun because you’re writing code in Firebug while watching the site take on the design.

Hopefully that makes sense… I’ve been refining this process over the past 6 years specifically with Drupal so I’ve probably been pretty casual with my description.

Cheers,
Andrew

Stefan,

I almost forgot the key reason I have come to use this approach and that is because when in the past I had mocked designs up in html, I would always mock it up as the most streamlined html that I could produce but when I got to the CMS, I had to then take into account what the CMS was outputting. I would have a single div for my content but the CMS might nest several divs and spans that I may then have to account for (not always).

Navigation elements were the final straw. My mockup navigation would be nice and pretty:



<div id=""navigation>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/node/2" title="Program &amp; Schedule" class="active-trail active">Program &amp; Schedule</a>
      <ul>
        <li><a href="/content/call-submissions" title="Call for Submissions">Call for Submissions</a></li>
      </ul>
    </li>
    <li><a href="/node/3" title="Sponsorship">Sponsorship</a></li>
    <li><a href="/node/5" title="Registration">Registration</a></li>
    <li><a href="/node/6" title="Location">Location</a></li>
  </ul>  
</div>


The CMS of course is set up for various states of active, following, open, closed, etc so it isn’t as straight forward:



<div id="navigation">
   <div class="region region-navigation">
     <div class="block block-system contextual-links-region block-menu" id="block-system-main-menu">
       <div class="contextual-links-wrapper contextual-links-processed"><a href="#" class="contextual-links-trigger">Configure</a><ul class="contextual-links">
        <li class="menu-list first"><a href="/admin/structure/menu/manage/main-menu/list?destination=node/2">List links</a></li>
        <li class="menu-edit"><a href="/admin/structure/menu/manage/main-menu/edit?destination=node/2">Edit menu</a></li>
        <li class="block-configure last"><a href="/admin/structure/block/manage/system/main-menu/configure?destination=node/2">Configure block</a></li>
       </ul>
    </div>
    <div class="content">
      <ul class="menu"><li class="first leaf"><a href="/">Home</a></li>
        <li class="expanded active-trail"><a class="active-trail active" title="Program &amp; Schedule" href="/node/2">Program &amp; Schedule</a>
          <ul class="menu">
            <li class="first last leaf"><a title="Call for Submissions" href="/content/call-submissions">Call for Submissions</a></li>
          </ul>
        </li>
        <li class="leaf"><a title="Sponsorship" href="/node/3">Sponsorship</a></li>
        <li class="leaf"><a title="Registration" href="/node/5">Registration</a></li>
        <li class="last leaf"><a title="Location" href="/node/6">Location</a></li>
      </ul>  
    </div>
  </div>
  </div>
</div>


So faced with that, I find it easier to work entirely in Firebug with the real code and compose my CSS, which I then add to my CSS file and upload/refresh as I move along.

I’ll create some basic rules to begin with in CSS to sort of reset the navigation elements and then move forward to decorate them. Something like the following:



ul.menu a {
    text-decoration:none;
}

ul li.leaf {
    list-style-image: none;
    list-style-type: none;
}

ul.menu li, 
.item-list ul.menu li, 
ul..menu li.leaf {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    list-style-image: none;
    list-style-type: none;
}


One last thing, I’ve been doing recently is, instead of making my own CSS reset code, I’ve been using Yahoo’s. I link in the following at the top of my base html template file:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.4.1/build/cssreset/cssreset-min.css" />

Anyway, for me it saves a lot of time so hopefully it will for you too.

Andrew