1 of 98

Slide Notes

DownloadGo Live

Websites & Web Design Basics

Published on Nov 25, 2015

No Description

PRESENTATION OUTLINE

Websites & Web Design Basics

an Introduction

Jessie-Lee Nichols

Owning your website

What does it mean?

two major areas

  • Domain
  • Hosting
Photo by blacknight

Domain names are how users access your site in a browser.

Photo by M i x y

A website host is where all the files that make up your website are stored.

Domain names connect to website hosting with an IP address.

Photo by mikecogh

An IP address is a series of numbers (98.117.194.204) that tell the domain name where to find the website files.

Now You have the essentials

so, How do you create the files?
Photo by bengrey

CMS

Content Management System

A content management system (CMS) is a web application designed to make it easy for non-technical users to add, edit and manage a website.

Yes.

A CMS is a non-coders best friend

WordPress

Photo by Titanas

.ORG is self-hosted, you own your hosting and control who your hosting provider is.

Photo by wicho

.COM is hosted on WordPress servers.

Business websites should always be self-hosted.

Photo by kevin dooley

Why I love WordPress

Because 74,652,825 users can't be wrong
Photo by borkazoid

WordPress is...

  • Easy to use
  • Open source
  • Community driven
  • FREE
  • Scalable
Photo by davidwallace

What not to use

providers with empty promises
Photo by discoodoni

Building a website isn't easy

Don't be fooled.

Wix.com

Just say no.
Photo by killerfemme

Reasons Wix.com fails

  • SEO
  • Site ownership
  • Mobile sites
Photo by Kass & Rachel

...back to WordPress.

Photo by niallkennedy

How to get started

  • Purchase a domain name
  • Purchase hosting - managed WordPress hosting is available.
Photo by kevin dooley

Providers

Premium Themes

Photo by SonOfJordan

You DO NOT need to know how to code to build a website on WordPress.

Photo by Riebart

Themeforest.net

  • Premium WordPress themes
  • Full site solutions under $70
  • Supportive community

What to Look for in a premium theme

  • Number of sales
  • Overall rating
  • Built-in features
  • Robust admin panel
  • Overall look and feel
  • Last updated date
  • Responsiveness
Photo by WilliamMarlow

RESPONSIVE

NOT JUST AN INDUSTRY BUZZWORD

Responsive websites provide an optimal viewing experience - easy reading and navigation- with a minimum of resizing, across a wide range of devices; including desktop computers, tablets and mobile phones.

Having a mobile site is not the same as having a responsive site.

Photo by Kai Hendry

Mobile sites are separate sites that are in addition to your desktop website. They provide a user with what is believed to be the most important information "on the go".

Photo by JeanbaptisteM

Responsive websites deliver a consistent experience no matter the device it is being viewed on.

Photo by mrJasonWeaver

80% of Internet users are using smartphones to search online.

the game changed april 21, 2015

Mobilegeddon
Photo by rishibando

April 21, 2015
Google changes the algorithm to punish websites that aren't mobile friendly.

Photo by MattysFlicks

So, How easy is wordpress?

Let's take a look
Photo by djwtwo

Plugins
bits of software that can be uploaded to extend and expand the functionality of your WordPress site.

Photo by MDMA.

Plugins every site should include

  • WordPress SEO by Yoast
  • Quick Page/Post Redirect Plugin
  • Image Widget
  • Enable Media Replace
  • Duplicate Post
  • Anti-Spam Bee
  • iThemes Security

Ok, I have WordPress insalled,

now what?

It's all about the content.

Photo by bcymet

Never design without a concept. Content MUST come first.

Photo by jaudrius

Build a sitemap

  • 5 top level menu items perform the best
  • Utilize theme tools like Mega Menus
Photo by mChuca

Each page should have a specific purpose. Always be thinking, "what do I want a user to accomplish on this page."

On Page copy

The Hardest part
Photo by RLHyde

On page copy can stall a website indefinitely, make sure you have a plan.

Photo by Will Scullin

identify these points

  • Who is handling the website copy?
  • Where is your content coming from?
  • Do you already have finalized content, or will everything need to be created from scratch?
  • Will your site need photography?
  • Will that photography be original or stock?
  • What are the most important pages that a visitor should view on your website?

Don't slack.
Your content should meet the needs of your users; answer their questions, solve their problems.

