website design gold coast
website design gold coast

Our sites tagged with "web development"

Tradie Website Tips

High-Performance Tradie Websites

Gone are the days of relying on the good ol’ Yellow Pages to bring in business, thanks to the Internet and Google, customers have a long list of tradies at their fingertips within seconds. See our tips and tricks for building a high-performance tradie website or project driven website.

So how do you get noticed online? 

To stay relevant, build credibility and remain competitive you need to have a responsive website that captures leads and drives business your way.

In our experience developing tradie and project driven websites here at Thrive, we’ve created this must-have list of high-performing site features that will increase your visibility and help you attract potential new clients.

1. A home page that works

Following modern trends in website design, you want your homepage to be fast loading. Don’t go for a slideshow with 10 massive images that will take forever load and no one will sit through. Get to the point and engage users by giving them a site that is a joy to scroll and navigate through. The home page should briefly highlight what you do and be optimised for your ideal keywords. Give users a clear direction and confidence in your services with trust signals such as testimonials, photos of your work, affiliate and certification logos. So what do we need?

  • Good quality branding
  • Clear contact information.
  • Multiple clickable call-to-actions that stand out. Let the user know you are keen on their business.
  • Impressive imagery
  • Service listing
  • A testimonial
  • Links to projects
  • Links to your services
  • Links to your news
  • Social links

2. Have dedicated service pages

Google will index all your pages so having dedicated service pages is a must. These pages should have high conversion rates as they are targeting exactly what the user is looking for. Each page will be found via natural searches and are great for sending paid traffic to. So what makes a high-performance service page?

  • Clear Readable titles that match what the user is looking for.
  • A decent amount of text to demonstrate your detailed knowledge, stamp your authority and good keyword text for search engines.
  • Multiple clickable call-to-actions that stand out. Let the user know you are keen on their business.
  • Good quality original images as proof of your quality work and skill set.
  • A related testimonial
  • Link to a related project ( see below )

3. Have individual project gallery pages

Creating a project section on your website is a great way to showcase your work and give potential clients an insight into the services you provide. By using the blog feature you have the ability to create unlimited posts and feature simple case studies of your previous jobs.

Check out our client Just Add Water Pools. By using keywords within their meta titles, page titles, URLs and content, the team at Just Add Water Pools have found that they generally rank higher on search engines, especially for suburb specific searches.

Cre 8 is a brilliant example of good project layout and design:

How long should each post be?

We recommend about 200 words each. This is long enough to explain the details of each project without losing the readers’ attention.

It’s also helpful if you list the services completed in each post, which can link back to high converting service pages within your website. What should I include on these pages?

  • A high-quality image gallery but don’t overdo the number of images.
  • Show before and after images if applicable
  • Have details of the project and include the services, suburb and city in the title and URL so these will be found in search engines.
  • Include a client testimonial
  • Link to the relevant services
  • Again have multiple clickable call-to-actions

4. Create a price calculator

One way to build leads through your website is to incorporate a price calculator that will gather email addresses as customers obtain quotes. Your client gets a quick online estimate for their project, and you get a lead you can convert later!

A great example of how this works can be found at Deking Decks:

Another way to capture leads is to offer some form of email automation that delivers ‘tips’ to potential clients. Not only is this a great way to collect email addresses for your database, sharing this kind of information and knowledge positions your business as an expert in the industry.

The Sublime Group do this really well with their automated kitchen tips.

5. Start a blog

Starting a blog is one of the best ways to optimise your website and keep it updated with fresh new content. Search engines love quality, relevant blog posts, and will rank you higher and drive more traffic to you website if you do this right.

The content you share through your blog can also be leveraged for your social media, providing an additional channel to connect and share with your customers.

As well as content writing, here at Thrive we offer a range of digital services for tradies including web design, web hosting, eMarketing and SEO services. With years of experience under our belts we’ll design you a website that is easy to use, flexible and easily managed, so all you need to do is concentrate on converting leads to actual business.

Check out Cedar and Suede‘s blog for inspiration:

If you’d like to find out more call our design studio on (07) 5535 0063.

online marketingtrade websitetradie websiteweb designweb development

Our Mac Development Setup

Extending on Chris Mallinson great tutorial here we have fine-tuned this guide for our WordPress setup and made some updates for the latest version of OSX which we will endeavour to keep up to date.

After toying with Vagrant boxes for a year or two we have gone back to the simplicity and “always on” speed of this native setup. The downside is it can be tricky to setup and easy to break.

XCODE

To start your journey, you will need to set up Xcode, Apple’s own software development bundle. You can grab this from the App Store or (for all OS X Mavericks 10.9 and higher) run the below command in terminal.


xcode-select --install

Click install on the dialogue box and wait for it to complete. Once it’s installed, you will need to start up the app – the tools won’t work unless it has been started up at least once – then accept the licence agreement and shut it down.

 

HOMEBREW

Next, you will need to install Homebrew, a popular package manager for OS X, by running the below command in terminal.


ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

MYSQL

Run the below command in terminal to install MySQL.


brew install mysql

 

DNSMASQ

Finally, run the command below in terminal to install dnsmasq. This allows wildcard subdomain names.


brew install dnsmasq
cd $(brew --prefix); mkdir etc; echo 'address=/.localhost/127.0.0.1' > etc/dnsmasq.conf
sudo cp -v $(brew --prefix dnsmasq)/homebrew.mxcl.dnsmasq.plist /Library/LaunchDaemons
sudo launchctl load -w /Library/LaunchDaemons/homebrew.mxcl.dnsmasq.plist
sudo mkdir /etc/resolver
sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/localhost'

 

