January 4, 2016

Forget Your Testimonials Page, 2016 Is The Year Of Reviews

Let's face it: Customers aren't reading your testimonials page. So what can you put in its place? Columnist Greg Gifford shares his ideas.

The post Forget Your Testimonials Page, 2016 Is The Year Of Reviews appeared first on Search Engine Land.

January 4, 2016

Building a CMS: Structure and Styling

Final product image
What You'll Be Creating

There has been a trend of “flat CMS design” webservers. This simply refers to a Content Management System (CMS) that does not store its information in a database. Instead, all information is stored in plain text files. Since many virtual private servers (VPS) these days are using RAM-based hard drives, this approach is faster and a bit more secure.

In this series of tutorials, I will show you how to create your own flat file system CMS using some standard web technology. These systems are not as full featured as others, but have the basics with a good response time.

With all the information on the hard drive, file organization becomes a big issue. With that in mind, the site information will be in a different directory than the styling and layout information. Also, each type of page has its own directory under the site folder with a parts directory for small parts of the CMS. This keeps everything in its own place and makes a flexible system.

Main Directory Structure

In the directory in which you are going to build the project, create the following directories: src, site, and themes. The src directory will contain the server code, the site directory is for all the site information, and the themes directory for the layout and theming information.

In the themes directory, you need to make a layouts and a styling directory. The layouts directory will contain the different web page layouts. By separating the layout information from the styling information, the themes become much more flexible. For now, there will be one layout called SingleCol.

For all the styling and layout creation, I am using Sass, Compass, and Susy. Sass is a Custom Style Sheet processing language. It gives a more robust way to create the CSS style sheets for your website. Compass is an extension to Sass. Sassy-buttons is a Sass extension for making nice-looking buttons on the website. Susy is also an extension for creating a grid layout system for your site.

Since Ruby is pre-installed on all Macs, you will not need to install it. To get Ruby on a Windows system, you will need to download Ruby’s Windows Installer. On Linux, you need to use your system’s package manager to install Ruby.

Once Ruby is on your system, you can install Sass, Compass, Sassy-buttons, and Susy with these command lines:

gem install sass
gem install sassy-buttons
gem install compass
gem install susy

For this tutorial, I am using Sass 3.4.16, Sassy-buttons 0.2.6, Compass 1.0.3, and Susy 2.2.5. Depending on your system’s configuration, you might have to run these commands with sudo before them.

Layouts

To get started creating layouts, run these commands in the SingleCol directory:

compass init

This will create the sass and stylesheets directories, and a file named config.rb. Since I like using css for the stylesheet directory, rename the stylesheets directory to css. Also, create a js directory for any needed JavaScript files for the layout. Open the config.rb file and make it look like this one:

require 'susy'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

Now, to create the basic layout of the website, create a file in the layout directory called template.html. In this file, add this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta name="generator" content="goPress Servery by Custom Computer Tools.">
	<meta charset="utf-8">
	<title>
		{{{title}}}
	</title>
	<link rel="stylesheet" type="text/css" href="{{{WebAddress}}}/stylesheets.css">
	{{{head}}}
</head>

<body>
	<div id='wrap'>
		<div id='headerwrap'>
			<div id='header'>
				{{{header}}}
			</div>
			<div id='navigation'>
				{{{navbar}}}
			</div>
		</div>
		<div id='sidebar'>
			{{{sidebar}}}
		</div>
		<div id='content'>
			{{{content}}}
		</div>
		<div id='footer'>
			{{{footer}}}
		</div>
	</div>
	<script type="text/javascript" src="{{{WebAddress}}}/scripts.js"></script>
</body>

</html>

This template creates a standard web page for the site. Each page has a header with a navigation bar, a single sidebar, a content area, and a footer area. The last thing loaded is the javascripts needed for the site.

Each section is represented with a Handlebar macro. The server expands the macros before giving it to the user.

In the sass directory, create a file called base.scss and place this code:

@import 'compass/reset';
@import 'susy';

$susy: (
  flow: ltr,
  math: fluid,
  output: float,
  gutter-position: after,
  container: auto,
  container-position: center,
  columns: 16,
  gutters: .25,
  column-width: false,
  global-box-sizing: content-box,
  last-flow: to,
  debug: (
    image: hide,
    color: rgba(#66f, .25),
    output: background,
    toggle: top right,
  ),
  use-custom: (
    background-image: true,
    background-options: false,
    box-sizing: true,
    clearfix: false,
    rem: true,
  )
);

body {
}

#wrap {
  @include container(16);
  width: 1024px;
  display:  block;
}

#headerwrap {
  @include span(16 of 16);
  margin-bottom: 20px;
}

#header {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width:    95%;
}

#content {
    @include span(11 of 16);
 }

.col1 {
    @include span(5 of 10);
}

.col2 {
    @include span(last 5 of 10);
}

#footer .col2 {
    width: auto;
}

.box {
  @include span(4 of 10);
}

#sidebar {
  @include span(last 4 of 16);
}

#footer {
  @include span(16 of 16);
}

