March 3, 2016

What “Avg. Time on Page” Really Shows

Ever wondered how Google Analytics knows when you leave a page? It turns out, it doesn’t, which makes “Avg. Time on Page” and “Avg. Session Duration” interesting metrics.

Some Background

Our goal at Envato Tuts+ is to help people learn. If someone spends fewer than thirty seconds on a tutorial, they could have saved it to read later, but in most cases we can assume that they haven’t learned from it.

Google Analytics’ “Segments” let you filter any graph or table to show just visitors with a certain characteristic, like those viewing the site on a tablet or those that have visited the site before. So, why not use these to examine how many people spent more than thirty seconds reading tutorials?

The answer is: because “Avg. Time on Page” doesn’t work like that. Neither does “Avg. Session Duration”, for that matter. 

Let’s suppose I go to the Envato Tuts+ home page, spend ten seconds scrolling through the front page, click a tutorial that I like, spend fifteen minutes reading it, and then close the tab. The “Avg. Time on Page” that GA records for the front page is ten seconds. The “Avg. Time on Page” that GA records for the tutorial is... zero seconds.

Yes, Zero Sec— Wait, What?

You see, the only way GA can calculate how long you’ve spent on a page is by taking:

  • The time you loaded the page (which it knows), and
  • The last time you did anything on that page

...and figuring out the difference between the first and the second.

Google Analytics can detect when you click a link and log the time, but it can’t detect when you close a tab—that’s why Google Analytics knew how long I spent on the front page, but not on the actual tutorial. If I clicked a link to a related Quick Tip when I finished reading the tutorial, read the Quick Tip, and then closed the tab, then Google Analytics would record a “Avg. Time on Page” of 15 minutes for the tutorial, and (again) zero seconds for the Quick Tip.

Getting Around This

Remember in When a Bounce is Not a Bounce, I said you could send Google Analytics a signal that says, “this isn’t a bounce”? Well, those signals also let GA know that the reader is still there—they give it a better estimate of the time the reader last did anything on the page.

We can also send signals that don’t mess around with the bounce rate, but that GA can still use to form this estimate. They might simply say, “the reader is still here”, or they may serve some other purpose as well. 

We could fire off one of these signals every thirty seconds, so we’d know how long each reader spent on each page with an accuracy of half a minute. This can be misleading, though, since a tutorial that sits in a background tab for half an hour and then gets closed without being read would record an “Avg. Time on Page” of thirty minutes.

My personal preference would be to pair this with another measure of engagement: for instance, send a signal for every 100px the reader scrolls down the page, or every minute of video they watch on an embedded screencast. This would still overestimate “Avg. Time on Page” for tabs left open in the background (assuming they were eventually read or watched), but we’d be able to gather more interesting information; do readers skim or scrub through the content, or read it properly? Do readers bail out half way through, or stay till the end?

Next Time...

Next time, I’ll talk about why “pageviews”, a commonly used metric, isn’t an all-important measure of how a website is performing.

March 3, 2016

Best New Photoshop Templates of 2016

Time flies, and we’re already cranking ahead here in 2016. Today is a great day to make a quick change!

Are you ready to build your business online? Get a pixel perfect, tour de force of a site ready? Or rework your existing site to new trends?

It requires some real creative talent and Photoshop knowhow to design a high-calibre website. And even if you’re a professional web designer, with the right visual skills, it’s still time consuming to craft every pixel, all the multiple pages of your client’s website, and give every UI element, section, and tiny detail the attention it needs. It’s a whole lot quicker to grab a quality Photoshop Template—one that is already crafted with care.

We have a number of distinctive PSD files to choose from. Here we showcase the most popular Photoshop Templates, recently released in 2016—which are available for purchase and download. These are just a drop in the bucket of websites that pro web designers are uploading for sale on ThemeForest every week. Take a look at those that are taking off in 2016:

