Search
Close this search box.
Marketing, Design and Photography Instructor

WEBSITE

Websites are the center of all marketing efforts

Core Pages on a Website

Website diagram

Content Management System (CMS)

Writing for the Web

Best Practices

Examples

Website Structure + Content Pages

“People want to get stuff done as quickly and easily as possible.”

A website serves as a digital representation of your business, organization, brand, or personal identity. In today’s digital age, a website offers numerous benefits and advantages contributing to your online presence, credibility, communication, and reach.

 
What is a website

Anatomy Of A Website

Website Wireframe
Anatomy Of A Website

Common Terms

  • Browser
  • Favicon
  • URL
  • Navigation
  • Dropdown
  • Header
  • Side Bar
  • Body
  • Hover State
  • Hamburger Menu
  • Hero Image
  • Call to Action (CTA)
  • Button
  • Fold
  • Carousel/Slider
  • Hyperlink
  • Cards
  • Footer

     Find a Winnipeg company and tell us about its website structure!

Questions to consider

Regarding websites, it’s tempting to jump right into pages, words, messaging and shopping carts. It’s important to answer these questions so that the pages, words and messaging actually reflect what your audience needs.
 
What is the website for?
 
The purpose of the website.

Who is the website for? This can be primary and secondary audience groups.

What do they want it to do? The tasks your audience needs to complete.
 
How do people get there? The broader context.
 
 
 

Core Pages

•Navigation/Footer menus

•Landing pages

•Home pages*

•About pages*

•Contact pages

•Services/Shop pages

•Blog*

Navigation types - Header and Footer

MPI

Home Page

The home page is your virtual front door; your customers decide to stay or leave in less than 3 seconds.

Tell visitors what problem you solve in a succinct headline that uses emotional words to grab attention and then use a subheading that draws them in and compels them to keep reading.

It’s the first impression, and it should be designed to grab the visitor’s attention, communicate the core message, and direct them to other important sections of the website

It should include:

    • Compelling heading, sub-headline, body copy (using keywords for SEO)
    • Engaging visuals
    • Clear CTAs
    • Clear brand identity
    • Brief overview of the business, including core values and unique selling proposition (USP)

About page

  • The “About” page is the second most visited page on a website.

 

  • Usually contains bio information for personal websites or company info for brands.

 

  • Don’t bore people with your bio; use it to relate to your primary audience.

 

  • Start with a statement that communicates, “I get you. I’ve been there.”

 

  • Then include details about your story in how you solved the problem and some personal details so that you come to life as the business owner.

 

  • Write about your values so your audience can understand you.

 

It can include:
  •Company/Personal History
  •Mission and Values
  •Team Information
  •Achievements
  •Testimonials
  •Links to other parts of your website

Hubspot

Products/Services

  • This section showcases your offerings and their features.
  • It’s a prime space for converting visitors into customers.
  • Effective product or service pages can lead to higher sales and revenue.
  • It can include:
    • Detailed product/service descriptions.
    • High-quality visuals (pictures and/or videos).
    • Pricing information.
    • Customer reviews.
    • CTAs.

Landing page

A landing page is a page that “directs traffic” on your website via a specific URL that is not navigable from the main website.

In digital marketing, it refers to a page tailored for one particular audience group; it’s highly targeted and uses personalized language and visuals to convert visitors to take action on the page.

It usually has a single purpose via a call-to-action button (CTA) (buy, sign up, download)

  • Landing pages are used for specific marketing campaigns, such as product launches, lead generation, etc.
  • Well-designed landing pages can boost conversion rates, capture leads, and track the effectiveness of marketing campaigns

It often generates leads by asking people to exchange information for the lead magnet/freebie.

It should include:

    • A clear purpose.
    • Compelling headline.
    • Lead capture form.
    • Visuals.
    • Limited navigation.

Example: shopify.com

What is the difference between a landing page and a Website?

Contact page

•Displays contact information, hours of operation, phone numbers, social media, or other types of information.

•Usually contains a contact form.

•Avoid using your email address because you’ll get spam from robots that crawl the web.

•Consider using Captcha to protect from spam.

•Avoid using unnecessary words –get straight to the point.

• Follow up with a “thank you” reply message to confirm the submission worked.

reCAPTCHA

Blog

•A blog is a standard part of every website (and if there isn’t one, there should be)

•It’s excellent for search engine optimization (SEO); most of the search result that gets clicks is a blog post.

•It’s the core place where you own the content and provides a more in-depth perspective to build authority on relevant topics.

•Sometimes, it can be called different names, but avoid getting too custom because people won’t know what it is (and won’t take the time to look)

•Keep the blog updated and relevant; abandoned blogs don’t represent the brand well.

•Use blogs to be helpful, not sell, but include a relevant CTA in every post.