/** CSS dropdown menu **/

#navigation  {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width:    95%;
}

#menuh-container {
  top: 1em;
  left: 1em;
  display: inline;
  width: 100%;
}

#menuh {
  margin-top: 1em;
  display: inline;
  width: 100%;
}

#menuh ul li {
  display: inline-block;
  width: fit-content;
}

#menuh a
  {
  text-align: center;
  display:block;
  white-space:nowrap;
  margin:0;
  padding: 5px;
  text-decoration: none;
  }

#menuh ul
  {
  list-style:none;
  margin: 0px 20px 0px 20px;
  padding: 0px;
  }

#menuh li
  {
  position:relative;
  min-height: 1px;
  vertical-align: bottom; 
  width: fit-content;
  }

#menuh ul ul
  {
  position:  absolute;
  z-index:  500;
  top: 50px;
  left: 20px;
  display:  none;
  padding: 0.5em;
  margin:  -1em 0 0 -1em;
  }

  #menuh ul ul li {
    width: 100%;
  }

#menuh ul ul li  a {
    text-align:  left;
}

#menuh ul ul ul
  {
  left: 90px;
  }

div#menuh li:hover
  {
  cursor:pointer;
  z-index:100;
  }

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

This sass code loads in the compass reset styles to neutralize the browser defaults. Then it loads and sets up susy for creating the proper grid layout for all the elements of the web page.

The css navigation system is after the page defines. The hidden drop-downs for the menus become visible with mouse-over definitions. This gives a css only menu system.

All of these styles define the basic structure of the website. Nothing here creates a look to the page, just its positioning. All styling gets handled by the styling content.

Styles

For the styling directory, create a directory called Basic. Initialize the sass information as done for the layouts/SingleCol directory. In this directory, run the following command line:

compass init

This will create the sass and stylesheets directories, and a file named config.rb. Since I like using css for the stylesheet directory, rename the stylesheets directory to css. Also, create a js directory for any JavaScript for creating the theme. Open the config.rb file and make it look like this one:

require 'sassy-buttons'
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "js"

For styling buttons on the website, I like to use sassy-buttons. Therefore, it is required first, and then the directory structure.

In the Basic/sass directory, create the Basic.scss file with this information:

// Welcome to Compass.
// In this file you should write your main styles. (or centralize your imports)
// Import this file using the following HTML or equivalent:
// <link href='/stylesheets/screen.css' media='screen, projection' rel='stylesheet' type='text/css' />
//
@import 'compass/css3';
@import 'sassy-buttons';

$style-color1: rgb(247, 237, 222);
$style-color2: #ffedd1;
$style-color3: rgb(245, 213, 166);
$style-color4: #f0d5ad;

//
// Clear Fix
//
.clearfix:after {
    content: '.';
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

//
// Main Styling for Wood.
//
@mixin standardsize {
    padding-top: 10px;
    padding-left: 15px;
    font-size: 19px;
    line-height: 1.25em;
}

body {
    background-color: $style-color2;

    input[type='button'] {
        @include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold);
    }

    .button {
        @include sassy-button('shiny', 10px, 16px, $style-color1, darken($style-color1, 20%), #000, bold);
        display: inherit;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }

    #wrap {
        background-color: $style-color1;
        @include border-radius(.6em, .6em);
        margin-top: 10px;
        margin-bottom: 10px;
        border: 4px solid $style-color4;

        #header {
            background-color: $style-color2;
            @include border-radius(15px);
            background-repeat: no-repeat;
            border: 2px solid $style-color3;
            height: 130px;
            text-align: left;
            margin-top: 20px;
            font-size: 3em;

            h1 {
                a:link, a:visited {
                    color: #000;
                    text-decoration: none;
                }
                padding-top: 40px;
                padding-left: 20px;
            }
            h6 {
                font-size: .4em;
                font-style: italic;
                padding-left: 20px;
            }
        }
        #sidebar {
            background-color: $style-color2;
            @include border-radius(.6em, .6em);
            padding: .6em;
            vertical-align: text-top;
            overflow: hidden;
            margin-right: .5em;
            border: 2px solid $style-color3;
            hr {
                color: $style-color2;
                background-color: $style-color2;
            }
            p, ul, li {
                @include standardsize;
            }
            ul li {
                list-style-type: disc;
                margin-left: 25px;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }
            li {
                margin-bottom: 10px;
            }
            h1, h2, h3, h4, h5, h6 {
                @include standardsize;
                font-weight: bold;
                margin-top: .25em;
                margin-bottom: .25em;
            }
            h1 {
                font-size: 2.5em;
            }
            h2 {
                font-size: 2em;
            }
            h3 {
                font-size: 1.5em;
            }
            h4 {
                font-size: 1em;
            }
            h5 {
                font-size: .8em;
            }
            h6 {
                font-size: .6em;
            }
            input[type='button'] {
                margin-left: 120px;
                clear: both;
            }
        }
        #content {
            input[type='button'] {
                margin-left: 200px;
                clear: both;
            }
            h1, h2, h3, h4, h5, h6 {
                @include standardsize;
                font-weight: bold;
                margin-top: .25em;
                margin-bottom: .25em;
            }
            h1 {
                font-size: 2.5em;
            }
            h2 {
                font-size: 2em;
            }
            h3 {
                font-size: 1.5em;
            }
            h4 {
                font-size: 1em;
            }
            h5 {
                font-size: .8em;
            }
            h6 {
                font-size: .6em;
            }
            hr {
                margin-top: 30px;
                margin-bottom: 30px;
            }
            p, ul, li, details, summary, pre {
                @include standardsize;
            }
            details {
                p, pre {
                    margin-left: 25px;
                }
            }
            ul li {
                list-style-type: disc;
                margin-left: 25px;
                padding: 0;
                border: 0;
                outline: 0;
                font-size: 100%;
                vertical-align: baseline;
                background: transparent;
            }
            li {
                margin-bottom: 10px;
            }
            .box {
                clear: both;
                background-color: $style-color4;
                float: none;
                margin-left: auto;
                margin-right: auto;
                margin-top: 1.0em;
                margin-bottom: 1em;
                @include border-radius(.6em, .6em);
                display: block;
                padding: .5em;
            }
            img {
                @include border-radius(10px);
                margin: 20px auto 20px auto;
            }
        }
        #footer {
            border-top: 5px;
            border-style: solid;
            border-color: $style-color3;
            @include border-radius(.6em, .6em);
            margin-top: 30px;
            p {
                margin-bottom: .6em;
                @include standardsize;
                margin-right: 15px;
            }
        }
    }
}

