SOP // Home

In this example below you will see how to do a SOP // Home with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by mkinney, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mkinney ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
    <!--Title-->
	<title>C4D Standard Operating Procedure</title>
    
    <!--bootstrap meta-->
	<meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!--OG META-->
    <meta name="description" content="" />
    <meta property="og:title" content="G3 Digital Cheat Sheet" />
    <meta property="og:url" content="http://www2.educational-content.com/digital-cheat-sheet/index.html" />
    <meta property="og:image" content="http://a6dfe4e7426c5836e313-52e79e467a2303cf83e49b089c7da931.r89.cf1.rackcdn.com/digital-cheat-sheet/img/meta.jpg" />
	<meta name="twitter:url" content="http://www2.educational-content.com/digital-cheat-sheet/index.html">
    
    <!--BOOTSTRAP-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="css/custom.css">
    
    <!--GOOGLE FONTS-->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    
    <!--FAVICON-->
    
    
    <!--FontAwesome-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    
    <!--Hover Effects-->
    <link href="css/hover.css" rel="stylesheet" media="all">
    
    <!--SCROLL REVEAL--> 
	<link rel="stylesheet" href="css/animate.css"> 
    
    <!-- INITAL JS -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
    
    <!--Sticky Scroll-->
    <script>
		  function sticky_relocate() {
			var window_top = $(window).scrollTop();
			var div_top = $('#myScrollspy').offset().top;
			if (window_top > div_top) {
				$('#sticky').addClass('stick');
			} else {
				$('#sticky').removeClass('stick');
			}
			}
	
			$(function () {
				$(window).scroll(sticky_relocate);
				sticky_relocate();
			});
	</script>
        
        
</head>


<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

