IU1-8

Thursday, October 6, 2022 12:49 PM

• Online Presence - defined by how easy it is to find a brand or • Hosted - Paid

company online. □ Self-procure Domain
- It is important for building your brand's reputation, □ Self-develop the Website using their
increasing brand awareness, and providing visibility to platform
your products or services when users are searching for □ Hosting and Management of website done
related keywords - Hubspot by Vendor for fixed monthly fee
➢ Hubspot - tools or software that allows marketers automate their □ Example – Hosted E commerce provider
reports. Shopify; Managed Word press provider WP
- Good reference Engine
- Authority in terms of digital marketing • Hosted - Free
- Customer service □ Domain (Sub Domain) provided by vendor
○ Website □ Don’t get a dedicated TLD
○ Search Engines □ No control over the setup
○ Social Media □ Good for personal blogs, trial websites and
learning
 Changing Consumer Behavior
○ Shopping Online □ Example – Wordpress.com, Wix, Weebly,
○ Online research before purchase Ecwid for Ecommerce
○ Offline purchasing is also influenced by digital  Website Development Options
 Traditional Marketing is on the decline • Web Builder Platforms - All-in-one platforms with
○ Flyers, cold calling, etc. are interruption based drag & drop interface. Suited for Graphic Designers
○ Print advertising is costly & ineffective who want publish a website.
○ Marketer centric • Content Management Systems - Open Source CMS
> Your online presence should be prominent where the target based. Offers flexibility for users, functions & content.
audience is. Customizable with Template based designs.
○ Website - key element of online presence • Custom Development - Develop using frameworks like
○ Should be visible where your audience is Ruby on Rails, CakePHP, etc. Custom built for complex
○ Compelling enough to make the visitor take action. for specific requirements.
• Media Types • Open-sources CMS as an option
○ Paid - Ad Campaigns ○ Open-source software
- Reach new customers > Advantages
- Retain existing clients - No Cost to use Software
○ Owned - websites, apps, social media channels - Huge Community, Easy to Find Technical
- Create and share content on your brand Skills
- Create a community - Ample Plugins to extend functionality
○ Earned - from community, word of mouth > Disadvantages
- Push your community (influencers, bloggers…) to - Security & support
speak for your brand. ○ CMS
• The Business Case for your Own Website > Advantages
○ 55% of shoppers said they use a brand's website during - No technical knowledge required
their path to purchase - Content collaboration & Ease of upload
○ 69% of shoppers use brand.com to look for better pricing or - Version control & Approval workflow
promotions. > Disadvantages
○ 41% of brand.com shoppers said a brand website provides - Not fully customizable
an immersive experience. - Needs Software upgrades & maintenance
(where would you buy/interact? And why?) • Popular Open Source Platforms
• How to Setup a Website ○ For Static Content Websites
> Key Steps: > Drupal
- Planning > Wordpress
- Design > Joomla!
- Development ○ For E-commerce (online shops) Websites
- Launch & Maintain > Magento
> Website Development Checklist: > Prestashop
Step 1. Information Gathering > Opencart
- Set goals for the website ○ Based on Lamp solution stack
- Define website's target audience > Linux
Step 2. Planning > Apache
- Create a sitemap sketch > MySQL
- Create a wireframe/ make-up > PHP

Module 1 Page 1
 - Set goals for the website
- Define website's target audience
Step 2. Planning
- Create a sitemap sketch
- Create a wireframe/ make-up
- Select technology stack
(programming language, frameworks, CMS)
Step 3. Design
- Create colorful page layouts
- Review the layouts
- Get client's feedback on the layouts
- Change the layout when required
Step 4. Content Writing ad Assembly
- Create new content
- Get content ready for migration
Step 5. Coding
- Build and deploy website
- Add special feature and interactivity
- SEO for the website
Step 6. Testing, Review and Launch
- Test the created website
- Upload the website to server
- Final (regression) testing and launch
Step 7. Maintenance and Regular Updating
- Add user report system
- Fix bugs asap
- Keep website up-to-day
• Key Components to Build a Website
1. Domain Name
2. Web Hosting
3. Web Application Framework
 Domain Name & Hosting
○ To set-up a website you need a domain name and web
hosting
> Can be purchased separately but usually packaged
together for ease of setup
> Ample of options are available, choose one offers
phone support
> Basic Hosting plans range from $ 8 to 15 per month,
domains start from $15 onwards
○ Some providers offer quick DIY websites with a Builder
Wizard
> Not advisable if you intend to do something serious
○ Choosing a Domain Name
> Choose based on business or brand name if you are
already established
> Choose Keyword based names if you want to be
discoverable
> Choose thoughtfully, changes later are a big hassle
> Keep is short, simple, easy to spell & pronounce
> Hyphens can be used if name is taken
> Be Creative – Blended Words, Phrases, Suffix, etc.
> Use country specific is you are primarily a local
business
> Domain Registration and Registrant info can be looked
up
> Domains with common extensions such
as .com, .net, .org are Top Level Domains (TLDs)
> Country specific domains, Country Code TLDs (ccTLDs)
may be governed by local rules & regulations
> Sub Domains can be freely added atop TLDs
○ House = hosting
○ Furniture = data files
Module 1 Page 2
> Linux
> Apache
> MySQL
> PHP
• WordPress - online, open-source website development tool
○ Functionally, it provides a powerful Content
Management System
○ Powers more than 40% of the world wide web
○ Began as a blogging tool, but now extends to E-
Commerce, Portals, etc.
○ Written in PHP
Benefits:
- Being open source, its FREE!
- User Friendly, easy to use (no need to code)
- In a self-hosted environment, you are in total control
- Used by a large community, support is easily available
Technical Considerations
• For New development
○ Potential risks of using technologies like Flash,
iFrames, etc
○ Implementing On-Page SEO Best Practices – URL
Structure, Page Title, Meta Description
○ Download Speed – Code, Image, Content Optimization
for fast loading
○ Plant Tracking code for Analytics, Tags for Social
Media Sharing
○ Browser Issues & Screen Resolutions
○ Temporarily Block Search Engine Crawlers from
indexing your site
○ Having a separate Development Server
• For Redesign/Revamp
○ Page Redirects
○ Optimize URL-Structure (if they haven’t been)
○ Website Downtime during Migration
○ Responsive Design (Mobile-Friendliness)
• Wordpress - categorized as Content Management System
(CMS)
- Does the heavy lifting of creating, storing and
distributing your content
○ Serves as an interface
- For you to publish content
- For visitor to access the content
- Content is stored in a Database
• Wordpress as an interface
1. Accessing the website
2. Content creation and publishing in the back end
3. Content storage and retrieval from the DB
WordPress.com vs WordPress.org
• WordPress.com → Free Hosted Environment
○ Hosting is free and set up is done for you
○ Domain name will include wordpress.com. e.g.
mysite.wordpress.com
○ Site can be customized; but plugins, themes
(template), etc cannot be installed
• WordPress.org → Self-Hosted
○ Here you will download the software, install & set it
up yourself
○ You will need to buy a Domain Name & Web Hosting
○ Gives you control & flexibility for website
development
• Development Environment Setup
○ Development Environment for the Course
> Use free Wordpress website hosting at
 may be governed by local rules & regulations development
