Categories
Websites

OG Automotive Services

The OG Automotive Services WordPress redesign process:

The design team at Australian Outdoor Living has recently launched the new OG Automotive Services WordPress Website Redesign. This new website is a lot more modern. We made sure that the flow of the content are clearer and the call to actions are all consistent.

With this design we focused on mobile first, but also making sure that the user experience on desktop is still good.

We made use of the page builder called Elementor which speeds up the development process and from past experience the page builders creates bulky pages which slows it down, but not with Elementor. Elementor is lightweight, user friendly and SEO friendly.

I made use of the following technology:

PHP, HTML, WordPress, Elementor and jQuery.

Take a look at the new OG Automotive Services WordPress Website here.

Categories
Websites

Australian Outdoor Living WordPress Website Redesign

The Australian Outdoor Living WordPress redesign process:

The design team at Australian Outdoor Living has recently launched the new Australian Outdoor Living WordPress Website Redesign. This new website is a lot more modern and we focused a lot more on a User’s Experience learning from the previous website’s data. While going through the design process we got a lot of feedback from various users on the new design before we started the building process. We made sure that the flow of the content are a lot clearer and the call to actions are all consistent.

With this design we focused on mobile first, it was designed for mobile first and that is how I have built the website too.

Another factor was to make the creation and updating of content across multiple pages easier and faster. The technology I used made it possible to display true geo content per state which will help our users see the content specific to their state, not only users, but Google too.

I have implemented local business and product schema so that Google can understand our content better and help the website rank in its specific state.

I made use of the following technology:

PHP, HTML, SASS, Bootstrap 4, WordPress, geoip2 and jQuery.

Take a look at the new Australian Outdoor Living WordPress Website here.

Categories
Websites

Suntuf Website – WordPress Development

Suntuf was a project I worked on for Myadd in Adelaide. Suntuf is one of Myadd’s clients. Suntuf was looking for a website where they can easily display all their products with galleries and pdf downloads. This website also features their calculator.

In this project I used:

In this project, I used WordPress, WooCommerce, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Therapy Services Adelaide Website

I was asked by DigitalLabs, a digital marketing agency, to help them re-design and build the website for Therapy Services in Adelaide. This website was built to drive better conversions for our client. The Therapy Services website are catering for all type of users, desktop or mobile users on the go. I focused on making the website as fast as possible and also making sure the user will find their way to the service they need from our client.

In this project I used:

  • WordPress
  • PHP
  •  jQuery
  • SASS
  • Google Tag Manager

You can take a look at the live website, Therapy Service.

Categories
Websites

Bring your own pet – Listing Website

I’ve set up a listings website for dog lovers. If you are a dog lover you are always looking for places to go with your dog. The park, a coffee shop or even a nice beach. Well, this is the place to go, either if you find a place and you want to share it or if you are looking for something new.

In this project I used:

In this project, I used WordPress, PHP,  Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Coding

Create a cookie based Newsletter Sign-Up with jQuery and Gravity Forms

In this article, I will show you how I’ve created a fancy looking newsletter sign-up form which slides from the bottom right of a web page once a user scrolls halfway down the page.

I am sure there are many plugins available for WordPress but it’s always a good idea to code something of your own. So let’s see how it actually works!

The HTML

We will have a div container which is going to have a fixed position. Once a user reaches halfway down the page the sliding form will slide up using jQuery. Now let’s see how it is done.

<div class="slideout-form">
   <button class="close" type="button">
      <span aria-hidden="true">×</span>
   </button>
   <div class="slideout-form-header">
      <h3>Sign up to Newsletter</h3>
   </div>
   <div class="slideout-form-body">
      //Gravity Forms Shortcode will go here
   </div>
</div>

The CSS (SASS)

We have “slideout-form-header” and “slideout-form-body” divs inside the “slideout-form” div which is positioned fixed. The “slideout-form-body” div contains form the Gravity Forms shortcode, and the “button” will close the slider and drop a cookie on a users browser.

/*Slide out form*/
body{
   position:relative;
}
.slideout-form {
    position:fixed;
    right:0;
    bottom:0;
    display:none;
    text-align:left;
    background:#ffffff;
    color:#333333;
    padding:0;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom:0;
    border-top:1px solid #333333;
    border-left:1px solid #333333;
    border-right:1px solid #333333;
    z-index:999;
    .slideoutform-header {        
        padding:15px 30px;
        h3 {
            padding:0;
            margin:0 0 15px 0;
            color:#333333;

        }
    }
    .close{
        right:10px;
        top:0;
        color:#ccc;
        font-size:30px;
        opacity:0.6;
        &:hover{
            opacity:1;
        }
    }    
}

The jQuery (JavaScript)

In the javascript below, you will notice some cookie script and also the slider effects.

Cookies are data, stored in small text files, on your computer. Cookies were invented to solve the problem “how to remember information about the user”:

  1. When a user visits a web page, his name can be stored in a cookie.
  2. Next time the user visits the page, the cookie “remembers” his name.
    Cookies are saved in name-value pairs like (username = John Doe).

In this example, the cookie will be dropped if a user signs up or if the user clicks on the close button. This will make sure the user doesn’t see the slider of x amount of days, depending on how long you set the cookie for.

In the example, the cookie will expire in 30 days which will then slide up again once the user goes to your site again.

//Slider with Form Script

//Create the cookie
function setCookie(key, value) {
   var expires = new Date();
   expires.setTime(expires.getTime() + (value * 24 * 60 * 60 * 1000));
   document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() + "; path=/";
}

//Get the cookie if it exists
function getCookie(key) {
   var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
   return keyValue ? keyValue[2] : null;
}