•Consider using content categories or tags for an additional SEO boost.

They are the best way to educate your audience.

They are vital for driving traffic to your website.

It should include:

    • Compelling, SEO-friendly titles.
    • In-depth content.
    • Internal links.
    • CTAs.

Hubspot

 

Research Tools:

Google predictive search
Google Trends
Quora
Answerthepublic.com (free accounts only get 4 searches a day)
 

Thinking about a website structurally

What is the purpose of the website?

What kind of pages does the site need to make that purpose obvious and easy?

What kind of content is needed on each page?

Architecture

Information architecture is a technical name used in online content strategy and usability to describe the structure of a website and how the content is organized (the skeleton)

A general best practice is to use page names that your target audience understands.

There are several ways you can figure out how users organize information.

Card sorting: Use index cards and ask people to sort content into categories.

Alphabetical: A to Z

Chronological: First to last (Step 1 to Step 10)

Audience classification (novice, intermediate, advanced)

How it works inside organizations

People often want to see something concrete rather than doing the up-front strategy work when it comes to websites.

Starting with the design first is a mistake because people get distracted by the colours, images, and design elements, and they lose sight of the content, or they become willing to compromise content and user experience(UX) for design or interactive components without the context of how it will be used.

It’s essential to create a shared understanding of who the website is for and how it will be used before any actual writing or design work begins.

Wireframes: page skeletons

“Wireframe” is a term to describe a tool that outlines how your website content is displayed page by page, including interactive elements like menus, navigation, and forms.

They are usually black-and-white sketches or drawings.

They often use placeholder content and focus on understanding how users might complete their primary tasks within a roughed-out design.

They test early ideas and are important for iterating during the interaction design.

They’re a communication tool for anyone involved in the work.

Good wireframes are simple, and they minimize distraction.

High Tea Bakery.

Building your website diagram

Website wireframe
Website wireframe
Website wireframe
Website wireframe
Web Design UX principles
Web Design UX principles
Content Management System

Do you know any other CMS?

WordPress Pros

WRITING FOR THE WEB

“High-quality content that’s useful, usable and enjoyable is one of the greatest competitive advantages you can create for yourself online.” − KRISTINA HALVORSON, Brain Traffic

This short example from Gary Provost demonstrates what happens when a writer experiments with sentences of different lengths, as quoted in Writing Tools: 50 Essential Strategies for Every Writer by Roy Peter Clark.

How to write for the Web

What is writing for the web?

What?

• It’s about helping people who want to get stuff done (aka their tasks)

• Content isn’t just “the stuff in the middle”

• Writing is navigation, structure, search, and how it’s all put together.

• It includes interactive elements like button text, error messages, and forms.

• Great content + great functionality = great user experience.

W Questions?

• Who are you creating it for?

• What problem does it solve for them?

• What makes you unique?

• What content formats will you focus on?

• Where will it be published?

• How will you manage creation and publication?

Good Example!

Why?

• Reading is typically more task-based online (we want to do something)

• We have a lot less patience.

• We read less linearly.

• Screens are complex on our eyes.

• We have a limited attention span (10 seconds tops!)

How?

Skimming text after the first few lines.

Skipping entire lines and even paragraphs.

• Scanning for keywords.

• Jumping around from one point to another.

• Getting distracted by links or abandoning them entirely.

This is how your audience reads too! They don’t care about your content as much as you do.

Scannable content

      • Subheadings to break up content
      • Bullet points and numbered lists (Information chunking)

 

Bold or italicized text to emphasize key points.

    • Hyperlinks for further reading or navigation.

 

Be clear and simple in your language

      • Avoid jargon or complex vocabulary
      • Front load important content

Active Voice

• Speak to your readers directly, like you’re conversing with them.

• Active voice has action and uses fewer words –it’s about what you’re doing (not what’s being done to you)

• The only exception is if you need to put the keyword at the beginning of the sentence to help your readers scan.

Examples:

• Passive voice: The plane was flown by the pilot.

• Active voice: The pilot flew the plane.

Keywords

Put keywords at the beginning of sentences, phrases, and bulleted lists.

• This helps people who are scanning your content.

• It acts as a hook that draws them in to keep reading because they know it will help them.

• It helps drive behaviour, reassuring your target customer that they found what they wanted.

• Remember this is the one time that passive voice is okay: if you put the keyword at the front of the sentence.

Chunking

This technique refers to breaking down large chunks of text into smaller chunks.

• A wall of text is hard to read and understand; it acts as a barrier.

• If the text looks easier to read, then people are willing to read it.

• Instead, use bulleted lists as much as you can.

• Use subheadings to break up the text.

• Leave white space.

• Sometimes even single sentences can be their paragraph (but not every sentence should be its paragraph)

