Module 1

Thursday, October 6, 2022 12:49 PM

IU1 • Hosted - Paid

• Online Presence - defined by how easy it is to find a brand or □ Self-procure Domain
company online. □ Self-develop the Website using their
- It is important for building your brand's reputation, platform
increasing brand awareness, and providing □ Hosting and Management of website
visibility to your products or services when users done by Vendor for fixed monthly fee
are searching for related keywords - Hubspot □ Example – Hosted E  commerce provider
 Hubspot - tools or software that allows marketers automate Shopify; Managed Word press provider
their reports. WP Engine
- Good reference • Hosted - Free
- Authority in terms of digital marketing □ Domain (Sub Domain) provided by
- Customer service 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
○ Print advertising is costly & ineffective Designers 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 &
audience is. content. Customizable with Template based
○ Website - key element of online presence designs.
○ Should be visible where your audience is • Custom Development - Develop using frameworks
○ Compelling enough to make the visitor take action. like Ruby on Rails, CakePHP, etc. Custom built for
• Media Types complex for specific requirements.
○ Paid - Ad Campaigns • Open-sources CMS as an option
- Reach new customers ○ Open-source software
- Retain existing clients > Advantages
○ Owned - websites, apps, social media channels - No Cost to use Software
- Create and share content on your brand - Huge Community, Easy to Find Technical
- Create a community Skills
○ Earned - from community, word of mouth - Ample Plugins to extend functionality
- Push your community (influencers, bloggers…) to > Disadvantages
speak for your brand. - Security & support
• The Business Case for your Own Website ○ CMS
○ 55% of shoppers said they use a brand's website during > Advantages
their path to purchase - No technical knowledge required
○ 69% of shoppers use brand.com to look for better - Content collaboration & Ease of upload
pricing or promotions. - Version control & Approval workflow
○ 41% of brand.com shoppers said a brand website > Disadvantages
provides an immersive experience. - Not fully customizable
(where would you buy/interact? And why?) - Needs Software upgrades &
• How to Setup a Website maintenance
> Key Steps: • Popular Open Source Platforms
- Planning ○ For Static Content Websites
- Design > Drupal
- Development > Wordpress
- Launch & Maintain > Joomla!
> Website Development Checklist: ○ For E-commerce (online shops) Websites
Step 1. Information Gathering > Magento
- Set goals for the website > Prestashop
- Define website's target audience > Opencart
Step 2. Planning ○ Based on Lamp solution stack
> Linux

Page 1
 Step 1. Information Gathering
- Set goals for the website > Prestashop
- Define website's target audience > Opencart
Step 2. Planning ○ Based on Lamp solution stack
- Create a sitemap sketch > Linux
- Create a wireframe/ make-up > Apache
- Select technology stack > MySQL
(programming language, frameworks, > PHP
CMS) • WordPress - online, open-source website development
Step 3. Design tool
- Create colorful page layouts ○ Functionally, it provides a powerful Content
- Review the layouts Management System
- Get client's feedback on the layouts ○ Powers more than 40% of the world wide web
- Change the layout when required ○ Began as a blogging tool, but now extends to E-
Step 4. Content Writing ad Assembly Commerce, Portals, etc.
- Create new content ○ Written in PHP
- Get content ready for migration Benefits:
Step 5. Coding - Being open source, its FREE!
- Build and deploy website - User Friendly, easy to use (no need to code)
- Add special feature and interactivity - In a self-hosted environment, you are in total
- SEO for the website control
Step 6. Testing, Review and Launch - Used by a large community, support is easily
- Test the created website available
- Upload the website to server Technical Considerations
- Final (regression) testing and launch • For New development
Step 7. Maintenance and Regular Updating ○ Potential risks of using technologies like Flash,
- Add user report system iFrames, etc
- Fix bugs asap ○ Implementing On-Page SEO Best Practices – URL
- Keep website up-to-day Structure, Page Title, Meta Description
○ Download Speed – Code, Image, Content
• Key Components to Build a Website Optimization for fast loading
1. Domain Name ○ Plant Tracking code for Analytics, Tags for Social
2. Web Hosting Media Sharing
3. Web Application Framework ○ Browser Issues & Screen Resolutions
 Domain Name & Hosting ○ Temporarily Block Search Engine Crawlers from
