Understanding Web Marketing and Design Concepts

doctorlanguidInternet and Web Development

Dec 8, 2013 (3 years and 8 months ago)

96 views


1

Understanding Web Marketing and Design Concepts





Instructor: Steve Bogdanoff






Web Designer / Owner


Web Desert Design






Site: www.webdesertdesign.com






E
-
mail: steve@webdesertdesign.com



1.

Introduction to the Web



Int
ernet origins


1960s




The World Wide Web was invented in 1989




Web standards

is a general term for the formal
standards

and other
technical
specifications

that define and describe aspects of the
World
Wide Web
. In recent years, the term has been more frequently associated
with the trend of endorsing a set of standardized
best practices

for
building
websites
, and a philosophy of
web design

and development that
includes

those methods.


When a website or web page is described as complying with web
standards, it usually means that the site or page has valid or nearly valid
HTML
,
CSS

and
JavaScript
. The HTML should also meet
accessibility

and
semantic

guidelines.




The
World Wide Web Consortium

(
W3C
) is the main
international

standards organization

for the
World Wide Web

(abbreviated WWW or
W3). It is arranged as a
consortium

where member organizations
maintain full
-
time staff for the purpose of working

together in the
development of standards for the
World Wide Web
. As of June 2009, the
W3C had 388 members.




The only thing you need to know is that web standards

are crucial for your
website to op
erate properly.


<!DOCTYPE html PUBLIC "
-
//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



2.

Why have a website?



It's the best advertising medium available today
. A professional website
provides world wide exposure of your business for a small initial
investment, when compared to other forms of advertising.

Even if your business is local, you can be sure that more of your
customers will use the Internet to search
for products and services in their
local area.



Your website can provide unlimited information about your company: your
hours of operation, locations, and your products and services. Information

2

can be tailored to your target audience and changed as regular
ly as your
business grows. (Your target audience chooses to browse your website
because it is interested in your products and services)



Your website is a permanent promotional tool and provides your
customers with easy, 24
-
hour access to your company whene
ver they
need it. It saves them time when they're gathering information: no waiting
in lines or being put on hold. They can get quick answers to their
questions, at their convenience.



Your website is a powerful market research tool. Through e
-
mail and on
-
l
ine fill
-
in forms, you can quickly identify new customers and the products
and services they're looking for.



Your website can save you time and money by handling some of your
administrative functions online such as membership, event or class
registrations,

and taking and processing orders, to name a few.


3.

Where do I start?




Select a domain

Whois.com


What’s available. Who owns a domain name that you are
interested in, and when does it expire?




Select a host

Hostmonster.com

HostGator.com

Networksolutions
.com




Select a hosting plan

You’re just starting out, so go with the cheapest plan available. You can
always upgrade later. FYI
-

I’ve never had to upgrade.


4.

Designing your website


a) First consider your market




Who is my target audience?

Your targe
t audience is the group of people no matter the size that has
the highest chance of purchasing or hiring you for your services. To find
out who your target audience is you just need to ask yourself who is most
likely to buy your product. Important factors
of defining the target
audience include age, gender, location, needs, buying history, income
and experience navigating the web. The target audience should have no
problems understanding or navigating your website. They should have
clear direction on what t
o click to get to the products / services they are
the most interested in the quickest.


Don’t design your site for yourself, design for the customer. You may
NOT be your website’s target audience!


3




How can I tailor the site to reach that audience?

Taking
into account the characteristics of the audience will allow an
effective website to be created that will deliver the desired content to the
target audience. Website design is a process. It should be planned out
and executed with care. By planning the proce
ss it will make it simple and
it will get results.


You can also ask your customers what they want, what they would like to
see, what things interest them, and what sites they visit. Look at
competitor websites and see what they are doing. Market test some

designs on your audience and get their feedback.




What information can I put up on my site that is relevant?

That depends on your purpose for having a website. Some information
may include your product, your demographic, special offers, and your bio,
just

to name a few. One thing that you must always include is fresh
content.




What are the goals for my site?

Many of the website packages that web designers sell don't work. Some
website design companies do not hesitate to sell you a failing website and
leave

you with a dud. How can you protect yourself? Before you spend
money on a website,
you must set goals outlining exactly what your
website must accomplish
. You can not expect your website design
company to build you a site that works without your guidance.


You must clearly identify the goals of your website, and hold your website
designer to these goals. If you are designing your website yourself, hold
yourself to your goals.


Good goals:

A good goal ties directly to customer's needs and
differentiates you
r company from your competitor.




My website should
answer the top questions