> Sub Domains can be freely added atop TLDs • Development Environment Setup
○ House = hosting ○ Development Environment for the Course
○ Furniture = data files > Use free Wordpress website hosting at
○ Address = domain name www.000webhost.com
 Accessing the Web Hosting > Setup on lhubsgus.com as a sub domain
• Most Web Hosting is usually setup on a Linux environment > Website URL - yourname.000webhostapp.com
• cPanel is a control panel that’s provided to manage the "www" - subdomain (third-level domain)
hosting "yourwebsite" - second-level domain (SLD)
> Graphical interface to manage the hosting account "com" - top-level domain (TLD)
> Files, Application, Email Accounts, etc can be managed ○ rom your free 000webhost account…
here > Install Wordpress
> Access should be restricted and limited to the > Note down the password for Wordpress admin
Administrator user
> Usually accessible by: > Access your - yourname.000webhostapp.com
□ cpanel.mysite.com or • Accessing your website
□ mysite.com/cpanel ○ Website front end - go to
 Choosing a Hosting Plan yourname.000webhostapp.com
• Shared Hosting ○ Website backend - Go to
• VPS Hosting yourname.000webhostapp.com/wp-admin
• Dedicated Hosting • Wordpress Backend
• Cloud Hosting ○ WordPress Login URL
 Choosing a hosting plan (Types) > Usually accessed thru
• Self - Hosted https://www.mysite.com/wp-admin
□ Self-procure Domain & Hosting ○ Upon Logging In, you’ll see the WordPress Dashboard
□ Self-develop & management of the setup > It shows WP version, important notifications
□ Full Control of your Website > Left-hand Navigation menu
□ Example – After purchasing a domain, hosting you
develop a website using your chosen technology
& tools

Videos

• WordPress - open source website CMS, built on PHP and
MySQL.
- it's one of the easiest and most powerful blogging and
website creation tools around.
- Web publishing application
- works as an interface between you the content
publisher, a database and server where all that content
is stored, and the visitor who accesses that content
through their web browser.
- separates content and content management from its
presentation and gives you absolute control over every
aspect.
- a powerful platform that can accommodate a wide
variety of sites.
• AdWords - own ad program
- there are restrictions about what types of ads and
which ad networks you can use.
> B2 cafelog - blogging software
- Dropped active development and forked
○ "forked"- a technical term for copying a code base,
legitimately and legaly.
• Matt Mullenweg and Mike Little - who forked B2 cafelog
- Founder of WordPress
- developers and other folks who help make WordPress better,
they're volunteers.
Open source software - benefits the entire community of both the
people who create it and the people that use it.
WordPress.com versus WordPress.org
> WordPress.com - excellent option If you want to get your
website or blog online quickly.
Domain Name System (DNS)
• address book for the internet
• converts the domain name to the IP address when we type it
into the browser address bar.
• Domain name:
- mywebsite.com
- Nickname of IP address, easier to remember and stay
constant.
○ broken down into three components.
➢ Top-level domain (TLD) - provides information about the
general purpose of the website.
> Generic TLDs
▪ used to be reserved for commercial sites
▪ now become the most commonly used domain, even
for non-commercial sites.
□ .com
□ .net - was for organizations involved in
networking technologies.
 These days it is often seen as the second
choice option used when the .com isn't
available.
□ .org - was previously for any organization that
didn't fit into the other two categories.
 now .org has become associated with
organizations that serve the public interest
and humanitarian causes such as
foundations or non-profits.
□ there are no restrictions for these three TLDs.
▪ Restricted generic TLDs
□ .edu - US postsecondary institutions
□ .gov - designated for US government sites.

Module 1 Page 3

WordPress.com versus WordPress.org
> WordPress.com - excellent option If you want to get your
website or blog online quickly.
- don't require custom web development.
- FREE
- is limited, but it's simpler and more cost
effective.
> WordPress.org - great for those who need custom site builds
and like complete control over the design and code base.
- This option also gives you the freedom to
work with the web host whose services best
fits your needs.
- While the software is free, the cost of custom
design, development, and web hosting
services can be costly.
- offers more freedom, but it comes with
greater responsibility and cost.
Types of wordpress account
> Free plan - the only support you'll get is from searching the
wordpress.com documentation and posting questions in the
community forum
• Personal tier - lowest priced
- Email support
• Premium Plans - access to live chat support
- ability to earn ad revenue.
- AdWords
- Premium themes
- Ability to upload and store videos on your
site, and an optional Google Analytics
integration.
• Business Plan - ability to install plug-ins.
- advanced search engine optimization tools
- automated site backups
- and the ability to easily restore your site if
something catastrophic goes wrong, and SFTP
and database access.
> Plug-ins - powerful way to extend the functionality of your
site and there are a ton of free plug-ins available to you.
> E-commerce - run an online store
- accept payments from a whole lot of
countries
- integrate with shipping carriers, and get
access to other e-commerce site features.
Types of sites you can build
> Blog
> Personal brand or influencer
> Podcast
> Membership or subscription
> Small business
> e-commerce
* If you let the registration expire, your domain name goes back
• IP address: 173.194.121.32
Module 1 Page 4
□ there are no restrictions for these three TLDs.
▪ Restricted generic TLDs
□ .edu - US postsecondary institutions
□ .gov - designated for US government sites.
Domainr.com - allows you to search for domain names
including all the different TLDs
- Not a doma9in registrar
➢ Secondary-level domain names -refer to the label right
before the top-level domain name.
- This part of the domain name must
be unique
- Each country also has an assigned
two-letter domain name country
code.
- Each country also has its own
registrar authority, so the rules for
using a specific country code may
vary.
- Some are used as top-level domain,
some as second-level domains.
- There may be additional restrictions
such as where the business is located.
> Canadian (country code) (.ca) - top-level
domain
- exclusive to Canadian businesses,
citizens, groups, and non-profit
organizations.
> Australian (.au) - used with
predetermined second-level domains.
 com.au and .net.au - exclusively
