Development https://www.digett.com/ en How to Solve Your Customer's Problems and Make Money Doing It https://www.digett.com/insights/how-solve-your-customers-problems-and-make-money-doing-it <span>How to Solve Your Customer&#039;s Problems and Make Money Doing It</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/dog-bath.png?itok=tuPt7eQD" width="800" height="533" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/about/emma-ruehl" typeof="schema:Person" property="schema:name" datatype="">Emma Ruehl</span></span> <span>Mon, 07/31/2017 - 2:51pm</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>You’ve invested the time and effort to craft a solid sales message and marketing campaign. The offer is great, the price is right, and people should be flocking in your doors and email inboxes to purchase. You’ve even paid a company to help get your website to rank in the top five of Google’s search results page, and your site’s traffic has soared as a result. But somehow, the sales aren’t rolling in.</p> <p>Turns out, ranking #1 in Google doesn’t directly get you sales. Helping people does.</p> <h2>Back to the Drawing Board</h2> <p>At the heart of every potential sale is a person with a problem. Is your business the right solution to the problem? Does your prospect feel understood, cared for, and compelled to partner with you to work towards a solution? Before you sell, it’s imperative that you understand the person and the problem. Otherwise, you’re marketing blindly. Here’s where to start.</p> <h2>1. Stop Trying to Think For Your Customer</h2> <p>Instead of developing products and messaging around inferences and feelings, ask the consumer directly. Start with a simple survey asking about their pain points (there are a ton of great chat bots and survey tools out there right now), interview people as they use your site to uncover frustrations, and read through your reviews and testimonials.</p> <p><img alt="Olark" data-entity-type="file" data-entity-uuid="11cdd749-cd79-4daa-b2c1-95497c173d4a" src="/sites/default/files/inline-images/olark.png" /></p> <p><em>Photo via <a href="https://www.olark.com">Olark</a>.</em></p> <p>Uncover why your prospect went looking for a solution and other approaches they’ve tried. Why have your customers chosen you? What almost stopped them from choosing you? Before you prescribe the solution, flush out the problem, and observe it from multiple angles. It’s your goal, as the Master of the Solution, to better understand the problem than your prospects and customers.</p> <h2>2. Build Content that Resonates with Solution-Seekers</h2> <p>Your prospects and customers don’t want content shoved down their throat. They want to encounter messaging that speaks to them and their problems. Have a conversation that brings them to the conclusion that you are the right fit and worth their dollars.</p> <p><img alt="Hubspot messaging" data-entity-type="file" data-entity-uuid="29f1e97d-f2f2-42fd-b07c-3e2ee0833daa" src="/sites/default/files/inline-images/hubspot-messaging.png" /></p> <p><em>Screenshot via <a href="https://www.hubspot.com/products/crm">Hubspot</a></em></p> <p>Much of the best content comes directly from the mouths of your customers, which is another reason why surveys and interviews are critical. There is no better way to help someone feel understood than to translate their very own thoughts and feelings into helpful messaging. Did a prospect express frustration around cost? Include messaging about value, or offer a free trial. Even better: when you know their pain points, include a list of features that directly addresses those pain points.</p> <h2>3. Rid Design of Disruption and Trend</h2> <p>So many brands are latched on the heels of the latest design trends. Heard of parallax? Ghost buttons? Hero rotator images? Perhaps you’re not familiar with the terminology, but no doubt you and your competitors have toyed with one or all of these design trends.</p> <p><img alt="abc page design" data-entity-type="file" data-entity-uuid="fa64fda9-881b-4203-915e-41adb0a1a16a" src="/sites/default/files/inline-images/abc.png" /></p> <p><em>Look familiar? Screenshot via <a href="http://abc.go.com/">ABC</a>.</em></p> <p>It’s rare that businesses choose design elements based on actual research; typically, design is dictated by a template you purchased, or someone on your sales team saw an effect on a competitor’s site and thought it would be “cool” to implement on yours. If everyone else is doing it, you should be too, right?</p> <p>The problem with trend is that it’s often broken from its original context and applied to a million different projects, despite relevance and suitability. When design dictates development and content, you end up with a pretty portfolio site that is irrelevant to your target audience. And all your money goes to making a piece of art that no one buys.</p> <p>The best design adds to, and doesn’t detract from, user experience. It’s a supporting player that should be the last thing people notice. It should help logically guide users through your site architecture, keeping interest up and building trust in your brand.</p> <p> </p> <p><img alt="ted home page" data-entity-type="file" data-entity-uuid="19e54cf3-d769-48e9-b869-c779dae02392" src="/sites/default/files/inline-images/ted.png" /></p> <p><em>Easy to digest and navigate site via <a href="https://www.ted.com/">Ted</a>.</em></p> <p>At the end of the day, your content is the star of the show. It is what resonates with your customers at their core, communicating that you can solve their problem and solidifying the connection that supports a lasting, mutually-beneficial relationship.</p> <h2>4. Invest In an SEO Strategy that Seeks to First Answer a Query</h2> <p>At the heart of SEO is simply being the best answer to a particular query; it’s inherently about solving problems. No doubt, you’ve searched yourself for product or service pricing, clicked on one of the top search results that you expected to contain pricing information, and much to your disappointment found no pricing but a barrage of CTA popups and contact forms.</p> <p><img alt="google search result for marketo" data-entity-type="file" data-entity-uuid="6a0ac8e1-f816-4222-b37a-e94da5869b21" src="/sites/default/files/inline-images/serp-marketo.png" /></p> <p><em>Screenshot via <a href="https://www.google.com/">Google</a></em></p> <p>What happens when people don’t find what they’re looking for? They’ll exit your site. They’ll delete your email. They’ll go somewhere else because there will always be someone else who is actually solving their problem.</p> <p>Be a smart marketer and lead your team to new thinking. If your business has been stuck in a rut of one-sided communication and has no idea what your customers and prospects actually want, be the voice for them. Seek to understand pain points and solve the problem; don’t add to a million other voices trying to tell consumers what they want. If you put in the effort to understand your prospects, they will reward you.</p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1239&amp;2=comment_no_subject&amp;3=comment_no_subject" token="TpZmYIO40-cRfjR68o2mYuTI8y92woQCGD6YSkmcNV8"></drupal-render-placeholder> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/how-solve-your-customers-problems-and-make-money-doing-it" st_title="How to Solve Your Customer&#039;s Problems and Make Money Doing It" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/how-solve-your-customers-problems-and-make-money-doing-it" st_title="How to Solve Your Customer&#039;s Problems and Make Money Doing It" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/how-solve-your-customers-problems-and-make-money-doing-it" st_title="How to Solve Your Customer&#039;s Problems and Make Money Doing It" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/how-solve-your-customers-problems-and-make-money-doing-it" st_title="How to Solve Your Customer&#039;s Problems and Make Money Doing It" class="st_email_large" displayText="email"></span> </div> Mon, 31 Jul 2017 19:51:54 +0000 Emma Ruehl 1239 at https://www.digett.com Which Base Theme We Use (and Why) https://www.digett.com/insights/which-base-theme-we-use-and-why <span>Which Base Theme We Use (and Why)</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/getbootstrap.png?itok=323PGdZa" width="323" height="212" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/jd-collier" typeof="schema:Person" property="schema:name" datatype="">JD Collier</span></span> <span>Tue, 12/16/2014 - 8:34am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>There are so many website themes, frameworks and opinions out there ... how do you decide which is the best foundation for your next project?</p> <!--break--><p>You can purchase a ready to use theme, start from a base theme with as much or as little foundation as you like or you can build your own HTML from scratch and then add Wordpress or Drupal API code to your HTML.</p> <p>I have personally used all of these approaches across various projects, but I have a strong preference these days for Bootstrap as the foundation for every website I build on Drupal, Wordpress and small static pages.</p> <h2>Why I don't use the other approaches any longer</h2> <p>Of course, there are more reasons than I can list here, but a few notes on why I don't start projects without Bootstrap:</p> <ul> <li><strong>Ready to use purchased theme</strong>: There are many thousands of Wordpress ready to go themes and fewer (but still many) Drupal ready-to-go themes. My biggest reason to avoid these has to do with the design being mostly locked in already. These themes are usually complete designs just waiting for a logo, copy and images. I find I have to argue with the theme too much to bend it away from the built-in design. Some of these themes are so complex they actually change the CMS core functions, but I need consistency across projects in the CMS so my content editors can work across client sites.</li> <li><strong>Build your own HTML:</strong> For years, my preferred approach was to build my own perfectly clean HTML/CSS. This has the benefit of being clean and exactly suited to the needed design. In recent years, though, I have fallen out of love with this approach due to the need to reinvent the wheel with every project. Now that every website needs to be responsive and work across browsers and devices and websites requirements include sophisticated CSS3 effects, jQuery magic and HTML5 sophistication—it just doesn't make sense to start over with each project.</li> <li><strong>Wonderful frameworks</strong> like 960 grid and others don't include all the <a href="http://getbootstrap.com/css/#less">LESS</a>/<a href="http://getbootstrap.com/css/#sass">SASS</a> mix-ins that I have at my fingertips with Bootstrap.</li> </ul> <h2>Why I use Bootstrap</h2> <p>Before I begin, I should include a quick disclaimer—I have used and also love Zurb <a href="http://foundation.zurb.com/">Foundation</a>. Bootstrap and Foundation have pretty good feature parity these days. We chose Bootstrap when Foundation didn't have as much Drupal support, but Foundation has <a href="https://www.drupal.org/project/zurb_foundation">pretty robust Drupal support</a> now so in the end you can choose by features meaningful to you.</p> <ul> <li>Boostrap includes all the documentation and code to work across browsers and devices.</li> <li>Bootstrap includes tons of mix-ins that allow sophisticated content even inside the WYSIWYG. I also use it in template code and event in Drupal views and Drupal Display Suite.</li> <li>Bootstrap has mobile functionality built in. Whether I'm mobile-first or desktop-first, I am pleasantly surprised when I'm styling a page and then check other breakpoints and almost every time, it is already 95% there ... I just need to add a few adjustments here and there.</li> <li>Many common advanced widgets are <a href="http://getbootstrap.com/javascript/">already included</a>: buttons, carousels, accordion lists, tabs, and more are already included and just require you to add some classes to your html output.</li> <li><em>Lots</em> of documentation already exists. If I run into an issue, I can check the <a href="http://getbootstrap.com/">Bootstrap website</a>, Stack Overflow and Drupal theme support issue queues.</li> </ul> <h2>Drupal-specific modules used to help create a Drupal Bootstrap site</h2> <ul> <li><a href="https://www.drupal.org/project/bootstrap">Drupal Bootstrap theme</a></li> <li><a href="https://www.drupal.org/project/ds_bootstrap_layouts">Display Suite Bootstrap Layouts</a> (I'm a ds person, but I know there are Panels helpers too)</li> <li><a href="https://www.drupal.org/project/views_bootstrap">Views Bootstrap</a>: This module adds displays to Views to allow you to output Bootstrap grids, accordions, carousels and more.</li> </ul> <h2>What do you think?</h2> <p>If you've tried one of these methods and have other opinions, please chime in. I seem to check out themes and frameworks like a hobby. I often find myself downloading and playing with a new framework or theme and constantly evaluating it against what I do now. Have you found something better?</p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1155&amp;2=comment_no_subject&amp;3=comment_no_subject" token="wAI39MX97h9DaqDLlZRNH8kdGVuRB0mOUp6OoybdjxA"></drupal-render-placeholder> <article data-comment-user-id="0" id="comment-2165" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1418762889"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">WorldFallz</span> on Tue, 12/16/2014 - 2:48pm</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>Totally agree! And have recently also switched to a complete bootstrap operation. I'm in the process of migrating all my sites so it.</p> <p>The efficiency gained from learning and knowing just ONE theme system is worth it's wait in person hours, lol.</p> <p>In addition to the modules also mentioned, checkout: </p> <p><a href="https://www.drupal.org/project/panels_bootstrap_layouts">https://www.drupal.org/project/panels_bootstrap_layouts</a></p> <p>and</p> <p><a href="https://www.drupal.org/project/bootstrap_tour">https://www.drupal.org/project/bootstrap_tour</a> </p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2165&amp;1=default&amp;2=en&amp;3=" token="vhqLjCGs31DdLc9ghhK5Q5V4aS2XDu8-NvcqrDq-YQA"></drupal-render-placeholder> </div> </div> </article> <article data-comment-user-id="0" id="comment-2167" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1418820539"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">Rajab Natshah</span> on Wed, 12/17/2014 - 6:48am</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>Bootstrap theme is the way.<br /> But I find the Open Framework is another way.</p> <p><a href="https://openframework.stanford.edu/">https://openframework.stanford.edu/</a><br /> <a href="https://github.com/SU-SWS/open_framework/tree/7.x-3.x">https://github.com/SU-SWS/open_framework/tree/7.x-3.x</a></p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2167&amp;1=default&amp;2=en&amp;3=" token="3i22WgL-P4wTJqby6zEeOXmaqD0Wux6sHB4syJuGwA4"></drupal-render-placeholder> </div> </div> </article> <article data-comment-user-id="21" id="comment-2168" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1418832190"></mark> <div> <div class="comment-name">Submitted by <span lang="" about="/users/jd-collier" typeof="schema:Person" property="schema:name" datatype="">JD Collier</span> on Wed, 12/17/2014 - 10:03am</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>I haven't been able to use Open Framework because I've found Bootstrap 3 to be a vast improvement ... I would probably not use Bootstrap if I was stuck with v2 for what I need.</p> <p>I just did a quick search and saw a fork or two but didn't see anything supported. Do you know if they ever ported? I'm wondering if Stanford might be slow to act since Bootstrap moved to MIT licensing.</p> <p>Any openframework on v3?</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2168&amp;1=default&amp;2=en&amp;3=" token="O-f8Uor92pBYLa1zaVtt9K5msI7X4mQifvqYnvWC73s"></drupal-render-placeholder> </div> </div> </article> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/which-base-theme-we-use-and-why" st_title="Which Base Theme We Use (and Why)" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/which-base-theme-we-use-and-why" st_title="Which Base Theme We Use (and Why)" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/which-base-theme-we-use-and-why" st_title="Which Base Theme We Use (and Why)" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/which-base-theme-we-use-and-why" st_title="Which Base Theme We Use (and Why)" class="st_email_large" displayText="email"></span> </div> Tue, 16 Dec 2014 14:34:45 +0000 JD Collier 1155 at https://www.digett.com 4 Challenges With a Webforms Project, Part IV https://www.digett.com/insights/4-challenges-webforms-project-part-iv <span>4 Challenges With a Webforms Project, Part IV</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/challenges-webform-drupal.png?itok=g7mDhvDj" width="275" height="183" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/travis-flatt" typeof="schema:Person" property="schema:name" datatype="">Travis Flatt</span></span> <span>Wed, 12/03/2014 - 10:27am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Welcome to the fourth and final part of my in-depth look at customizing some default behavior in Webforms, and in this installment, Drupal’s Bootstrap theme. Today we’ll look specifically at repurposing bootstrap alerts and some more general minor DOM manipulation.</p> <!--break--><p>(Here’s <a href="/insights/4-challenges-webform-project-part-i">Part I</a>, <a href="/insights/4-challenges-webform-project-part-ii">Part II</a>, and <a href="/insights/4-challenges-webforms-project-part-iii">Part III</a> for easy reference if you’re late to the party.)</p> <h2>Challenge #4: Thank you, come again!</h2> <p>So, at this point in the project, the form behaves as desired right up until a successful submission.</p> <p>As we start looking at the form’s confirmation behavior, it’s currently reloading the page and giving us a pretty generic bootstrap alert box with some confirmation text. This is with the basic webform setting of sending a confirmation to the same page as the submission form. We could also redirect to another page, but in this instance we don’t want either of those things.</p> <p>The desired behavior is for the area with the form to remain open upon submission, and have the form be replaced with a thank you message box that can be closed in much the same way as the form itself (much like the <a href="http://jsfiddle.net/travtex/u3f50mox/">toggle effect here</a>, to refresh your memory).</p> <p>Before we do anything, we want to be sure we’re on an actual confirmation page. Our bootstrap theme has us set up here by putting an element right there on the page for us, even though we don’t want to look at it. In this instance, I’m just going to add a class to that particular bootstrap alert’s parent, which will already be set up in CSS with display: none.</p> <pre>  </pre><p>$('.confirmation-message').parent().addClass('form-confirmation');</p> <pre>  </pre><h2>Customize that confirmation</h2> <p>At this point our confirmation page is just getting a hidden bootstrap alert div sent to the page. We can use that as our condition for triggering the confirmation behavior, but first we check to see if that particular alert box exists.</p> <pre>  </pre><p>if ($(.form-confirmation).length) { // Do things here }</p> <pre>  </pre><p>Once we know that we’re working with a completed, validated, and confirmed form entry, we’re going to place our confirmation message right there in the toggle area where our original form once lived.</p> <pre>  </pre><p>if ($(.form-confirmation).length) {</p> <pre>  </pre><p>$('.form-div').before("&lt;div class='alert alert-info alert-dismissible signup-confirmation' role='alert'&gt;&lt;button type='button' class='close confirmation-corner-button'&gt;&lt;span class='close-button-text '&gt;Close &lt;span aria-hidden='true'&gt;&lt;i class='fa fa-times' ;&gt;&lt;/i&gt;&lt;/span&gt;&lt;/button&gt;&lt;h2&gt;Thank You!&lt;/h2&gt;&lt;p&gt; Your message has been sent. Thank you for your interest.&lt;/p&gt;&lt;div class=' close-button'&gt;&lt;button type='button' class='btn close-confirmation-button'&gt;Close&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;");</p> <pre>  </pre><p>This creates a new alert box more in the area of where we want it. In addition to the “X” in the upper right corner, we’re also adding a more explicit “Close” button in case the purpose of that “X” isn’t immediately obvious to our user.</p> <p>Also, we’re going to scroll to the thank you message.</p> <pre>  </pre><p>$('html, body').animate({ scrollTop: $(".signup-confirmation") .offset().top - 100 }, 500); }</p> <pre>  </pre><h2>Closing things up</h2> <p>Now all that’s left to do is to ensure that our two “Close” function buttons do the same thing. We want them both to close the form/confirmation area and slide back up to the original position on the page.</p> <pre>  </pre><p>$('.confirmation-corner-button').click(function(e) { $(this).parent().slideUp ('slow'); $('html, body').animate({ scrollTop: $("html") .offset() .top }, 800); (e.preventDefault) ? e.preventDefault() : e.returnValue = false; });</p> <pre>  </pre><p>This should look familiar — it’s pretty similar to the slide code we used back in Part I to open the form in the first place.</p> <p>Finally, we just force the second button’s click action to trigger that of the first instead of its own.</p> <pre>  </pre><p>$('.close-confirmation-button').click(function(e) { $('. confirmation-corner-button').trigger('click'); (e.preventDefault) ? e.preventDefault() : e.returnValue = false; });</p> <pre>  </pre><p>JSFiddle with some simple shared click event functions can be <a href="http://jsfiddle.net/travtex/habyvd2u/">found here</a>. </p> <p><em>[Image: <a href="https://www.flickr.com/photos/eduardox/2533079036/">EduardoEquis</a>] </em></p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1153&amp;2=comment_no_subject&amp;3=comment_no_subject" token="z2CTXzYCCYdvMv5dCJQ0swUCRVlsmC3H5e7E0mrUYHA"></drupal-render-placeholder> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/4-challenges-webforms-project-part-iv" st_title="4 Challenges With a Webforms Project, Part IV" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/4-challenges-webforms-project-part-iv" st_title="4 Challenges With a Webforms Project, Part IV" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/4-challenges-webforms-project-part-iv" st_title="4 Challenges With a Webforms Project, Part IV" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/4-challenges-webforms-project-part-iv" st_title="4 Challenges With a Webforms Project, Part IV" class="st_email_large" displayText="email"></span> </div> Wed, 03 Dec 2014 16:27:03 +0000 Travis Flatt 1153 at https://www.digett.com 4 Challenges with a Webform Project, Part II https://www.digett.com/insights/4-challenges-webform-project-part-ii <span>4 Challenges with a Webform Project, Part II</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/jquerylatte.jpg?itok=UuXtf1h_" width="275" height="183" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/travis-flatt" typeof="schema:Person" property="schema:name" datatype="">Travis Flatt</span></span> <span>Tue, 10/28/2014 - 10:14am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Welcome to the second part of my in-depth look at customizing some default behavior from Webforms. In the first, <a href="/insights/4-challenges-webform-project-part-i">which you can find here</a>, we hid the form and created a toggle button with which to open it.</p> <!--break--><p>The second challenge with my fancy webform project involves a little bit of Drupal backend, as well as a helping of jQuery, but not too much. Also, the focus allows us to drift a little bit into some more general discussion of DOM manipulation tricks and tactics.</p> <h2>Challenge #2: Hide the form some more</h2> <p>So, out of the box, the webform gives us a default "Submit" button. That’s nice, but since we have a button to open the form, let’s also include a button to close the form. The toggle button works, of course, but people are accustomed to seeing a little "X" in one of the top corners to close things. Let’s give them that.</p> <p>There are, as with most code, an ever-growing list of ways to solve problems. In this instance, I’m going to turn focus away from jQuery and look to the backend to generate our "close" button.</p> <p>There doesn’t seem to be an immediately obvious option for adding different buttons. We’re going to add a "Markup Field." Inside it, we can add pretty much anything we care to add:</p> <pre> <code> &lt;div class="closer"&gt; &lt;a class="close-webform"&gt;Close  &lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt; </code> </pre><p>While we’re at it, we’re going to use the same type of field to add a "Cancel" or "Reset" button in case a user gets halfway through the form and decides to start over from scratch.</p> <p>Inside another markup field, this time at the bottom:</p> <p>&lt;input type="reset" value="Start Over" id="reset-button"&gt;</p> <p>That’s simple enough, right? Markup fields are incredibly versatile. You can use them to include just about anything you need to have in your webform, such as input types, custom elements like our close button, or whatever your requirements might dictate.</p> <p>Now, to enable our close button, we can actually just use the code we already have on the button to open the same form. Remember we used <code>slideToggle()</code>, with which we can both hide and reveal elements.</p> <p>We can also take away the "open" class we added in Part I:</p> <pre> <code> var form = $(’#form-selector’); $(’.close-webform’).click(function(event) { form.slideToggle(’slow’); (event.preventDefault) ? event.preventDefault() : event.returnValue = false; $(’html, body’).animate({ scrollTop: $(’html’).offset().top }, 800); if (form.hasClass(’open’)){ form.removeClass(’open’); } }); </code></pre><h2>But the things aren’t where I want them</h2> <p>Looking at our "Close" button, it’s actually rendering inside the form; which is to be expected, since we created it as a form field. However, that will put it after the webform title, which isn’t what we want. What if we could pluck that element out of the DOM and make it be a sibling of the webform instead of a child?</p> <p>Here’s where we can dip a bit into DOM manipulation. Specifically, we’re going to talk about HTML restructuring.</p> <p>Sometimes your CMS is going to generate some HTML that isn’t quite optimal for how you want to present it. Alternately, it might just be fine for desktop, but you might want some different behavior on iPad.</p> <p>The bottom line is that you’re at a position where it would be extraordinarily helpful if this particular element wasn’t a sibling of that particular element, or if it actually rendered after this other section of the page.</p> <p>Here are four jQuery methods to handle all of those HTML woes:</p> <h2>before() and after()</h2> <p>These two are pretty self-explanatory. As an example, let’s say we want to take our "Close" button and move it before the webform. This will make it a direct sibling of the webform element and not a child inside of it.</p> <pre> <code> $(’#webform’).before($(’.close-button’)); </code></pre><p>A couple of things are worth mentioning in our syntax here. First, it’s easy to make the mistake of calling the <code>before()</code>function on the element you’re trying to move. Instead, what’s being moved is going to be the parameter of the function.</p> <p>Another common mistake is to leave off that second jQuery object notation. We’re needing to place the entire element, and simply calling a selector will not have the results we want, only placing the text itself in the indicated spot. Making it a jQuery object references the entire thing.</p> <h2>prepend() and append()</h2> <p>Only slightly more tricky than before and after, these two functions will place an element inside the targeted element, at the beginning or end, respectively. As an example, we’re going to exactly what we did with the previous example, just in a different way.</p> <p>So, our close button is rendered inside the webform. The webform itself is rendered inside a div or section. Calling the <code>before()</code>function, as above, placed the element immediately before the form. Also, it placed the element as the first child of the parent element. The same thing could be accomplished like so:</p> <pre> <code> $(’.parent-div’).prepend($(’.close-button’)); </code> </pre><p>These four methods can take you a long way. As for which to make use of in what situation, there isn’t really an advantage to any over the other, and it’s going to be very case-specific on what it is you want to place where.</p> <pre> <code> &lt;parent&gt; parent.prepend &lt;child-one&gt; &lt;/child-one&gt; child-one.after child-two.before &lt;child-two&gt; &lt;/child-two&gt; parent.append &lt;/parent&gt; </code></pre><p>Next time we’ll move back away from moving around elements in the DOM and look at reducing the number of unnecessary calls to our server with some client-side form validation.</p> <p>Working jsfiddle to show positional examples <a href="http://jsfiddle.net/travtex/dbaburqn/">here</a>.</p> <p>[Image: <a href="https://www.flickr.com/photos/yukop/7130306255/in/photolist-bS5FCK-7XD2S7-mgPbbk/">Yuko Honda</a>]</p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1147&amp;2=comment_no_subject&amp;3=comment_no_subject" token="uZhoXAJZGFzJ8_wE05y0K3VYabOPKrmkQhNTV7qq9Oc"></drupal-render-placeholder> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-ii" st_title="4 Challenges with a Webform Project, Part II" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-ii" st_title="4 Challenges with a Webform Project, Part II" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-ii" st_title="4 Challenges with a Webform Project, Part II" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-ii" st_title="4 Challenges with a Webform Project, Part II" class="st_email_large" displayText="email"></span> </div> Tue, 28 Oct 2014 15:14:09 +0000 Travis Flatt 1147 at https://www.digett.com Product Review: New Relic APM for Drupal Performance Tuning https://www.digett.com/insights/product-review-new-relic-apm-drupal-performance-tuning <span>Product Review: New Relic APM for Drupal Performance Tuning</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/newrelic-logo-square_0.png?itok=BeMQYJPy" width="275" height="183" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/jd-collier" typeof="schema:Person" property="schema:name" datatype="">JD Collier</span></span> <span>Tue, 10/07/2014 - 10:36am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p><a href="http://newrelic.com/">New Relic</a> APM (Application Monitoring) is an amazing tool to help you tune the performance of your Drupal website.</p> <!--break--><p>Application Monitoring allows you to trace Drupal performance. You can deep dive into Drupal tuning with analytics on the performance of Modules, Hooks, Views and much more.</p> <p>I can quickly scan the data to determine which module has the slowest average call time. I can peer into the running website to determine where the roadblocks to performance are coming from.</p> <p>One of the most useful pieces of data is the average load time for a page and the <a href="https://en.wikipedia.org/wiki/Apdex">Apdex score</a> for the site. The Apdex is a complex algorithm which measures user satisfaction of application performance / response time.</p> <p><img alt="" src="/sites/default/files/screenshot_2014-10-07_10.35.22.png" /></p> <p>There is a mountain of data in this tool, but here are a few highlights that affect Drupalistas the most:</p> <ul> <li>Modules that are the most time consuming for the server</li> <li>Which Hooks are consuming the most resources</li> <li>Views that take the most time to run</li> <li>Most time consuming / slowest queries</li> <li>Measure page views as a percentage of total page load times</li> <li>Ajax performance bottlenecks</li> <li>Javascript error analytics</li> <li>Page load statics by browser</li> </ul> <p>The list really could go on and on. You are able to drill into almost any metric to get more detailed information.</p> <p><img alt="" src="/sites/default/files/screenshot_2014-10-07_09.57.58.png" /></p> <p><img alt="" src="/sites/default/files/screenshot_2014-10-07_10.15.43_0.png" /></p> <h2>How to get it</h2> <p><a href="/blog/02/25/2014/why-i-love-pantheon-drupal-hosting">We love Pantheon for Drupal hosting</a> and most plans come with New Relic APM. You can also sign up on <a href="http://newrelic.com/">newrelic.com</a> for their SaaS APM solution.</p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1142&amp;2=comment_no_subject&amp;3=comment_no_subject" token="b33fLK7xXHnJnSEKk_sO6BV10YGcWNIckQ8Pxr-cN70"></drupal-render-placeholder> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/product-review-new-relic-apm-drupal-performance-tuning" st_title="Product Review: New Relic APM for Drupal Performance Tuning" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/product-review-new-relic-apm-drupal-performance-tuning" st_title="Product Review: New Relic APM for Drupal Performance Tuning" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/product-review-new-relic-apm-drupal-performance-tuning" st_title="Product Review: New Relic APM for Drupal Performance Tuning" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/product-review-new-relic-apm-drupal-performance-tuning" st_title="Product Review: New Relic APM for Drupal Performance Tuning" class="st_email_large" displayText="email"></span> </div> Tue, 07 Oct 2014 15:36:12 +0000 JD Collier 1142 at https://www.digett.com 4 Challenges with a Webform Project, Part I https://www.digett.com/insights/4-challenges-webform-project-part-i <span>4 Challenges with a Webform Project, Part I</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/drupal-webforms-javascript_1.png?itok=fAJ82J3S" width="275" height="183" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/travis-flatt" typeof="schema:Person" property="schema:name" datatype="">Travis Flatt</span></span> <span>Tue, 09/23/2014 - 8:42am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>I like Javascript. There, I said it. It’s all out there floating across the internet, and no doubt my kids will mock me for it twenty years from now when they’re busily developing code via direct brain-link. For now, though, I find it to be a remarkably versatile problem solver for things that just aren’t quite handled by the default behavior of your favorite framework or CMS.</p> <!--break--><p>A recent Drupal project allowed me the opportunity for some Javascript/jQuery troubleshooting, which I usually find to be the fun part of any given day. Even when I’m not technically at work.</p> <div class="rtecenter"><img alt="Sleeping Programmer" src="/sites/default/files/programmer_250.jpg" style="width: 250px; height: 167px;" /></div> <p class="rtecenter"><em>Computering until this point, basically.</em></p> <p dir="ltr">I was originally thinking this would make for a single quick post, until I started explaining things. I’ve broken it up into four easily-digestible bites, each focusing on a specific problem that needed to be handled and its solution. First, we begin with...</p> <h2 dir="ltr">Challenge #1: Hide the form</h2> <p dir="ltr">I was working in Drupal for this particular project, but the jQuery methods I’m going to talk about are pretty platform agnostic.</p> <p dir="ltr">In this case, we wanted the form to not immediately appear on the page. The desired behavior was the appearance of a shiny button, which when clicked would display our glorious webform.</p> <p dir="ltr">This is a pretty common general usage, and easily accomplished with a <span style="font-family: monotype;">display: none</span> in CSS.</p> <p dir="ltr"> </p> <pre> .hide-this-element { display: none; }</pre><p> </p> <p dir="ltr">With the element stealthily hiding on the page, we need to take over the behavior of our button. In this case, I’m going to use jQuery’s <span style="font-family: monotype;">slideToggle()</span>method just to give the added functionality to open or close the form with the same button.</p> <p> </p> <pre> var button = $(‘.button-selector‘); var form = $(‘.form-selector'); button.click(function(event) { form.slideToggle(‘slow'); if (button.text().trim() === ‘Default Text') { button.text(‘Different Text'); } else { button.text(‘Default Text'); } event.preventDefault(); $('html, body').animate({ scrollTop: form.offset().top }, 800); form.addClass('open'); }); </pre><p> </p> <p>So, there’s a few extra things going on here. The function itself is living inside a jQuery <span style="font-family: monotype;">.click()</span>method that’s telling the browser, “When this thing is clicked, do these things.”</p> <p>An important element of event listeners like this is that <span style="font-family: monotype;">event.preventDefault</span>bit. For most modern browsers, <span style="font-family: monotype;">event.preventDefault()</span>will work just fine in keeping the browser from doing the default behavior associated with the element. Usually this is a link. We don’t want the browser to look for an href attribute or redirect the page here, so we block that behavior.</p> <p>(The actual production code is a bit heavier for some things, and <span style="font-family: monotype;">preventDefault()</span>is one of them, as it doesn’t work with IE8, but if I start turning this into a discussion of what doesn’t work on IE8 we’ll never get anywhere.)</p> <p>There are a handful of options with <span style="font-family: monotype;">slideToggle</span>, but we’re keeping it simple here, only passing it <span style="font-family: monotype;">‘slow’</span>. This refers to the speed of the animation when the element we’re hiding or displaying is revealed or hidden.</p> <p>The conditional isn’t something that made it into production, but I threw it back in for the sake of building a more interactive event handler for this discussion. By using <span style="font-family: monotype;">slideToggle()</span>, the button has hide and show functionality. I like the idea of changing the text of the button to refer to whatever its current action will do.</p> <p>The last bit is using the <span style="font-family: monotype;">.animate()</span>method, which has enough options to fill a book. Here we’re using it for a bit of user experience consideration. A big form has just opened, so we’re going to assume the user actually wanted to use said form and scroll the screen down to where it begins.</p> <p>Working example <a href="http://jsfiddle.net/travtex/u3f50mox/">here</a>.</p> <p>Next time we’ll talk about problem #2: Hide the form some more — which turned out to be a significantly different problem than the title might imply. We’ll cover some default webform rendering behavior, the problems it can cause, and ways to work around it.</p> <p><em>[Images: <a href="https://www.flickr.com/photos/simonpowca/" target="_blank">Simon Pow</a>, <a href="https://www.flickr.com/photos/patrickgensel/6716877299/">Patrick Gensel</a>]</em></p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1140&amp;2=comment_no_subject&amp;3=comment_no_subject" token="yJo0-NlO6MYTsP4lHlMLGD1YFpr-3sViJHlTJW5R7BI"></drupal-render-placeholder> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-i" st_title="4 Challenges with a Webform Project, Part I" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-i" st_title="4 Challenges with a Webform Project, Part I" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-i" st_title="4 Challenges with a Webform Project, Part I" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/4-challenges-webform-project-part-i" st_title="4 Challenges with a Webform Project, Part I" class="st_email_large" displayText="email"></span> </div> Tue, 23 Sep 2014 13:42:59 +0000 Travis Flatt 1140 at https://www.digett.com Web Design Trends Are Cool, But Design for Your Audience https://www.digett.com/insights/web-design-trends-are-cool-design-your-audience <span>Web Design Trends Are Cool, But Design for Your Audience</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/trends-in-web-design.png?itok=p5U_fGq6" width="275" height="183" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/michelle-burk" typeof="schema:Person" property="schema:name" datatype="">Michelle Burk</span></span> <span>Wed, 07/23/2014 - 9:52am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>It seems like the possibilities of web design are becoming endless. I began designing and teaching myself a little bit of coding as a kid during the times when decorating your web page with flashy graphics, scrolling text, and putting a border around everything was cool (or, more like the only thing you could really do with web design).</p> <!--break--><p>Now, roughly ten years later, it is amazing what we can do with a couple lines of code thanks to HTML5 and CSS3. Here are a couple of trends that I have noticed gaining popularity in web design.</p> <h2>Videos</h2> <p>The evolution of HTML5 gives developers and designers the chance to create interactive and fully immersive websites. Recently, I have seen a number of websites taking a leap from welcoming users with an animated jQuery slider to utilizing the entire <a href="http://www.creativebloq.com/web-design/video-backgrounds-2131982">desktop screen with a video</a>.</p> <p>These videos add subtle movement to the website and may be a pure design aspect, or actually tell a story about who the company and/or person is and what they are all about.</p> <p>There are advantages to this new feature in web design. From personal experience, I am probably more likely to patiently watch a video informing me about your business than wait for a slider to finish its round of images; a video engages my interest to click through your website and learn more about your company.</p> <p>While it can be more difficult to pull off using a video as a background on your website, the effect it adds to your website is stunning and worth it.</p> <h2>Flat everything</h2> <p>Love it or hate it, we can probably thank iOS7 and Windows 8 for this push in the design world. So, take away those gradients from your buttons and think twice before you add a drop shadow to your text.</p> <p>Many websites and designers are stripping away details from icons, text, and layouts to keep things as minimalist as possible — flat colors, simple shapes, and grids make up a lot of a design.</p> <p>Why is this becoming so popular? Mobile devices. With many users visiting websites on mobile phones and tablets, it is crucial for designers and developers to consider how their website content will look on all devices.</p> <p>Taking a flat and simple approach to a website design allows for easier <a href="/blog/02/13/2013/why-should-my-company-consider-responsive-design-my-mobile-website">responsive design</a> and helps your website look better on smaller screens.</p> <h2>Single-page websites</h2> <p>Another thing I have noticed in web design is an effort to fit everything on one page. Rather than clicking through your website, users can simply scroll through one long page and (in theory) get all the information they need.</p> <p>My take on this — a little bit on the fence.</p> <p>On a desktop, it is too easy to scroll quickly through the website, skimming through text and graphics and leave without much thought.</p> <p>This is not to say I can’t appreciate a well-designed parallax scrolling website (I actually love them). I just have a few thoughts on what I believe makes one successful.</p> <ul> <li><strong>Break up your content.</strong> Separate content sections on the page with different color backgrounds. This lets the user pause and take in the content in each section of the website.</li> <li><strong>Navigation bars are not obsolete, even if there is only one page.</strong> Having a navigation bar at the top of your website that jumps down to certain sections of your webpage saves time for the user looking for specific information.</li> <li><strong>Tell a story.</strong> If you are going to have only one webpage, make the user want to scroll down to the bottom. Putting great thought into the arrangement of your content and design and the message of your company are essential when it comes to a scrolling website.</li> </ul> <h2>So which of these work best?</h2> <p>In the end, these are merely trends and things could change in the next year — or even in a couple of months. The best you can do is find what works best <em>for your audience</em> while keeping things modern, unique, and memorable.</p> <h2>More design articles</h2> <ul> <li><a href="/blog/03/12/2014/why-you-should-make-your-content-look-great-all-devices">Why You Should Make Your Content Look Great on All Devices</a></li> <li><a href="/blog/03/23/2012/go-ahead-add-some-flair-your-site-css3">Go ahead, add some flair to your site with CSS3!</a></li> </ul> <p><em>[Image: <a href="https://www.flickr.com/photos/janitors/9814305615/in/photolist-fXfT8M-fXg5T1-fXfRUV-iYyRRG-fXgaxu-fXKst9-eKYsxX-eLaSNG-eKYsmz-eKYsNT-eKYs5g-gFHQNF-gFHxcu-gFHj9o-gFH2Qb-fYuUko-eKYti6-gmVrE5-iYy7MW-fXgctd-fXg7Gu-fXjdZL-fXj5KD-fXjvGa-fXjvnn-nezBLf-nrFHTE-eWuBnx-eWG3o7-eWG2vG-fXgdFK-eWG3i9-eWG2sQ-eWuCen-eWuBpK-eWG2vy-fXgeLv-eWG2oA-eWuBnp-eWuCep-eWG2rA-eWuCeP-fXgAct-eWuBnT-eWuBrt-g7d78e-fYusSi-gMSUGt-fXg8yk-gmVujo">Karlis Dambrans</a>]</em></p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1127&amp;2=comment_no_subject&amp;3=comment_no_subject" token="s28gNRGNyrmVACt5zx0BxCJMNmRJU5ex1a-VFjs67vc"></drupal-render-placeholder> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/web-design-trends-are-cool-design-your-audience" st_title="Web Design Trends Are Cool, But Design for Your Audience" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/web-design-trends-are-cool-design-your-audience" st_title="Web Design Trends Are Cool, But Design for Your Audience" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/web-design-trends-are-cool-design-your-audience" st_title="Web Design Trends Are Cool, But Design for Your Audience" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/web-design-trends-are-cool-design-your-audience" st_title="Web Design Trends Are Cool, But Design for Your Audience" class="st_email_large" displayText="email"></span> </div> Wed, 23 Jul 2014 14:52:18 +0000 Michelle Burk 1127 at https://www.digett.com A module I've been wanting for a long time — insert a block in WYSIWYG https://www.digett.com/insights/module-i-ve-been-wanting-long-time-%E2%80%94-insert-block-wysiwyg <span>A module I&#039;ve been wanting for a long time — insert a block in WYSIWYG</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/insert-block-wysiwyg-drupal.png?itok=ogV-_KNp" width="275" height="183" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/jd-collier" typeof="schema:Person" property="schema:name" datatype="">JD Collier</span></span> <span>Tue, 07/01/2014 - 8:35am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Sometimes what you are looking for is right in front of you. I have been searching for a module to allow me to insert a block into a WYSIWYG field. I tried looking for a Drupal implementation like Wordpress Shortcodes, perhaps the SimpleAd module would do what I'm wanting, maybe there is a Ckeditor plugin written for this? I came up short.</p> <!--break--><h2>Suddenly, the obvious choice</h2> <p>I need to be able to insert small bits of content into WYSIWYG that can be edited once but placed all over the site. In this case, I needed a call to action that only appeared on certain pages and I wanted the CTA to be inline and not outside the content.</p> <p>It suddenly hit me to start searching for "insert a block into WYSIWYG" and I felt stupid. The second result is a module called "<a href="https://www.drupal.org/project/insert_block">Insert Block</a>." I quickly spun off a testing environment of my site and installed the module. It works beautifully. </p> <h2>How it works</h2> <p>After you install the module, there is an administration screen where you can adjust permissions (the default worked just fine for me). Before you start using the module, you just need to access the Text Format and turn on the "Insert Blocks" filter.</p> <p>The code is<strong> [block:module=delta]</strong></p> <p>Look Greek? It actually isn’t. Lots of modules can produce blocks; in this case I am making a simple text block using the block function itself. This means the module is named "block." The <em>delta</em> is just fancy Drupal-speak for which one to display.</p> <p>You can find the block delta by hovering over the configure link for the desired block and the delta will be listed in the URL path. For a block created in the blocks screen, it is a number. If the block is created by Views or another module, it could be a string.</p> <p>Insert [block:block=10] into the WYSIWYG editor and <em>voilà</em>! The block is inserted and if you change the block content, it will change everywhere it is used.</p> <p>Give it a try! What do you think? Also, I've love to hear if you found another solution.</p> <p><em>[Photo credit: <a href="https://www.flickr.com/photos/jefharris/4047722702/in/photostream/">Jeff Harris</a>]</em></p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1122&amp;2=comment_no_subject&amp;3=comment_no_subject" token="6MLedR1vVOAge-IMOqPSD1P2VSklIVGJ1LATHIXx32U"></drupal-render-placeholder> <article data-comment-user-id="0" id="comment-2048" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1404312105"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">Danny</span> on Wed, 07/02/2014 - 9:41am</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>And what happens when you have 1000 nodes with block tokens inside and you want to disable this module because you no longer want to use its functionality? :)</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2048&amp;1=default&amp;2=en&amp;3=" token="PtPGNdjFfttxQVEf5SkwBIzbaMeM9kzmnoRg_F7E8Ck"></drupal-render-placeholder> </div> </div> </article> <article data-comment-user-id="21" id="comment-2049" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1404312340"></mark> <div> <div class="comment-name">Submitted by <span lang="" about="/users/jd-collier" typeof="schema:Person" property="schema:name" datatype="">JD Collier</span> on Wed, 07/02/2014 - 9:45am</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>What happens? I would imagine silent tears in the corner of my office.</p> <p>But ... there are plenty of things that if they might happen, would create a lot of work on every site. </p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2049&amp;1=default&amp;2=en&amp;3=" token="2sEG4LUADQnXzsiBFS49RPI09gW02uS4EAGdUT9lh-Y"></drupal-render-placeholder> </div> </div> </article> <article data-comment-user-id="0" id="comment-2055" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1405340780"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">Håvard Pedersen</span> on Mon, 07/14/2014 - 7:26am</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>If you want to display those nodes, you ARE still using its functionality.</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2055&amp;1=default&amp;2=en&amp;3=" token="Xd9bEIIFb9GaehBFaamGpAtmlk06UrTN7WItQ2aQORc"></drupal-render-placeholder> </div> </div> </article> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/module-i-ve-been-wanting-long-time-%E2%80%94-insert-block-wysiwyg" st_title="A module I&#039;ve been wanting for a long time — insert a block in WYSIWYG" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/module-i-ve-been-wanting-long-time-%E2%80%94-insert-block-wysiwyg" st_title="A module I&#039;ve been wanting for a long time — insert a block in WYSIWYG" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/module-i-ve-been-wanting-long-time-%E2%80%94-insert-block-wysiwyg" st_title="A module I&#039;ve been wanting for a long time — insert a block in WYSIWYG" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/module-i-ve-been-wanting-long-time-%E2%80%94-insert-block-wysiwyg" st_title="A module I&#039;ve been wanting for a long time — insert a block in WYSIWYG" class="st_email_large" displayText="email"></span> </div> Tue, 01 Jul 2014 13:35:43 +0000 JD Collier 1122 at https://www.digett.com Need a Great Web Developer? Hire Through Codeup. https://www.digett.com/insights/need-great-web-developer-hire-through-codeup <span>Need a Great Web Developer? Hire Through Codeup.</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/need-great-developer-hire-through-codeup.png?itok=f4NvaDJ-" width="275" height="183" alt="" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/amy-peveto" typeof="schema:Person" property="schema:name" datatype="">Amy Peveto</span></span> <span>Thu, 06/19/2014 - 9:51am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Whether you’re a startup or well-established San Antonio business, finding developers can be difficult; it can take months — even a year or two — to find a skilled developer. But this year we found and hired a great candidate in less than two months. And we did it through Codeup.</p> <!--break--><h2>We need more developers</h2> <p>The US Bureau of Labor Statistics shows that software developer employment is projected to grow 30% from 2010 to 2020, much faster than the average for all occupations.</p> <p>But as we’ve experienced while interviewing job candidates (and even interns midway through Computer Science degrees), there’s an enormous gap between what the San Antonio market needs and the skills applicants have.</p> <p>Self-teaching is the name of the game for many, but development is such a complex beast that it’s hard to narrow focus and hold oneself accountable.</p> <p>This leaves many smart people unable to learn skills critical to a growing industry, and businesses unable to fill lucrative job openings.</p> <h2>No need to fear, Codeup is here!</h2> <p>This supply and demand problem was well-known to <a href="http://www.codeup.com/">Codeup</a> founder Michael Girdley, who time and again talked with business owners who believed the lack of programmers and developers was normal and a problem that couldn’t be solved.</p> <p>Together with Jason Straughan and Chris Turner, Girdley built and launched Codeup, a San Antonio-based intensive 12-week boot camp that turns mere mortals into first-class computer programmers.</p> <p>Attendees have their butts kicked through three months of all-day classes taught by industry experts and entrepreneurs. They learn the foundations of web development — HTML, CSS, PHP, MySQL, and Javascript — and at the end of the course present real-world applications they’ve built to employers who are looking for those exact skills.</p> <p>Codeup gives its graduates the ability to walk into a job with a good employer and be useful from day one. Not only is this beneficial to employers, it gives graduates a set of skills they can use to improve their lives.</p> <h2>We hired through Codeup</h2> <p>Codeup’s first graduating class presented their applications to potential employers at a Demo Day on April 22, 2014. Digett President Mark attended those presentations, and two weeks later hired one of the graduates, Travis Flatt, as a UX Engineer.</p> <p>“The Codeup Experience has more to offer than rote learning of a programming language,” says Travis. “There's structure and purpose to it, and it’s a great opportunity to make connections within the San Antonio web development community. Codeup is built with the end goal of creating professional developers, which is a broader scope than simply 'learning some code'.”</p> <p>Not only was Travis’ application, <a href="http://eatsafe-sa.com/">Eat Safe SA</a>, creative and well-architected, he also presented the project well and distinguished himself from others in the program — just what Mark was looking for.</p> <p>“I had a strategy,” Mark admits. “I figured if I could get the inside scoop on who the really good developers were, I could eliminate a good chunk of the risk that seems to always accompany a new hire. Turns out it wasn’t hard. The students themselves talked openly at Demo Day about who they thought were the rock stars, and Travis’ name was one that kept coming up. I thought he had a great mix of skills to complement our existing team, and so far that’s proven correct.”</p> <h2>Codeup makes our team stronger</h2> <p>Digett’s strongest selling point is that every one of our team members is an expert in his or her field — it’s the combination of these strengths that allows us to provide the best possible results with our projects.</p> <p>Hiring through Codeup is the easiest way we’ve found to bring on a developer whose skills complement our team and lead to a more successful business.</p> <p>“It is awesome to partner with an amazing company like Digett,” says Codeup co-founder Chris Turner. “They truly understand that great team members are what makes their business so successful. We’re proud to be a part of that.”</p> <h2>Register for Codeup and save</h2> <p>We believe in the power of Codeup, and want to help you take advantage of this opportunity to change your life in three short months.</p> <p>Simply <a href="http://codeup.us3.list-manage1.com/track/click?u=f9d3ec1c81ebec9be408b6ffc&amp;id=a929881272&amp;e=65334314ff">register for Codeup at this link</a> and enter <em>Digett</em> in the referral field to receive $100 off the cost of the Codeup program.</p> <p>You will be challenged, but you will succeed. And your life will never be the same. Code on!</p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1119&amp;2=comment_no_subject&amp;3=comment_no_subject" token="hu4-gbRlx4dMdLH-BadHiDPXt-PFf3H2KTdBkFh_mtI"></drupal-render-placeholder> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/need-great-web-developer-hire-through-codeup" st_title="Need a Great Web Developer? Hire Through Codeup." class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/need-great-web-developer-hire-through-codeup" st_title="Need a Great Web Developer? Hire Through Codeup." class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/need-great-web-developer-hire-through-codeup" st_title="Need a Great Web Developer? Hire Through Codeup." class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/need-great-web-developer-hire-through-codeup" st_title="Need a Great Web Developer? Hire Through Codeup." class="st_email_large" displayText="email"></span> </div> Thu, 19 Jun 2014 14:51:19 +0000 Amy Peveto 1119 at https://www.digett.com Crawling vs. Indexing: Robots.txt and sitemap.xml https://www.digett.com/insights/crawling-vs-indexing-robotstxt-and-sitemapxml <span>Crawling vs. Indexing: Robots.txt and sitemap.xml</span> <div class="field field--name-field-teaser-image field--type-image field--label-hidden field__item"> <img src="/sites/default/files/styles/blog_card/public/filefield_images/field_teaser_image/crawling-vs-indexing-robots-txt-sitemap-xml.png?itok=2JVvUodZ" width="275" height="183" alt="Crawling vs. indexing: robots.txt and sitemap.xml" typeof="foaf:Image" /> </div> <span><span lang="" about="/users/jd-collier" typeof="schema:Person" property="schema:name" datatype="">JD Collier</span></span> <span>Tue, 04/15/2014 - 9:55am</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Sometimes you need to prevent a site, page or everything at a particular path from showing up in Google search. I've heard people say to just disallow the page in robots.txt file. This is actually incorrect.</p> <!--break--><p>If you simply add a disallow to your robots.txt file, then it is true that Google will not "crawl" that page, but if you have that page in your sitemap.xml file then the page will still be submitted to the Google Index.</p> <p>You will find your disallowed content in Google search.</p> <h2> For example</h2> <p>Scenario:</p> <ul> <li> I have created a view with client logos and I don't want each node to be seen. I only want the nodes to appear inside my view.</li> <li> The nodes are at a /clients path.</li> </ul> <p>In this scenario, I will do just one thing:</p> <p><meta content="noindex" name="robots" /></p> <ul> <li> Add noindex to the page</li> </ul> <p>A common error I've seen is for people to add:</p> <ul> <li> disallow: /clients to robots.txt</li> </ul> <p>I've seen people perform this update and think this will prevent the page from showing in Google search. However, if you are using the sitemap.xml module to create your sitemap.xml file, chances are you also have it set to auto submit your index to Google and possibly other search engines.</p> <h2> Crawling vs. indexing</h2> <p>You have prevented Google from <em>crawling</em> your site, but you may have just allowed your sitemap module to autosubmit the url to be indexed. It will not crawl further after this link, but it has still been indexed.</p> <p><em>Note: You should also configure your sitemap.xml module correctly, but that is another topic.</em></p> <p>Robots.txt tells Googlebot and other crawlers what is and is not allowed to be crawled; the noindex tag tells Google Search what is and is not allowed to be indexed and displayed in Google Search.</p> <h3> One step further</h3> <p>This part hurts my brain, but there seems to be consensus that you should <em>not</em> add items you want to prevent from search to your robots file. Instead, you should allow them to be crawled and have a noindex tag on them to then ensure Google knows not to display them.</p> <h2> Development environments</h2> <p>On a development server, this is much simpler. You can tell Apache to globally disallow all files. In the Apache httpd.conf file, add this:</p> <p><code># Globally disallow robots from the development sever<br /> Header Set X-Robots-Tag "noindex, noarchive, nosnippet"</code> </p><p>You can also do this in an htaccess file to add this header in a more granular scenario.</p> <p>What do you think? Agree, disagree, or duh? :)</p> <p><em>[Image by  <a href="https://www.flickr.com/photos/iguanajo/277209483">giorgio raffaelli</a>]</em></p> </div> <section> <h2>LEAVE A COMMENT</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=1098&amp;2=comment_no_subject&amp;3=comment_no_subject" token="-lVWn5vBacPBdHtO6rc2AqWf7OUEU0bJvzEB30YBoek"></drupal-render-placeholder> <article data-comment-user-id="0" id="comment-2004" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1397657127"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">kalabro</span> on Wed, 04/16/2014 - 9:05am</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>Both robots.txt and sitemap.xml are recommendations. Usually you need to configure 403 HTTP status for non-public data.</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2004&amp;1=default&amp;2=en&amp;3=" token="MXijhLoJF2Mfb6M_UM45Kv1zTTW4mIe3vx_4we9LwXE"></drupal-render-placeholder> </div> </div> </article> <article data-comment-user-id="0" id="comment-2008" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1398124278"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">Your Name</span> on Mon, 04/21/2014 - 6:51pm</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>Nice post. It's a duh and a jeh all in once. We see a lot of things go wrong with robots.txt and sitemaps because somehow all website developers, hobbyist and pro alike, need to do some seo it seems. They then turn to the usual suspects that are top of mind resulting in people putting in regular expressions in the robots as well. So the want to disallow a url and end up take down a whole tag or category with 40 valuable pages on it. </p> <p>Truth of the matter is that the real masters of the crawl and indexing process do not use robots.txt nor a xml sitemap. A well designed and structured site should provide ample breadcrumbs for the spider to follow starting with an effective menu and navigation structure on the front page for every website as not doing this causes a chain reaction like effect on the indexability of a site as a whole. When we do not cut corners we manage to get millions of pages indexed in the first year for new websites. How? With with followed links on to targets we choose and for the rest it’s never cutting corners. </p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2008&amp;1=default&amp;2=en&amp;3=" token="WVvLIk32cpkXnQ41JrbGD_9ouhY7jXkxCZK1a0fh50E"></drupal-render-placeholder> </div> </div> </article> <article data-comment-user-id="0" id="comment-2053" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1404591998"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">Stefan</span> on Sat, 07/05/2014 - 3:26pm</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>Commands in a robots.txt file are requests, not commands, to web crawlers, which they hopefully choose to honor.</p> <p>However malicious crawlers will actually look for the locations of hidden content in robots.txt - which they would otherwise not have discovered if the robots.txt file was not present.</p> <p>That is why I believe it is better not to specify the location of hidden pages using robots.txt, but instead with a meta robots tag with a noindex value (or other solutions f you have access to server configuration.)</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2053&amp;1=default&amp;2=en&amp;3=" token="anoQX8HAJIdAj3aCrPQOfz3z3LdlC8m05OhfmVcssaI"></drupal-render-placeholder> </div> </div> </article> <article data-comment-user-id="0" id="comment-2073" class="js-comment comment-container"> <mark class="hidden" data-comment-timestamp="1407334645"></mark> <div> <div class="comment-name">Submitted by <span lang="" typeof="schema:Person" property="schema:name" datatype="">ahmed</span> on Wed, 08/06/2014 - 9:17am</div> <div class="comment-body"> <div class="field field--name-comment-body field--type-text-long field--label-hidden field__item"><p>so what if i submitted both xml sitemap and submitted another sitemap (for videos for example) in robots.txt? are both of them gonna be indexed? or one will override the other? here's exactly my confusion...</p> <p>i actually have my sitemap in the root of my site, and i am in process now for making my content rich by adding videos and implement video SEO for it, so the video seo tool is advising to add 1 line to robots.txt to point to the sitemap that is hosted on their servers for videos, i am not sure what to do now.. i wish if i have separate sitemaps, but not to index them in one file, i want to keep the default way for videos to be added to robots and leave my other sitemap as it is, how could i perform that?</p> </div> <drupal-render-placeholder callback="comment.lazy_builders:renderLinks" arguments="0=2073&amp;1=default&amp;2=en&amp;3=" token="r2kvd3j7AMpbPz1j8Dwqp_6zWChZFGp9j2_bSt8xcqA"></drupal-render-placeholder> </div> </div> </article> </section> <div class="sharethis-wrapper"><span st_url="https://www.digett.com/insights/crawling-vs-indexing-robotstxt-and-sitemapxml" st_title="Crawling vs. Indexing: Robots.txt and sitemap.xml" class="st_facebook_large" displayText="facebook"></span> <span st_url="https://www.digett.com/insights/crawling-vs-indexing-robotstxt-and-sitemapxml" st_title="Crawling vs. Indexing: Robots.txt and sitemap.xml" class="st_linkedin_large" displayText="linkedin"></span> <span st_url="https://www.digett.com/insights/crawling-vs-indexing-robotstxt-and-sitemapxml" st_title="Crawling vs. Indexing: Robots.txt and sitemap.xml" class="st_twitter_large" displayText="twitter"></span> <span st_url="https://www.digett.com/insights/crawling-vs-indexing-robotstxt-and-sitemapxml" st_title="Crawling vs. Indexing: Robots.txt and sitemap.xml" class="st_email_large" displayText="email"></span> </div> Tue, 15 Apr 2014 14:55:05 +0000 JD Collier 1098 at https://www.digett.com