// CSS dropdown menu
#navigation {
    text-align: left;
    border: 2px solid $style-color3;
    background-color: $style-color2;
    @include border-radius(15px);
}

#menuh {
    font-size: 1.3em;
    font-family: arial, helvetica, sans-serif;
    background-color: $style-color1;
}

#menuh ul {
    background-color: $style-color2;
}

#menuh ul ul {
    background-color: $style-color2;
    @include border-radius(15px);
    border: 2px solid $style-color3;
}

#menuh a {
    background-color: $style-color2;
    color: #000;
}

#menuh a:link, #menuh a:visited, #menuh a:active {
    color: #000;
    background-color: $style-color2;
}

#menuh a:hover {
    color: #000;
    background-color: $style-color4;
    @include border-radius(5px);
}

// End CSS Drop Down Menu
// Misc classes
.picture {
    border: 3px solid $style-color3;
    @include border-radius(8px);
    float: left;
    margin: 5px 15px 15px 15px;
}

a:link, a:visited {
    color: darken($style-color1, 50);
    text-decoration: none;
}

strong {
    font-weight: bold;
}

table {
    margin: 20px;
    border: 3px solid;
    @include border-radius(10px);
    border-color: lighten($style-color2, 6);
    th {
        text-align: center;
        font-weight: bold;
        padding: 10px 0 10px 0;
    }
    tbody {
        td {
            padding: 10px;
        }
        tr:nth-child(2n+1) {
            background-color: darken($style-color2, 5);
        }
        tr:nth-child(even) {
            background-color: lighten($style-color2, 2.5);
        }
    }
}

#commentSpacer {
    width: 100%;
    margin-top: 20px;
    margin-left: 15px;
}

.tutorial_excerpt {
    margin-left: 20px;
}

.tutorial_thumbnail {
    float: left;
    margin-right: 20px;
    margin-left: 20px;
    margin-bottom: 20px;
}

.tutorial_wrap {
    margin-bottom: 50px;
    float: left;
}

img.wp-post-image {
    -moz-border-radius: 15px;
    border-radius: 15px;
    box-shadow: 10px 10px 5px gray;
}

.showcode {
    margin: 20px auto 20px 30px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    border: $style-color4 3px;
    border-style: solid;
    background: white;
}

#socialmedia {
    width: 700px;
    margin-top: 20px;
    margin-left: 15px;
}

#socialbuttons {
    margin: auto;
}

#socialbuttons a {
    opacity: 0.8;
    filter: alpha(opacity = 80);
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
}

#socialbuttons a:hover {
    opacity: 1;
    filter: alpha(opacity = 100);
}

#socialbuttons a {
    display: inline-block;
    height: 28px;
    width: 30px;
    background-image: url(/images/ico-subscribe-social.png);
    background-repeat: no-repeat;
}

#socialbuttons a.twitter {
    background-position: -30px 0;
}

#socialbuttons a.facebook {
    background-position: -60px 0;
}

#socialbuttons a.googleplus {
    background-position: -210px 0;
}

dl {
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 19px;
    line-height: 1.25em;
}

dt {
    margin-left: 20px;
    margin-bottom: 20px;
    font-weight: bold;
}

dd {
    margin-left: 40px;
    margin-bottom: 20px;
}

This code defines how the website will look. It defines the background, coloring, fonts, etc. that make up the styling for a typical website.