my customers will ask.



The
homepage should

unambiguously state what my company does.



My website should be
clearly organized

and
each page should be
uncluttered
.



My website should c
ontain industry and product specific information
demonstrating my expertise

and explaining my products and my
services.




The text on my website should
contain all of my critical keywords

at least once so that Google can index them.



My website should contai
n all of the
properly formatted

Title,
Keyword, Description, and Heading
tags

that Google uses.



4

Poor goals:

A poor goal is one that is prone to different points of view,
highly subjective, and does nothing to differentiate you from your
competitors. For e
xample, goals such as...




My website should look attractive
. One viewer’s beauty is another's
ugliness.



My website should be easy to use
. That all depends on what you
consider easy to use.



My website should turn up high in Google
. This is easier said than
done. Your focus should be to have all the appropriate HTML tags
used for your website and make sure your site text contains your
critical keywords.


b) Design does matter



Do’s and Don’ts

No matter how attractive a site's design, if it isn't practical, i
t's not doing its
job. Design for the screen involves a new set of requirements to deal with
and pitfalls to avoid.


Some Important things to remember when designing your site:



Keep graphics files small.

For the most efficient files, you must use
the right

file type. Here's the simple rule for deciding which format to
choose:

a)

If your graphics have
many
colors, save them as JPG files.

b)

If your graphics have
few
colors, choose GIF.

c)

When using GIF, try optimized palettes that contain only the colors
used

they c
an cut file sizes in half.

Use only the resolution you need. Computer screen displays have an
average resolution of 96 dpi (dots per inch) for Windows, 72 dpi for
the Mac. This means your graphics should be saved at a resolution
not greater

than 96 dpi.




Keep text files small.
Text files rarely need to be longer than 10K.
Instead, they should be broken into logical chunks and linked. If a
home page doesn't load quickly, visitors can lose interest and jump
elsewhere.




Design for easy reading.
Don't trade
readability for style. Make your
backgrounds as light as possible (white or pastels

just make sure
they use "Web
-
safe" nondithered colors). If you use a background
image, keep the action on the side, out of the way of the text, or make
it very light, low c
ontrast, and nondithered.



5



Use "ALT" tags on graphics.
ALT text appears
before

the graphic
does, or in place of the graphic for users who have turned graphics off
for speed. If you don't use ALT text, then users may just see a bunch
of boxes with no explan
ation of what they are. This is extremely
important, and easy to add. If you're using a graphic in place of a
paragraph or more of text, type the same text into the ALT box

even
long blocks of text will appear in the browser so people can read it
before th
e graphic downloads.



Include contact information on
every

page!

It's important to include
your company name, e
-
mail address, and your phone
on every page
.
You may also want to include your address. If you don't want people
calling, just exclude your phone
number.

Why is this important? Because people often save pages to disk, or
print them. If you don't include this information, chances are they
won't be able to contact you, or find your site again to get that contact
information.



Keep your site fresh.
Unl
ike printed matter, a Website is not a one
-
time project

it's an
ongoing
one. Be prepared to update your site, at
least once a month, adding new information, discarding anything out
-
of
-
date.



Be generous.

The Web is no place for skimpy "capsule" information.

The more detail you provide, the more of a service you offer, and the
more reason you give people to visit your site.



Be backward compatible.
Using cutting edge technology can
exclude readers. Many if not most users will be
at least

one
generation behind,

so don't shut them out. Test your site on all of the
popular browsers to make sure it looks the same for all viewers.

Here are a few Don’ts to remember:



DON’T

use too many animations, especially on pages with content
you want people to read. While animati
ons are effective in drawing
attention, users find them annoying and distracting when they are
trying to read the text on the page. Even one looping animation can
be an annoyance to some people. A whole page of spinning and
flashing is a disaster.




DON’T
u
se “Under Construction” signs. In particular, don’t make
“under con
struction” pages that appear after a user clicks on the link.
If your site or section isn’t ready, simply don’t post it. Although you
may intend to show that you have information that will

be available
soon, “Under Construction” signs and other placeholders just make it
look like you don’t have your act together. Providing links that go
nowhere is a waste of your visitors’ time and patience. An alternative

6

is to include a Coming Soon sectio
n on the home page that explains
what you are planning for the site without the dead
-
end links.




DON’T
set type in all capital letters. All capital letters are harder to
read than upper
-

and lowercase letters. In addition, it makes it look
like you’re shou
ting your message.




DON’T
make graphics that look like buttons but don’t link to anything.
It’s confusing and frustrating to the user.




DON’T
automatically use white type on dark backgrounds, particularly
for large amounts of small text. The contrast is to
o high and it can be
uncomfort
able to read. Better to choose a very light shade instead,
such as a light gray against black, or a very pale blue against dark
blue. The text will still be clear, and the slightly lower contrast is
gentler on the eyes, makin
g your page look less glar
ing overall.





The good, the bad and the ugly



Here are some examples:


http://www.csszengarden.com/

http://www.robertguthrie.
com/

Good, but some text is out of date (i.e.
under Activity)

http://www.tiffany.com/

vs.
http://www.cartier.com/


Bad…

h
ttp://www.thesiriusconnection.com/

http://www.adamobydell.com/

(Can’t find the specs of the laptops

all flash so lots of download time)

http://www.billyconnolly.co
m/

(Can you find Billy’s tour dates?)

http://www.genicap.com/



Ugly…

http://www.msy.com.au/

http://www.drivingskills.on.ca/

http://webpagesthatsuck.smugmug.com/gallery/6837311_tyvTi#49712577
0_dDDkt
-
A
-
LB



c) Branding