<!--Page Container-->
<div class="container-fluid" id="skrollr-body">


	<!--TITLE SLIDE-->
    <div class="row" id="title-slide">
    
            <div class="col-lg-1 col-md-1 col-sm-1" id="title-left"></div>
    
            <div class="col-lg-10 col-md-10 col-sm-10" id="title">
            
                  <h1>C4D Standard Operating Procedure</h1>
                  <p class="author">v1 <span style="color: #ec9f47;">&nbsp;&nbsp;&bull;&nbsp;&nbsp;</span> September 2016</p>
                    
            </div>
            
            <div class="col-lg-1 col-md-1 col-sm-1" id="title-right">
            
            </div>
    
    </div>
    <!--//TITLE SLIDE-->
    
    <!--NAV-->
    <div class="row no-padding">
    
    <div id="myScrollspy">
         <!--New-->
          <nav class="navbar navbar-default nav-sop">
                          <div class="">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                              </button>
                              
                            </div>
                        
                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                              
                              <ul class="nav navbar-nav">
                                <li><a href="index.html">Home</a></li>
                                
                                <li class="dropdown">
                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
                                  aria-haspopup="true" aria-expanded="false">Print<span class="caret"></span></a>
                                  <ul class="dropdown-menu">
                                    <li><a href="#">E-Books &amp; White Papers</a></li>
                                    <li><a href="infographics-gbooks.html">Infographics &amp; G-Books</a></li>
                                    <li><a href="#">Uberflip E-Books &amp; Other</a></li>
                                  </ul>
                                </li>
                                
                                <li class="dropdown">
                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
                                  aria-haspopup="true" aria-expanded="false">Digital<span class="caret"></span></a>
                                  <ul class="dropdown-menu">
                                    <li><a href="#">Emails &amp Landing Pages</a></li>
                                    <li><a href="#">Microsites</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="listicles-ipapers.html">Listicles &amp; iPapers</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="quizzes-assessments.html">Quizzes &amp; Assessments</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="motion-graphics.html">Motion Graphics</a></li>
                                  </ul>
                                </li>
                                
                                <li class="dropdown">
                                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
                                  aria-haspopup="true" aria-expanded="false">Misc.<span class="caret"></span></a>
                                  <ul class="dropdown-menu">
                                    <li><a href="#">Editorial Style Guide</a></li>
                                    <li><a href="#">Link References</a></li>
                                  </ul>
                                </li>
    
                              </ul>
                            </div><!-- /.navbar-collapse -->
                          </div><!-- /.container-fluid -->
                        </nav>
         <!--New-->
    </div>
    
    </div>
    <!--NAV-->
    
    
    <!--Content Container-->
    
    <!-- INTRO-->
    <div class="row background">
    	
        <div class="col-md-1"></div>
        <div class="col-md-10">
        
        	<p>This site provides standard operating procedures for Content4Demand, primarily for Client Services Managers. 
            For start-to-finish guidelines on specific C4D products, choose the relevant asset types from the menu to see:</p>
            
            	<div style="max-width:650px; margin-left:auto; margin-right:auto;">
            	<ul class="fa-ul good-list">
                	<li><i class="fa fa-check" aria-hidden="true"></i> Word counts, timelines, and other basic information</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i> How to prepare for projects</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i> Best practices for each stage of production</li>
                    <li><i class="fa fa-check" aria-hidden="true"></i> Templates and other tools to be used throughout production</li>
                </ul>
                </div>
                
            <p>The standard operating procedures outlined here supercede all previous guidelines and serve as the authoritiative 
            source on C4D processes. As processes evolve, this site will be updated.</p>
        
        </div>
        <div class="col-md-1"></div>
        
    </div>

    
    <!--Account Team Member Responsibilities-->
    <div class="row background-blue">
    	<div class="col-md-1"></div>
        <div class="col-md-10 divide-mk">
            <h2>Account Team Member Responsibilities</h2>
        </div>
    	<div class="col-md-1"></div>
    </div>
    
    <!-- AT A GLANCE // Account Team Member Responsibilities -->
    <div class="row no-bottom">
        <div class="col-md-1"></div>
        <div class="col-md-10">
        	
           <div class="row no-padding">
            <!--TABS-->
            <div class="col-lg-12">
            
                	
               <!--TABS // Account Team Member Responsibilities -->
               <div class="tab-container">
    
                   <!-- Nav tabs -->
                   <ul class="nav nav-tabs" role="tablist">
                   	  <li role="presentation" class="active"><a href="#am" aria-controls="am" role="tab" data-toggle="tab">Account Manager</a></li>
                      <li role="presentation"><a href="#cs" aria-controls="cs" role="tab" data-toggle="tab">Content Strategist</a></li>
                      <li role="presentation"><a href="#csm" aria-controls="csm" role="tab" data-toggle="tab">Client Services Manager</a></li>
                      <li role="presentation"><a href="#dl" aria-controls="dl" role="tab" data-toggle="tab">Design Lead</a></li>
                   </ul>
                        
                   <!-- Tab panes -->
                   <div class="tab-content">
                   	   <!--Account Manager--> 
                       <div role="tabpanel" class="tab-pane active" id="am">
                            
                         <ul>
                         	<li>Establish and maintain client relationships</li>
                            <li>Determine clients' needs and execute sales</li>
                            
                            
                            <li>Ensure the account teams execute SOWs smoothly</li>
                           		<ul class="sub">
                                    <li>Follow procedures for handing off SOWs to CSMs (see below)</li>
                                    <li>Attend weekly check-in calls with clients (if applicable)</li>
                                    <li>Discuss change-of-scope issues with clients when necessary, and quote new or changed projects</li>
                                    <li>Communicate with clients when projects are at risk of stalling</li>
                                </ul>
                            
                          </ul>
                               
                       </div>
                       
                       <!--Content Strategist-->     
                       <div role="tabpanel" class="tab-pane" id="cs">

                            <ul>
                            	<li>Determine overall strategic approach to the client's content</li>
                                <li>Develop consulting deliverables when necessary, including personas, nurture strategies, content audits, message maps and ideation</li>
                                <li>Provide guidance to writers and CSMs on content storylines, and occasionally review outlines and drafts</li>
                                <li>Write content pieces</li>
                                <li>Assist with finding, onboarding and managing freelance editorial contributors</li>
                            </ul>
                              
                       </div>
                     
                       <!--Client Services Manager-->     
                       <div role="tabpanel" class="tab-pane" id="csm">

                            <ul>
                            	<li>Manage client relationships as the day-to-day point of contact for the client</li>
                                <li>Move projects through the production process within established time frames</li>
                                <li>Schedule and host SME calls and check-in calls</li>
                                <li>Assign projects to writers, review/edit all content, send to clients and process feedback</li>
                                <li>Perform quality control checks at each stage of production for each project</li>
                                <li>Occasionally write short-form content assets</li>
                                <li>Manage project budgets</li>
                            </ul>
                              
                       </div>  
                       
                       <!--Design Lead-->     
                       <div role="tabpanel" class="tab-pane" id="dl">

                            <ul>
                            	<li>Understand and stay updated on clients' branding guidelines</li>
                                <li>Participate in kickoff calls and branding calls, particularly for new clients</li>
                                <li>Collaborate with CSMs and content strategists to produce ideation and drafts for visually-oriented assets such as infographics, g-books and videos</li>
                                <li>Design client deliverables</li>
                                <li>Assign projects to and manage relationships with freelancer designers, video animators and other contributors</li>
                                <li>Communicate directly with clients when necessary regarding branding and project feedback</li>
                                	<ul class="sub">
                                    	<li>Includes holding presentations for clients to explain design approaches</li>
                                    </ul>
                                <li>Stay informed about up-and-coming content formats and platforms, identify which may be appropriate for C4D clients, and advise on how to incorporate into C4D's offerings</li>
                            </ul>
                              
                       </div>       
                       
                    </div>
                   <!--//Panels-->
                   
                        
                </div>
               <!-- //Tabs -->
                 <p></p><p></p>
                    
            </div>
            <!--/IG-->
                
           
           </div>
             
         </div>
        <div class="col-md-1"></div>
         
 	 </div>
    <!-- /AT A GLANCE --> 
    
    
    <!--Sales-to-Production Handoff Process	-->
    <div class="row background-blue">
    	<div class="col-md-1"></div>
        <div class="col-md-10 divide-mk">
            <h2>Sales-to-Production Handoff Process	</h2>
        </div>
    	<div class="col-md-1"></div>
    </div>
    
    <!--ITEMS-->
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
          
           
           <div class="panel-group" id="eml-during" role="tablist" aria-multiselectable="true">
              
              <!--1. AM sends Maggie and Tonya the SOW when it goes to the client for signing. File name includes SOW ID.-->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="eml-headingOne">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#eml-collapseOne" aria-expanded="true" aria-controls="eml-collapseOne">
                      1. AM sends Maggie and Tonya the SOW when it goes to the client for signing. File name includes SOW ID. <br />
                      <strong>3 DAYS</strong>
                    </a>
                  </h4>
                </div>
                <div id="eml-collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="eml-headingOne">
                  <div class="panel-body">
                  
                    <ul>
                    	<li>Maggie reviews within 1 business day and raises any concerns.</li>
                        
                        <li>Maggie chooses a CSM and informs the AM.</li>
                        
                        <li>Tonya chooses a CS and informs the AM. ♦</li>
                        
                        <li>Maggie creates the tab in the spreadsheet and fills in account team and SOW info (just the SOW, not all the projects within that SOW). ♣</li>
                        
                    </ul>
                    
                    <p class="footnote">♣ Skip this step if the client is not new.<br />
                    ♦ Skip this step if a CS is already assigned (due to ideation).</p>
                    
                  </div>
                </div>
              </div>
              
              <!--2. Once the SOW is signed, or the AM has permission from Dana to kickoff without a signed SOW:-->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="eml-headingTwo">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                      2. Once the SOW is signed, or the AM has permission from Dana to kickoff without a signed SOW:<br />
                      <strong>2 DAYS</strong>
                    </a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="eml-headingTwo">
                  <div class="panel-body">
                    
                    <ul>
                    	<li>The AM sends Maggie and Allie (and Tonya, if necessary) all background materials we have so far and the signed SOW. 
                        If the SOW includes a digital asset, send the SOW to Melanie.</li>
                        
                        <li>The AM schedules an internal kickoff call IF ANY of the following apply:</li>
                        	<ul class="sub">
                            	<li>The client is new</li>
                                <li>The SOW includes $50,000 or more of content</li>
                                <li>The SOW includes any strategy/consulting work</li>
                                <li>The SOW includes any rushed projects</li>
                                <li>The AM feels, for any reason, the account team needs to discuss the engagement before the client kickoff call</li>
                                <li style="list-style:none;"><i class="fa fa-flag blue" aria-hidden="true"></i> <span class="bold blue">Note</span> If the SOW is for an existing client for whom we hold 
                                a regular internal check-in call, the internal kickoff can take place during one of the internal check-in calls.</li>
                            </ul>
                         
                         <li>Maggie onboards the CSM.</li> 
                         <li>Allie assigns and onboards the design lead. ♦</li>
                         <li>Tonya onboards the CS.</li>
                         <li>The AM emails the client and does the following:</li>
                         	<ul class="sub">
                            	<li>Introduces the client to the account team ♣</li>
                                <li>Schedules the kickoff call, which is to be held AT LEAST 3 BUSINESS DAYS AFTER THE SOW IS SIGNED. The CSM needs this time 
                                to prepare and begin the program properly.</li>
                                <li>Includes an agenda for the kickoff call</li>
                            </ul>
                    </ul>
                    
                    <p class="footnote">♣ Skip this step if the client is not new.<br />
                    ♦ Skip this step if a CS is already assigned (due to ideation).</p>
                    
                  </div>
                </div>
              </div>
                
              <!--3. During the 3 business days before the kickoff call, the CSM will do the following (detailed instructions included in the SOP):											-->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="writers">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2">
                      3. During the 3 business days before the kickoff call, the CSM will do the following (detailed instructions included in the SOP):		<br />
                      <strong>3 DAYS</strong>									
                    </a>
                  </h4>
                </div>
                <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="writers">
                  <div class="panel-body">
                    
                    <ul>
                    	<li>Review the SOW, prepare any questions and ask the AM.</li>
                        <li>Get oriented with the client and/or the relevant messaging/products</li>
                        <li>Consider writers</li>
                        <li>Set up the project infrastructure</li>
                        <li>Prepare for the kickoff call</li>
                    </ul>
                    
                    
                  </div>
                </div>
              </div>
              
              
            </div>
           <!-- BEFORE-->
           
           </div>
        <div class="col-md-2"></div>
    </div>
    <!--/ITEMS-->
    
    
    <!--Guidelines for Client Communications-->
    <div class="row background-blue">
    	<div class="col-md-1"></div>
        <div class="col-md-10 divide-mk">
            <h2>Guidelines for Client Communications</h2>
        </div>
    	<div class="col-md-1"></div>
    </div>
    
    <!--ITEMS-->
    <div class="row background">
        <div class="col-md-2"></div>
        <div class="col-md-8">
                    
           <p>Clients trust us to create their content, so all our communications should reinforce the fact that they're in good hands. 
           Follow these guidelines for written and verbal communications with clients.</p>
                    
           <div class="panel-group" id="ig-during" role="tablist" aria-multiselectable="true">
              
              <!--Be efficient.-->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="ig-headingOne">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#ig-collapseOne" aria-expanded="true" aria-controls="ig-collapseOne">
                      Be efficient.
                    </a>
                  </h4>
                </div>
                <div id="ig-collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ig-headingOne">
                  <div class="panel-body">
                  
                    <ul>
                    	<li>When writing emails, assume the client's time is extremely limited and that they'll only skim your note. 
                        Use bullet points, bold font, colors and other scannable elements to make the following immediately clear:</li>
                        	<ul class="sub">
                            	<li>The reason for your email</li>
                                <li>What you are delivering, if applicable</li>
                                <li>What action you need the client to take</li>
                                <li>By when they should take action</li>
                            </ul>
                    </ul>
                    
                  </div>
                </div>
              </div>
              
              <!--Be professional and diplomatic.-->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="ig-headingOne1">
                  <h4 class="panel-title">
                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#ig-collapseOne1" aria-expanded="true" aria-controls="ig-collapseOne1">
                      Be professional and diplomatic.
                    </a>
                  </h4>
                </div>
                <div id="ig-collapseOne1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ig-headingOne1">
                  <div class="panel-body">
                  
                    <ul>
                    	<li>Avoid taking an overly casual or blunt tone. Choose polished language.</li>
                        	<ul class="sub fa-ul">
                            	<li><i class="fa-li fa fa-times-circle red"></i> What do you want us to do?</li>
                                <li><i class="fa-li fa fa-check-circle green"></i> How would you like us to proceed?</li>
                            </ul>
                        
                        <li>Do not express negative feelings about projects.</li> 
                        	<ul class="sub">
                            	<li>Even if a client makes a difficult or stress-inducing request, do not express anxiety 
                                when communicating with them. You can relay concerns about timelines, scope or other issues 
                                in a measured and matter-of-fact way.</li>
                                <li class="bold">Clients should always feel that you're in control of a situation. In fact, they often 
                                depend on our sense of calm and control to help them meet their own stressful workloads.</li>
                            </ul>
                        
                        <li>Keep the topics and tone of conversations professional. If you'd discuss it with your doctor, 
                        your mother, or your best friend, it's probably best left for those conversations.</li>
                        
                        <li>When waiting on a phone line for a client call to begin, be aware that a tone does not always sound 
                        when someone joins the call. So be careful not to discuss the client or any sensitive topics while you wait.</li>
                        
                        <li>Be mindful of spelling and grammatical errors in written communications, especially when you're moving 
                        quickly. As the team members responsible for quality control on all client projects, we need to inspire 
                        clients' confidence in us at every opportunity.</li>
                    </ul>
                    
                   
                  </div>
                </div>
              </div>
              
              <!--Don't overshare.-->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="ig-headingTwo">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#gbk-collapseTwo" aria-expanded="false" aria-controls="gbk-collapseTwo">
                      Don't overshare. 
                    </a>
                  </h4>
                </div>
                <div id="gbk-collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="gbk-headingTwo">
                  <div class="panel-body">
                  
                    <ul>
                    	<li>When communicating with clients, avoid discussing details about how we work behind the scenes to create 
                        content. Speak about freelancers and contractors as if they're part of the C4D team. This applies to 
                        writers, designers, researchers and coders.</li>
                        	<ul class="sub">
                            	<li><i class="fa-li fa fa-times-circle red"></i> Let me send this to the writer and see if they can get it 
                                back to me by Wednesday. (The references to sending an item back and forth gives too much detail about 
                                how we work and makes the writer seem like an outside team member.)</li>
                                <li><i class="fa-li fa fa-check-circle green"></i> Let me discuss it with the writer, and I'll let you 
                                know if Wednesday isn't manageable.</li>
                            </ul>
                       
                    </ul>
                    
                  </div>
                </div>
              </div>
              
              <!--Show initiative.-->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="ig-headingThree">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#gbk-collapseThree" aria-expanded="false" aria-controls="gbk-collapseThree">
                      Show initiative.
                    </a>
                  </h4>
                </div>
                <div id="gbk-collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="gbk-headingThree">
                  <div class="panel-body">
                  
                  	<ul>
                    
                    	<li>If we need direction from a client or need them to make a decision, provide them with choices — 
                        but keep the number of choices limited. This keeps the client from having to put in the work 
                        themselves, and it speeds the review process.</li>
                        
                        <li>For example:</li>
                        	<ul class="sub">
                            	<li>If the client says they want to change a heading, rather than ask the client 
                                what they want to include, write what you think would be a suitable heading. If 
                                the client doesn't like it, they will edit it.</li>
                                
                                <li>If we need to cut copy from a draft, highlight what you think can be cut, 
                                and ask the client for their thoughts on your suggestions.</li>
                                
                                <li>If we need to link to an asset but the client did not provide it, search for 
                                it yourself before asking them to supply it.</li>
                                
                                <li>When scheduling calls, instead of asking the client for their preferred call 
                                times and waiting for them to reply, send them our team's availability so they can 
                                choose an option that works for them.</li>
                            </ul>
                   </ul>
                    
                  </div>
                </div>
              </div>
              
              <!--Come to client calls prepared. -->
              <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="gbk-headingFour">
                  <h4 class="panel-title">
                    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#gbk-collapseFour" aria-expanded="false" aria-controls="gbk-collapseFour">
                      Come to client calls prepared.
                    </a>
                  </h4>
                </div>
                <div id="gbk-collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="gbk-headingFour">
                  <div class="panel-body">
                    
                    <ul>
                    	<li>Kickoff calls:</li>
                        	<ul class="sub">
                            	<li>See the Production Guides for instructions on preparing for kickoff calls, as well as the
                                <a href="https://www.dropbox.com/s/pjswjerk3di8i9x/C4D_Project-Kickoff-Checklist.docx?dl=0" 
                                target="_blank"> Kickoff Call Checklist.</a></li>
                            </ul>
                            
                        <li>SME calls:</li>
                        	<ul class="sub">
                            	<li>It's best to issue the invitation ourselves so that we're in control of the recording. Use the 
                                <a href="https://docs.google.com/document/d/1dliHT-ipf-VDRTf5gDKK2EnqnB8sF5Ht7C1Bhw_iZzw/edit"
                                target="_blank">Webex room</a> belonging to the relevant AM.</li>
                                <li>Make sure the writer is fully briefed and prepared. They should:</li>
                                	<ul class="sub">
                                    	<li>Have and understand all key background materials</li>
                                        <li>Have the SMEs' names and job titles</li>
                                        <li>Be on the call invitation</li>
                                        <li>Submit interview questions at least two business days before the call</li>
                                    </ul>
                                    
                                <li>Review the writer's SME interview questions, make edits and additional as necessary, 
                                place in the <a href="https://www.dropbox.com/s/41wrhxf0h85sdyp/C4D_SME-Interview-Questions.docx?dl=0" 
                                target="_blank">SME Interview Questions Template,</a> and send to the client at least 24 hours before the SME call.​</li>
                                    <ul class="sub">
                                        <li>If you edited the questions, send the revised version to the writer.</li>
                                    </ul>
                                    
                                 <li>Be prepared to show the SME interview questions and any key background materials on screen during the call.</li>
                        
                       			 <li>Know which concepts need to be discussed during the call so you can raise questions if necessary during the interview.</li>
                            </ul>
                            
                         <li>Check-in calls:</li>
                         	<ul class="sub">
                            	<li>Before a check-in call, review the status of each project and be prepared to discuss the following in detail:</li>
                                	<ul class="sub">
                                    	<li>Next steps for C4D and/or the client</li>
                                        <li>ETAs for deliverables</li>
                                        <li>Questions you need the client to answer or materials you need them to provide</li>
                                    </ul>
                            </ul>
                        
                        
                    </ul>
                    
                  </div>
                </div>
              </div>
              
       
            </div>
           <!--/DURING-->
           
        </div>
        <div class="col-md-2"></div>
    </div>
    <!--/ITEMS-->
    
    