for businesses registered in
Australia.
 .org.au - exclusively for non-
commercial organizations in
Australia.
□ Some country code domains don't have any
restrictions, and have become associated with
other meanings.
> .me domain - represents the country of
Montenegro
- now mostly associated with personal
websites.
➢ Subdomain - part of the larger domain.
- sed to create a subsection of a website
- You can name your subdomain anything, but it's a
standard convention to use m or mobile for mobile
sites.
 www - technically a subdomain, but a little
different
- Had to be included in the domain name,
but not anymore.
- most web hosts will automatically point
the domain with and without the www to
the same address.
➢ we can never really own a domain name. we purchase the
right to use it for one or more years.
➢ Domain registrar - organization that manages the
reservation of domain names.
into the pool and someone else can register it.
○ Internet Protocol Address - true identifier of a website
- Series of numbers separated by dots
- May change over time (use domain names instead)
 - May change over time (use domain names instead)

Identify the Target Audience

• Target audience - group of people likely to respond to or • Free Tools for Wireframe / Mockups
buy your product/ service > Wireframe.cc
> Demographics (Age, Gender, Education, Ethnicity, > MS Powerpoint
etc. > Figma
> Location > Draw.io
> Role, Job, Occupation • How to make your Website Successful
> Interests and Hobbies > A great website is
> Motivation, Dreams, Desires ○ Goal Oriented
> Challenges & Pain Points - How will your website grow your business?
→ Narrowed down, but sizeable - Why do you want a website?
• Create Buyer Personas for your Business  Build brand
> Semi fictional representation of your ideal customer.  Generate leads
• Know where do they get their information from  Make sales
> Social Media, Online forums, News websites - Who is your target audience
• How do they address, describe your product or service  Try to understand your customers.
> Use the right jargon, tone, and language to resonate ◊ How they act
with them ◊ How they think
• Sample Persona ◊ How they live
- How will you measure success?
 Track online sales
 Collect form submissions
 Monitor phone calls
>  Measure engagement
○ Organized
- Is your site easy to navigate?
- Start with a plan
 What is "information architecture," or "IA?"
> Define your personas, before creating design & - It's a way to organize info on your site to
content. achieve business goals.
• Design for Audience - appropriate design for your
audience.
• Sitemap (Site Structure)
> Overarching hierarchy of your website
> Helps organize a website’s content
○ Crucial for both its usability and findability
> Forms the Basis for…
○ Content Categories - Tips for organizing your website
○ User Navigation & Breadcrumbs  Use short, descriptive names
○ Menus  Keep site visitors in mind. Where and how
would they look for info
 Keep the most important info in main
navigation
>
○ Useful
- Does your website provide useful content?
- Try to understand your costumers
 Use short, descriptive names
• Structure / Information Architecture  Create content that's usefule for your
 The Art & Science of organizing a Website audience
> How to create?  Think about your information architecture to
○ Assess how Business is organized organize content
○ Classify Content according to business intent  Make content recognizable to search engines.
○ Set Information relationship  Text
○ Provide Navigation > Add headlines and bullet points for
> Structure is imperative not just for Humans but also easy skimming.
for SE Crawlers  Images
○ Sitemap - a file where web pages of your site > Add a photo gallery and before vs.
are listed to tell SE’s about the organization of after pics
your site content.  Videos
○ Usually created XML format, needed for SEO > Add how-to videaos to show off
your product or process
Functional

Module 1 Page 5
 are listed to tell SE’s about the organization of
your site content.
○ Usually created XML format, needed for SEO
○ ➢ Functionality - refers to features that allow site
• Keyword Driven Info Architecture
> Identify the business intent for each web page of
your Site
> Research Keywords (KW) pertaining to that intent, 1
KW for 1 Page
> After KW identification, create the relevant Content
> Webpage content, KW targeting should align with
the architecture
> Implementation method
○ Use an Excel spreadsheet
○ To map out KWs to the Web Pages
○ Keep a record and avoid duplication
○ Define the URL, Page Title, Meta Description
with KWs
> users to tap
• Wireframe
> Benefits of doing a Wireframe
○ Facilitates iteration in Design process
○ Allows for easy clarification
○ Provides Site Architecture visually
○ Enable Usability planning
○ Ease of Updates
>
• Mockups
> High Fidelity Wireframe with more visual details
> Includes Colors, Logos, Font Choice, etc
> > Fast load time
• Wireframe to Mockup
>  Think about keywords your target audience
Module 1 Page 6
after pics
 Videos
> Add how-to videaos to show off
your product or process
○ Functional
- Does your website do useful things?
visitors to take actions.
 A site search
 An online form
 An online store
 An online tool
○ Intuitive
- Is it easy to use your site on all devices?
- Nearly 9 out of 10 times, when people had a
helpful or relevant mobile brand experience, they
said they would purchase from the brand in the
future.
 Tip 1: Navigation
 Highlight selected elements
 Design site to allow plenty of space for
 Ensure that call-to-action can be tapped
 Tip 2: Shopping
 Help then backtrack or continue
shopping after a break
 Recommended similar products
 Tip 3: Checkout
 Reduce checkout steps
 Show visitors their progress
 Offer guest checkout
 Enable digital wallets
○ Search-friendly
- Can search engines find your website?
- Search Engine Optimization (SEO) - refers to the
techniques that improve your website rank in
Google search results, and attract higher quantity
and quality website visits to grow your online
presence.
 Make your website more visible to those who
can benefit from your product, service or
brand
 Connect with consumers making immediate
buying decisions
 Increase the number of potential customers
who see your website in search results
 Test your site speed g.co/testmysite
> Useful content
 Include relevant keywords
 Create information-rich content designed for
your target audience
> Text links
 Keep your audience engaged with internal
links, external links and backlinks
> Page titles and description
might use to find you and include them
 links, external links and backlinks
> Page titles and description
>  Think about keywords your target audience
might use to find you and include them
> Information architecture
 Build an organized website that helps google
better interpret your content
> All browsers and devices
 Design a user experience that will translate
across all types of devices

Key Elements of Web Design Fonts & Font Pairs

• Aesthetics - First Impressions Matter ▪ Choose Fonts based on
> Right choice of colors ▫ Content
▪ Select a color that resonates with your ▫ Character
product/brand ▫ Medium (web safe)
▪ Employ not more than 2-4 colors ▪ Font Pairing for
> Typography that’s legible ▫ Headings & Subheadings
▪ Fonts, size, color should be easy to ready ▫ Slogan & Taglines on an Image
▪ Bullet lists, section headers, short paragraphs ▫ Body Text & Notes
> Adequate white space  Resources for Fonts
> Effects ▫ Font squirrel
▪ Animation ▫ Canva
▪ Hover effects ▫ Font pair
▪ Scrolling ▫ Google fonts
▪ Splash/slide-in graphics, etc. Iconography
> Harmonize visual & verbal ▪ Use Icons to
▪ Compliment images with words and vice versa ▫ Make the content more appealing and readable
▪ Use visuals to illustrate
▫ Provide visual reference or a concept
• Layout, interface design - placements, alignment, etc.
▪ Make them effective by
> Place information appropriately
▫ Using same color or color scheme
▪ Key message and Call To Action (CTA) above
▫ Same size and placement
the fold
▫ Fit them in a common shape or border
▪ Navigational bars, informational footer, etc.
▪ Trust Factors on Homepage ▫ Add effects like shadow, 3D, or flat design
> Organize Page Elements ▫ Always work with a collection (Icon Sets) for consistency
▪ Align along a Grid  Resources for Iconography
▪ Use Widgets appropriately ▫ Iconfinder
▪ Adequate and equal margins ▫ Canva
► AIDA Principles ▫ FlatIcon
▪ Attention ▫ Noun project
- You capture the attention of your visitor ▫ Freepik
with a highly relevant and punchy Free Design Tool
headline. > Canva - makes design simple for everyone.
▪ Interest - Create designs for Web or print: blog graphics,
- Through the use of the video, you gain presentations, Facebook covers, flyers, posters, invitations
the interest of your visitor and so
▪ Desire > PIXLR - 123RF
- Created through the use of features and - A free online image editor. Enables to fix,adjust, and filter
benefits appealing to the needs of your images in a browser.
visitor - Good alternative to Photoshop
▪ Action > Fotor - an online designer and editing tool catering to all your
- A strong call-to-action completes the photographic and image creation needs! Add filters, frames, text,
story at the point where your visitor has stickers and so on.
been convinced your solution is > Placeit - is a mockup generator.
appropriate for their needs. In this case, it - Insert your app screenshot into iPhone and iPad mockups
uses contrast and color, as well as defines templates for free. It's much faster than using a PSD mockup
what you'll get when you clivk the button. > DesignMantic - Logo Design and Logo Maker too.
There is a little extra nudge in the copy > HATCHFUL - is a Free logo maker tool from Shopify to generate
beside the button. custom design logo.
Style Tile - A collection of visual elements that make up a site's design
• Responsive design - mobile friendly design • Visual style for the site
> Why it's important • Includes fonts, colors, typography, icon style, and interactive
▪ More Websites visits happen through elements like buttons and forms.

Module 1 Page 7
 Style Tile - A collection of visual elements that make up a site's design
• Responsive design - mobile friendly design • Visual style for the site
> Why it's important • Includes fonts, colors, typography, icon style, and interactive
▪ More Websites visits happen through elements like buttons and forms.
Handheld devices than Desktop devices • Design process is shaped by branding elements, colour choices,
▪ Constant tapping, pinching, flicking is irritating logos, etc
▪ Google favors mobile friendly sites for mobile Design Templates (Themes)
searches  Themes - Provide front-end styling (look & feel) to a website
> How to have it - Made by professional designers according to best practices.
▪ Responsive Website templates - They are “Website Templates”, allowing you to quickly
▪ Best Option gives a consistent look & feel change the skin of the site without affecting the content.
across - Can be customized to make your own
• Imagery - Saying it with a thousand words • Off the Shelf themes are available for popular open source CM
> Choose the right Imagery Marketplace for Themes
▪ Images should be meaningful, with a purpose • Themesforest.net
supporting the message Vital Web Pages
▪ Use illustration to explain concepts • Important Web Pages of a Website
▪ Use photos of real people rather than Stock - Home Page
Images - Landing Page
▪ Themed Icon Sets - About Us
> Some trends with Images • Ensure that you address two key questions
▪ Large Photo Backgrounds - Why did the user come to the page?
▪ Giant Product Images - What do you want the user to do on the page?
• Consistency - Inconsistency makes a user feel lost The Home Page
> Maintain Consistency in Design Elements • Have key messaging above the fold
▪ Colors, Typography, etc - Who I am
▪ Page Layout - What I do
▪ Navigational elements and location - What you can do here
▪ For large sites, document a Style Guide • Resonate with target audience & purpose
• Navigation & accessibility - GPS of your website • Features the benefit & value proposition
> Best Practices for good Navigation • Load Speed
▪ Simple Primary Navigation Menu (on top, or • Includes the CTAs to take visitor to the next step
left side) • Dynamic to reflect emerging needs, problems, questions of
▪ Secondary Menu or Sitemap in Footer visitors
▪ Breadcrumbs on each page (except Home and • Create UX & overall look and feel
Landing Pages) About Us Page
▪ Not more than 3 levels of hierarchy • Deserves its own identity
▪ Include a Search Box • Usually viewed by qualified traffic who want to know more about
▪ Product Filters for Online Shops you
▪ External Links open in new window • Best Practices
> Test Accessibility with multiple browsers and - Have a voice that resonates with the audience
devices - Demonstrate your Benefit
Color schemes - Include Trust Signals
• Brand and identity - Team Picture that welcomes the visitor
• Audience and content - Include at least one CTA
• Location and culture Designing for Mobile Experience
Resources for color • Keep Call to Action
• Website color schemes - Center-aligned
• Imagecolorpicker.com - Visible prominently
• Keep Menu Short and Sweet
Images • Easy return to Homepage
> Considerations when using Images • Promotions should not hog the real estate
▪ Photos vs Illustrations
▪ Editing to gel with overall look & feel
▪ Accompanying message, CTA for engagement
▪ Common formats JPEG, PNG or GIF
▪ Good photography is possible with your
smartphone too!
> Other aspects that matter
▪ Optimized for Size & Resolution
▪ Meaningful Filenames & ALT text
▪ Licensing
Sources for Paid images
▪ Gettyimages

Module 1 Page 8
 ▪ Gettyimages
▪ Fotolia - by adobe
▪ 123RF
▪ Shutterstock
▪ Pixerf
▪ Klaud9
Sources for Free Images
▪ Pixabay
▪ Unspalsh
▪ Burst

 Inbound Marketing with Content

- It refers to marketing that bring visitors in, rather than ▪ Understandable - can the user understand the
marketers having to go out to get prospects' attention. content?
Inbound marketing earns the attention of customers, □ An appropriate content type (text, video, etc.)
makes the company easy to be found, and draws □ Reflection that you considered the user
customers to the website by producing interesting personas
content. □ Context
▪ Educational, Informational, Lovable □ Respect for the audience's reading level
▪ Cost effective compared to traditional advertising □ Articulate an old idea in a new way
▪ Term coined by Hubspot, especially effective for ▪ Actionable - will the user want to take action?
SMEs □ A call to action
▪ Synonymous to Permission Marketing concept by □ A place to comment
Seth Godin □ An invitaion to share
 Traditional vs Inbound □ Links to related content
> Traditional □ A direct summary of what to do
□ Cold Calling ▪ Shareable - will the user the content?
□ Cold Emails (SPAM) □ Something to provoke an emotional response
□ Interruptive Ads □ A reason to share
□ Marketer-Centric □ An ask to share
> Inbound □ An easy way to share
□ SEO □ Personalization (add hashtags to tweets, etc.)
□ Blogging  Essence of Marketing with Content
□ Attraction 1. Content marketing is the art of providing relevant, useful
□ Customer-Centric content to your customers without selling or interrupting
▪ Content them.
□ Blogs 2. Instead of pitching your products and services, you are
□ Interactive Tools delivering information that makes your customers more
□ Photos & Inforgraphics informed before they buy.
□ Video & Podcasts 3. If you deliver consistent, ongoing valuable information to
□ Presentations & Ebooks your customers, they ultimately reward you with their
▪ Context business and loyalty.
□ Right Message +  Content Workflow
□ Right Person _ 1. Create (Plan & Create)
□ Right Time 2. Promote (Distribute & Promote content)
= Context 3. Convert (Convert, optimize, Measure content)
 Copywriting - Copywriting is writing content for the purpose  User Interface (UI)
of marketing ○ Design of user interfaces for machines and software, with
• Copywriting should include the focus on maximizing usability and the user
▪ Enticing Headline experience.
▪ Storyline ▪ In the context of Web Presence it is “skin of the
▪ Substance that adds value to the reader website”
▪ Structure and visual engagement ▪ Refers to Fonts, Icons, Buttons, Images, Animation,
• For SEO benefit Forms, etc
▪ Use right KWs & synonyms  User Experience (UX)
▪ Include Links out and Link internally ○ The overall experience of a person using a product,
> Copywriting method especially in terms of how easy or pleasing it is to use.
• AIDA ▪ Product can be a Website, Mobile App or Software
▪ Attention ▪ All about enhancing Human Computer Interaction
▪ Interest (HCI)
▪ Desire ▪ UX Design is all about enhancing user satisfaction
▪ Action with a product
 Catchy Slogans & Headlines  UX vx UI
• Logos are visual, Slogans are audible representation of ○ UX

Module 1 Page 9
 ▪ Desire ▪ UX Design is all about enhancing user satisfaction
▪ Action with a product
 Catchy Slogans & Headlines  UX vx UI
• Logos are visual, Slogans are audible representation of ○ UX
a brand ▪ Interaction Design
• Slogans/Taglines should be ▪ Wireframes & Prototypes
▪ Memorable, differentiating ▪ Information architect
▪ Include the benefit ▪ User research
▪ Short and seet ▪ Scenarios
▪ Resonate with the adience ○ UI
• Slogan Generator ▪ Visual design
▪ Hopify.com.sg/tools/slogan-maker ▪ Colors
 Visual Design Principles ▪ Graphic designer
• Range from five to a dozen ▪ Layouts
• Helps to; ▪ Typography
▪ Increase Usability  User Experience UX
▪ Provoke ○ Average Attention Span of a person has dropped to 8
▪ Emotion seconds*
▪ Strengthen brand perception ○ Internet users don’t read, they skim
• Basic principles ○ First moments are important…so, Say it Quick and Say it
▪ Contrast Well
▪ Balance ○ UX principles apply to all digital products
▪ Emphasis  Conversion Focused Design
▪ Hierarchy ○ It's about improving effectiveness & performance of your
▪ White space marketing efforts
▪ Rhythm ○ Being User Centric is important, but being Conversion
 Visual Hierarchy Centric moves the needle
 Engaging content in short.. ○ Conversion goals are different for different website types
• Is the content  Factors Improving Conversions
▪ Findable - can the used find the content? ○ Value Proposition
□ An h1 tag ○ Attention (conversion factors)
□ Atleast two h2 tags ▪ Less is More
□ Metadata, including title, descriptions & ▪ Distraction is a Conversion killer
keywords ○ Credibility (conversion factors)
□ Links to other related content ▪ Capitalize on Customer Testimonials
□ Alt tags for images ▪ Mention Awards, Accreditations & Certifications
▪ Readable - can the user read the content? ▪ State Licenses, Memberships, etc
□ An inerverted pyramid writing style ○ Relevance (conversion factors)
□ Chunking ▪ Users expect to see what they clicked for
□ Bullets ○ Clarity (conversion factors)
□ Numbered lists ▪ More White Space
□ Following the style guide ▪ Clear Message
○ Social proof
VIDEOS (coming soon – H) ○ Urgency
○ Call to action (conversion factors)
▪ Indicates the Next Step
▪ Should be Prominent & Above the Fold
▪ Intuitive & Contrasting Color
▪ Actionable Copy

• Pages & Post • WordPress Theme

○ Content can be created using Pages or Posts ○ A WordPress theme consists of the following anatomical
○ Posts elements:
▪ The blog aspect of a WordPress website ▪ Template files such as index.php, header.php,
▪ Listed in reverse chronological order, has a datetime category.php etc
component ▪ Template tags such as , etc.
▪ Used for the news or dynamic portion (Blog) of a site ▪ CSS
○ Pages ▪ Images and other media files
▪ Similar to Posts, but are not listed by date and not ▪ JavaScript files
categorized • Theme Options
▪ Pages have hierarchy, can be attached to a Parent ○ Most Premium Themes provide an interface to…
page ▪ Change theme settings
▪ Used for static content, for e.g. About Us, Homepage, ▪ Do site wide design changes

Module 1 Page 10
 categorized • Theme Options
▪ Pages have hierarchy, can be attached to a Parent ○ Most Premium Themes provide an interface to…
page ▪ Change theme settings
▪ Used for static content, for e.g. About Us, Homepage, ▪ Do site wide design changes
etc. ▪ Tweak site appearance / design at a finer level
• Creating a Post ○ Use this interface before modifying CSS files for design
○ Locate Posts menu on the Left-hand side of the Dashboard changes
○ Click Add New to create a New Post • Common Elements
○ First Box is where you will add the Title ○ Themes dictate the overall appearance of a Website
○ Next is the post formatting section i.e. Post Editor ▪ Customize the Common Elements like header, footer,
○ Right sidebar allows you to etc.
▪ Save, Preview, Schedule and Publish content ▪ Style the Content using native Gutenberg or inbuilt page
▪ Assign the post to categories, specify Tags, etc builder
▪ Set a featured Image • Page Builders
▪ Set the Sidebar, Footer, etc ○ Enhances the basic WordPress web page editing capabilities,
• Creating a Page ○ Usually bundled with the WordPress Theme
○ Similar interface as with Creating Posts ○ Gives flexibility in design, with frontend & backend editor
○ Locate Page menu on the Left-hand side, Add New to create ○ Pre-built layout templates, save your layout as a template for
a New Page reuse
○ Page Attributes section allows to set a Parent Page & • Theme Customizer
Template to the page ○ Allows changes to your website design in real time
○ Right sidebar allows you to ○ Default feature in Wordpress
▪ Save, Preview, Schedule and Publish content • Set a ○ Every Theme has some level support for Customizer
featured Image • Set the Sidebar, Footer, etc ○ Accessible through Appearance > Customize
• Adding Images ○ Interface for basic changes like Site Logo, Title, Color Scheme,
○ WordPress uses a media library to store images & videos etc
▪ Heading
○ Preload images using the Media Menu, Add▪New Cover
to invoke • Creating a post
the upload box ▪ Quote image ○ Locate Posts menu on the Left-hand side of the Dashboard
▪ List
○ You can change Title, Caption, ▪ Video
Alt text, etc for uploaded ○ Click Add New to create a New Post
images ▪ audio ○ First Box is where you will add the Title
▪ Separator
○ To insert images on pages/post ○ Next is the post formatting section i.e. Post Editor
▪ Click Add Media Button ▪ Button
above the Editor Box ○ Right sidebar allows you to
▪ Text
▪ Select images from Insert Media Box ▪ Save, Preview, Schedule and Publish content
Columns
▪ Specify alignment, size for image in editor ▪ Assign the post to categories, specify Tags, etc.
• Adding Links and other formatting ▪ Set a featured Image
○ Select the text you want to hypertext or format (Bold, ▪ Set the Sidebar, Footer, etc.
Bullet, etc) • Custom Menus
○ Click the available options from the Toolbar ○ Custom Menus → To add Navigational links to Pages, Post
○ For Links, it brings up a box to enter the URL categories, custom links of your website
○ For internal links choose from the list of existing ○ Located at Appearance > Menus in the Left-Hand panel
pages/posts er formatting ○ Re-order and key in own Headings
• Gutenberg (Version 5 onwards)
○ New Block based Editor for WordPress
○ Replacement to the age-old Standard Editor
○ Block formatting for -
▪ Paragraph
▪ Image
▪ Gallery
VIDEOS (coming soon – H)

▪ Pull quote
▪ Table
▪ Preformatted

• Wordpress Plugins
○ Plugins→ Small Software Apps that can be installed to d. Meta descriptions are page summaries often used by Google and
extend functionality of your WordPress Website other search engines on the search results page. Write unique
○ Plugins can be installed only in Self-Hosted WordPress descriptions for each page in 150 characters or less.
environments • Key Factors
○ WordPress has a directory of over 40,000 different ○ URL Format
plugins ○ Page Title
▪ Many of them are free, some have to be ○ Headline Tags
purchased ○ Meta Description
Paid Plugins are supported and frequently

Module 1 Page 11
 ○ WordPress has a directory of over 40,000 different ○ URL Format
plugins ○ Page Title
▪ Many of them are free, some have to be ○ Headline Tags
purchased ○ Meta Description
▪ Paid Plugins are supported and frequently • URL Structure
upgraded ○ Contain target keywords
 Extending Functionality, Adding Features ○ Be as concise as possible
▪ Common Plugins used to add functionality ○ Use hyphens for improved readability
□ Contact Form ○ Use a breadcrumb structure
□ Maps for Address • Page Title
□ SEO Plugin for On-Page Optimization ○ Unique meta titles for every page
□ Social Sharing Bar ○ Keyword phrases of high value and search volume
□ Newsletter/Blog Opt Ins ○ Keep within the character limit
□ Content Editor
○ Structure title so keyword appears first
□ Revolution Slider Plugin
• Heading Tags
□ Google Analytics Plugin
○ Six tags: H1 to H6, numbers denote importance
□ Etc, etc…
○ Have only one H1 text in page
 Installing & Updating Plugins
○ Make SE’s understand what the topic is about
▪ Few ways to Install Plugins in WordPress
○ Include in textual content for structure & SEO
□ Upload an available Plugin file (usually a zip
• Meta Description
file)
○ Helps in Click Through, but not in rankings
□ Search from WordPress directory and install
○ Not visible on page, but on SERPs
□ Manually copying thru FTP (not
recommended) ○ Keep within the character limit
▪ Plugins must be activated after installing ○ Ensure description is keyword rich
▪ Plugins need to be updated when newer version is ○ Include a call to action
available from developer • Optimizing Content for SEO
• Widgets ○ Content Optimization is about having Content that’s
○ Widgets → For adding content and features to a ▪ Relevant and in-depth to the KW/Topic being targeted
website. For e.g… ▪ Quality and trustworthy stuff that value-adds to the
▪ Feature snippets in Sidebar & Footer reader
▪ Search Bars ▪ Formatted/Structured to provide a good user experience
▪ List of Recent Posts, etc ○ Latent Semantic Indexing
○ Located at Appearance > Widgets in the Left-Hand ▪ Method used by SE to determine what a page is about by
panel spotting patterns of related terms
○ Must be placed in designated Widget Areas or Locations ▪ Effective alternative to Keyword repetition (or stuffing)
○ Can be freely added, deleted, re-arranged ○ Don’ts
• Contact Forms ▪ Duplicate Content
○ Many Free Plugins offer Contact Form functionality ▪ Over-optimize by KW Stuffing
▪ Contact Form 7 ▪ Misalign with what’s stated in Page Title & Heading Tags
▪ Ninja Forms • Optimizing Content for SEO
▪ Jetpack, etc ○ SE Crawler can read thru Text but NOT Images, Videos or
○ Paid Versions offer for features… Audio files
▪ Price calculations, ○ Image sizes impact load speeds
▪ Auto responder ▪ Use right formats for web publishing, compress
▪ CRM / email marketing integration, etc ○ Non-Textual Content needs to be described
○ Premium themes such as Divi may include in-built Form ▪ Use supporting text for such content
widget ▪ Give meaningful filenames
• SEO: Getting Found by Search Engines ] ▪ Always have ALT text for image files
○ Webpages should be optimized to get easily found by ▪ Include microformats from schema.org for extra
Search Engines metadata
○ Also known as On-Page SEO ▪ Create Video sitemaps is you have Videos and want them
▪ Techniques and factors that you can control on to rank
your website in order to make it easy for Search • Implementing On-Page Optimization
Engines to index and understand what it is all 1. SEO Friendly URL Structure (permalinks)
about. a. Meaningful words rather than numbers, special
○ On-Page optimization is best implemented during characters
design & dev phase 2. Keywords Placement
• Webpage Optimization a. Use KWs in Body, URL, Title, etc
○ Each Web Page should be Keyword targeted & 3. Page Title and Meta Description
optimized for it a. These help in discoverability and CTR
▪ Content on the page must align to the target KW 4. Headline Tags, Internal & External Links
being ranked for a. Leverage H1 to H6 Heading
▪ Web Page Meta must make it clear to SE what the b. Include anchor text links to other web pages
5. Image Optimization

