SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Nov 2004
    Location
    london
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,028
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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:
    PHP Code:

    <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
    Last edited by awasson; Apr 10, 2013 at 12:43. Reason: spelling
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,028
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    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:

    HTML Code:
    <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:

    HTML Code:
    <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:

    HTML Code:
    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:

    HTML Code:
    <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
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •