building a website in less than 3h and less than $100!

1

BUILDING YOUR WEBSITE IN 3 HOURS AND JUST FOR LESS THAN 100$FCCSSEPTEMBER 2015

PLAN• Introduction• Before you start• Let’s start now!

1. Pick a theme2. Pick a domain3. Pick a plan4. Create your account and enter your dashboard5. Understand your dashboard6. Define your sitemap7. Create your pages/sections8. Create your menu9. Customize your homepage10.Create your « About » page11.Create a blog & posts

• SEO basics• Metrics & tracking• Singapore grants for website design & development

AGENCE TESLAFrom Conversation to Conversion

Digital Audience Analysis and MonitoringUnderstand your customer behavior in the digital age and make data-driven decisions thanks to our social media anlytics reports

Formations & workshops in Digital MarketingCatch up with the digital literacy fundamental skills

Trained in Journalism, Politics & Business Intelligence

Offices in Singapore and in Shanghai

Startups, SMEs, Fortune 500 clients

YOUR WEBSITE = YOUR HOME

WHAT IS A CMS?• CMS = content management system• It allows publishing, editing and modifying content • Experience in HTML is not required

59%7% 5%

BEFORE YOU START

• Domain name registration– Eg: www.mycompany.com– Hover, Name Cheap and Gandi (good reviews)

• Hosting your website – Hosting is a computer that is left on 24/7 running

your website so that people can still visit your website – even when your computer is switched off.

YOUR TOOLBOX

LET’S START NOW !Choose one CMS, enter your personal details and connect ! www.wordpress.com or www.strikingly.com

BEST FOR : Those who want to be able to customize their site as much as possible.

BEST FOR : Beginners who want an intuitive interface for easy mobile website building. Single-page websites only.

SINGLE-PAGE vs MULTI-PAGES SITE

• The single-page site is trending in web design • quest for simplicity• allows to control the flow of content and the stories• more immersive and visual• scrolling well suited for mobile users• more likely to keep scrolling than to stop and click a link.

BUT : • risk of stuffing - requires careful visual hierarchy and plenty of discipline• less feasable if you have lots of categories and content (e.g: blog, services, news, products…)• less search-optimized• can load slower

1) PICK A THEME The theme is the look and feel of your website. A theme doesn't change your content, just the way it is presented.You can always change it later.

HOW TO PICK A THEME?• Consider your goals • Review websites you like• View samples• Evaluate the features the theme offers • Test on your desktop and phone• View the ratings/comments• Common Issues

– Website Load Times – Browser Compatibility Issues– Poor Navigation– Busy Content

OPTION: You don’t find a suitable theme in the free directory? • Themeforest.net ($40 - $60 per theme)

RESPONSIVE DESIGN = A MUST

DESIGN & BRANDING

Do you have a logo and tagline? What is your color identity?

2) PICK A DOMAINStart with a free domain, you will change it later.

Registering a domain through WordPress.com starts at $18.00 per yearAdding a domain you already own costs $13.00 per domain, per year.A custom domain is also included in both the Premium and Business Plans.

On Strikingly, custom domains are included only in the LIMITED (8$/month) and PRO (16$/month) versions.

3) PICK A PLAN

4) CREATE YOUR ACCOUNT & ENTER YOUR DASHBOARD

5) UNDERSTAND THE WORDPRESS DASHBOARDView Site = preview your websiteWP Admin = access the back-office of your websitePlan = upgrade to a different plan

Blog Posts = publish articles on your blogPages = create pages for your websiteMedia = upload pictures, videosPortfolio = add new projects in your portfolio

Themes = change your themeMenus = create menus, links etc. Sharing = connect with social media pagesUsers = invite other people to enter your dashboardPlugins = add specific feature to your website (eg: an e-commerce shop…).Domains = change the domain nameSettings = change the title of your website, tagline, allow search engines to index the site, allow people to comment on articles, receive emails when so post a comment, requires manual approvement before a comment is published...

ADVANCED WORDPRESS DASHBOARD

5) UNDERSTAND YOUR STRIKINGLY DASHBOARD

4 main buttons: • SAVE : save your work in progress as often as possible• PUBLISH : publish your website once it’s complete• STYLES : choose alternative templates• SETTINGS : change the title, URL, add your own domain name, describe your website (for social media sharing), advanced settings

PREVIEW: preview the website in large screen or on mobile screenSECTIONS : a list of separate section and individual page titles, which can be edited to create the framework of your site. They are initially listed as work, experience, photos, contact and leave a message, with an additional icon that enables you to add sections and headings.

6) DEFINE YOUR SITEMAP

Home

About

Mission

History

Team

Products / Services

Service 1

Service 2

Portfolio Testimonials Contact Blog

Category A

Category B

Privacy policy

A sitemap is a list of pages of a website accessible to crawlers or users.

Multi-page site: Single-page site:

Product/service

Portfolio

Team

Contact

Blog

7) CREATE YOUR PAGES / SECTIONS

Add the sections you need and rename them

Add pages1

Click on « Pages » - « Add ».

7) CREATE YOUR PAGES / SECTIONS

Edit your page2

• Add your content. • Change status (publish, draft…) to control if your page is visible or not. • Link the page to another section if needed (« parent page »)• Set a feature image

8) CREATE YOUR MENU

Your menu items will be created automatically according to the names of your sections.

Your menu item can direct to a: -Page from your website-Link (external website page)-Category (all blogposts from a specific category)-Tag (all blogposts with specific tags)-Post (one specific blogpost)-Projects (projects in your portfolio)

Select the menu you want to edit

Add menu items

Go in « Menus ».

9) CUSTOMIZE YOUR HOMEPAGEClick on « Customize » in the Themes