Module 1 Page 12
 optimized for it a. These help in discoverability and CTR
▪ Content on the page must align to the target KW 4. Headline Tags, Internal & External Links
being ranked for a. Leverage H1 to H6 Heading
▪ Web Page Meta must make it clear to SE what the b. Include anchor text links to other web pages
page is about 5. Image Optimization
○ Key Factors for Web Page optimization include a. Optimize File name & ALT Text
▪ URL Format • Adding a new form to WP forms (slides 19-24)
▪ Page Title • Customizing Form (25-28)
▪ Headline Tags • Accessing Field Options (29-30)
▪ Meta Description • Editing Form Settings (31-33)
• Understanding On Page Optimization • Notifications (34)
1. Look Good In the Search Results • Confirmations (35-36)
a. Your page title is used as a suggestion for the title • Displaying Forms on Your Site (37-41)
in Google's search results. Describe your business • Embedding a Form with the Block Editor (42-47)
in a concise, informative phrase.
b. Domain names are an important part of Google's
search results. Choose a descriptive and easy-to-
read domain name for your website. Sub-pages
should also be easy to read. For example, use
www.stasiasbakery.com/custom-cakes Instead of
www.stasiasbakery.com/prodid?12345
c. Meta descriptions are page summaries often used
by Google and other search engines on the search
results page. Write unique descriptions for each
page in 150 characters or less.