○ To set-up a website you need a domain name and web indexing your site
hosting ○ Having a separate Development Server
> Can be purchased separately but usually packaged • For Redesign/Revamp
together for ease of setup ○ Page Redirects
> Ample of options are available, choose one offers ○ Optimize URL-Structure (if they haven’t been)
phone support ○ Website Downtime during Migration
> Basic Hosting plans range from $ 8 to 15 per ○ Responsive Design (Mobile-Friendliness)
month, domains start from $15 onwards • Wordpress - categorized as Content Management
○ Some providers offer quick DIY websites with a Builder System (CMS)
Wizard - Does the heavy lifting of creating, storing and
> Not advisable if you intend to do something distributing your content
serious ○ Serves as an interface
○ Choosing a Domain Name - For you to publish content
> Choose based on business or brand name if you - For visitor to access the content
are already established - Content is stored in a Database
> Choose Keyword based names if you want to be • Wordpress as an interface
discoverable 1. Accessing the website
> Choose thoughtfully, changes later are a big hassle 2. Content creation and publishing in the back end
> Keep is short, simple, easy to spell & pronounce 3. Content storage and retrieval from the DB
> Hyphens can be used if name is taken WordPress.com vs WordPress.org
> Be Creative – Blended Words, Phrases, Suffix, etc. • WordPress.com → Free Hosted Environment
> Use country specific is you are primarily a local ○ Hosting is free and set up is done for you
business ○ Domain name will include wordpress.com. e.g.
> Domain Registration and Registrant info can be mysite.wordpress.com
looked up ○ Site can be customized; but plugins, themes
> Domains with common extensions such (template), etc cannot be installed
as .com, .net, .org are Top Level Domains (TLDs) • WordPress.org → Self-Hosted
> Country specific domains, Country Code TLDs ○ Here you will download the software, install & set
(ccTLDs) may be governed by local rules & it up yourself

Page 2
 > Domains with common extensions such (template), etc cannot be installed
as .com, .net, .org are Top Level Domains (TLDs) • WordPress.org → Self-Hosted
> Country specific domains, Country Code TLDs ○ Here you will download the software, install & set
(ccTLDs) may be governed by local rules & it up yourself
regulations ○ You will need to buy a Domain Name & Web
> Sub Domains can be freely added atop TLDs Hosting
○ House = hosting ○ Gives you control & flexibility for website
○ Furniture = data files development
○ Address = domain name • Development Environment Setup
 Accessing the Web Hosting ○ Development Environment for the Course
• Most Web Hosting is usually setup on a Linux > Use free Wordpress website hosting at
environment www.000webhost.com
• cPanel is a control panel that’s provided to manage the > Setup on lhubsgus.com as a sub domain
hosting > Website URL -
> Graphical interface to manage the hosting account yourname.000webhostapp.com
> Files, Application, Email Accounts, etc can be "www" - subdomain (third-level domain)
managed here "yourwebsite" - second-level domain (SLD)
> Access should be restricted and limited to the "com" - top-level domain (TLD)
Administrator ○ rom your free 000webhost account…
> Usually accessible by: > Install Wordpress
□ cpanel.mysite.com or > Note down the password for Wordpress
□ mysite.com/cpanel admin user
 Choosing a Hosting Plan > Access your - yourname.000webhostapp.com
• Shared Hosting • Accessing your website
• VPS Hosting ○ Website front end - go to
• Dedicated Hosting yourname.000webhostapp.com
• Cloud Hosting ○ Website backend - Go to
 Choosing a hosting plan (Types) yourname.000webhostapp.com/wp-admin
• Self - Hosted • Wordpress Backend
□ Self-procure Domain & Hosting ○ WordPress Login URL
□ Self-develop & management of the setup > Usually accessed thru
□ Full Control of your Website https://www.mysite.com/wp-admin
□ Example – After purchasing a domain, hosting ○ Upon Logging In, you’ll see the WordPress
you develop a website using your chosen Dashboard
technology & tools > It shows WP version, important notifications
> Left-hand Navigation menu

Videos
 Top-level domain (TLD) - provides information
• WordPress - open source website CMS, built on PHP and about the general purpose of the website.
MySQL. > Generic TLDs
- it's one of the easiest and most powerful blogging and  used to be reserved for commercial sites
website creation tools around.  now become the most commonly used
- Web publishing application domain, even for non-commercial sites.
- works as an interface between you the content □ .com
publisher, a database and server where all that content □ .net - was for organizations involved in
is stored, and the visitor who accesses that content networking technologies.
through their web browser.  These days it is often seen as the
- separates content and content management from its second choice option used when
presentation and gives you absolute control over every the .com isn't available.
aspect. □ .org - was previously for any
- a powerful platform that can accommodate a wide organization that didn't fit into the
variety of sites. other two categories.
• AdWords - own ad program  now .org has become associated
- there are restrictions about what types of ads and with organizations that serve the
which ad networks you can use. public interest and humanitarian
> B2 cafelog - blogging software causes such as foundations or non-
- Dropped active development and forked profits.
○ "forked"- a technical term for copying a code base, □ there are no restrictions for these three
legitimately and legaly. TLDs.
• Matt Mullenweg and Mike Little - who forked B2 cafelog  Restricted generic TLDs
- Founder of WordPress □ .edu - US postsecondary institutions
- developers and other folks who help make WordPress □ .gov - designated for US government

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