The American Marketing Association (AMA) defines a brand as a "na
me, term,
sign, symbol or design, or a combination of them intended to identify the goods
and services of one seller or group of sellers and to differentiate them from those
of other sellers.”


The objectives that a good brand will achieve include:



Deliver
ing the message clearly


7



Confirming your credibility



Connecting your target prospects emotionally



Motivating the buyer



Securing User Loyalty


To succeed in branding you must understand the needs and wants of your
customers and prospects. You do this by inte
grating your brand strategies
through your company at every point of public contact.

Your brand resides within the hearts and minds of customers, clients, and
prospects. It is the sum total of their experiences and perceptions, some of which
you can influe
nce, and some that you cannot.




Logos

A
logo

is a graphical element (
ideogram
,
symbol
,
emblem
,
icon
,
sign
) that,
together with its
logotype

(a uniquely set and arranged
typeface
) form a
trademark

or commercial
brand
. Typically, a logo's design is for immediate
recognition. The logo is one aspect of a company's commercial
brand
, or
economic or academic entity, and its shapes, colors, fonts, and images usually
are different from others in a similar market. Logos are also used to identify
organizations and other non
-
commercial entities.


Great logos:

Search “gr
eat logos” in google images


Bad logos;

Search “bad logos” in google images




Fonts

Browser compatible fonts
-

which fonts to use on websites?

One of the variables in website design is the availability of fonts on a visitor's
computer
. For example, you would have instructed the text on your web pages to
be displayed in MS Comic Sans, but if your visitor does not have

this font, the
browser uses the default font. This messe
s the overall design of the web page,
which you so meticulously created.


To overcome such system inconsistencies, it's advisable to use a set of fonts that
will determine, on a priority basis, which font are used.


Common Fonts of Website Design:

Arial, A
rial Black, Comic Sans, Courier New, Georgia, Impact, Lucida Console,
Times New Roman are used fonts in
website design
. Verdana (Sans Serif) a
new typeface released in 1996 has the most commonly used font in the web
world. These fonts are easily readable o
n computer screens with low resolutions.


Sans
-
serif vs. serif

When using fonts on screen, it is important to understand the differences
between serif and sans
-
serif fonts. Serif fonts are the fonts that have little tails

fonts like Times, for example. San
s
-
serif fonts, such as Arial and Verdana, lack
these tails. Due to the effects of anti
-
aliasing, it is important to try to avoid using

8

serif fonts for on
-
screen use whenever possible. If they are to be used, they
should be used at a size large enough to av
oid the pixels’ tendency to blur
together. San
-
serif fonts also tend to retain their visual appeal across different
platforms and browsers.


Size of Fonts in Text:
There is no specific best font size in website design. The
user is able to adjust sizes acco
rding to their requirements using relative units
such as percentage or EM (external CSS file). Generally, the visitors face trouble
to read small fonts. It is wise to use big fonts as they easily seen, read, and found
by visitors. However, there are except
ions, as many websites are opting for small
font size. With the help of CSS file the heading, sub
-

heading, body text and
other text elements is used in different font sizes according to need. Suggested
font sizes:
Text:

10px or 12px

Main Headings:

14px, 16px or 18px

Sub
-
Headings:

12px or 14px

Captions:

8px, 9px or 10px


Note: If you are targeting the elderly you will want larger font sizes and more
modem
-
friendly pages than if you are targeting corporate executives.




Rec
ognition

Brands can be on a business level, like the name of your business, or on a
product and service level. An excellent example would be Apple
-