The styling/Basic directory contains the files needed for the default look of the 404 page, header, footer, and sidebar parts of the website. Therefore, create a file called 404.html and place this code:

<h2>404 Page</h2>

<p>Sorry, we could not find the page.</p>

This is a basic 404 error page. You have to be careful of the information given here, as you do not want to reveal too much information about how your site works. Since this will be placed in the contents area of the page, it will be easy for the user to navigate away from it.

Next, create the header.html file with this content:

<h1><a href='/'>Test Site</a></h1>
<h6>A New Approach</h6>
<br>

This is just a bare-bones header that is non-descriptive, but it gives the CMS something to show.

Next, create the footer.html file with this content:

<footer>
[Column1]
	<p>Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a>
[/Column1]
[Column2]
	<p>Running on a flat CMS server!</p>
[/Column2]
</footer>

Next, create the sidebar.html file with this content:

<h3>A Sidebar</h3>
<p>This is a basic sidebar that can have other times.</p>

Again, these are place-holders. All of these files get copied to the site/parts directory and changed according to the site’s needs. These are here so that the server has something with their names to use in the server in case the user forgets to create them.

Site Structure

With the theming and layouts defined, it is time to create the basic content and structure for the actual site. In the site directory, create the parts, pages, posts, images, css, js directories.

Parts

The parts directory will contain small snippets of html/css/javascript that will make a single unit placed in multiple locations of the website. These parts are loading into the server and combined with the page contents as needed. For our demo site, create the following parts:

  • footer.html with this code:
<footer>
	<p style="float: left;">Copyrighted 2012 by <a href="{{{WebAddress}}}/">Your Company</a>
	<p style="float: right;">Running on a flat CMS server!</p>
</footer>
<script type="text/javascript">
window.PageName = "{{{PageName}}}";
</script>
  • head.html with this code:
<link rel="shortcut icon" href="{{{WebAddress}}}/images/favicon.ico" />
  • header.html with this code:
<h1><a href='{{{ServerAddress}}}/'>Test Site</a></h1>
<h6>Flat File System CMS</h6>
  • navbar.html with this code:
 <div  id="menuh-container">
 <div id="menuh">
    <ul>
     <li>
         <a class="top_parent">Pages</a>
         <ul>
             <li>
                 <a href="{{{WebAddress}}}/flatcms">Flat CMS</a>
             </li>
         </ul>
     </li>
     <li>
        <a href="{{{WebAddress}}}/posts/blogs/flatcms">Blog</a>
     </li>
     <li>
         <a href="{{{WebAddress}}}/posts/news/flatcms"  class="top_parent">News</a>
     </li>
     <li>
         <a href="{{{WebAddress}}}/about"  class="top_parent">About</a>
     </li>
 </ul>
</div>
</div>
  • sidebar.html with this code:
<h2>Side Bar</h2>
<hr>
  • socialmedia.html with this code:
<div id="socialmedia">
    <div id="socialbuttons">
        <a href="" class="twitter" title="Twitter"></a>

        <a href="" class="googleplus" title="Google+"></a>
    </div>
    <div id="commentSpacer" class="clearfix"></div>
    <!-- Put other Social Media items here (ie: Disqus, etc.); -->
</div>

The server loads these parts using the name without the extension in the Handlebar template for expansion. For example, anywhere the socialmedia.html part needs to be placed, you place the macro {{{socialmedia}}} there. Also, these parts can be HTML, Markdown, or any other format that the server can handle. In the servers I will be making, the supported types of files are HTML, Jade/Amber, and Markdown. I will get into these details in the actual server creation tutorials.

Pages

All of the pages for the site will be placed in the pages directory. For now, create the following files with their content:

  • main.html with this code:
<h3>Flat CMS Test Site</h3>
<p>This is the Main page of the test site.</p>
  • flatcms.md with this code:
### Flat CMS Server

This is a page about the flat CMS server. 
  • about.md with this code:
### About

This would be a standard about page.

These are the demo pages for the site. The only required file is main.html as the server will load this page content into memory and serve from memory. That helps to speed up the loading of the front page of the website. The other two pages have the md extension because they are in Markdown format. The server will translate the content to HTML before embedding in the page layout.

In general, pages contain information that doesn’t change much over time. They give the viewer information about the site, its purpose and goals.

Pages can be hierarchical in nature by creating directories and sub-directories with pages. These directory names create the addresses to these pages’ directory.

Posts

Unlike pages, posts are items that get added regularly, for example, daily/weekly/monthly blog posts and news items. This area is expected to change often. In the posts directory, create two new directories: blogs and news. In each of these directories, create a directory flatcms. These will contain the blog posts and news items for the Flat CMS website.

In the posts/blogs/flatcms directory, create the following files:

  • index.amber with these contents:
h3 Flat CMS Blog

p This is a rambling blog about a flat CMS.

mixin article($title, $link, $excerpt, $date)
	div.entry
		div.tutorial_wrap
			div.tutorial_div
				a[href=$link]
					h3 #{$title}
				h5 #{$date}
				p.tutorial_excerpt #{$excerpt}
	div.clear