Page 4
• Domain name: purchase the right to use it for one or more
- mywebsite.com years.
- Nickname of IP address, easier to remember and stay  Domain registrar - organization that manages the
constant. reservation of domain names.
○ broken down into three components. * If you let the registration expire, your domain name
goes back into the pool and someone else can register
it.
• IP address: 173.194.121.32
○ Internet Protocol Address - true identifier of a
website
- Series of numbers separated by dots
- May change over time (use domain names
instead)

IU2
Identify the Target Audience ○ Organized
• Target audience - group of people likely to respond to - Is your site easy to navigate?
or buy your product/ service - Start with a plan
> Demographics (Age, Gender, Education,  What is "information architecture," or
Ethnicity, etc. "IA?"
> Location - It's a way to organize info on your
> Role, Job, Occupation site to achieve business goals.
> Interests and Hobbies
> Motivation, Dreams, Desires
> Challenges & Pain Points - Tips for organizing your website
→ Narrowed down, but sizeable  Use short, descriptive names
• Create Buyer Personas for your Business  Keep site visitors in mind. Where and
> Semi fictional representation of your ideal how would they look for info
customer.  Keep the most important info in main
• Know where do they get their information from navigation
> Social Media, Online forums, News websites ○ Useful
• How do they address, describe your product or - Does your website provide useful content?
service - Try to understand your costumers
> Use the right jargon, tone, and language to  Use short, descriptive names
resonate with them  Create content that's usefule for your
• Sample Persona audience
 Think about your information
> Define your personas, before creating design & architecture to organize content
content.  Make content recognizable to search
• Design for Audience - appropriate design for your engines.
audience.  Text
• Sitemap (Site Structure) > Add headlines and bullet
> Overarching hierarchy of your website points for easy skimming.
> Helps organize a website’s content  Images
○ Crucial for both its usability and findability > Add a photo gallery and before
> Forms the Basis for… vs. after pics
○ Content Categories  Videos
○ User Navigation & Breadcrumbs > Add how-to videaos to show
○ Menus off your product or process
○ Functional
- Does your website do useful things?
• Structure / Information Architecture  Functionality - refers to features that allow
 The Art & Science of organizing a Website site visitors to take actions.
> How to create?  A site search
○ Assess how Business is organized  An online form
○ Classify Content according to business  An online store
intent  An online tool
○ Set Information relationship
○ Provide Navigation ○ Intuitive
> Structure is imperative not just for Humans but - Is it easy to use your site on all devices?
also for SE Crawlers - Nearly 9 out of 10 times, when people had a
○ Sitemap - a file where web pages of your helpful or relevant mobile brand experience,
site are listed to tell SE’s about the they said they would purchase from the

Page 5
 > Structure is imperative not just for Humans but - Is it easy to use your site on all devices?
also for SE Crawlers - Nearly 9 out of 10 times, when people had a
○ Sitemap - a file where web pages of your helpful or relevant mobile brand experience,
site are listed to tell SE’s about the they said they would purchase from the
organization of your site content. brand in the future.
○ Usually created XML format, needed for  Tip 1: Navigation
SEO  Highlight selected elements
 Design site to allow plenty of space
• Keyword Driven Info Architecture for users to tap
> Identify the business intent for each web page of  Ensure that call-to-action can be
your Site tapped
> Research Keywords (KW) pertaining to that  Tip 2: Shopping
intent, 1 KW for 1 Page  Help then backtrack or continue
> After KW identification, create the relevant shopping after a break
Content  Recommended similar products
> Webpage content, KW targeting should align  Tip 3: Checkout
with the architecture  Reduce checkout steps
> Implementation method  Show visitors their progress
○ Use an Excel spreadsheet  Offer guest checkout
○ To map out KWs to the Web Pages  Enable digital wallets
○ Keep a record and avoid duplication ○ Search-friendly
○ Define the URL, Page Title, Meta - Can search engines find your website?
Description with KWs - Search Engine Optimization (SEO) - refers to
the techniques that improve your website
• Wireframe rank in Google search results, and attract
> Benefits of doing a Wireframe higher quantity and quality website visits to
○ Facilitates iteration in Design process grow your online presence.
○ Allows for easy clarification  Make your website more visible to those
○ Provides Site Architecture visually who can benefit from your product,
○ Enable Usability planning service or brand
○ Ease of Updates  Connect with consumers making
immediate buying decisions
• Mockups  Increase the number of potential
> High Fidelity Wireframe with more visual details customers who see your website in
> Includes Colors, Logos, Font Choice, etc search results
• Wireframe to Mockup > Fast load time
• Free Tools for Wireframe / Mockups  Test your site speed g.co/testmysite
> Wireframe.cc > Useful content
> MS Powerpoint  Include relevant keywords
> Figma  Create information-rich content
> Draw.io designed for your target audience
• How to make your Website Successful > Text links
> A great website is  Keep your audience engaged with
○ Goal Oriented internal links, external links and
backlinks
- How will your website grow your business?
> Page titles and description
- Why do you want a website?
 Think about keywords your target
 Build brand
audience might use to find you and
 Generate leads
include them
 Make sales
> Information architecture
- Who is your target audience
 Build an organized website that helps
 Try to understand your customers.
google better interpret your content
◊ How they act
> All browsers and devices
◊ How they think
 Design a user experience that will
◊ How they live
translate across all types of devices
- How will you measure success?
 Track online sales
 Collect form submissions
 Monitor phone calls
 Measure engagement

IU3 Sources for Paid images

Key Elements of Web Design ▪ Gettyimages
• Aesthetics - First Impressions Matter ▪ Fotolia - by adobe

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

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

IU4 □ Context

Page 8
 • Easy return to Homepage
• Promotions should not hog the real estate

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

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

IU5 • WordPress Theme

• Pages & Post ○ A WordPress theme consists of the following anatomical
○ Content can be created using Pages or Posts elements:
○ Posts  Template files such as index.php, header.php,
 The blog aspect of a WordPress website category.php etc
 Listed in reverse chronological order, has a  Template tags such as , etc.
datetime component  CSS
 Used for the news or dynamic portion (Blog)  Images and other media files
of a site  JavaScript files
○ Pages • Theme Options
 Similar to Posts, but are not listed by date and ○ Most Premium Themes provide an interface to…
not categorized  Change theme settings
 Pages have hierarchy, can be attached to a  Do site wide design changes
Parent page  Tweak site appearance / design at a finer level
 Used for static content, for e.g. About Us, ○ Use this interface before modifying CSS files for design
Homepage, etc. changes
• Creating a Post • Common Elements
○ Locate Posts menu on the Left-hand side of the ○ Themes dictate the overall appearance of a Website
Dashboard  Customize the Common Elements like header,
○ Click Add New to create a New Post footer, etc.

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

 Separator
 Pull quote
 Button
 Table
 Text
 Preformatted
Columns

IU6 c) Meta descriptions are page summaries often used by Google

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

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

