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
- 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 &
Page 2
> Prestashop
> Opencart
○ Based on Lamp solution stack
> 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
 > 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
irritating
 Google favors mobile friendly sites for
mobile searches
> How to have it
 Responsive Website templates
 Best Option gives a consistent look & feel
across
• Imagery - Saying it with a thousand words
> Choose the right Imagery
 Images should be meaningful, with a
purpose supporting the message
 Use illustration to explain concepts
 Use photos of real people rather than Stock
Images
 Themed Icon Sets
> Some trends with Images
 Large Photo Backgrounds
 Giant Product Images
• Consistency - Inconsistency makes a user feel lost
> Maintain Consistency in Design Elements
 Colors, Typography, etc
 Page Layout
 Navigational elements and location
 For large sites, document a Style Guide
• Navigation & accessibility - GPS of your website
> Best Practices for good Navigation
 Simple Primary Navigation Menu (on top,
or left side)
 Secondary Menu or Sitemap in Footer
 Breadcrumbs on each page (except Home
and Landing Pages)
 Not more than 3 levels of hierarchy
 Include a Search Box
 Product Filters for Online Shops
 External Links open in new window
> Test Accessibility with multiple browsers and
devices
Color schemes
• Brand and identity
• Audience and content
• Location and culture
Resources for color
• Website color schemes
• Imagecolorpicker.com
Images
> Considerations when using Images
 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
IU4
Page 8
using a PSD mockup
> DesignMantic - Logo Design and Logo Maker too.
> HATCHFUL - is a Free logo maker tool from Shopify to
generate custom design logo.
Style Tile - A collection of visual elements that make up a site's
design
• Visual style for the site
• Includes fonts, colors, typography, icon style, and
interactive elements like buttons and forms.
• Design process is shaped by branding elements, colour
choices, logos, etc
Design Templates (Themes)
 Themes - Provide front-end styling (look & feel) to a
website
- Made by professional designers according to best
practices.
- They are “Website Templates”, allowing you to
quickly change the skin of the site without affecting
the content.
- Can be customized to make your own
• Off the Shelf themes are available for popular open
source CM
Marketplace for Themes
• Themesforest.net
Vital Web Pages
• Important Web Pages of a Website
- Home Page
- Landing Page
- About Us
• Ensure that you address two key questions
- Why did the user come to the page?
- What do you want the user to do on the page?
The Home Page
• Have key messaging above the fold
- Who I am
- What I do
- What you can do here
• Resonate with target audience & purpose
• Features the benefit & value proposition
• Load Speed
• Includes the CTAs to take visitor to the next step
• Dynamic to reflect emerging needs, problems, questions
of visitors
• Create UX & overall look and feel
About Us Page
• Deserves its own identity
• Usually viewed by qualified traffic who want to know
more about you
• Best Practices
- Have a voice that resonates with the audience
- Demonstrate your Benefit
- Include Trust Signals
- Team Picture that welcomes the visitor
- Include at least one CTA
Designing for Mobile Experience
• Keep Call to Action
- Center-aligned
- Visible prominently
• Keep Menu Short and Sweet
• Easy return to Homepage
• Promotions should not hog the real estate
□ Context
 • 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
○ Locate Posts menu on the Left-hand side of the
Dashboard
○ Click Add New to create a New Post
○ First Box is where you will add the Title
○ Next is the post formatting section i.e. Post Editor
○ Right sidebar allows you to
 Save, Preview, Schedule and Publish content
 Assign the post to categories, specify Tags, etc
 Set a featured Image
 Set the Sidebar, Footer, etc
• Creating a Page
○ Similar interface as with Creating Posts
○ Locate Page menu on the Left-hand side, Add New
to create a New Page
○ Page Attributes section allows to set a Parent Page
& Template to the page
○ Right sidebar allows you to
 Save, Preview, Schedule and Publish content •
Set a featured Image • Set the Sidebar,
Footer, etc
• Adding Images
○ WordPress uses a media library to store images &
videos
○ Preload images using the Media Menu, Add New
to invoke the upload box
○ You can change Title, Caption, Alt text, etc for
uploaded images
○ To insert images on pages/post
 Click Add Media Button above the Editor Box
 Select images from Insert Media Box
 Specify alignment, size for image in editor
• Adding Links and other formatting
○ Select the text you want to hypertext or format
(Bold, Bullet, etc)
○ Click the available options from the Toolbar
○ For Links, it brings up a box to enter the URL
○ 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
• Common Elements
○ Themes dictate the overall appearance of a Website
 Customize the Common Elements like header,
footer, etc.
 Style the Content using native Gutenberg or inbuilt
page builder
• Page Builders
○ Enhances the basic WordPress web page editing
capabilities,
○ Usually bundled with the WordPress Theme
○ Gives flexibility in design, with frontend & backend
editor
○ Pre-built layout templates, save your layout as a
template for reuse
• Theme Customizer
○ Allows changes to your website design in real time
○ Default feature in Wordpress
○ Every Theme has some level support for Customizer
○ Accessible through Appearance > Customize
○ Interface for basic changes like Site Logo, Title, Color
Scheme, etc
• Creating a post
○ Locate Posts menu on the Left-hand side of the
Dashboard
○ Click Add New to create a New Post
○ First Box is where you will add the Title
○ Next is the post formatting section i.e. Post Editor
○ Right sidebar allows you to
 Save, Preview, Schedule and Publish content
 Assign the post to categories, specify Tags, etc.
 Set a featured Image
 Set the Sidebar, Footer, etc.