• Site identiy : Title & tagline are for your value proposition in just a few words• Change the image, colors, backgrounds, fonts to match your brand identity

• Edit all the contents by clicking on it.• Edit the name of the sections in the left sidebar. • Change the texts, images, colors, backgrounds, fonts to match your identity

• Communicate your value proposition• Clearly answer : WHY – WHAT – HOW ?• Resonate with the target audience : speak to

the right people in their language• Include CTAs = call to action

WHAT SHOULD BE THERE?

EXAMPLEWHY ? The emotional part

WHAT?

CALL TO ACTION

HOW?

• Keep in mind that the time spent on website is 2-5 min/visit and people viewing things on their mobile phone are usually on the go– Short and Sweet – Use Images & videos– Get your point across quickly– Bullet points encourage people to read more

COPYWRITING FOR MOBILE

OTHER EXAMPLE

OTHER EXAMPLE

OTHER COMMON HOMEPAGE CONTENTS

FOOTER or SIDEBARAdd widgets to facilitate the navigation: - About us- Social media links- Sign up for newsletter- Archives- Search box…-ETC.

BLOGPOSTSStatic front page VS latest posts

WHERE TO CUSTOMIZE IT?

• In the « Customize » section in the Theme• Select between static front page vs latest posts• Select the widgets you want in your footer/sidebar…

Add/Edit the Blog section and the footer section by clicking on it.

10) CREATE YOUR “ABOUT” PAGE

• Call it « About » and not something different (!! Think usability )• Tell the visitors who you are by showing what you can do for them• Give social proof, testimonials and other authenticity statements• Show personality

Go in « Pages » - « About » and write your content.

11) CREATE A BLOG & POSTS

Add a new section « Blog »Click on « Manage the posts » when on the blog section.

Add and edit your blogposts in the « Publish » - « Blog posts » section. For each blogpost you can: -Change status-Add tags & categories: that will help you structure your blogposts per categories or themes (see menus)-Featured image-Social media Sharing

WHY CONTENT RULES

CONTENT BEST PRACTICE

CONTENT BEST PRACTICE

CONTENT BEST PRACTICE

YOUR TOOLBOX

SEO BASICS

– One article = one keyword– Well organized post structure (h1, h2…) – Highlight your keywords in the titles and the

content– Alternate Text for all Images – Add tags– Clean URLS – No Broken Links

MOST IMPORTANT METRICS• Your unique visitors = the size of your audience• Referrals = where do your visitors come from? Are people

mentioning you and linking back to you? Are your social efforts paying off?

• Bounce rate = A “bounce” is when someone visits your site and immediately clicks the back button or closes their browser tab. What this usually means is that that user didn’t find what they were looking for on your site and decided to leave.

• Top 10 pages = what types of content your visitors find most useful and engaging, and which headlines were the most successful.

• Conversion rate = the % people who achieved a goal on your site. Eg: completing a purchase, filling out a contact form, or viewing a certain page on your site.

METRICS & TRACKINGIn « Stats » : basic statistics(visitors,

top 10 pages, referrers).Upgrade your plan to to install Google

Analytics.

Go in « Setting », then « Advanced Setting », « Analytics » : basic statistics (unique visitors, referrers).

You can install Google Analytics only in the Pro version.

METRICS & TRACKING - ADVANCEDStep 1: Visit Google Analytics Signup Page and create an account.

METRICS & TRACKING - ADVANCEDStep 2: Make sure website is selected.

METRICS & TRACKING - ADVANCEDStep 3: Copy the Google tracking code.

METRICS & TRACKING - ADVANCEDStep 4: Paste it in your theme’s header.php right after the <body> tag.

.

Go in “Settings” - “Customized Code”Go in “Settings” - “Analytics”

MAPPING OF YOUR DOMAIN NAMEStep 1 : Add domain mapping

Step 2 : Log in to your account at your domain registrar, and replace any existing name servers with these three domain name server (DNS) addresses:NS1.WORDPRESS.COMNS2.WORDPRESS.COMNS3.WORDPRESS.COM

Step 3 : Head over to My Domains and make sure the domain you just mapped is set as your primary domain. It can take a few hours.

Step 1: Go to you site editor and click Settings > Custom Domain. Enter your domain name and click “Upgrade”

Step 2 : Login to the domain registrar. Forward your naked domain (ex. yourdomain.com) to your www subdomain (www.yourdomain.com). Make sure to use 301/URL forwarding and that masking/masked forwarding/iFrame is not selected.

MAPPING OF YOUR DOMAIN NAMEStep 3: Add one CNAME record. Go to your domain's host record settings or zone file editor (for the domain you want to connect). If you already have a CNAME or A record for WWW, make sure to edit/delete those so you end up with only the one listed below.

Step 4 : Don’t forget to save your settings when you’re done! It usually takes a few up to 48 hours for your settings to kick in.

SINGAPORE GRANTS FOR WEBSITE DESIGN & DEVELOPMENT• CDG (Capability Development Grant) from SPRING Singapore

– Up to 70% of qualifying project costs (consultancy, training, certification, equipment costs…)

• iSPRINT Grant from IDA– For 1st time Infocomm adoption for SMEs

• PIC (Productivity and Innovation Credit) Grant from IRAS– 400% tax deductions/allowances and/or 60% cash payout for investment in

innovation and productivity improvements (ending in 2015)

• ICV (Innovation & Capability Voucher) Grant from SPRING Singapore– Voucher valued at 5000$ to encourage SMEs to take their first step towards

capability development (through consultancy)

THANK YOU!

Agence Tesla, a social media agency in Singapore and Shanghai

Martin.pasquier@agencetesla.com

Follow us on Twitter @agencetesla or www.agencetesla.asia

Like what you read? Subscribe for our newsletter