Page 12
 • Webpage Optimization
characters
○ Each Web Page should be Keyword targeted &
2. Keywords Placement
optimized for it
a. Use KWs in Body, URL, Title, etc
 Content on the page must align to the target
3. Page Title and Meta Description
KW being ranked for
a. These help in discoverability and CTR
 Web Page Meta must make it clear to SE what
4. Headline Tags, Internal & External Links
the page is about
a. Leverage H1 to H6 Heading
○ Key Factors for Web Page optimization include
b. Include anchor text links to other web pages
 URL Format
5. Image Optimization
 Page Title
a. Optimize File name & ALT Text
 Headline Tags
• Adding a new form to WP forms (slides 19-24)
 Meta Description
• Customizing Form (25-28)
• Understanding On Page Optimization
• Accessing Field Options (29-30)
1. Look Good In the Search Results
• Editing Form Settings (31-33)
a. Your page title is used as a suggestion for the
• Notifications (34)
title in Google's search results. Describe your
• Confirmations (35-36)
business in a concise, informative phrase.
• Displaying Forms on Your Site (37-41)
b. Domain names are an important part of
• Embedding a Form with the Block Editor (42-47)
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

IU7 MOBILE FRIENDLINESS : USER EXPERIENCE

WEBSITE PRE-LAUNCH STEPS Websites should be designed with a Mobile First experience –
▪ Reduce on-page elements
Things to do before launching your website : ▪ Format button color clearly
1. Optimize Permalinks for SEO friendliness ▪ Ensure buttons are responsive to touch
2. Setup Email for Your WordPress Site ▪ Simplify mobile landing pages
3. Check All Forms on Your Site ▪ Create a nested table to store links to different site sections
4. Delete Dummy Content ▪ Avoid pop-ups at all costs
5. Create an XML Sitemap
6. Improve Your Website Loading Speed MOBILE FRIENDLINESS FOR UX & SEO
7. Setup Website Backups & Security Plugins
• Websites are expected to be mobile responsive and provide a
8. Uncheck the Box for Search Engine Visibility good UX on handheld • Google evaluates mobile version of
9. Run a Mobile-Friendly Test websites more critically
10. Setup Google Search Console • While indexing, Google looks at the mobile version of the page
first
11. Install Google Analytics
Page Loading Speed GETTING DISCOVERED BY SEARCH ENGINES
• Online users expect website to load quickly
How to get your Website crawled and indexed faster
• Google places greater emphasis on load times as a UX
▪ Build links from other sites to your site
factor
• Especially from site that are more frequented & popular
• Speed is considered as a SEO ranking factor ▪ Add an XML sitemap to your site and submit it to the search
engines (webmaster tools)
Free Tools to test your site ▪ Improve Crawl Speed
• Crawling process slows down in case of a slow server, too many
○ Google PageSpeed Insights URLs and technical errors
○ Gtmetrix, Pingdom
○ Lighthouse Chrome Extension SITE MAPS
PAGE LOADING SPEED
Sitemap is a file that tells search engines the organization of site
Common fixes to improve Page Load Speed : content
• Enable Compression for website code
▪ Enables Search Engine Bot to easily discover all pages of your

