Digital Marketing Explained: Page Goals and Design

This is a part of the Digital Marketing Explained Holy Grail Post Series, the outline will be kept together on the Digital Marketing page.

Organic digital marketing refers to the optimisation of traffic that you would receive organically (without having to promote) from direct website visits, links from search engines, links from other websites or email referrals. Social media profiles will also receive organic traffic but that will be discussed in the social media section.

Website or Landing Page

Defining Your Goals

First and foremost you need to define your goals of your page. Ideally there should be at least one “conversion metric” that could range from soft metrics like time on site to hard metrics like sales.

Here is a list of example metrics

• Interaction Metrics
  • Article Views
    • Article reads (30 sec+)
    • Time on article pages
  • Video Views
  • Audio Listens
  • Podcast Downloads
  • Game Plays
  • Pages/Visitor
• Email Capture via
  • Newsletter subscription
  • Competitions
  • Downloads
  • Event registration
• Sales
  • Online Sales
  • Offline Sales Leads

Once you have defined your goals, your next task is to design your page with those goals in mind and follow best practice web design principles.

Designing Your Page

When designing your page there are layout, compatibility, accessibility, navigation, multimedia, content and design elements to consider. For each of these there are best practices to ensure that you do, try to avoid and just some general tips.

Layout

Ensure that the page

•  is appealing to you target audience
•  has consistent branding, style, header and logo
•  has consistent & relevant navigation
•  has consistent all fonts, font sizes, and font colours across the site
•  uses an informative page title
•  includes relevant keywords in its title and body
•  includes credibility factors like corporate name, site name et cetera
•  includes a footer with copyright, contact details, privacy policy, last updated date
•  has good use of basic design principles: repetition, contrast, proximity, and alignment
•  keeps all the most important information “above the fold”
•  has a good balance of text/graphics/white space on page – not too many distractions
•  has a good contrast between text and background
•  has compelling, interesting information above the fold

Avoid

•  repetitive information like the header, logo and navigation taking up more than ¼ to 1/3 of the area above the fold
•  having a slow loading page

Compatibility & Accessibility

Ensure that the page:

•  is compatible with all major browsers (Internet Explorer, Firefox, Chrome, Safari)
•  is compatible across all major operating systems (Windows, Mac, Linux)
• is suitable for the blind and screen reader friendly

Use:

•  navigation aids such as site map, skip navigation link, or breadcrumbs
•  captions are for each audio or video file used
•  common fonts such as Arial or Times New Roman
•  alternate text and titles for images or multimedia
• Preferably navigation should be structured in an unordered list

Navigation

Ensure that the navigation links

•  are clear and consistently labelled
•  are easy to use for target audience
•  are also clear text links in the footer section of the page
•  all are working links (check for broken links)

Avoid:

•  using images, Flash, or DHTML for the main navigation

Multimedia

Ensure that:

•  graphics are optimised for web and do not significantly slow the site download
•  each audio, video or Flash file used does serve a clear purpose & enhances, rather than distracts from the page
•  download times for audio or video files are indicated
•  links to downloads for media plug-ins are provided

Writing Content

When writing content for the web, ensure that the content:

•  uses techniques of web optimised writing are used such as headings tags, bullet points, short sentences in short paragraphs with a good use of white space
•  provides meaningful, useful information
•  is organized in a consistent manner
•  can be found easily (minimal clicks, searching or scrolling)
•  is up to date (and the date of the last revision and/or copyright date is accurate)
•  provides links to other useful sites or pages

Avoid

•  outdated material
•  typographical, spelling and grammatical errors
•  the use of “Click here” when writing text for hyperlinks
•  non-standard link colours (if used, have a consistent set of colors to indicate visited/nonvisited status)

Design Elements

For best practices around block quotes, about pages, coming soon pages, error pages, buttons, image captions and more have a look at Smashing Magazine’s web design best practices. Furthermore, hongkiat.com provides a great resource on best practices and examples for call to action buttons.

When briefing your page to a designer or just in getting your head around it, it helps to start off with wireframes.