+article("Flat CMS Running", "/posts/blogs/flatcms/flatcms", "Flat CMS Test Server is Running!", "August 12, 2015")
  • flatcms.md with these contents:
The New Server is Running
----

After much work and programming, the flat CMS server is running.  Stay tuned for more news!

{{{socialmedia}}}

The index.amber is a Jade template to define the different posts in the blog. The Jade HTML template system makes it easy to add new content with an exact format. The parameters to the macros make up the different items. You can find more information about Jade on Tuts+.

Here, the extension used is amber because the Go language equivalent of Jade is Amber. Since that was where I started, that is how I made it. If you want to change the extension, then remember to change it in the appropriate server code as well.

In the posts/news/flatcms directory, create the following files:

  • index.amber with these contents:
h3 Flat CMS News

p Here is where all the news about what I am doing is found. Please come back often to check it out!

mixin article($title, $link, $excerpt, $date)
	div.entry
		div.tutorial_wrap
			div.tutorial_div
				a[href=$link]
					h3 #{$title}
				h5 #{$date}
				p.tutorial_excerpt #{$excerpt}
	div.clear

+article("Flat CMS is Running", "/posts/news/flatcms/flatcms", "The Flat CMS Test Server is Running!", "August 12, 2015")
  • flatcms.md with these contents:
The New Server is Running
----

After much work and programming, I finally have everything moved over to a goPress server that I wrote myself. I will be making this available for you too. Stay tuned!

{{{socialmedia}}}

This creates the news items for the demo site. In my site, I use the same structure for tutorials and code demo pages.

Images

All websites have pictures. In this setup, all pictures are in the site/images directory. For this demo site, only the social media icons will be placed here. You can get the image file from the download file.

Site CSS

Even with the layout css and styling css, there will be times you will want special css rules. The site/css directory contains all css files that put those finishing touches to the website. All the layout, styling, and site/css files will be compiled together in to one css file. Therefore, create the site/css/final directory to place this compiled file. Now, create the site/css/site.css file with these contents:

.clear {
  clear: both;
  height: 0px;
}

Not much in here—just a definition for a clear class. You can add what you want, but it should be something that does not fall into the layout or styling category.

Site Scripts

The site/js directory contains all the special JavaScript files for the site. These will be compiled together and minimized for faster site loading. For now, create the site/js/final directory for the compiled script and a site/js/01-site.js file with these contents:

;
//
// File:         Site.js
//
// Description:   The JavaScript file for the site.
//
jQuery(document).ready(function () {
	//
	// Code here will be ran once a page is loaded.
	//
});

There is not much here right now. But, as your site needs custom JavaScript, it can be placed here.

Since the scripts will be compiled together, I number them in the order needed for loading. The routine for compiling the scripts together will load them in numerical order.

Automating With Gulp

The easiest way to speed up a web page load is to have as few HTTP requests as possible. Therefore, it is best to combine all CSS and JavaScript files into one file each. The best way to compile these files is with a build script. Performing it every time the server gets a request is a waste of processing time.

My choice of automation script runners is Gulp. Gulp runs on Node.js. Therefore, please go to the Node.js website and download the program for your system. Once you have Node.js installed, you can install Gulp with the following:

npm install --global gulp
npm install --global gulp
npm install --global gulp-compass
npm install --global gulp-autoprefixer
npm install --global gulp-compressor
npm install --global gulp-concat

This will install all of the Gulp and Gulp modules that I use in the build script. Now, at the top of your directory, create the gulpfile.js file with these contents:

// Requirements
var gulp = require('gulp'),
	 compass = require('gulp-compass'),
	 prefix = require('gulp-autoprefixer'),
	 compressor = require('gulp-compressor'),
	 concat = require('gulp-concat');

// Defines path to sass
var Theme = "Basic";
var Layout = "SingleCol";
var themesassRoot = 'themes/styling/' + Theme;
var layoutsassRoot = 'themes/layouts/' + Layout;

// Gulp task
gulp.task('theme-compass-to-css', function(){
	return gulp.src(themesassRoot+'/sass/Basic.scss')
			 .pipe(compass({
                config_file: themesassRoot + '/config.rb',
                css: themesassRoot + '/css',
                sass: themesassRoot + '/sass',
                require: 'sassy-buttons'
                }))
			 .pipe(prefix("last 3 versions"))
			 .pipe(gulp.dest(themesassRoot + '/css'))
});

gulp.task('layout-compass-to-css', function(){
	return gulp.src(layoutsassRoot+'/sass/base.scss')
			 .pipe(compass({
                config_file: layoutsassRoot + '/config.rb',
                css: layoutsassRoot + '/css',
                sass: layoutsassRoot + '/sass',
                require: 'susy'
                }))
			 .pipe(prefix("last 3 versions"))
			 .pipe(gulp.dest(layoutsassRoot + '/css'))
});