PAGE LOADING SPEED

WEBSITE PRE-LAUNCH STEPS
Common fixes to improve Page Load Speed :
Things to do before launching your website : • Enable Compression for website code
1. Optimize Permalinks for SEO friendliness • Minify CSS, JavaScript & HTML code
2. Setup Email for Your WordPress Site • Reduce Redirects (URLs)
3. Check All Forms on Your Site • Leverage Browser Caching
4. Delete Dummy Content • Use a Content Distribution Network (CDN)
5. Create an XML Sitemap • Optimize Images (Can install & activate plug-ins)
6. Improve Your Website Loading Speed
MOBILE FRIENDLINESS
7. Setup Website Backups & Security Plugins
8. Uncheck the Box for Search Engine Visibility ○ The internet is consumed more by mobile devices, than desktops
9. Run a Mobile-Friendly Test
Test Mobile friendliness of your pages:
10. Setup Google Search Console
https://search.google.com/test/mobile-friendly
11. Install Google Analytics
MOBILE FRIENDLINESS : USER EXPERIENCE
WORDPRESS SETTINGS Websites should be designed with a Mobile First experience –
▪ Reduce on-page elements
▪ Format button color clearly
▪ Ensure buttons are responsive to touch
▪ Simplify mobile landing pages
▪ Create a nested table to store links to different site sections
▪ Avoid pop-ups at all costs