Best New PSD Template Files - Websites
Best New PSD Template Files, available for sale and download on GraphicRiver.

The right design can transform your website, rework it from a mediocre mess, into a moving masterpiece. Your website sales can jump, you can make a memorable impact on potential customers, and transform your bottom-line. You can retool your identity—turn your brand from blasé to beautiful. Your business (or those of your clients) can fulfill their vision and reach their potential online!

5 Best Photoshop Template Files (Trending in 2016)

Here are five new Photoshop website templates that are trending on ThemeForest. They’re created by talented web designers that have put time and care into crafting every nuance of these PSD files.

1. Begge - Modern Fashion Shop PSD Template Files

If your goal in 2016 is to launch an online eCommerce business, especially one that has an on-trend focus on fashion, then this Photoshop template is made for you. It’s got an optimal design that puts your products and images first.

It’s a clean layout with super clear flow. Its design is compelling and organized, but includes just enough grid-breaking of overlapping boxes to grab a shopper’s attention. The PSD files are organized and can be customized to your site needs quickly!

Begge eCommerce PSD Template Files
Begge - Best New PSD File (2016).

2. Digital Agency - SEO/Marketing Photoshop Template

Digital Agency is a PSD Template made for SEO and agency website use. It has a material based design, which blends clean UI elements with bold colors. It’s just waiting to have your photos and graphics added so you can prep it for your site.

Also, you have the option to purchase just the PSD file, or jump over and grab the WordPress version, which is already fully coded, built on the Bootstrap 3 Framework, and jam-packed with features.

Digital Agency PSD Site Template
Digital Agency - Best New PSD Template (2016).

3. Volter - Creative Photoshop Website Template (PSD)

This is a creative Photoshop Template with a distinctive website design. Volter is made to feature your portfolio of work, present your beautiful images, and engage new visitors with bold typography. You can demonstrate your process, outline your services, and give new clients great reasons to hire you! It’s a high resolution PSD file, based on the 1170px Bootstrap Grid, and setup to be easy to work with. It’s ready to grab and start designing your unique online showcase!

Volter Creative PSD File 2016
Volter - Best New PSD Site Template (2016).

4. Experts - Business and Finance Site PSD Template

If you’re looking for a Photoshop template for your new financial website, then Experts is an excellent choice. It comes loaded with 55 PSD files, multiple home page designs, as well as unique pages, for featuring your pricing, testimonials, services, and more.

This template is like putting on a suit and tie for your business. It’s designed for legal, financial companies, investment firms, accountants, or any kind of professional business. Choose from one of 21 headers, multiple footer options, and loads of pixel perfect components and ready to customize sections.

Experts - Best New Photoshop Site Template
Experts - Best New PSD Site Template (2016).

5. The Spectre - Agency Business Site Photoshop Template

The Spectre is a modern flat agency template. It has a clean design with 12 adaptive pages and theme blocks that can be mixed and matched as needed. There are multiple design features, with stylish line icons, vector shapes, and attractive UI elements, such as: profiles, pull quotes, and image showcases. It’s built for Bootstrap with 12 columns and 1170px width. This is a well-crafted, attractive set of PSD files, ready to use on your next website design.

The Spectre Agency PSD Site Template 2016
The Spectre - Best New PSD Agency Template (2016).

Grab a New Photoshop Website Template File!

Have a look through the hundreds of professional Photoshop Templates created by talented web designers on ThemeForest. Or, if you’re a web designers yourself, have an eye for emerging trends, and a creative hand with crafting every pixel, then upload your own website PSD files. Become an author to start making sales and engaging with entrepreneurs on our marketplace. 

March 2, 2016

Project: Finishing up Our Middleman Podcast Website

In this, the last tutorial in our series, we’ll implement a navbar and a hero section for branding our podcast site. A simple, non-bulky pagination rounds up the first version of this project and gives you all you need to get going with publishing your podcast episodes.