Page 13
 Sitemap is a file that tells search engines the organization of site
Common fixes to improve Page Load Speed : content
• Enable Compression for website code
▪ Enables Search Engine Bot to easily discover all pages of your
• Minify CSS, JavaScript & HTML code site (XML version)
• Reduce Redirects (URLs) ▪ Submit your sitemap to Google Search Console, Bing
• Leverage Browser Caching Webmaster Tools, etc
▪ Can be easily generated by Free tools and website plugins (like
• Use a Content Distribution Network (CDN) Yoast)
• Optimize Images (Can install & activate plug-ins)
MOBILE FRIENDLINESS Different Types
▪ Sitemap: index of website pages
○ The internet is consumed more by mobile devices, than ▪ Image Sitemap: index of website images
desktops ▪ Video Sitemap: index of website videos

Test Mobile friendliness of your pages: Processes Involved

https://search.google.com/test/mobile-friendly ▪ Generation: producing an updated sitemap at regular intervals
▪ Syndication: sharing an updated sitemap at regular intervals

IU8 ———VIDEOS———————————————
• Hack attempts are common in WordpressHack Website Security
attempts are common in Wordpress • Is WP safe and secure
• Website defacement
How to protect wp site?
About us page
1 trusted host
Menu
2 basic security plugin ex. Loginizer Security
User acc
3 backup routine
Security Measures for Wordpress
4 don’t give anyone have admin access on your website
-Use reputed hosting providers
• Securing your site and managing spam
-Monitor
Install plugin>.Limit Login Attempts Reloaded.
-Software Upgrades
Akismet
-Security Plugins & Firewall
Housekeeping & Backups
Best Practices
• Overview of popular backup plugins
✓ Change admin user ✓ Use strong passwords ✓ Password
-Redundancy is the key
protect backend access page ✓ Keep Backups
-recommend having both on-site backup, via host managed backup
WEBSITE BACKUPS IS REALLY IMPORTANT
and backups on a third party host.
-SAS offerings, something like UpdraftPlus, or WP Time Capsule, or
BlogVault, or Vault Press, or maybe even Backup Buddy, or even
Content Updates BoldGrid Backup.
ex. Keep up to date info about your product/services, -plugin to manage and run and automate the backup and restore
business info, etc procedure
• Overview of UpdraftPlus
UpdraftPlus plugin
Monitor Technical performance
Backup plugin
1 Site Uptime • Uptime Robot • Mon.itor.us
• Keep Wordpress up-to-date
-keep plugins and themes you have installed updated at all times.
-latest security updates and to get the latest features.
2 Page Load Time • Google PageSpeed Insights •
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
keep your site secure and working properly.
3 Disk Space & CPU Load • Cpanel Main Page
• 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

Page 14
 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.
• Monitoring site health
5 Broken Links • Link Checker
(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 • Technology used • User Profiles
AQUISITION • Where Visitors come from • Traffic Sources Just a tour on the user profile section
• Channel Used • Add and manage users
BEHAVIOUR • What Visitors do on Site • Top Pages of your Just a demo how to add and manage numerous users in one site
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)

Page 15