gulp.task('watch-compass', function(){
	// What to watch
	gulp.watch(themesassRoot + '/sass/Basic.scss', function(){
		// What to run
		gulp.run('theme-compass-to-css');
	});
	gulp.watch(layoutsassRoot + '/sass/Basic.scss', function(){
		// What to run
		gulp.run('layout-compass-to-css');
	});
});

gulp.task('all-compass', ['theme-compass-to-css', 'layout-compass-to-css']);

// js compressor
gulp.task('js', function () {
    gulp.src([ layoutsassRoot +'/js/*.js', themesassRoot + '/js/*.js', 'site/js/*.js'])
        .pipe(compressor())
        .pipe(concat("final.js"))
        .pipe(gulp.dest('site/js/final'));
});

// css compressor
gulp.task('css', ['all-compass'], function () {
    gulp.src([layoutsassRoot +'/css/*.css', themesassRoot + '/css/*.css', 'site/css/*.css'])
        .pipe(compressor())
        .pipe(concat("final.css"))
        .pipe(gulp.dest('site/css/final'));
});

gulp.task('default', ['all-compass', 'js', 'css']);

This will compile all of the CSS and JavaScript into a single file: in the site/css/final/final.css file for the CSS, and in the site/js/final/final.js file for the JavaScript. It will also add the browser prefix rules for the CSS. Just run in the top directory the command:

gulp

Gulp will compile all of our files and leave them in the proper location. Each task defined in the gulpfile.js can be run individually by giving the task name after the gulp command. You can learn more about Gulp on Tuts+.

Server Configuration File

All servers need configuration information. Therefore, in the root of the directory, create the file server.json with this information:

{
    "CurrentLayout": "SingleCol",
    "CurrentStyling": "Basic",
    "ServerAddress": "localhost:8080",
    "SiteTitle": "Flat CMS Test Site",
    "Sitebase": "./site/",
    "TemplatBase": "./themes/",
    "Cache": false,
    "MainBase": ""
}

This json file describes information about the layout to use, the styling to use, the address and port the server should listen to, the main name for the site with a sub-title, a caching flag to turn on and off caching for debugging purposes, and the location of the different directories used for the site. By supplying this information to the server in a json file, the server can be flexible, with less hard-coded information.

Uploading the Site to a Server

Most people use an FTP client to copy the files to their server. This is easy to do, but varies greatly regarding the system and programs used. But there are some alternatives.

You can setup a Dropbox daemon to load your site from your Dropbox account. The Dropbox Wiki site has detailed instructions for setting this up. The only problem is the files are automatically uploaded to the server when you make any change. Sometimes, you will want to make changes without them going to the server. If this is the case, have a non-Dropbox location of all the site’s files and a Dropbox location as well. When done, create a task in your Gulp file to copy the new site files over to the Dropbox location.

Dropzone 3 Setup for CMS Uploading
Dropzone 3 Setup for CMS Uploading

My preferred approach is to use Dropzone 3. You can program Dropzone 3 with Ruby or Python to perform any type of action on a file that is a dropped on it. It also has many built-in functions. There is a file action built in for uploading to an FTP/SFTP site. I create one Dropzone 3 target for each of the main directories on my site. Then, when I want to change or add a file, I simply drag it to the appropriate directory dropzone target. You can learn more about Dropzone 3 with my tutorial Writing Dropzone 3 Actions.

Conclusion

These basic files will create a website that looks like this:

Demo Site in Browser
Demo Site in Browser

This is only the beginning! Now, with the site structure laid out, it is time to start building web servers. Please join me in the next tutorial where I will build a Go language based web server for this demo site.

January 4, 2016

What to Expect From Web Design in 2016

2015 was a year to remember! From the first shipment of the Apple Watch to the landing of the Mars rover, to the long-awaited release of the next instalment of Star Wars (and the inevitable wave of spoilers that followed), it was an eventful twelve months. But as we head into the New Year, it’s worth our effort and time to look forward, and think about what lies ahead for the web design industry.

In last year’s article about what to expect from web design in 2015, I outlined a list of predictions, many of which I am proud to say have come true (the growing popularity of prototyping and Sketch, “collections as an interaction”, and plenty more.) As I see it, this year is going to give us less change and more growth. Let’s take a look at what is to come in 2016.

More “Live-Now” Design and Growth of IoT

In 2015, we saw the continued rise of “live experience” tools like Periscope and Meerkat. We also witnessed the skyrocketing popularity of Slack. Platforms like Producthunt and Reddit continue to host AMAs and live discussions. All of this suggests one very important thing for 2016: real-time applications and experiences are taking over every aspect of digital products, and that will have a major impact on design at every stage, including web design.

The Internet of Things is going to be a part of this growth of real time media. We’ve seen new, connected products enter the market for almost every sector of business. 

The (by now, very familiar) Nest Thermostat

Orchestrating the data these devices are creating is a wide open space that spells “opportunity.” A great example of the growth of IoT can be found in the Amazon Echo. 

The Amazon Echo

With product ordering a few words away, the Echo and devices like it are ushering in a new way of understanding ubiquitous connectivity between our various services, our physical spaces, and our interactions.