What We’ll Cover

  • Hero Section
  • Navigation
  • Title
  • Pagination

Hero Section

Why don’t we add a small hero section on top of the index page? I want something that gives us an opportunity to brand the podcast site without going full-splashy-marketing-page-nuts. I strongly trust in “less is more” and moreover, in “don’t insult your users by bombarding them with nonsense”. Let’s keep it nice and simple.

In this last article we will make use of another part of the Bourbon family and implement a couple of patterns from Refills—which provides a pattern / components library (styled and unstyled) and is built with Bourbon and Neat. Why reinvent the wheel when we can now and then adjust existing ones to our needs?

Note: The Refills project is maintained by designers at thoughtbot—so it’s in very good hands quality-wise.

Go to http://refills.bourbon.io/ and copy the markup for the “Hero Unit”. The provided markup is placed in our index file—right above the part where we iterate over our page_articles. In “source/index.html.erb”:

...

<div class="hero">
  <div class="hero-inner">
    <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
" alt="Logo Image"></a>
    <div class="hero-copy">
      <h1>Short description of Product</h1>
      <p>A few reasons why this product is worth using, who it's for and why they need it.</p>  
    </div>
  </div>
</div>

<div class='posts'>
  <% page_articles.each_with_index do |article, i| %>
    <h2 class='post-title'><span class='post-date'><%= article.date.strftime('%b %e') %></span> <%= link_to article.title, article %></h2>

...

Here I copied the styles from Refills’ pattern section as well, placing them into a new file dedicated to this banner section. The provided styles are in the .scss syntax and so I go with the flow—there’s no need to convert this into .sass really.

In “source/stylesheets/_hero_banner.scss”:

.hero {  
  $base-border-radius: 3px !default;
  $action-color: #477DCA !default;
  $large-screen: em(860) !default;
  $hero-background-top: #7F99BE; 
  $hero-background-bottom: #20392B;
  $hero-color: white;
  $gradient-angle: 10deg;
  $hero-image: 'https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/mountains.png';

  @include background(url($hero-image), linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), no-repeat $hero-background-top scroll);
  background-color: #324766;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 3em;

  .hero-logo img {
    height: 4em;
    margin-bottom: 1em;
  }

  .hero-inner {
    @include outer-container;
    @include clearfix;
    margin: auto;
    padding: 3.5em;
    text-align: center;

    .hero-copy {
      text-align: center;
      
      h1 {
        color: $hero-color;
        font-size: 1.6em;
        margin-bottom: 0.5em;

        @include media($large-screen) {
          font-size: 1.8em;
        }
      }

      p {
        color: $hero-color;
        line-height: 1.4em;
        margin: 0 auto 3em auto; 

        @include media($large-screen) {
          font-size: 1.1em;
          max-width: 40%;
        }
      }
    }
  }
}


We will adjust this in a second but let’s take a peek first:

file

It fits right in—that’s how I like it! Let’s tweak this to our needs by getting rid of the image and icon. But let’s start with the text, so in “source/index.html.erb”:

<div class="hero">
  <div class="hero-inner">
    <a href="" class="hero-logo"><img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1.png
" alt="Logo Image"></a>
    <div class="hero-copy">
      <h1>MATCHA NERDZ</h1>
      <p>Podcast for green tea connoisseurs</p>  
    </div>
  </div>
</div>

You can tweak this any way you like. I want to make this quick and just increase the size of the h1 for both large screens and smaller devices. The hero unit header is now 2em and 3em respectively—not too much. The padding on .hero-inner also needs to move a nudge.

Again in “source/stylesheets/_hero_banner.scss”:

.hero-inner {
  //padding: 3.5em;
  padding-top: 1.2em;
}