Photo by Scott McLeod

Great, relevant content will be awarded with conversions.

Photo by kevin dooley

design

yes, we have reached the fun part
Photo by John-Morgan

Design with mobile in mind.

Photo by coofdy

Above the fold

It's just not relevant unless you are reading a newspaper
Photo by just.Luc

We scroll, you scroll, we all scroll!

Photo by Stéfan

Don't be afraid of length. Make it easy for the user to get what they need. They shouldn't have to work to find your content.

Images

The bigger the better
Photo by Olof S

The Hero Image

Say goodbye to homepage sliders
Photo by JD Hancock

Statistics show that users do not covert after the first slide.

Photo by qthomasbower

55% of visitors spend fewer than 15 seconds on your homepage.

Photo by josterpi

Flat design

form and function
Photo by Ardonik

A noticable shift

  • Faster load times
  • Clutter free, content focused
  • On trend

Contrast

Your copy may be awesome, but if you can't read it...
Photo by cobalt123

web safe fonts

Don't go crazy, be as compatible as possible
Photo by arnoKath

You've built it

...but, will they come?
Photo by dkshots

who are your buyers?

buyer personas

Buyer personas are detailed profiles of your ideal customer.
...detailed, very detailed.

Photo by eriwst

SEO

Search engine optimization
Photo by Kaysse

To win business, you need to get found online.

Getting found in search results is key.

Photo by .sandhu

keyword research

Finding the words and phrases people are using to search online
Photo by eriwst

short vs. long tail keywords

Think about how you use google
Photo by włodi

Short tail keywords are short words or keyphrases.

Photo by Tomi Tapio

Long tail keywords are like a question.

Photo by Etrusia UK

Identify your short tail keywords and build on those to identify your long tail keywords.

Photo by KayVee.INC

So, how do you do it?

  • Google Adwords Keyword Tool
  • Google Trends
  • Competitive keyword analysis
  • Listen
Photo by geishaboy500

Keywords aren't the only thing

They are just the tip of the iceberg
Photo by MrHicks46

Content.
A consistent and relevant stream of content can boost search rankings without having to pay for those rankings.

Photo by S1ON

Blogging

The easiest way to boost your rankings
Photo by Tojosan

Every time you publish a blog, you add an additional page to your site.

Photo by Horia Varlan

Adding fresh, relevant content to your website lets Google know it's time to reindex your site.

Photo by David Reece

How do you get started?

  • Answer questions you hear from your customers everyday.
  • Make your post about solving their problem, not promoting your services.
Photo by Stefan Baudy

Premium content

eBooks, whitepapers, webinars
Photo by shiftstigma

You are a wealth of knowledge. Put your knowledge to work online.

Photo by Ian Muttoo

Investing the time in an inbound marketing strategy will promote trust amongst your buyers, establish yourself as a thought leader in your industry and be more effective than a paid adwords campaign.

Photo by peterned

Conversions

the slides you have been waiting for
Photo by aresauburn™

Why leave this until the end? You can't play effective baseball without all nine players on the field.

Photo by Joe Y Jiang

Based on your buyer personas, what is your most basic and educational offer?

Add this offer to your homepage hero image as a call to action.

CTA
A call to action is an instruction to the audience to provoke an immediate response.

Photo by Mike Cattell

CTA examples

  • Download Now
  • Contact Us Today
  • Sign Up
  • Subscribe
  • Register
Photo by XLShadow

What Makes a Great CTA

  • Eye-Catching Design
  • Copy that makes your audience want to act
  • A clear value proposition
  • A specific page aligned with your offer
Photo by starbooze

Gated Content is an effective way to drive conversions, but make sure the content is worth the "price" the user is paying.

Photo by Hindrik S

Where to use a cta

  • Homepage Hero Image
  • Page sidebars
  • Within premium content
  • At the end of blog posts
Photo by Julian Evil

How do i know if it is all working?

Google analytics
Photo by Marc_Smith

Google Analytics is a FREE web analytics service that provides statistics and basic analytical tools for search engine optimization.

Photo by Mark Mrwizard

Intrigued by inbound?
HubSpot is an inbound marketing software platform that helps companies attract visitors, convert leads and close customers.

Photo by stevegarfield

Q & A

Photo by opensourceway