What You Won’t See: IoT DIY Adoption

Look, we agree; the Raspberry Pi Zero at $5 is a pretty awesome thing. In fact, these pocket-sized computers driven by open source are going to be cheaper than ever in 2016, edging on the “free” line. 

Mmm Pi

And, while that will increase adoption rates of these little computing wonders, you won’t see all of your neighbors hooking up a bunch of Arduino-powered gadgets all over their houses.

There are quite a few reasons for this, but perhaps the most important is that the learning curve required for doing anything particularly interesting with a Pi or Arduino or CHiP is still pretty daunting to the average non-developer. Not to mention, they aren’t particularly beautiful to look at without some additional casing work. IoT will be adopted first through user experiences that are approachable by the untrained, with little overhead or learning curve, like the Nest or Philips Hue. As always, DIY will remain a small faction of the population.

Plenty of U.S. Political Design Discussion

The U.S. election of 2016 will be responsible for a lot of politically-driven design material and commentary, both from the official candidates, and from the design community. The last election saw a lot of scrutiny of the design decisions in the race for President of the United States, and we can only expect this level of interest to increase. Barack Obama’s campaign is known for digital predictive intelligence and a powerful web team, and the next Presidential candidates are likely to lean heavily on analytics-driven design to win the race.

We can expect a lot of redesigned logos, campaigning materials, and commentary on the design fodder from both sides of the race on the others’ design decisions. Hilary Clinton’s logo has already received mixed reviews, as has Jeb Bush’s, and the opinions will certainly continue to flow as election day nears.

The reality is, while you may see some slight trend-following updates from both sides of the aisle, the safest bet for the candidates is to stay on tone for their audience. This is particularly true of the Republican candidate, and it’s likely that if we see much innovation or daring design decisions, they will be coming from the more progressive and liberal candidates.

What You Won’t See: Drastically Different Official Design Directions from Candidates

The truth is that the design decisions of these major candidate races are made primarily with data, not with artistic integrity, as the driving design justification. While it will be important for the candidates to stay engaged with digital media in its newest forms in a relevant way, we’re unlikely to see a neon color palette falling outside of the Red White and Blue we are already used to. 

This would be too much of a departure from what is expected for these candidates, and may alienate audiences who are not ready for change. Want to see a non-political version of this in action? See Facebook.com.

Continued Importance of JavaScript

This year was, in many ways, a Renaissance year for JavaScript. We saw the adoption of ES6 by many very important projects. We saw the launch of React Native. We are also seeing the number of JavaScript-primary repositories growing on GitHub. Large projects like Microsoft’s newly-open-source Visual Studio have strong support for JavaScript, and very large companies with big budgets and a lot of development resources are betting heavily on the future of the language.

Interesting reading: JavaScript Developer Survey Results

What You Won’t See: Mass Departure from PHP or Rails

While JavaScript may arguably have an even bigger year in 2016, we won’t see a mass departure from tools developers already know and love. Languages like Ruby, Python, and PHP still have strong user bases, and are actively being developed. Instead, we will see adoption of new practices in these languages, and a growth in the number of developers. Will some people change over to a JavaScript-only development environment? Most certainly. Will it be a mass exodus? Most certainly not.

Cinemagraphs Will Become Trendy

If you don’t know what a cinemagraph is, you’re not alone, because they aren’t a fundamentally new type of medium. In fact, a cinemagraph is quite simply an image that is mostly still, except for a small portion (typically only one element) which animates on a loop. If you saw any of the Harry Potter movies, think of their family portraits and newspapers.

For the actual cinemagraph check out cinemagraphs.com

The cinemagraph won’t get famous because we suddenly like this kind of animation, but rather because the iPhone and other popular tools are making these easier to create. Fundamentally speaking, a cinemagraph may be accomplished with multiple images, a single GIF, or a video element. It creates a new way of thinking about images; instead of static images and video being our only two ways of representing camera-captured content, we also now have an “in-between”–the cinemagraph.

Further reading:

What You Won’t See: Drastically Less Video

Cinemegraphs will likely become trendy, but they certainly won’t replace video. As we’ve already mentioned, cinemegraphs are a fundamentally different media representation. Video still provides much more content in the same space. We will likely see cinemegraphs as backdrops for text–where video creates legibility issues, but controlled minimal animation works well.

video.envato.com

Related: if you’re interested in creating videos straight from your iPhone, check out Envato Video’s recent iOS app release.

Growing Hype for Virtual Reality

The growth of virtual reality will start with gaming, grow into video, and eventually it will become an important medium to consider for any digital experience. When we think of virtual reality, we often discount the uses of a fully immersed experience. 

Samsung’s Gear VR

However, the sliding scale from actual reality to virtual reality passes many important, very powerful milestones along the way, including augmented reality. While Google Glass wasn’t necessarily a show-stopper, we should expect VR to provide us with new ways of experiencing, for example:

  • Online classroom learning environments
  • Behind-the-scenes explanations for movies, bands, and even more traditional corporate environments
  • Closer peer-to-peer connection with our communities
  • Product launch events, like Apple Keynotes