MOBILE FRIENDLINESS FOR UX & SEO

• Websites are expected to be mobile responsive and provide a good UX

on handheld • Google evaluates mobile version of websites more
critically
• While indexing, Google looks at the mobile version of the page first

Module 1 Page 13
 • Websites are expected to be mobile responsive and provide a good UX
on handheld • Google evaluates mobile version of websites more
critically
• While indexing, Google looks at the mobile version of the page first

GETTING DISCOVERED BY SEARCH ENGINES

How to get your Website crawled and indexed faster

▪ Build links from other sites to your site
• Especially from site that are more frequented & popular
▪ Add an XML sitemap to your site and submit it to the search engines
(webmaster tools)
▪ Improve Crawl Speed
• Crawling process slows down in case of a slow server, too many URLs
and technical errors

SITE MAPS

Sitemap is a file that tells search engines the organization of site content
MOBILE & SPEED FACTORS
▪ Enables Search Engine Bot to easily discover all pages of your site
WEBSITE LOADING SPEED (XML version)
▪ Submit your sitemap to Google Search Console, Bing Webmaster
Page Loading Speed Tools, etc
▪ Can be easily generated by Free tools and website plugins (like Yoast)
• Online users expect website to load quickly
• Google places greater emphasis on load times as a UX factor Different Types
• Speed is considered as a SEO ranking factor ▪ Sitemap: index of website pages
▪ Image Sitemap: index of website images
▪ Video Sitemap: index of website videos
Free Tools to test your site
○ Google PageSpeed Insights Processes Involved
○ Gtmetrix, Pingdom ▪ Generation: producing an updated sitemap at regular intervals
○ Lighthouse Chrome Extension ▪ Syndication: sharing an updated sitemap at regular intervals