APACHE

Now we have to set up Apache, a cross-platform web server, which is where we will store our web files. Get this started by running the below command in terminal.


sudo apachectl start

To test this is working, head over to http://localhost/ in your browser. You should see a page that says “It Works”.

 

If it’s working, the easy part is done!

Now we need to make a few quick changes to the configuration files. Run the following command in terminal.

 

Edit httpd.conf


sudo nano /private/etc/apache2/httpd.conf

Then use the terminal search feature (ctrl + w) to find and uncomment (remove the ‘#’) the following lines:

uncomment


#LoadModule php5_module libexec/apache2/libphp5.so

or php7 for High Sierra uncomment


#LoadModule php7_module libexec/apache2/libphp7.so

uncomment


#LoadModule vhost_alias_module libexec/apache2/mod_vhost_alias.so

uncomment


#Include /private/etc/apache2/extra/httpd-vhosts.conf

 

Then, using the same search (ctrl + w) find and comment out (add a ‘#’ in front of each line) to the following:



<Directory />
    AllowOverride none
    Require all denied
</Directory>

 

This will give Apache full access to your file system and help direct all your files and virtual hosts to the right places.

 

Next, to give writing access to all your site directories, run the following command in terminal.

Search for your username and then ensure that group is changed to staff as seen below. User should be set your your user.


#
# If you wish httpd to run as a different user or group, you must run
# httpd as root initially and it will switch.
#
# User/Group: The name (or #number) of the user/group to run httpd as.
# It is usually good practice to create a dedicated user and group for
# running httpd, as with most system services.
#
User example_user
Group staff

Edit httpd-vhosts.conf

Next, run the below command in terminal to find the next file we need to edit.


sudo nano /private/etc/apache2/extra/httpd-vhosts.conf

Look for the following lines, and ensure that __user__ matches your username (hint: whoami).

And also /Users/__myfolder__/www/sites/%1/public matches you website locations!

Note: .dev no longer works as Chrome now forces to HTTPS via preloaded HSTS



<Directory "/Users/__user__/www">
  Options Indexes MultiViews FollowSymLinks
  AllowOverride All
  Require all granted
</Directory>

<Virtualhost *:80>
  VirtualDocumentRoot "/Users/__myfolder__/www/sites/%1/public"
  ServerName sites.localhost
  ServerAlias *.localhost
  UseCanonicalName Off
</Virtualhost>

Now restart Apache by running the following line in the terminal.


sudo apachectl restart

Now make a test website at the path you defined in httpd-vhosts.conf and you should be able to view it at your foldername.local !

Done. Please let us know if you have any more tips or feedback to help others.

When updating OSX?

  • Before you update your OS X, make sure to backup your httpd-vhosts.conf file as this will most likely be overwritten! If it’s too late you will need to recreate this file as above.
  • Then, after updating, find your way into your httpd.conf file and confirm that all the correct lines are edited (as we did above). This is extremely important as they will most likely has been altered during the system update!

Troubleshooting

  • Check your User/Group set are set correctly in httpd.conf
  • Check the path set in httpd-vhosts.conf matches your folder structure
  • Check for sneaky hidden .htaccess files in your documents folder
  • If you are getting a server error, check your error log in > /var/log/apache2/

 

mac developmentweb developmentwordpresswordpress developmentxcode

Static Hosting with Amazon AWS S3 buckets and Cloudfront

To host a static website, you configure an Amazon S3 bucket for website hosting, and then upload your website content to the bucket.

The Following guide will take you though the process to setup a fast loading static site.

1. Go to the AWS Console

Here you will sign in and direct yourself to the navigation bar.

  • In the ‘Services’ dropdown menu click on the ‘S3’ link under ‘Storage’

2. Create a bucket

Make sure you name it with the exact domain name.

  • Select region: In our case it is Sydney
  • Continue to create the bucket
  • Once created click on your bucket and go into ‘Properties’
  • Click on ‘Static Website Hosting’
  • To enable, add index document – index.html
  • Go to ‘Permissions’ – click ‘Bucket Policy’

Copy and paste the code below:


{
"Version": "2012-10-17",
"Statement": [{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::your_domain_name/*"
}]
}

*Note* Make sure to change your_domain_name in ‘Resource’ to your domain name without the www.

3. Create a Hosted Zone

  • In the ‘Settings’ drop down menu click on ‘Route53’ link under ‘Networking’
  • Go to ‘Hosted Zones’ – Create a hosted zone

4. Create ‘Record Set’

  • Under ‘ALIAS’ click ‘YES’ – Wait until target matches bucket created and select it (this may take a while to load… be patient)
  • Don’t forget the www alias
  • Add your other DNS settings as normal
  • Click create at bottom

Enjoy the almost free hosting! ٩(•̤̀ᵕ•̤́๑)

Now make it globally fast and add a free auto renewing SSL with the CloudFront CDN.

Request a certificate with the certificate manager. You will need to verify ownership of the domain with a validation email that is sent. So you will need a working email system for the domain.

Once you have the site on an S3 Bucket and can see this working well setup a CloudFront distribution for this site. The SSL works only through CloudFront.

  1. Important add Alternate Domain Names such as www.your_domain_name or it won’t show up in Route53
  2. Important Use the Certificate Manager (ACM) located in the US East (N. Virginia)
  3. Set origin and current web address.
  4. Leave other settings as default
  5. Select your SSL certificate in your Distribution Settings
  6. Specify a default root object ie index.html

Once your distribution is setup and Deployed correctly… in Route53 you should be able to select it in the A records as an “Alias Target”

Done! ????

hostingstatic hostingweb designweb developmentwebsite