While we won’t necessarily see huge widespread adoption of VR this year, we will see growing hype (and a lot of Kickstarter projects) that build momentum for future design iterations that include considerations for products like Google’s Cardboard or the Oculus Rift.

What You Won’t See: Browser Standardization for VR APIs

Browsers won’t standardize VR APIs for a few years, as the adoption rate is significantly lower than necessary for widespread adoption, and browser-level VR won’t be incredibly useful in the next year. Gaming engines, on the other hand, will likely have VR best practices well established by the end of the year.

Related: Mozilla Launches A-Frame: VR-capable Websites Starting with One Line of Code

Animation as a Core Skillset

Animation is already becoming an important part of the front-end developer skill set, but this year will bring more animation than ever. Animation is necessary for the fluid nature of design that we see in most products today; people no longer think in terms of pages, but rather in terms of familiar interfaces and patterns. Because of this, the strength of a pattern is increased when a user receives contextual cues from the interface itself. A very powerful way of communicating a contextual cue is through motion; animation.

The above demo is taken from Adding Appeal to Your Animations on the Web by Donovan Hutchinson.

What You Won’t See: New Animation Abilities for CSS

While CSS is very powerful, the animation API isn’t slated to change much in the coming year. Instead, tooling around CSS animation will likely be developed to allow more granular control over aspects of animation such as easing. More people will begin relying on CSS-only animation (rather than resorting to JavaScript libraries), and because of the limitations of the API itself, the development community will likely build better tooling to handle complex animations.

Overlapping Elements, Saturated Gradients, and Big Shadows

This is a very simple trend: overlapping elements. We have seen big aesthetic design leaders like Spotify adopt this trend, and it seems to be sticking. The ghost-button trend of 2015 will be extended to non-clickable elements, and empty elements with outlines that break otherwise-constraining boxes will show up across designs. 

Text will be used in a similar way - we are still likely to see strong bold text over images, but the images themselves and the text itself will see a shift to adopt colorization and much higher levels of saturation.

Along with overlaps, we will see the saturated colors in the form of large, sweeping gradients. These gradients will also come accompanied by very large shadows, not to reintroduce skeuomorphism, but instead simply for aesthetic depth. 

The Popularity of SVG Will Continue to Grow

SVG as a format is continuing to grow in popularity. With more tooling and use cases than ever, we will see SVG becoming a much more adopted technology in 2016. This will effectively bring more vector-oriented design, animation, and retina-ready graphical elements into web design than ever before. Another side effect could be lighter sites, as the size of an SVG is much smaller than its equivalent PNG, but this is unlikely as images, videos, and fonts (the culprits of heavy pages) aren’t going anywhere any time soon.

Long Shots

A Successful Swift-based JavaScript Transpiler or Web App Framework

Swift is open source! The language Apple released for iOS development to replace Objective C has been officially open sourced. This is likely to spur on many open-source tools, but the language is still primarily going to be used for iOS development. While there will almost certainly be a JavaScript-to-Swift (or, more likely, Swift-to-JavaScript) transpiler at some point, I’m betting that it won’t be released in an official version until at least 2017. Watch out for the alpha and beta versions of these tools this year, though!

Rich In-Browser Media Editing Tools

Media editing will at some point be based entirely in the cloud. We’ve seen strong support for this theory, and it makes the most sense long-term for our device-agnostic world. But it won’t happen this year. Bandwidth is still too limited for mass adoption by major companies with interest in this space; most users wouldn’t be able to perform the necessary heavy actions across the wire that they can perform on their own machine.

As fiber internet reaches major cities around the world, this concept will be introduced slowly, but the necessary physical infrastructure for this to take place isn’t yet ready, and will take more time than one year can provide.

A JavaScript-Based WordPress Fork

We can all dream of the day when JavaScript is the driving language behind the web’s most popular platform. But the likelihood of this happening in the next year is low; instead, WordPress will most likely continue to work on the lynchpin that made it so successful to begin with: the 5-minute install based on PHP.

Calypso for WordPress–the admin interface client released at the end of 2015

Conclusion

While this year saw a lot of iteration and chance, 2016 will largely be a year of “more of the same”, with some small changes to design aesthetics. We will see a lot of progress on foundational aspects of our existing toolsets and mindsets, however, that will feed into 2017 and beyond. 2016 is the perfect opportunity to look ahead, adopt new tools, and pursue new knowledge about the tools you already use.

January 1, 2016

New Course: Mobile UI Design for Beginners

Final product image
What You'll Be Creating

Our latest course, Mobile UI Design for Beginners, provides an introduction to designing mobile interfaces. If you’re new to UI design or creating your first app, it should be a great place to start. With the help of web designer Chris O'Sullivan, you'll learn to design an app interface, and get familiar with the conventions and basic principles of working on mobile apps.

You can take our new course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get access to hundreds of courses, with new ones added every week.

If you need some ready-made elements to plug in to your design, you can check out the huge catalog of UI elements on Envato Market.