This content is for Website Design Mastery ($660/£495) and Website Design Mastery ($220/£165) x 3 Payments members only.
Login Join Now

Creating your Website Course

Planning your Website

How do we stress this without over-stressing? Open your mind and pour out the key components of your website before you go anywhere near starting it. The layout can make or break the difference between longevity or a blip on the screen.

Read below or download from here: WS One Page – Research Websites

Read below or download from here: WS One Page – Sitemap

Domains

The domain will become your brand. Don’t leave it too late to check on what’s available and what you can use as it will impact on your logo, wording, and ultimately your business.

Hosting

This part is assumed to be included with the Domain or as part of a Website Design. Take note of what you need before jumping towards the cheapest deal. Consider how many visitors you’re likely to expect, how much content you’ll be adding, and most of all – don’t overlook the SSL – Security Certificate!

See below or download from: WS One Page – Hosting

We recommend that you use SiteGround Hosting for Hosting, or 123-Reg for the cheaper option. There are many host providers, however always take into account what they offer and if there is the option to upgrade/downgrade depending on requirements.

Wordpress Hosting is the better option than using other CMS /Systems as you can move your website from one provider to another. With Wix, Shopify, Squarespace, etc you will find your hosting is locked in with their company, and you’ll have to pay their asking prices.

Try to take your site elsewhere and it will stop functioning.

Hosting a Wordpress site allows freedom to move by migrating the site. This is achieved by modifying the name server for the domain. We cover that in a video below.

Getting Started with Wordpress

It’s easier than you think to install Wordpress. Just as important are the settings, the theme and the plugins. There are many alternate themes that you can use, however the Hello or the Astra Theme are fine enough because you’ll be using Elementor to build your site, so don’t waste money on a pre-built theme that restricts your creativity.

Logos and Image Resources

Colour schemes are important, as well as what will become the recognisable brand for your business. Logos shouldn’t be complicated; neither should they be Word Document ClipArt. Let’s start designing and collecting images for Free to use on your website.

We strongly recommend that you use https://bulkresizephotos.com to compress images.

Regardless of if they are PNG or JPG, then convert them to WebP before uploading to Wordpress’ Media Library.

Site Identity and Performance

Elementor Page Builder

Finally we’re ready to use Elementor, and after we’ve covered the installation and settings – we’ll get cracking. We’re going to show you an amazing product to unleash creative freedom in designing your pages.

Website Checklist

When you’re about to start a new website, it’s easy to jump in without a plan set out. Below we cover things to consider when setting up, collating, building, and launching. If you think that we’ve missed a step then please do let us know.

Review what the client is trying to achieve with the website, and what would they consider as a satisfactory result.

Encourage them to think of where they want to be in 5 years time as you can discuss what should be done now, and what can be tackled later, as well as extra items they may not have considered (such as blog, shop, membership, etc).

This is important to understand if the client’s attitude fits well with you and if you want to continue with them.

Provide a Web Proposal to the client with a time-limited quote, that is valid for the next 30 days.

No further work should be provided until thy have agreed.

Inform them that you have other client meetings etc and work to crack on with – and do not sound desperate or hungry for their money – otherwise they’ll request discounts in exchange for working with you.

Remember – many businesses wouldn’t give you a discount just because you want it.

Unless you have a dedicated server/service, then advise clients to purchase their Domain and Hosting themselves – based on your recommendation.

Record a short video (and send via wetransfer.com) to advise them on what to purchase, to prevent them from purchasing premium features that they do not need.

Take note of:

  • SSL Included?
  • Email Included?
  • Wordpress Hosting allowed?
  • Are Backups provided?
  • Can you access the backend for purging the server?

Do not provide discovery and research into their site, their competitor’s site, layout, designs, required plugins, etc, without being paid for your time.

Client already has a site Ask the client to advise what is wrong with their site and what they want to have changed. Will they maintain the current site navigation, pages and content?

 

Client wants a site based on another site Can they clarify what they like about the competitor/other sites and how it should be reflected on their site? Again, find out about the pages and contents.

 

Client wants a new site How many pages? Will there be sub-pages? Will they provide content or will it be provided by someone else? Does the delivery of content affect the timescales? Consider images, logos, and what should go where.

 

Resist working to a “you know best” and “do your magic” comments as it’s a warning of many revisions to come.

Via your preferred solution (paper, Figma, Photoshop, Adobe XD, etc) devise the layout of the website.

Focus on the site pages, sub-pages and the home page. All of the other pages will be derivative of the home page (except blogs, shop/product pages).

Try to leave the design loose enough to tweak as you go along, but tight enough to prevent the client from making vast changes that incur extra effort.

Obtain logos and images directly from the client or collate on their behalf. Highlight to the client if images are pixelated, the wrong size or the wrong orientation. Rather than have images emailed to you, ask for them via Dropbox, GoogleDrive, or WeTransfer.com.

Create a folder containing the images and compress them to satisfy various performance metrics.

We recommend using https://Bulkresizephotos.com to compress PNG and JPEGs into WebP (that can be added Wordpress).

Best Bulkresizephotos settings:

  • Scale Images to be 100%
  • Image Format = Webp
  • Image Quality = 80%

Agree on the Main Colour, Sub Colours, Text, etc.

If the client is unsure, then provide them with examples of a palette based on their preferred main colour. 

We recommend: https://colorpalettes.net/

If the client cannot advise on their preferred main font, then advise one based on the font used by similar websites.

We recommend using https://fonts.google.com/ to identify a font. The website will also specify suitable complementary fonts.

Google Fonts are commercially free to use, whereas fonts from DaFont and other sources may require attribution or payment if they are to be used.

As we have a duty of care to clients, we shouldn’t use fonts, images, or other content that may leave them open to legal action later.