which is a
company brand
-

and Apple has individual brands, like iPhone and iPod.

Those brands are indelibl
e in our minds because of extensive branding strategies
by Apple. Is your business and product line branded as strongly? Your business
should be branded strongly.

Here are the 5 levels of brand recognition and how you can build your
business to improve it:

1.

Brand rejection.

If someone associates your brand with something negative,
they will purposely avoid your product. Have you ever experienced bad
service somewhere and swore you'd never return to that chain? Have any of
your customers said that about your
business? Create a logo and slogan that
is filled with great benefits to your customer and put that on everything. If
public opinion is turning against you or your product, launch a campaign to
alter it.

2.

Brand non
-
recognition.

This is where your customers
simply don't
recognize your brand, probably because it is not clearly differentiated from
competitors. Boldly state your product’s or service's benefits. Always include
the full trademark name whenever you refer to your product. Be willing to
create brand
names for your products or services, just like you've done for
your own business. Find the differences in value between your product and
your competitors and highlight that difference mercilessly.

3.

Brand recognition.

This is a good stage to aim for if you d
on't have any
recognition at all. Brand recognition will help people lean toward your product
when given the choice between your product and one they have never heard

9

of. At the same time, though remember that your competitors are also
working on brand rec
ognition, which means their brand could be more
recognizable. Continue to differentiate yourself and be sure to add value to
your product in order to get to the next stage.

4.

Brand preference.

This is where customers
-

given a choice between two
brands
-

wil
l choose yours over someone else's. It often is the result of a
sense of differentiation and that your product or service uniquely serves their
needs. As well, you can be sure that any value
-
added products or services
you include help them to choose yours
over your competitors.

5.

Brand loyalty.

This is where customers will choose your brand time and time
again, even if they experience the occasional poor service or if another
product comes along that seems to be better suited to their needs. To
achieve brand

loyalty, you need to provide a product that is highly
differentiated, with plenty of value added, but also you need to offer them
remarkable service at a level they will not get anywhere else. Providing this
level of service will ensure that they will nev
er switch.


Make it a point to start branding right away. Your new business should be
branded from Day One, and the products or services you offer can be branded
as well. If you have a few services, consider packaging them together as one
package and brand
ing that package.



d) Video and Audio Integration (Flash)

Flash is vector animation software, originally designed to create animations for
display on web pages. Vector graphics are ideal for the web because they are so
lightweight.

Sometimes Flash i
s a portion of an html web page, and sometimes a web page is
made entirely of Flash. Either way, Flash files are called "Flash movies". These
are special .swf (“ShockWave Flash”) format files that beam to your web browser
screen as you watch them.


There a
re two different video file formats defined by Adobe Systems and
supported in Adobe Flash Player:
FLV

and
F4V
. The audio and video data within
FLV files are encoded in the same way as they are within SWF files. The latter
F4V file
format is based on the
ISO base media file format

and is supported
starting with Flash Player 9 update 3.


Flash Video is viewable on most operating systems, via the widely available
Adobe Flash Player and
web browser

plugin
, or one of several third
-
party
programs.



e) E
-
commerce

E
-
commerce is the online transaction of business, featuring linked com
puter
systems of the vendor, host, and buyer. Electronic transactions involve the
transfer of ownership or rights to use a good or service. Most people are
familiar with business
-
to
-
consumer electronic business (B2C). Common

10

illustrations include Amazon.co
m, llbean.com, CompUSA.com, travelocity.com,
and hotels.com.

E
-
commerce can be divided into:



E
-
tailing or "virtual storefronts" on Websites with online catalogs, sometimes
gathered into a "virtual mall"



The gathering and use of demographic data through Web

contacts



Electronic Data Interchange (EDI), the business
-
to
-
business exchange of
data e
-
mail and fax and their use as media for reaching prospects and
established customers (for example, with newsletters)



Business
-
to
-
business buying and selling (B2B)


E
-
c
ommerce gives you the ability to accept payment over the Internet, by either
credit card or electronic checks. Through E
-
commerce, you can sell products or
services instantly to anyone in the world without having to constantly monitor
your website.


f)

Conten
t Management System (CMS)

A content management system (CMS) is software that keeps track of every piece
of content on your Website, much like your local public library keeps track of
books and stores them. Content can be simple text, photos, music, video,
documents, or just about anything you can think of. A major advantage of using a
CMS is that it requires almost no technical skill or knowledge to manage.
Because the CMS manages all your content, you don't have to.


Many hosting companies will help you se
t up your content management system.