</div>
<!--Page Container-->

					


<!---------Additional Java--------->

<!--SmoothScroll-->
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
            $(function() {
                $('nav a').bind('click',function(event){
                    var $anchor = $(this);
                    
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    /*
                    if you don't want to use the easing effects:
                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top
                    }, 1000);
                    */
                    event.preventDefault();
                });
            });
			
			(function(){
			$(window).scroll(function() {
			
				// check if window scroll for more than 430px. May vary
				// as per the height of your main banner.
				
				if($(this).scrollTop() > 300) { 
					$('.cheat-nav').addClass('opaque'); // adding the opaque class
				} else {
					$('.cheat-nav').removeClass('opaque'); // removing the opaque class
				}
			});
		  })();
        </script>  
        
<!--Tabs-->
<script>
$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
</script>

        
<!-- STICKY -- Logo uses this -->
<script type="text/javascript" src="js/jquery.sticky.js"></script>
<script>
    $(window).load(function(){
      $("#rtp-logo").sticky({ topSpacing: 10 });
    });
</script>

<!--SKROLLR-->
<script type="text/javascript" src="js/skrollr.min.js"></script>
<script type="text/javascript">
	var s = skrollr.init({
		edgeStrategy: 'set',
		easing: {
			WTF: Math.random,
			inverted: function(p) {
				return 1-p;
			}
		}
	});
	
</script>

<!--SCROLL REVEAL-->
<script src="js/wow.min.js"></script> 
<script>
  	wow = new WOW(
           {
              mobile: false,
           }
           )
           wow.init();
</script>





</body>
</html>


/*Downloaded from https://www.codeseek.co/mkinney/sop-home-Egmgxw */
    


/*Downloaded from https://www.codeseek.co/mkinney/sop-home-Egmgxw */
    

Comments