Plain English

• For most audiences, write using everyday, simple words (if you’re writing for a technical audience, write to the appropriate level)

Simplify language as much as you can (even experts and professionals prefer it this way)

• To boost comprehension, write up to an 8th-grade level for a general audience. Write up to a 12th-grade level for a college-educated audience or a specialized B2B audience.

• Example: ‘We utilize unnecessarily sophisticated vernacular’. Instead of saying ‘we use big words, we don’t need’.

Readability Tool

Information Chunking Example

  • Bread
  • Ice cream
  • Milk
  • Tomatoes
  • Eggs
  • Butter
  • Apples
  • Muffins
  • Frozen vegetables
  • Bagels
  • Lettuce
  • Cream
  • Banana

Information Chunking Example

Frozen Foods

  • Ice cream
  • Frozen vegetables

 

Dairy

  • Milk
  • Eggs
  • Cream
  • Butter

 

Bakery

  • Muffins
  • Bread
  • Bagels

 

Fruit and Veg

  • Lettuce
  • Banana
  • Tomatoes
  • Apples

Best practices

Scannable content

Subheadings to break up content

Bullet points and numbered lists (Information chunking)

Bold or italicized text to emphasize key points.

Hyperlinks for further reading or navigation.

 

Be clear and simple in your language

Avoid jargon or complex vocabulary

Front load important content

Tagging your content on your website

Ensure you use proper H tags on your headings

Bots will crawl your site, your H tags tell them in which order to read the page.

E.g.: H1 tags will be read first, then H2, then H3, etc.

Be sure to include keywords in your headings

Writing for the Web

Inverted pyramid

This style of writing answers questions first

● Put the most important information up front, then details, then the background.

● This format was often used in journalism.

● People don’t have the patience to read all the way to the bottom; they will give up and abandon your content instead.

What makes great content

 

• Use engaging headlines and subheadings

    • Craft attention-grabbing headlines that accurately represent the content.
    • Use descriptive subheadings to guide readers through your content.
    • Incorporate relevant keywords in headings to improve SEO.

 

• Use images and videos to support your content:

      • Use alt text for images to improve accessibility and provide context for search engines.
      • Incorporate multimedia to make your content more engaging and shareable.

• Put your reader first:

      • Have a conversation with the reader
      • Use the second person (you/your) and speak directly to your audience

• Links are decision points along your reader’s journey.

• Use descriptive words that capture the information at the destination.

Avoid “click here,” “learn more,” and “go” (they’re vague)

• Use links carefully; be thoughtful about the experience.

External links can build your content’s credibility but can also be distracting.

• Link triggers are the underlined words that make up a link (longer is better)

• Focus on the primary call-to-action (CTA); consider using buttons!

Writing for the Web

Notes:

  • Don’t use underline in text unless it’s a link.
  • Underlines act as visual cues to distinguish a link from normal text.
  • Choose a different colour for link text and use underline.
  • Always use the same colour for links across the entire website.
  • Avoid ALL CAPS; it’s hard to read and it is used to indicate yelling or shouting.
  • Emphasize text using bold, not italics (to make it easier to read)
  • Use different fonts or font sizes to indicate heading levels or information hierarchy.
  • Be consistent across the site; your conventions will help readers understand the information; variations confuse readers.

 

What is UX writing?

Psychological Triggers

 
 

Effective Home Pages

First Impression

•Go back to your persona and think about how you can convince that person to take action on your website.
• Copy should reinforce that your target customer landed in the right place.
• Match the keywords your audience is searching for and then draw them in by talking directly.
• Tell them how you can help them or what problem you will solve.
• Remember to think “mobile-first” most people are browsing your site from a mobile device.

The Power of Why – Simon Sinek

About Pages

Your bio is a chance for your readers to get to know you--ideally, to know, like, and trust you.
• Tell them you understand how they’re feeling.
• Draw them into your story.
• Provide a tidbit that’s personal (favourite colour, drink, season, or a story they can relate to) or something about your work (an award, important project, or professional achievement)

First-person or third-person?
 
Make it fit the overall tone of your brand:
If it’s about you personally, first person (me, I)
If it’s about a company, third person (use your name or she/he)

Speak like a human; don’t use overcomplicated, fussy words.
Your About page is like a warm introduction or a conversation with a friend.

It’s not really about you at all.

Your About page is for your reader, not for you:

Make them feel welcome.
Remember people will look at your picture first, then read the bio (use a headshot that’s consistent with your social media profiles, too, so people recognize you)

Provide pathways to the rest of your site.
Use the About section to link to your blog, specific articles,
or other pages on your website.

Put all the info at their fingertips.
Plus, it’s great for SEO and for boosting traffic.

 
 
 
Translate »