Web content management systems are typically broken down into several
groups:



Software as a service (SaaS)*:
Alfresco
,
Sensenet 6.0
,
WHACK
CMS
,
MiaCMS
,
MMBase
,
TYPO3
,
MySource Matrix

(
Squiz
),
WordPress
,
DotNetNuke
,
My Managed CMS

and others



Enterprise:
WebGUI
,
WHACK CMS
,
Ektron
,
Sitecore
,
FatWire
,
Open Text
,
Vignette
,
Interwoven
,
Documentum
,
MySource

Matrix

(
Squiz
),
Alfresco
, Oracle
dotCMS
,
SDL Tridion

Nstein WCM by
Nstein Technologies
, and others



Mid
-
market:
Expression Engine
, Cookie Jar, Microsoft
SharePoint
,
Kentico
,
Goss Interactive
, PaperThin, Ingeniux, Terapad,
Cascade
Server
,
Day Software
, Logical CMS and others



Open source:
WebGUI
,
Magnolia
,
Plone
,
Joomla
,
Drupal
,
dotCMS
,
Exponent CMS
,
Alfresco
,
Sensenet 6.0
,
MiaCMS
,
MMBase
,
TYPO3
,
MySource Matrix

(
Squiz
),
WordPress
,
DotNetNuke

and others.


*Software as a Service

(
SaaS
, typically pronounced 'sass') is a model of
software deployment

whereby a
provider

licenses an application to

11

customers for use as a
service

on demand
. SaaS software vendors may
host the application on their own
web servers

or download the application
to the consumer device, disabling i
t after use or after the on
-
demand
contract expires. The on
-
demand function may be handled internally to
share licenses within a firm or by a third
-
party
application service provider

(ASP) sharing licenses between firms.



g)

Search Engine Optimization (SEO)

Search Engine Optimization (SEO) is often considered the more technical part of
Web marketing. This is true because SEO does help in the promotion of sites
and at the same time
it requires some technical knowledge


at least familiarity
with basic HTML. SEO is sometimes also called SEO copyrighting because most
of the techniques that are used to promote sites in search engines deal with text.
Generally, SEO can be defined as the
activity of optimizing Web pages or whole
sites in order to make them more search engine
-
friendly, thus getting higher
positions in search results.

One of the basic truths in SEO is that even if you do all the things that are
necessary to do, this does not

automatically guarantee you top ratings but if you
neglect basic rules, this certainly will not go unnoticed. Also, if you set realistic
goals


i.e. to get into the top 30 results in Google for a particular keyword, rather
than be the number one for 10 k
eywords in 5 search engines, you will feel
happier and more satisfied with your results.


h)

Search Engine Submission

The top three search engines are:

-
Google

-
Yahoo

-
MSN/Bing


Once your website has been submitted to the top search engines they may
require s
everal weeks, or even months to actually spider* and list your website in
their directory. How fast your website is listed depends on each individual search
engines database update schedule. There are third
-
party companies that
specialize in helping you ge
t placed high on the search engine chain, though I do
not know their rate of effectiveness.


*What’s the web without spiders?

A spider is a
program

that automatically fetches
Web pages
. Spiders are used to
feed pages to
search engines
. It's called a spider because it
crawls

over the
Web
. Another term for these programs is
webcrawler
. Because most
Web pages

contain
links

to other pages, a spider

can start almost anywhere. As soon as it
sees a link to another page, it goes off and fetches it.


i)

Now What?

Social Networking

Facebook

MySpace

LinkedIn

Twitter



12

j)

Blogs

Blog vs. website

First of all, I need to make this ultra clear …
a blog IS a website
. I
n fact, I want
to take that a stage further and say that blogs are
“dynamic” websites
. You can
have pages on a blog and, with some of the great blog software on the market
today, it can sometimes be difficult to tell some blogs and websites apart.


A blog
is short for
web log
, and is a frequently updated website consisting of
blog posts, or entries (more often than not, dated entries) that are arranged in
reverse
chronological order. So when a reader comes to your blog, they see your
most recent article or
post first.


Search engines can have an easier time inventorying blog sites because blogs
are regularly updated and rich with text.


As an extension of/addition to your website

If you already have a website, you may want to start a blog to compliment your
site. I believe that, if you do it right, the more you have on the web pertaining to
your company, business or service, the better.


k)

Web Maintenance

Website Maintenance refers to changes made to your website after the initial
design. Keeping a website up
-
to
-
date is essential in having repeat visitors to your
site. Updating the site with sales, newsletters, press releases, financial figures
and links are all examples of Website Maintenance.