• Custom Menus
○ Custom Menus → To add Naviga onal links to Pages,
Post categories, custom links of your website
○ Located at Appearance > Menus in the Left-Hand panel
○ Re-order and key in own Headings

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

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

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

Page 11
 plugins
 Many of them are free, some have to be
purchased
 Paid Plugins are supported and frequently
upgraded
 Extending Functionality, Adding Features
 Common Plugins used to add functionality
□ Contact Form
□ Maps for Address
□ SEO Plugin for On-Page Optimization
□ Social Sharing Bar
□ Newsletter/Blog Opt Ins
□ Content Editor
□ Revolution Slider Plugin
□ Google Analytics Plugin
□ Etc, etc…
 Installing & Updating Plugins
 Few ways to Install Plugins in WordPress
□ Upload an available Plugin file (usually a
zip file)
□ Search from WordPress directory and
install
□ Manually copying thru FTP (not
recommended)
 Plugins must be activated after installing
 Plugins need to be updated when newer
version is available from developer
• Widgets
○ Widgets → For adding content and features to a
website. For e.g…
 Feature snippets in Sidebar & Footer
 Search Bars
 List of Recent Posts, etc
○ Located at Appearance > Widgets in the Left-Hand
panel
○ Must be placed in designated Widget Areas or
Locations
○ Can be freely added, deleted, re-arranged
• Contact Forms
○ Many Free Plugins offer Contact Form functionality
 Contact Form 7
 Ninja Forms
 Jetpack, etc
○ Paid Versions offer for features…
 Price calculations,
 Auto responder
 CRM / email marketing integration, etc
○ Premium themes such as Divi may include in-built
Form widget
• SEO: Getting Found by Search Engines ]
○ Webpages should be optimized to get easily found
by Search Engines
○ Also known as On-Page SEO
 Techniques and factors that you can control on
your website in order to make it easy for
Search Engines to index and understand what
it is all about.
○ On-Page optimization is best implemented during
design & dev phase
• Webpage Optimization
○ Each Web Page should be Keyword targeted &
optimized for it
 Content on the page must align to the target
Page 12
○ URL Format
○ Page Title
○ Headline Tags
○ Meta Description
• URL Structure
○ Contain target keywords
○ Be as concise as possible
○ Use hyphens for improved readability
○ Use a breadcrumb structure
• Page Title
○ Unique meta titles for every page
○ Keyword phrases of high value and search volume
○ Keep within the character limit
○ Structure title so keyword appears first
• Heading Tags
○ Six tags: H1 to H6, numbers denote importance
○ Have only one H1 text in page
○ Make SE’s understand what the topic is about
○ Include in textual content for structure & SEO
• Meta Description
○ Helps in Click Through, but not in rankings
○ Not visible on page, but on SERPs
○ Keep within the character limit
○ Ensure description is keyword rich
○ Include a call to action
• Optimizing Content for SEO
○ Content Optimization is about having Content that’s
 Relevant and in-depth to the KW/Topic being
targeted
 Quality and trustworthy stuff that value-adds to the
reader
 Formatted/Structured to provide a good user
experience
○ Latent Semantic Indexing
 Method used by SE to determine what a page is
about by spotting patterns of related terms
 Effective alternative to Keyword repetition (or
stuffing)
○ Don’ts
 Duplicate Content
 Over-optimize by KW Stuffing
 Misalign with what’s stated in Page Title & Heading
Tags
• Optimizing Content for SEO
○ SE Crawler can read thru Text but NOT Images, Videos or
Audio files
○ Image sizes impact load speeds
 Use right formats for web publishing, compress
○ Non-Textual Content needs to be described
 Use supporting text for such content
 Give meaningful filenames
 Always have ALT text for image files
 Include microformats from schema.org for extra
metadata
 Create Video sitemaps is you have Videos and want
them to rank
• Implementing On-Page Optimization
1. SEO Friendly URL Structure (permalinks)
a. Meaningful words rather than numbers, special
characters
2. Keywords Placement
a. Use KWs in Body, URL, Title, etc
3. Page Title and Meta Description
 • 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
Things to do before launching your website :
1. Optimize Permalinks for SEO friendliness
2. Setup Email for Your WordPress Site
3. Check All Forms on Your Site
4. Delete Dummy Content
5. Create an XML Sitemap
6. Improve Your Website Loading Speed
7. Setup Website Backups & Security Plugins
8. Uncheck the Box for Search Engine Visibility
9. Run a Mobile-Friendly Test
10. Setup Google Search Console
11. Install Google Analytics
Page Loading Speed
• Online users expect website to load quickly
• Google places greater emphasis on load times as a UX
factor
• Speed is considered as a SEO ranking factor
Free Tools to test your site
○ Google PageSpeed Insights
○ Gtmetrix, Pingdom
○ Lighthouse Chrome Extension
PAGE LOADING SPEED
Common fixes to improve Page Load Speed :
• Enable Compression for website code
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
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
▪ Enables Search Engine Bot to easily discover all pages of your

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