//Detect the user's scrolling on the page
$(window).scroll(function () {
   if ($(window).scrollTop() > $('body').height() / 2) {
     
      //Do a check if a cookie exists
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideDown();
      }
   } else {
      if (getCookie('slideHideGF')) {
         $('.slideout-form').hide();
      } else {
         $('.slideout-form').slideUp();
      }
   }
});

//If cookie exists hide slider
if (getCookie('slideHideGF')) {
   $('.slideout-form').hide();
}
//Set the cookie on the close button for x amount of days, below it's set to 30
$('.slideout-form .close').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

//Set the cookie on the submit button for x amount of days, below it's set to 30
$('.slideout-form .gform_button').on('click', function () {
   setCookie('slideHideGF', 30);
   $('.slideout-form').hide();
});

Gravity Forms Shortcode

All that is left now is to insert your shortcode for Gravity Forms. If you are not using Gravity Forms you can use any other form builders shortcode.

<?php 
   echo do_shortcode( '[gravityform id="your form id" title="false" description="false"]' );
?>

Download

You can download the code and play around with it, please click on the link.  jQuery Slide-Up with Form

That is it

The code above is purely an example and you may need to update the styling so that it works well with your theme. If you need any help with this or if you would like me to help you implement this on your website, feel free to contact me.

Categories
Websites

Australian Outdoor Living

I recently joined Australian Outdoor Living’s team. One of my first requirements was to rebuild their website, to make it load faster and also to improve the user experience. I’ve built a custom page builder making use of Advanced custom fields. My job is not done yet, I will continue to improve the site speed and user experience, to give our clients a unique experience everytime they visit our website.

In this project I used:

In this project, I used WordPress, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Websites

Lightfactory.online

Lightfactory.online was a project I worked on for Myadd in Adelaide. Lightfactory.online is one of Myadd’s clients. Lightfactory.online was looking for a site where they could easily upload and sell their products. Lightfactory.online required a customised homepage where new products could be featured and new events.

In this project I used:

In this project, I used WordPress, WooCommerce, PHP, Underscores starter theme, Advanced Custom FieldsjQuery, Bootstrap, and SASS.

You can take a look at the live site here.

Categories
Digital Marketing

4 Tools Everyone In The Seo Industry Should Be Using

What is SEO

SEO is short for search engine optimisation. Search engine optimisation is a methodology of strategies, techniques and tactics used to increase the amount of visitors to a website by obtaining a high-ranking placement in the search results page of a search engine (SERP) — including Google, Bing, Yahoo and other search engines.

SEO is also about making your search engine results are relevant to the user’s search query so more people click the result when it is shown. In this process, snippets of text and meta data are optimised to ensure your snippet of information is appealing in the context of the search query to obtain a high CTR (click through rate) from search results.

Google Analytics

Google AnalyticsAnalytics is an entirely free program for tracking traffic patterns on your web-site. It integrates well with other Google applications such as AdSense and AdWords, which makes it all the more valuable. Custom dashboards are possible in this tool, including whatever metrics you wish to view details on.
The primary Visitors Overview screen helps you view your traffic patterns for the past month (or view patterns on your custom date selection). ‘Visitors’ also shows you the average time spent on your site, the bounce rate, and the percentage of new visits which summarises a good, high-level overview of how your site is doing. High pages/visit, high average time on your site, and a low bounce rate give you an idea of how useful visitors are finding your site once they arrive.

Other information regarding Traffic sources (to track if web traffic is coming from a variety of sources), Content (which depicts page views instead of visits), Conversions (of type Goals to track different kinds of action on your site like length of time spent, reaching a specific page etc and E-Commerce to know where your most profitable customers came from) can be easily obtained and managed via Analytics.

SEMRush

semrushThis is a paid tool which is ranked way up by many digital marketing guru’s. SEMRush lets you do keyword research, track keyword ranking, check backlinks and most importantly do a complete SEO audit of your blog. SEMRush makes it easier to find what keyword your site (or for that matter – any site!) is ranking for. Since, the tool has access to large amount of data from Bing and Google, it lets you see where the competitors are ranking for more than 95 million organic keywords.
Thus, it gets easier for you to determine how successful a keyword is for a particular domain and also to see the value of organic traffic coming to specific landing pages. Using this tool, you can find keywords which are driving traffic to your competitor’s website, following which you can write quality content based on those keywords and the valuable pearls of inputs gleaned.

Authority Labs

authoritylabsMonitoring rankings regularly is a key task for SEO. Authority Labs provides a daily SEO ranking reports tool which automates campaign monitoring, competitor tracking, and local rank tracking, thereby saving a lot of time. All you need to do is add the domains and keywords you want to track and its gets done!
Authority Labs provides daily rank checking on all the accounts, tracks search results at postal code or city level for accurate reporting, and adds domains or pages from any country and language offered by Google.
With Authority Labs, you can also track competitor domains and gain valuable insights. Moreover, the tool can be accessed by unlimited users for reporting at no extra cost.

Ahrefs

ahrefsAhrefs gives you a Site Explorer and backlink checker for providing SEO data. The suite includes SEO Report, Site Explorer, Domain Comparison, Backlinks Report and Batch Analysis. Site Explorer is the most popular tool of Ahrefs which is a backlinks profile checker that runs reports on URL or domain and gives key metrics on the number of referring pages/IPs/domains/subnets, backlinks, backlink types and anchor pages.

Categories
Websites

Mission homes

I was asked by Uniting Communities to build a website for one of the Mission Homes for Children at Magill. Uniting communities required a private galllery section where people to ask to join to view these galleries. The people that would visit this site are the ones who stayed at the Mission Home.

In this project I used:

PhotoshopWordPress, PHP, Underscores starter theme, Advanced Custom Fields, jQuery, Bootstrap and SASS.

You can take a look at the live site here.