Except where the font is Roboto, then download the font family from the fonts.google site.

After agreeing the sitemap you will have identified the required plugins, and if any premium versions are to be purchased.

You will also be aware of any bespoke features that require additional support/coding and the costs linked to that.

The client should pay for the licenses of any plugins, and other support services that couldn’t have been understood at the time of the initial Web Proposal.

If the client refuses to pay, then inform them of the risk or inferior method that will be applied.

If the website is to be built upon the client’s hosting then there is a risk that they may receive work without you being paid for it.

Steps to consider:

1. If you decide to build the website on a local server, then use this method https://youtu.be/E6PCpTkEtF4 and allow for time to transfer back to their Domain/Hosting later.

2. If you decide to build on their hosting platform, then ensure that you are paid in stages otherwise the client could take backups of the website and not pay you.

  • We recommend the initial installation is based on the TwentyTwentyOne Theme
  • Remove any plugins provided by the host unless they are optimisation or security related
  • Check that the site is https:// and that the SSL is activated
  • Ensure the domain name with https:// is present in the General Setting Tab
  • Ensure the Admin Address is correct
  • Check the Time Settings in the General Settings Tab
  • Set all Image Sizes in the Media Setting Tab to be 0, and uncheck any boxes (as leaving this with values will create copies of your images)
  • Set the Permalinks Tab to be the Post/Page Name
  • Check the Discussion Tab in terms of comments allowed or if people can join/subscribe
  • Make a decision on if comments are allowed on Posts or not, as you should be mindful of moderating/removing spam

My recommended list:

  • Elementor (Free)
  • Elementor Pro (Paid)
  • Autoptimize (Free)
  • WP Fastest Cache (Free)

Optional:

  • If this is a shop site, then WooCommerce (Free)
  • Themify product Filter (Free)
  • Flexible Shipping (Free)
  • If you plan to bring through Twitter, Instagram, or Youtube feeds, then install WP Social Ninja (Free)
  • When the client has paid for SEO then install RankMath (Free)
  • If you will alter the Theme or add in custom CSS/Javascript etc, then install Code Snippets (Free)
  • Asset Clean Up (if you have a WooCommerce or Directory Website to reduce any affect on Page Speed) (Free)
  • Redirection (Free) if you need to redirect to another address

For Autoptimize and WP Fastest Cache see this video at the 5 mins 30 second mark: https://youtu.be/lk11synL61E?t=330

 

For Elementor, go to the Settings

  • On the General Tab, ensure that boxes for the ‘Disable Default Colors and Fonts’ are both unticked.
  • On the Advanced Tab – this is optional – but enter ‘No’ for Load Font Awesome 4 Support
  • On the Experiments Tab –  we set the setting to be ‘Active’ for:
    • Optimized DOM Output
    • Improved Asset Loading
    • Improved CSS Loading
    • Accessibility Improvements
    • Form Submissions 

This is down to preference, but rather than using pre-built Theme, we prefer to use Hello.

For Directory sites, we use a paid theme ‘MyListing’ $59

After activating Hello, we delete all other themes.

Go to Appearance > Customize

Set the Site Logo, the Site Icon, the title and the Tagline.

That is all.

There will be dummy content in Posts or Pages – normally “Hello World” etc. It’s okay to delete them.

Go to Pages > Add New Page

This will open the standard Wordpress Page Editor.

Just provide a Name, and then click ‘Edit with Elementor’.

This can be done via ‘Quick Edit’ in Wordpress, within the standard Page Editor for Wordpress, or the Elementor Page Editor.

Set the Page to be Default if you intend to show Header and Footer (or Full Width).

Set the Page to be Canvas if you intend to not show and Header and Footer.

Return to Wordpress, and go to Appearance > Menus.

Add a New Menu, by adding a suitable name.

Then add the first page created. This will provide the facility to have an applicable Navigation Menu.

Go to Wordpress > Templates > Add New

Select Header, and name it.

Then create your Header, utilising the newly created Navigation Menu if required.

It is important to edit and check for the Tablet and the Mobile.

Now ‘Edit with Elementor’ the Home/First Page.

Work through each Section one at a time, adjusting views for margins and padding, and testing regularly.

It helps to place keywords here.

Each Section should be a copy of a previous section to improve efficiency in creation as it’ll contain important settings.

 

 

Check the Pagespeed Insights – especially on the mobile – as you work on section by section.

Go to Wordpress > Templates > Add New

Select Footer, and name it.

Then create your Footer.

It is important to edit and check for the Tablet and the Mobile.

Go to Wordpress > Settings > Reading > and set the Home Page accordingly.

Set up the basics – but do not submit to Google Search Console yet.

Work on the SEO of the home page, and try to hit at least 90/100.

This may require changes to the content of the sections.

Request that the Client comments on the look of the Home Page within 24 hours.

Based on the Client Feedback, refine the content.

Before continuing with further content, the Client should pay the next instalment.

Duplicate Pages and adjust accordingly, as well as Shop Templates, etc.

 

Test layouts on devices using Responsinator.com 

Request that the Client comments on the website within 24 hours and refine accordingly.

Remind them that they have 30 days cover even after the website is handed over to them, thus not to delay their feedback.

Ensure that final and any added costs are received.

This may involve a call, video walkthrough, or any other agreed process and should be set to a maximum of 1 hour.

If the Client requires longer time, then  charge accordingly.

Request a review from them.

Remind them of the 30 days cover and extended maintenance if they require it.

Also inform them of any incentive schemes to obtain referrals.

It’s reasonable to explain that they may still need to pay for their licenses annually, and that if that if they do not take out a maintenance plan, then costs for further work will be charged at the rate you charge at that time.

This prevents you being rigid to a price that is now out of date.