Transcript Business Communication - University of Maine System

Day 18
ELC 310
Agenda
• Questions?
• Assignment 3 Due Assignment 4 will be posted soon
• Nov. 8
– Exam 2
•
•
•
•
Strauss Chaps 6-11; Stokes Chaps 2&3
20 m/c, 4-5 short essays
Exam will be available from 8 AM till 1 PM on Nov. 8
Password will be sent in an announcement in Blackboard.
• Create:
– Web Development and Design
– Writing for the Web
– Mobile Development
Copyright 2005 Prentice Hall
Ch 1 -2
Web Development and
Design
Key terms and Concepts
•
•
•
•
•
•
•
•
•
•
•
•
•
Above the fold  All the content that can be seen on a screen without scrolling down.
Accessibility  The degree to which a website is available to users with physical challenges or
technical limitations.
Alt tag  Information that is displayed if an image cannot be displayed; used by search engines to
determine what an image is.
Breadcrumbs  Links, usually on the top of the page, that indicate where a page is in the hierarchy
of the website.
Client-side Transactions that take place before information is sent to the server.
Content Management System (CMS)  A system that is used for updating content of a website.
Common Page Elements  Items which appear on every page of a website.
Cascading Style Sheets (CSS)  An approach to web design that aims for lightweight code and
standards compliant websites.
Document Object Model (DOM)  A web standards approach to representing HTML and XML
documents as objects.
Dynamic parameter  The elements of a URL that are dynamically generated.
Flash  A technology used to show video and animation; can be bandwidth heavy and unfriendly
to search engine spiders.
HyperText Markup Language (HTML)  The code that is used to write most websites
HTML5  HTML 5 is the latest evolution of Hyper Text Markup Language, and is an update of
HTML4, which was published in 1998. HTML5 allows for rich media content and interaction on the
scale of Adobe Flash, but unlike its counterpart does not require additional third party plugins.
Key terms and concepts
•
•
•
•
•
•
•
•
•
•
•
•
•
Information architecture  The layout and structure of a website, which should be according to
information hierarchy and categories.
Meta data  Information that can be entered about a web page and the elements on it that provide
context and relevancy information to search engines; these used to be an important ranking factor.
Navigation How a web user moves through a website, and the elements that assist the user.
Nofollow link  Nofollow is an attribute of a hyperlink, indicating that the link is not necessarily endorsed
by the website. See the SEO chapter for more.
Open source  Unlike proprietary software, open source software makes the source code available so
that other developers can build applications for the software, or even improve on the software.
Robots Exclusion Protocol A protocol used to indicate to search engine robots which pages should not
be indexed.
Search Engine Results Page (SERP)  What you see when you use a search engine.
Server-side  Transactions that take place on the server.
Sitemap  On a website, a page that links to every other page in the website, and displays these links
organized according to the information hierarchy.
Universal Resource Locator (URL)  A web address which is unique to every page on the Internet.
Usability  The measure of a website’s ability to accomplish the goals of the user.
W3C  World Wide Web Consortium oversees the Web Standards project.
eXtensible Markup Language (XML)  A standard used for creating structured documents.
©2014 Pearson Education, Inc. publishing
as Prentice Hall
5
Digital assets are at the heart of successful digital
marketing.
Customers and potential customers interact with
them.
Lay solid foundations and create assets for the
best possible user experience.
Consider:
Accessibility – are there potential barriers?
Usability – is it easy to use?
Searchability – can it be found via search?
Discoverability –shareable and discoverable?
Technical barriers may be browser compatibility.
User’s ability barriers could be language or sight
problems.
(www.w3.org/WAI)
To address usability use standard conventions:
•Highlight or make bold key phrases and words
•Use bulleted lists
•Use paragraphs to break up information
•Use descriptive and distinct headings
Never!
•Resize windows or launch the site in a pop-up
•Use splash pages
Never!
•Build a site entirely in Flash – most search engine
spiders cannot even crawl Flash sites
•Distract users with “Christmas Trees” (blinking
images, flashing lights, etc.)
http://ist.mit.edu/services/consulting/usability/guidelines
http://chnm.gmu.edu/digitalhistory/links/cached/chapter4/4_2_use
it.htm
Make sure your site is visible to search engines:
Traffic is vital to a website. Index it fully and
consider it relevant for its chosen keywords.
Things must be labelled correctly:
URLs, Alt Tags, Title Tags and Meta Data.
URLs:
Brief and descriptive
http://www.quirk.biz/emarketingtextbook/buydetails.q
May require server side rewriting so as to cope
with dynamic parameters in URLs.
Use no more than two dynamic parameters in a
URL or it may not be spidered.
It can make great anchor text!
Alt tags:
Users need text descriptions of images while they
wait for them to load.
And search engines need to know what the images
are.
image001.jpg
sunset.jpg
Title attribute: Read by search engine
spiders.
• Seen when a user hovers over the element with their mouse
pointer.
Title tags: Appear on the top bar of your
browser.
Meta Tags:
Information about a web page, seen by browsers.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to the University of Maine at Fort Kent</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="The University of Maine at Fort Kent, situated at the
center of Acadian history and culture in rural Northern Maine, is a regional baccalaureate
university within the University of Maine System serving over one thousand students.
We offer a number of programs to suit your educational needs in a safe, rural community
atmosphere. If you are looking for a small campus experience and you love the outdoors,
then this is the university for you." />
<meta name="keywords" content="online, internet, distance, higher, special, education,
experience, university, maine, fort kent, bachelors, masters, undergraduate, graduate,
rural, north, friendly, community, atmosphere, global, perspective" />
Search engine optimised copy
If the search engine cannot see the text on the
page, they cannot spider and index that page
Search engines cannot index text:
•Embedded in a Java Application or a Macromedia
Flash File
•In an image file – use descriptive alt tags and title
attributes
•Only accessible after submitting a form, logging
in, etc.
Ensure content is shareable:
Have static, friendly URLs (i.e. don’t make all new
visitors go to the home page).
Make sure your metadata is compelling when
added to links on social networking sites.
Include icons (chiclets) of major social media
platforms to encourage sharing.
Lay strong foundations!
Start with research:
•Your market
•Your users
•Your competitors
•Your business
This helps you to plan your website strategically,
ensuring it is aligned with both user needs and
business objectives.
Gather, analyse and map out what content is
needed on the website.
Sitemaps reflect hierarchy of content and
navigation.
Create a visual blueprint of your website using
wireframes.
A functional specification document will result.
Create visual identity and design for persuasion.
Design is not just about aesthetics, although looks
are very important.
Visual identity = how users know it’s you.
Use logo and corporate identity to inform the
colour palette, fonts, menu buttons etc.
Navigation – show users:
•Where they are
•How they got there
•Where they can go next
•How they get home
Layout = how content is structured and displayed.
•Apply the fundamentals of good design
•Balance in important
•They should be easy to read
Headers = the usually consistent top part of a web
page. Must be prominent but simple.
Footers = the usually consistent bottom part of the
page. A place for important info but also use this
space to include links to major parts of a website.
Credibility = telling users that you are who you say
you are.
Make sure your site:
Looks good; is informative; displays testimonials,
logos and awards; links to credible third-party
references; is fresh and updated; is error free.
Technology gives it life
When building a site consider:
•Content management
•Interactive interfaces
•Search and usability
Manage content using a Content Management
System (CMS).
Some widely used CMS:
•Wordpress (www.wordpress.com)
•Joomla (www.joomla.org)
•Drupal (www.drupal.com)
•Expression Engine (www.expressionengine.com)
When choosing a CMS look at…
meta and title tag customisation
HTML tag customisation
URLs – CMS must allow for static, rewritable and keyword
rich URLs
customisable navigation
Customisable image naming and alt tags for images
robots.txt management – to give instructions to search
engine spider
A range of technologies are available for
interactive interfaces:
•Adobe Flash
•Microsoft Silverlight
•HTML5, with CSS3 and JavaScript
HTML 5 is the latest
evolution of Hyper Text
Markup Language (HTML
5)
But remember technology is an enabler, not a
site’s main focus. Consider SEO and usability.
Technical considerations for a good website:
•URL rewriting
•GZIP compression
•Server-side form validation
•International character support
•Search-friendly sessions
•Auto-generated human readable and XML
sitemaps
•RSS feed generation
Image Credit: Creative Commons, Maja Bencic
Test it fully then take it live!
Testing should take place throughout the entire
process of planning, designing and building.
Test on all common browsers – ensure it works
and looks as it should.
Tools like W3C’s HTML validator (validator.w3.org)
should be used to validate your HTML.
Web development and design can be seen as the
thread that holds digital marketing together.
Remember - Lay strong foundations and
understand your users needs!
Summary
• Well thought out information architecture and clear
navigation.
• Standards compliant html and functionality that works across
all browsers.
• Descriptive naming of elements so that websites make sense
without images and when accessed by text reading browsers.
Writing for the Web
Key terms and concepts
•
•
•
•
•
•
•
•
•
•
•
•
•
Above the fold  The content that appears on a screen without a user having to scroll.
Active verb  A word that conveys action or behaviour, and in a Call to Action, tells a
reader what to do.
Benefit  The positive outcome for a user that a feature provides.
Call to Action (CTA)  Words used to encourage a prospect to take a particular action.
Dynamic keyword insertion  In paid search advertising, this allows keywords used in
searches to be inserted automatically into advert copy.
Feature  A prominent aspect of a product which is beneficial to users.
Mass customisation  Tailoring content for many individuals.
Persona  A character used to define a group of users to a website.
Pay Per Click (PPC)  Pay Per Click usually refers to advertising on search engines.
Sender alias  The name that is chosen to appear in the sender or from field of an
email.
Search engine optimisation (SEO)  Aims to improve rankings in search engines.
Search engine results page (SERP)  What you see when you perform a search on a
search engine.
Unique selling point (USP)  This is what makes your offering different to your
competitors’.
Content is key to digital marketing success!
Digital copy must:
•Provide information
•Be engaging
•Convince readers to take an action
•Convey brand ethos
•Provide context and relevance to search engines
And it mustn’t look like it’s trying too hard!
• Digital copy = everything you read on a screen,
from websites and iPhone apps to emails and
tweets.
Know your audience
• Holly Buchanan’s three questions:
• Who is my audience?
• What actions do I want them to take?
• What information do they need in order to feel confident taking
action?
• (www.futurenowinc.com)
The audience of
Digital audiences are used to being addressed as
individuals.
•Identify that ‘individual’
•Investigate what they want
•Speak directly to them
This ‘individual’ could also be called a persona.
A persona...
• A profile that embodies
the characteristics of
your target audience.
•Sex: primarily male, female or a mixture?
•Demographics and psychographics
•Income bracket
• How do they make purchasing decisions?
• Do they compare many service providers?
• Do they call in for assistance?
Best practices
Digital copy must be:
•Clear and concise
•Easy to read
•Well written
•Well structured
Think about layout and legibility
Use:
•Bulleted and numbered lists
•Short paragraphs
•Clear and concise headings
•Bold and italics
•Descriptive links
Consider language
•Tone must be consistent with the brand
•Use the active voice
•Consider the reader when using neologisms and
buzzwords
Use features and benefits
•Feature - what the product does
•Benefit - what the user gets out of the product
But focus on the benefits!
Enjoy cinema quality movie nights in your own
home with a surround sound home entertainment
system.
Use logic to structure information:
•Most important information at the top of the
page – online readers scan
•Start with a summary of the main idea
SMOG
Use the Simple Measure of Gobbledygook
(SMOG) formula to calculate the reading level of
content: www.harrymclaughlin.com/SMOG.htm
Use basic HTML to layout copy.
• Hypertext Markup
Language – the
foundation of documents
on the Internet – it’s
worth understanding it to
make sure your copy’s
correctly formatted.
Some HTML basics
•
•
•
•
•
•
•
Bold: <strong>phrase you wish to bold</strong>
Italicise: <em>phrase you wish to italicise</em>
Underline: <u>phrase you wish to underline</u>
List: <li>lines you wish to list</li>
Paragraph: <p>paragraph text</p>
Line break: <br/>
Link: <a href=“page url”>phrase you wish to link</a>
Types of copy
1. Long copy
Use it to:
•Foster relationships with readers
•Inform and educate
•Create and build a voice and personality for your
brand
Seldom longer than 800 – 1000 words.
Users scan pages quickly.
News releases… The stalwart of PR
• But often read without going through
journalists.
Online articles
Use articles for online syndication to provide
valuable information to readers.
Not a direct promotion of your site!
Steps for writing articles:
Step 1. Choose your topic
Step 2. Write about it
Step 3. Get the article out there
Step 4. Monitor its progress
•Publish the articles to directories
•Use ORM tools to monitor them
Email newsletters can be used to build
relationships and deliver:
•Humour
•Research
•Information
•Promotions
Blogging
• Fosters a community around a brand.
What’s it all about?
•Writing posts
•Replying to comments
•Monitoring and commenting on other blogs
•Keeping up to date with the latest industry news
•Building relationships with other bloggers
•Building relationships with readers
Ensure your blog’s content is:
•Relevant
•Appealing
•Honest
•Entertaining
•Engaging
•Regularly updated!
Use SEO in your copywriting
Blend keywords into your copy and use them with
HTML tags and meta data.
A word of caution…
Remember that while SEO is important, you’re not
just writing for the search engines. The reader’s
experience should never be sacrificed!
• Search engines crawl websites with web spiders
• Read more:
http://computer.howstuffworks.com/internet/basics/searchengine1.htm
Key phrases
Searchers use multi rather than single word
keywords – key phrases.
Optimise each page
Use a mixture of primary and secondary key
phrases in your copy.
Use the key phrases in:
•Page URL
e.g. www.mainkeyword.com
•Page title
•Meta descriptions and meta keywords
•Headings and sub-headings
<h1> page heading
<h2> Sub-headings
<h3> Information under the sub-headings
•Body copy
o Link text to other optimised pages
o Alt text and title tags on images
2. Short copy – limited space and time
Calls to Action (CTA)
•Use active verbs
•Instruct the reader
Buy yours now
Subscribe for free
Click here for
more
information
Titles and subject lines must be persuasive and
enticing.
Consider...
Guide to digital copywriting
vs.
Ten steps to digital copywriting that sells
PPC adverts
Heading
www.DisplayURL.com
Two lines of advert copy,
Which can be displayed on one line
Dynamic keyword insertion means different
search terms can be added into one version of
copy.
Brand New {KeyWord:Phones}
www.BestDealer.com
Huge selection of phones. Great prices.
{Keyword:phones} in stock. Free shipping!
E.g. Ad 1 - Keyword: nokia n90
Brand New Nokia N90
www.BestDealer.com
Huge selection of phones. Great prices.
Nokia n90 in stock. Free shipping!
E.g. Ad 2 - Keyword: samsung d500
Brand New Samsung D500
www.BestDealer.com
Huge selection of phones. Great prices.
Samsung D500 in stock. Free shipping!
Some tools
Online dictionary and online thesaurus:
•www.dictionary.reference.com
•www.thesaurus.reference.com
Mobile Development
Key terms and concepts
•
•
•
•
•
•
•
•
•
•
•
•
•
3G  The third generation of mobile network technology with improved speeds in comparison to EDGE. 3G allows for
mobile streaming and improved Internet connection speeds.
App  Short for application; a mobile app is a software program designed to complete a specific set of functions on a
specific model and make of phone.
Basic phone  A basic phone has a numerical keypad, severely limited data storage, little to no Internet capabilities and a
low quality display.
Cascading Style Sheets (CSS)  This is a language used to describe how an HTML document should be formatted.
Cascading Style Sheets provide the ability to separate the layout and styles of a web page from the data or information
displayed on the page.
Compact HyperText Markup Language (CHTML) > A version of HTML for mobile devices and other limited hardware.
Click-to-call  A function which allows the mobile user to click on a link to make a telephone call.
Enhanced Data rates for GSM Evolution (EDGE)  EDGE is mobile phone technology that allows for faster speeds than
that of a basic GSM network.
Feature phone  Similar to a basic phone but with several improved features which can include a camera, radio, limited
storage capacity and low-end online capabilities.
Global System for Mobile Communication (GSM) >GSM is the most basic mobile network. It is the most widely used
network in the world, with about 80% of mobile users connecting via the GSM network. In USA, only 40% are connecting
via GSM, the majority is using CDMA
Smart phone  A phone with more enhanced capabilities than that of a feature phone, and can be considered a mobile
computer as it offers many of the same features
Unstructured Supplementary Service Data (USSD)  USSD works on all existing GSM phones. It provides session-based
communication, enabling a variety of applications.
World Wide Web Consortium (W3C)  W3C have been the leaders in web standards and best practices for a long time
and have now expanded to include the mobile web.
QWERTY  This refers to the most often used modern day keyboard layout. Regarding mobile phones, it refers to devices
with a full keypad. The name comes from the first six keys appearing in the top letter row of the keyboard which together
spell QWERTY.
Mobile phones are changing the way we access
the Internet and communicate.
More than half the world’s population use
mobile phones.
Mobile technology is changing rapidly.
3G
EDGE(2G)
GSM
WAP
Next step
= 4G
One phone can do a lot
Why use the mobile phone for marketing?
1. Personal
2. Always carried
3. Always on
4. Built-in payment system
5. Available at the point of creative inspiration
6. Accurate audience measurements
7. Captures social context of media consumption
Why mobile web development?
Provides both opportunities and challenges.
Opportunities:
•Mobile websites – access to your brand from
anywhere!
•Mobile applications – connect with the customer
• Challenges:
•
•
•
•
Small screens
Navigation limitations
File formats
Connections and bandwidth
Mobile websites can be accessed using any
Internet enabled device.
Image credit: Flickr, creative
commons, Dru Blumfield
Basic phones:
•Basic call and text
messaging capabilities
Image credit: Creative
commons, Macic7 en.wikipedia
Feature phones:
•More capabilities than
basic phones
•A few multimedia apps
(camera’s mp3 players,
calendars etc.)
•Internet access
Image credit: creative commons,
Rodrigo Senna,
http://flickr.com/photos/negativz/38422354/
Smartphones:
•Benefits offered by pc’s
•Video and still cameras,
dictaphones, radios, music and video
players, calculators, gaming devices
and eCommerce options
•Make calls and access the Internet
too
Tablets
•Touch screen personal computer devices
•Wireless adapters for Internet
connectivity
•Often recognise both virtual keyboard input and
handwriting recognition
•Used by individuals and users to interact directly
with the machine
Mobile applications are designed for
specific handsets or operating systems.
Image credit:
Flickr creative
commons,
Yutaka Tsutano
Mobile websites can reach a large audience.
Mobile applications are more for targeted niche
audiences.
When designing, know that it will almost never
display across multiple handsets...
But stick to web standards
It should be a pared down version of the original
site.
Desktop
Mobile
Ask yourself why someone is visiting your mobile
site.
•Bored and browsing?
•Task driven and looking for information?
•Performing a repeated action (checking the
weather etc.)?
•What navigation options do they have (touch
screen, keypad, QWERTY)?
•How powerful is their mobile device
(Smartphones vs. feature phones)?
Image credit: Flick creative
commons, Andrew Currie
Make the mobile web work for you by:
•Designing the site around your marketing goals
•Understanding your site users
Include the essentials:
•Contact details
•Directions or map
•The basics - who you are, what you do etc.
Use a click to call link
Examples:
•Facebook.com vs. m.facebook.com
•Gmail.com vs. m.gmail.com
•Twitter.com vs. m.twitter.com
•m.youtube.com
Use mobile web standards.
Make sure mobile users are directed to the mobile
version.
Ensure your markup is valid and error free with the
W3C XML validator.
http://validator.w3.org/
Avoid frames and tables - keep your site size down
to a minimum.
Keep URLS short and memorable.
www.m.gmail.com
Ensure your images are in a compressed format
(gif, jpg).
Do not clutter with excessive navigation or menus.
• Do not use pop-ups, and keep scrolling to one
direction.
• (http://www.w3.org/TR/mobilebp/#SCROLLING)
Submit your sitemap to Google
Don’t use Flash  Doesn’t work in Apple’s IOS
Use emulators and recruit actual contacts to test
the content display
Some emulators:
•DotMobi - http://mtld.mobi/emulator.php
•Test iPhone - http://www.testiphone.com/
•Blackberry http://www.blackberry.com/developers/download
s/simulators/
Develop a branded application
•Your brand can win a dedicated spot and
repeated attention from a targeted consumer
•You can also extend brand identity by offering
utility or entertainment
HTML 5 and mobile
•Will only work on modern phones
•Enables rich multimedia to be made lighter
•Video and audio content can be played without
Flash
•Designers can create rich interactive experiences
by drawing on web pages through the canvas
feature
•Offers optional installation of applications they'll be available via app stores or via web
browsers
•Enables search engine spiders to crawl HTML5
applications
•Allows deep-linking in a part of an application
Further Reading?
www.quirk.biz/emarketingtextbook