.hero-copy {
  text-align: center;
  
  h1 {
    color: $hero-color;
    font-size: 2em;
    margin-bottom: 0.5em;

    @include media($large-screen) {
      font-size: 3em;
    }
  }

Next let’s kill the logo placeholder. I find them often a bit annoying. In “source/index.html.erb”:

<div class="hero">
  <div class="hero-inner">
    <div class="hero-copy">
      <h1>MATCHA NERDZ</h1>
      <p>Podcast for green tea connoisseurs</p>  
    </div>
  </div>
</div>

That’s all we need. Since we don’t use the hero logo, let’s get rid of their styles—dead weight, so in “source/stylesheets/_hero_banner.scss”:

//.hero-logo img {
//  height: 4em;
//  margin-bottom: 1em;
//}

Background Image

The generic background image also has to go. I’ll first show you how I want it to look, then I’ll explain how to get there.

file

Ignore the typography for now, you can adjust it later. I replaced the image and put a slight gradient on top of it. Since the type is white, I needed a bit more contrast for a better reading experience. If you choose an image that does not need an additional gradient, go for it!

I adjusted the Refills code with a couple of changes. First, I added an image to “source/images” and saved this image in the variable $hero-image. Then I reused this variable in the background mixin from Bourbon and reordered the image and the linear-gradient (a Bourbon mixin as well). Because the gradient comes first, it is overlayed on top of the Matcha_Nerdz.png. Once more, in “source/stylesheets/_hero_banner.scss”:

.hero {  
  $hero-image: '../images/Matcha_Nerdz.png';

  $hero-background-top: darken($matcha-green, 65%); 
  $hero-background-bottom: rgba(lighten($matcha-green, 10%), .3);

  @include background(linear-gradient($gradient-angle, $hero-background-bottom, $hero-background-top), url($hero-image), no-repeat $hero-background-top scroll);

  margin-bottom: 2em;

  //background-color: #324766;
  //background-size: cover;

For the gradient itself, I reused our $matcha-green that we stored in “source/stylesheets/base/_variables.scss”. The top color is darkend by 65% with a Sass function; the other one is lightened by 10% and also made transparent via another Sass function called rgba. We then reuse these variables in our background mixin. The gradient-angle stayed the same. I also added a small margin of 2em to push the index list down a bit. The styles I commented out for you are dead weight and so I deleted them.

You can play with such a gradient directly in Photoshop as well, of course, but I wanted to show you how you can use them in Sass. Below is a screenshot that has no linear gradient added to the hero unit. As a little exercise, I’ll leave the cleanup of the styles we copied to you. If you find duplicates or unused styles, I recommend you fix this before moving on.

file

Commit and Deploy

Time for another commit and deploy.

git add --all
git commit -m 'Adds hero unit to index.html.erb
               Adds hero image with gradient
               Adds _hero_banner Sass partial
               Imports Sass partial'

middleman deploy

file

Without the visual grid, it doesn’t look you have much work left to adjust this page for your podcasting needs. A few things I’d recommend you do is find a typeface that communicates your project distinctively without being too exotic and adjust the size and spacing of your text so that it fits your hero unit background image. Since this is part of your branding, I suggest you take your time and have some fun!

Navigation

It’s a good time to add a navbar. Again, we will use an existing pattern from Refills and adapt it for our own needs. I chose the “Centered Navigation” which you will find under “Patterns”. For this one, we need to copy the HTML, SCSS and the CoffeeScript code. I’ll start first by adding the markup to our global “layout.erb” file

<!doctype html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge;chrome=1' />
		 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title>Blog Title<%= ' - ' + current_article.title unless current_article.nil? %></title>
    <%= feed_tag :atom, "#{blog.options.prefix.to_s}/feed.xml", title: "Atom Feed" %>
    <%= stylesheet_link_tag "all" %>
    <%= javascript_include_tag  "all" %>
  </head>

  <body>

    <header class="centered-navigation" role="banner">
      <div class="centered-navigation-wrapper">
        <a href="javascript:void(0)" class="mobile-logo">
          <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
        </a>
        <a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
        <nav role="navigation">
          <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
            <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
            <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
            <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
            <li class="nav-link logo">
              <a href="javascript:void(0)" class="logo">
                <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_3_dark.png" alt="Logo image">
              </a>
            </li>
            <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li>
            <li class="nav-link more"><a href="javascript:void(0)">More</a>
              <ul class="submenu">
                <li><a href="javascript:void(0)">Submenu Item</a></li>
                <li><a href="javascript:void(0)">Another Item</a></li>
                <li class="more"><a href="javascript:void(0)">Item with submenu</a>
                  <ul class="submenu">
                    <li><a href="javascript:void(0)">Sub-submenu Item</a></li>
                    <li><a href="javascript:void(0)">Another Item</a></li>
                  </ul>
                </li>
                <li class="more"><a href="javascript:void(0)">Another submenu</a>
                  <ul class="submenu">
                    <li><a href="javascript:void(0)">Sub-submenu</a></li>
                    <li><a href="javascript:void(0)">An Item</a></li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li>
          </ul>
        </nav>
      </div>
    </header>
    
    <div id="main" role="main">
      <%= yield %>
    </div>

    <%= partial "partials/footer" %>
    
  </body>
</html>

Whoa! That’s quite a chunk of code. Are you thinking the same as me? This looks nasty, right? Let’s put this into a partial. We’ll change “source/layouts/layout.erb” to:

...

  <body>

    <%= partial "partials/navbar" %>
    
    <div id="main" role="main">
      <%= yield %>
    </div>

    <%= partial "partials/footer" %>
    
  </body>
</html>

And add “source/partials/_navbar.erb”:

<header class="centered-navigation" role="banner">
  <div class="centered-navigation-wrapper">
    <a href="javascript:void(0)" class="mobile-logo">
      <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>
    </a>
    <a href="javascript:void(0)" id="js-centered-navigation-mobile-menu" class="centered-navigation-mobile-menu">MENU</a>
    <nav role="navigation">
      <ul id="js-centered-navigation-menu" class="centered-navigation-menu show">
        <li class="nav-link"><%= link_to 'Home', '/matcha-nerdz' %></li>
        <li class="nav-link logo">
          <%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>
        </li>
        <li class="nav-link"><%= link_to 'About', '/pages/about.html' %></li>
      </ul>
    </nav>
  </div>
</header>

I’ve removed a bunch of stuff that I don’t need and only end up with my logo that I stored in “/images” and two links for home and about pages. For the two links I used the link_to helper method. It takes two arguments:

  • The string you want users to click on
  • and the location you want to link to.

I’m sure people who have played a bit with Rails or Sinatra are familiar with this. Handy, but no big deal. The link for “Home” (/matcha-nerd) will break for your local host but it is working on GitHub Pages where we need the namespace.

The avid reader might also have discovered that our about link links to a simple HTML page that I placed in a new directory named “pages”. I suggest you put HTML pages like contact, faq or whatever also in this directory. If you put these static pages in there you should have no problems customizing them to your needs. Just have some fun and apply what you’ve learned so far with these pages. From here on you are on your own with these, but you now know everything you need. Samo, samo!

Asset Path

A word about the image tags and the asset path on GitHub Pages. I decided to replace the plain img tags for the logo with a Middleman helper called image_tag. It’s not only pretty concise and readable, but also fixes an issue you will run into with the img tag when you build the site and deploy it to GitHub Pages. The url for the asset link on individual articles gets all screwed up and this is the simplest solution to fix that.

<img src="/images/matcha_nerdz_logo.png" alt="Logo image"> 

Before using image_tag, the url for the logo looked like this: http://your_username.github.io/images/matcha_nerdz_logo-hash_numbers.png

<%= image_tag "matcha_nerdz_logo.png", alt: "Logo image" %>

This Middleman helper provided the url with the app name matcha-nerdz—it correctly namespaced the asset and gives GitHub Pages access to this image file (http://your_username.github.io/matcha-nerdz/images/matcha_nerdz_logo-hash_numbers.png).

More Organization

The styles I copied from Refills are in a new Sass partial of course. In “source/stylesheets/all.sass” we reference:

@import 'header_navbar'

And the actual partial “source/stylesheets/_header_navbar.scss” looks like:

.centered-navigation {
  $base-border-radius: 3px !default;
  $dark-gray: #333 !default;
  $large-screen: em(860) !default;
  $base-font-color: white;
  $centered-navigation-padding: 1em;
  $centered-navigation-logo-height: 2em;
  $centered-navigation-background: #E7F1EC;
  $centered-navigation-color: $base-font-color;
  $centered-navigation-color-hover: $text-color;
  $centered-navigation-height: 60px;
  $centered-navigation-item-padding: 1em;
  $centered-navigation-submenu-padding: 1em;
  $centered-navigation-item-nudge: 2.2em;
  $horizontal-bar-mode: $large-screen;
  background-color: $matcha-green;
  border-bottom: 1px solid darken($matcha-green, 5%);
  min-height: $centered-navigation-height;
  width: 100%;
  z-index: 9999;

  // Mobile view

  .mobile-logo {
    display: inline;
    float: left;
    max-height: $centered-navigation-height;
    padding-left: $centered-navigation-padding;

    img {
      max-height: $centered-navigation-height;
      padding: .8em 0;
    }

    @include media($horizontal-bar-mode) {
      display: none;
    }
  }

  .centered-navigation-mobile-menu {
    color: $centered-navigation-color;
    display: block;
    float: right;
    line-height: $centered-navigation-height;
    margin: 0;
    padding-right: $centered-navigation-submenu-padding;
    text-decoration: none;
    text-transform: uppercase;

    @include media ($horizontal-bar-mode) {
      display: none;
    }

    &:focus,
    &:hover {
      color: $centered-navigation-color-hover;
    }
  }

  // Nav menu

  .centered-navigation-wrapper {
    @include outer-container;
    @include clearfix;
    position: relative;
    z-index: 999;
  }

  ul.centered-navigation-menu {
    -webkit-transform-style: preserve-3d; // stop webkit flicker
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 99999;

    &.show {
      display: block;
    }

    @include media ($horizontal-bar-mode) {
      display: block;
      text-align: center;
    }
  }

  // The nav items

  .nav-link:first-child {
    @include media($horizontal-bar-mode) {
      margin-left: $centered-navigation-item-nudge;
      padding-right: 0px;
    }
  }

  ul li.nav-link {
    background: lighten($matcha-green, 8%);
    display: block;
    line-height: $centered-navigation-height;
    overflow: hidden;
    padding-right: $centered-navigation-submenu-padding;
    text-align: right;
    width: 100%;
    z-index: 9999;

    a {
      color: $centered-navigation-color;
      display: inline-block;
      outline: none;
      text-decoration: none;

      &:focus,
      &:hover {
        color: $centered-navigation-color-hover;
      }
    }

    @include media($horizontal-bar-mode) {
      background: transparent;
      display: inline;
      line-height: $centered-navigation-height;

      a {
        padding-right: $centered-navigation-item-padding;
      }
    }
  }

  li.logo.nav-link {
    display: none;
    line-height: 0;

    @include media($large-screen) {
      display: inline;
    }
  }

  .logo img {
    margin-bottom: -$centered-navigation-logo-height / 3;
    max-height: $centered-navigation-logo-height;
  }
}

I put the CoffeeScript code from Refills into “all.coffee”. As soon as I had to add more code than that, I’d put it into its own designated place. “source/javascripts/all.coffee”:

//= require jquery

$(document).ready ->
  menuToggle = $('#js-centered-navigation-mobile-menu').unbind()
  $('#js-centered-navigation-menu').removeClass 'show'
  menuToggle.on 'click', (e) ->
    e.preventDefault()
    $('#js-centered-navigation-menu').slideToggle ->
      if $('#js-centered-navigation-menu').is(':hidden')
        $('#js-centered-navigation-menu').removeAttr 'style'
      return
    return
  return

This snippet is responsible for toggling the menu for smaller screens.

file

Because I deleted a bunch of stuff I didn’t need from the navbar markup—like the submenu—I was able to get rid of a significant chunk of the relevant styles in this file. Since I don’t know if you need a more elaborate navbar and want to take the code right from these examples, I suggest you copy the original code if you have bigger plans for the navbar. Play with the Sass to fit your style, remove dead code and duplicates. I adjusted the background color and link colors, played with the transparency of the logo, changed the border and moved on. Have fun and go crazy if you like. I just wanted to use a super simple navbar with the brand color and a centered logo. It turned out pretty good for this little work I’d say.

Here’s the index page:

file

And here’s the detail page:

file

Time to package this into a git commit and for deploying the site.

git add --all
git commit -m 'Implements a header with navbar
               Adds header partial to layout
               Takes care of deployed asset url for logo
               Imports Sass partial for navbar
               Adds logo
               Adds CoffeeScript code
               Adjusts Refills styles
               Adjusts Refills markup'

middleman deploy

Title

The next change is a small one, just a touch really. We need to update the title tag in our layout (“source/layouts/layout.erb”):

<title>Matcha Nerdz<%= ' - ' + current_article.title unless current_article.nil? %></title>

This gives us a dynamic title which always starts with our site’s name and attaches the article’s title if available.

git add --all
git commit -m 'Adjusts site’s title'

middleman deploy

Pagination

When you look at the bottom of the index list of articles you’ll see something essential missing—navigating our list of posts.

file

I’m not a fan of overly clever pagination links—bulky ones are also not winning any awards with me. Let’s keep it simple and provide two links for next and previous pages. Middleman makes this incredibly convenient. We just need to adjust our “config.rb” and tell the frontmatter of our index page to fine tune it.

blog.paginate = true

First uncomment the line above. After that, you tell the index page how many articles you want to see. I think ten posts per page is enough. In “source/index.html.erb”:

---

per_page: 10
pageable: true

---

The final step before we apply some styling is to place both links conveniently at the bottom of the list. First we need to get rid of these lines of code below which were commented out. They were placed at the very top of your index page.

<!--
<% if paginate && num_pages > 1 %>
  <p>Page <%= page_number %> of <%= num_pages %></p>

  <% if prev_page %>
    <p><%= link_to 'Previous page', prev_page %></p>
  <% end %>
<% end %>
-->

And then place this at the very bottom of this page:

<% if paginate %>

  <% if prev_page %>
    <p class='pagination-link'><%= link_to '<< Previous page', prev_page %></p>
  <% end %>

  <% if next_page %>
    <p class='pagination-link'><%= link_to 'Next page >>', next_page %></p>
  <% end %>

<% end %>

This gives us the navigational links we need side by side and supplies us with a class to tweak a few things. I decided to go with a partial for the Sass code because it didn’t fit in the footer, nor the index post styles, plus it deserves a partial of its own, especially should it grow more in size. In “source/stylesheets/all.sass”:

@import 'pagination'

And in the partial “source/stylesheets/_pagination.sass”:

.pagination-link
  +shift(2)
  margin-bottom: 4em
  &:first-of-type
    float: left
    margin-right: 4em
  a
    +transition(color 0.25s ease-in-out)
    color: $text-color
    font-size: 1.1em
    &:hover
      color: $matcha-green

We shift the links a bit to the right, arrange them to float next to each other—default would be block behaviour being stacked on top of each other—and apply a little transitional effect when the user hovers over the link. That’s all we need right now. Let’s have a look.

file
file

Alrighty, time for another commit.

git add -all
git commit -m 'Adds Pagination to index list of posts
               Adjusts config.rb
               Adjusts markup on index page
               Adds styles in _pagination Sass partial'

middleman deploy

Final Thoughts

I guess that should suffice for version 01! As a next step, you should play with media queries to make the layout responsive to various screen sizes. The typography could need some serious love as well.

Pick a typface or two that best goes with the theme of your podcast—just don’t forget to keep it super readable.

Also, should you decide to do a podcast for real, I can only congratulate you. It’s a great way to learn from experts and also to increase your network significantly. Doing something of value for the community is always a good idea and can pay off big time. One last tip, try to learn by doing and experiement as much as you can! Reading alone just doesn’t cut it—been there, done that! If you like to share the lessions learned by writing about it, you will deepen your understanding of the topic even more. Have fun!

March 1, 2016

When a Bounce is Not a Bounce

Continuing our series on interpreting web analytics, this article looks at how factors like infinite scrolling affect bounce rate, and how it’s possible to skew your own analytics to produce nicer, “friendlier” results.

Things Aren’t Always as They Seem

“This Is What Happens When Publishers Invest In Long Stories”, declared Co.Labs back in 2013, with a chart showing a dramatic drop in bounce rate:

Wow–looks like it dropped from around 75% to 20%! From our definition of bounce rate (the percentage of visits that only last one page), we know that this means that, pre-dip, roughly 75% of visits were only one page long; post-dip, 20% of visits were only one page long.

Or, in other words: pre-dip, only 25% of visits looked at more than one page; post-dip, 80% of visits looked at more than one page. 

Note: Since publication, the author @chrisdannen has appended some corrections, a portion of which address mistakes made in the original data collection. This isn’t a problem for our examples, as the data still serves our points.

A little further down the article, this chart is shared:

The light blue line shows the average number of pages a visitor looks at in a single visit, and it’s barely changed. But wait–if the number of people looking at more than one page has gone from 25% to 80%, surely this line should have shot up too?

To understand why it doesn’t, let’s first take a little detour.

Infinite Scroll and Bounce Rate

Let’s suppose you go to one of the Envato Tuts+ home pages, scroll down to the bottom, and click the link for Page 2. When Page 2 loads, your visit won’t count as a bounce for either the front page or Page 2.

Now, imagine we implemented infinite scroll, as seen on sites like Twitter and Facebook: when you scroll down to the last post in the list, the page automatically loads the next ten posts. You’ve done practically the same thing as above, but because you haven’t clicked a link to load a separate page, it doesn’t count as visiting two pages–if you left the site, it would still count as a bounce.

This seems like a fairly arbitrary distinction. Fortunately, Google Analytics provides a way around it: in the code that says “grab the next ten posts and add them to the list”, we can also say, “oh, and tell Google Analytics that this doesn’t count as a bounce”.

Back to Co.Labs

I think you can reasonably justify manually ignoring a bounce in that example, but–not surprisingly–many sites use that feature to manually ignore bounces in all sorts of other situations.

“Stayed on the page for more than thirty seconds? Tell Google Analytics that this doesn’t count as a bounce!” “Scrolled past the fold? Tell Google Analytics that this doesn’t count as a bounce!”

Personally, I’m not keen on this, because it muddies the definition of a bounce, which can add unnecessary confusion.

And this seems to be exactly what happened at Co.Labs. As soon as you scroll a few pixels down the page, your visit is no longer counted as a bounce. It’s possible that the editors investing in long stories led to visitors scrolling more, but I suspect that, actually, the scroll tracking was implemented at around the same time that Co.Labs editors started their experiment.

Conclusion

The lesson, again, is that context is important: bounce rate is not a magic number we should be aiming to keep within some range; it’s important to know what it actually represents.

You might have noticed that, although the average pages/visit didn’t change much in the second chart, the average time on page did. That’s a good result, right? Well... maybe not. I’ll explain why in my next post.