VIDEOS

• General Settings
• Writing and Reading Settings
• Permalinks
• Privacy settings
• Change the language of your site
• Soft and hard launch
• Create a feedback for issues and resolution
• Post-launch user testing
• Testing the site before going live

• Hack attempts are common in WordpressHack attempts ———VIDEOS———————————————

are common in Wordpress Website Security
• Website defacement
• Is WP safe and secure
About us page
How to protect wp site?
Menu
1 trusted host
User acc
2 basic security plugin ex. Loginizer Security
Security Measures for Wordpress
3 backup routine
-Use reputed hosting providers
4 don’t give anyone have admin access on your website
-Monitor
• Securing your site and managing spam
-Software Upgrades
Install plugin>.Limit Login Attempts Reloaded.
-Security Plugins & Firewall
Akismet
Best Practices
Housekeeping & Backups
✓ Change admin user ✓ Use strong passwords ✓ Password
• Overview of popular backup plugins
protect backend access page ✓ Keep Backups
WEBSITE BACKUPS IS REALLY IMPORTANT -Redundancy is the key

Module 1 Page 14
Best Practices
Housekeeping & Backups
✓ Change admin user ✓ Use strong passwords ✓ Password
• Overview of popular backup plugins
protect backend access page ✓ Keep Backups
WEBSITE BACKUPS IS REALLY IMPORTANT -Redundancy is the key
-recommend having both on-site backup, via host managed backup
and backups on a third party host.
-SAS offerings, something like UpdraftPlus, or WP Time Capsule, or
Content Updates BlogVault, or Vault Press, or maybe even Backup Buddy, or even
ex. Keep up to date info about your product/services, BoldGrid Backup.
business info, etc -plugin to manage and run and automate the backup and restore
procedure
• Overview of UpdraftPlus
Monitor Technical performance UpdraftPlus plugin
1 Site Uptime • Uptime Robot • Mon.itor.us Backup plugin
• Keep Wordpress up-to-date
-keep plugins and themes you have installed updated at all times.
2 Page Load Time • Google PageSpeed Insights •
-latest security updates and to get the latest features.
Pingdom
-Keeping WordPress up to date is not complicated. But it is a job
that needs to be done.
-make sure WordPress core, plugins and themes are up to date to
3 Disk Space & CPU Load • Cpanel Main Page keep your site secure and working properly.
• Recover from a crash with recovery mode
Wordpress recovery mode to recover crash files
4 Error & Warning Messages • Google Search Console follow the site recovery link, go into your site, deactivate whatever
theme or plugin you just activated, and your site should come back
online, and everything should be fine.
5 Broken Links • Link Checker • Monitoring site health
(http://validator.w3.org/checklink) Backend>tools>site health
They're there to inform you as an administrator about what works,
what doesn't work, and what could be improved.
Functional performance Monitoring Performance
1 Conversion Rate • Google Analytics • Website Management
Mixpanel • PIWIK • How WordPress handle users
2 Number of Visits/Sessions user profile serves two purposes.
3 Average Visit/Session Duration -gives each user an identity in the database, so comments, posts,
4 Bounce Rate and other content they've published can be associated with that
identity, -allows each user to control what information a site has
5 Number of Views by Pag about them and how that information is displayed.
Administrator=boss- complete control
5 user roles
Google Analytics
subscriber, contributor, author, editor, and administrator.
AUDIENCE • Who are your Visitors • Demographics • Location •
• User Profiles
Technology used
Just a tour on the user profile section
AQUISITION • Where Visitors come from • Traffic Sources •
Channel Used • Add and manage users
BEHAVIOUR • What Visitors do on Site • Top Pages of your Site • Just a demo how to add and manage numerous users in one site
Visitor Engagement • Manage comments and spams
CONVERSIONS • Track Goals that you setup • Number of advanced comment moderation to manage comments and spams
Conversions • Conversion Paths • Advance Content Management
WordPress gives you these index pages where you can see all the
available users, and all the available comments, and everything
else, and that carries through to every type of content within
WordPress
• The media library
Where you store all files (images/pdfs/videos)

Module 1 Page 15