DEVELOPING WEBSITES A step-by-step guide for (future) website owners

HOW TO READ THIS GUIDE? To follow are all steps involved in creating a successful website All of these steps can be carried out by Sunny Side Up most of the time, site owners will take the initiative in some of them Especially, of course, in setting goals and a budget Be careful not to underestimate time commitment and expertise required for each step

To follow are all steps involved in creating a successful website

All of these steps can be carried out by Sunny Side Up

most of the time, site owners will take the initiative in some of them

Especially, of course, in setting goals and a budget

Be careful not to underestimate time commitment and expertise required for each step

KNOW WHAT YOU WANT Ask yourself the question: “ what are the goals for my website? ” Business efficiency? Sell products and services? Enhance the image of my company? Write it down Review it Be specific e.g. “ sell more than 300 books a year ” is better than “ sell lots of books ” You may have several goals Make it part of your marketing / business plan (do you have one)?

Ask yourself the question: “ what are the goals for my website? ”

Business efficiency?

Sell products and services?

Enhance the image of my company?

Write it down

Review it

Be specific

e.g. “ sell more than 300 books a year ” is better than “ sell lots of books ”

You may have several goals

Make it part of your marketing / business plan (do you have one)?

SET A BUDGET Now you know what you want to achieve, ask yourself: “ how much is that worth to me?” This presentation focuses on website creation

Now you know what you want to achieve, ask yourself: “ how much is that worth to me?”

This presentation focuses on website creation

PURCHASE A DOMAIN NAME AND SETUP HOSTING What is domain? E.g. www.mysite.com Like an physical address, but than on the internet You can purchase more than one Costs between USD10 and USD50 per year What is a host? Place to store your website so that it can be viewed by anyone on the internet Host the site in the same country as intended website audience Make sure that host provides suitable setup (liaise with Sunny Side Up) May also host your email or you can keep separate Costs between USD10 and USD50 per month

What is domain?

E.g. www.mysite.com

Like an physical address, but than on the internet

You can purchase more than one

Costs between USD10 and USD50 per year

What is a host?

Place to store your website so that it can be viewed by anyone on the internet

Host the site in the same country as intended website audience

Make sure that host provides suitable setup (liaise with Sunny Side Up)

May also host your email or you can keep separate

Costs between USD10 and USD50 per month

FIND VISUAL STARTING POINTS What websites do you like? Why? Make a list of five competitors and five unrelated sites listing strengths and weaknesses Do you have a logo / corporate identity? What colours are most suited to my audience and the message you have for them? What colours do you use currently for your signage, your logo, corporate identity Do you have any printed material (e.g. business card)? Do you have any photographs, drawings, audio files, or videos that can be used?

What websites do you like? Why?

Make a list of five competitors and five unrelated sites listing strengths and weaknesses

Do you have a logo / corporate identity?

What colours are most suited to my audience and the message you have for them?

What colours do you use currently for your signage, your logo, corporate identity

Do you have any printed material (e.g. business card)?

Do you have any photographs, drawings, audio files, or videos that can be used?

DESIGN A WIREFRAME OF THE SITE Shows the relation between pages and usually looks like a tree, for example: Home About us Shop history Our clients Case study A Case study B Shop Checkout Order Confirmation page Products Fruits Orange Pear Vegetables Broccoli Contact us Base it around questions from your visitors: who are they? How can I purchase fruit? What is their track-record? What is the latest news? How can I contact this business? Work out key ingredients for each page Use post-it notes if you like (it is a brainstorm)

Shows the relation between pages and usually looks like a tree, for example:

Home

About us

Shop history

Our clients

Case study A

Case study B

Shop

Checkout

Order Confirmation page

Products

Fruits

Orange

Pear

Vegetables

Broccoli

Contact us

Base it around questions from your visitors:

who are they? How can I purchase fruit? What is their track-record? What is the latest news? How can I contact this business?

Work out key ingredients for each page

Use post-it notes if you like (it is a brainstorm)

WORK OUT HOW MANY TEMPLATES YOU NEED Each template has a unique design Some parts (e.g. photos, text area) can be editable using a content management system One template can be used for one page (e.g. home page) or many pages (e.g. fruit pages) Most websites are priced per template Examples are: Home page Information page Contact page Product page

Each template has a unique design

Some parts (e.g. photos, text area) can be editable using a content management system

One template can be used for one page (e.g. home page) or many pages (e.g. fruit pages)

Most websites are priced per template

Examples are:

Home page

Information page

Contact page

Product page

DESIGN TEMPLATES AS IMAGES Based in your design brief, we… Work with drafts and sketches first Even in the electronic format Slowly work towards final design using constructive feedback and linking back to original goals Start with a primary template part of every page Usually includes menu, logo, footer, and one ore more editable area How does the menu work? Base it around actions/questions from website visitors Use standard conventions (e.g. about us, contact us, home) What sections need to editable by a non-technical person? Text, images and video section(s)? Design will alter slightly from real website Remember that content will always change Design should allow for content changes (e.g. adding an extra menu item)

Based in your design brief, we…

Work with drafts and sketches first

Even in the electronic format

Slowly work towards final design using constructive feedback and linking back to original goals

Start with a primary template

part of every page

Usually includes menu, logo, footer, and one ore more editable area

How does the menu work?

Base it around actions/questions from website visitors

Use standard conventions (e.g. about us, contact us, home)

What sections need to editable by a non-technical person?

Text, images and video section(s)?

Design will alter slightly from real website

Remember that content will always change

Design should allow for content changes (e.g. adding an extra menu item)

DON’T REINVENT THE WHEEL Reuse what others have done E.g. Setting up your own video hosting will cost thousands of dollars Why not us YouTube as a hosting service Common practice Combining two third-party tools (e.g. image gallery and sms-text messaging service) is a lot more effective than building your own Many online services have spent millions on development and are often are (almost) free to use Trade-off Loose some control Reduced branding options Becoming more acceptable to use third-party providers Seen as way of the future

Reuse what others have done

E.g. Setting up your own video hosting will cost thousands of dollars

Why not us YouTube as a hosting service

Common practice

Combining two third-party tools (e.g. image gallery and sms-text messaging service) is a lot more effective than building your own

Many online services have spent millions on development and are often are (almost) free to use

Trade-off

Loose some control

Reduced branding options

Becoming more acceptable to use third-party providers

Seen as way of the future

SETUP CONTENT MANAGEMENT SYSTEM We set this up as soon as possible: Allows you to start adding/editing and deleting pages Works with page types that match to the design templates created Make a plan first but edit content straight into Content Management System Not helpful to create content in Word first Start adding pages as soon as possible Inevitable questions and additional requirements come up while adding content Start simple Discuss search engine optimisation How do you want to be found?

We set this up as soon as possible:

Allows you to start adding/editing and deleting pages

Works with page types that match to the design templates created

Make a plan first but edit content straight into Content Management System

Not helpful to create content in Word first

Start adding pages as soon as possible

Inevitable questions and additional requirements come up while adding content

Start simple

Discuss search engine optimisation

How do you want to be found?

SETUP WEBSITE “BACK-END” - FUNCTIONALITY Back-end is website “engine” – everything that is not visible for the website visitor What we do (this is our core business): Decide what information is stored If you don’t store it – you can’t use it Main challenge is to extract a data model out of website requirements Structure ideas How does information relate E.g. can a product be both a fruit and a vegetable or only one of them Main goal of the data-model is to limit data-entry Each piece of information should only be edited once and in one place

Back-end is website “engine” – everything that is not visible for the website visitor

What we do (this is our core business):

Decide what information is stored

If you don’t store it – you can’t use it

Main challenge is to extract a data model out of website requirements

Structure ideas

How does information relate

E.g. can a product be both a fruit and a vegetable or only one of them

Main goal of the data-model is to limit data-entry

Each piece of information should only be edited once and in one place

APPLY “FRONT-END” DESIGN STYLING Front-end: everything that the website visitor can see. Styling divided in two parts Layout on page – what goes where Typography – styling of text elements headings, paragraphs, etc… Consider font-sizes, line spacing, etc… Font selection The web limits you to recommend fonts – you can not enforce font use Choose a widely available selection Choose between serif and sans-serif Limit to one or two fonts per site

Front-end: everything that the website visitor can see.

Styling divided in two parts

Layout on page – what goes where

Typography – styling of text elements

headings, paragraphs, etc…

Consider font-sizes, line spacing, etc…

Font selection

The web limits you to recommend fonts – you can not enforce font use

Choose a widely available selection

Choose between serif and sans-serif

Limit to one or two fonts per site

ADD INTERACTIVITY Usually added last Usually added to make things faster or easier E.g. doing things without reloading the page

Usually added last

Usually added to make things faster or easier

E.g. doing things without reloading the page

TEST WEBSITE Methodologically work through each page Test each part of each page Record any problems in such a way that they can be easily fixed When, where, and how did they happen Take a screenshot if possible Fix errors (bugs) and repeat process Sometimes fixing one thing inadvertently brakes another part

Methodologically work through each page

Test each part of each page

Record any problems in such a way that they can be easily fixed

When, where, and how did they happen

Take a screenshot if possible

Fix errors (bugs) and repeat process

Sometimes fixing one thing inadvertently brakes another part

RELEASE WEBSITE Don’t advertise website on day one of launch (use soft-launch) Inevitably, there will be some teething troubles Be responsive to all feedback and keep improving CHAMPAGNE!

Don’t advertise website on day one of launch (use soft-launch)

Inevitably, there will be some teething troubles

Be responsive to all feedback and keep improving

CHAMPAGNE!

FINAL NOTES Creating a website is a bit like publishing a book: the mechanics are easy enough, but filling the pages is harder The great advantage is of a website is that we can create it “chapter” by “chapter” It always works better to start small and build slowly There is no point in creating it if you can’t maintain it out of date presence is worse then no presence at all Keeping it simple is the hardest part but always wins

Creating a website is a bit like publishing a book:

the mechanics are easy enough, but filling the pages is harder

The great advantage is of a website is that we can create it “chapter” by “chapter”

It always works better to start small and build slowly

There is no point in creating it if you can’t maintain it

out of date presence is worse then no presence at all

Keeping it simple is the hardest part but always wins

COMMONLY USED WORDS MYSQL Our database of choice PHP Programming language used to create back-end HMTL Used to write your website content structure CSS Language that gives formatting to your html structure JAVASCRIPT Language that adds interactivity to your website FTP Moves files to and from host server SVN System to keep a copy of each version file of every file on your website CMS Content Management System, allows non-technical person to edit website Flash File that can be inserted into website –often used for advertisement or animation

MYSQL

Our database of choice

PHP

Programming language used to create back-end

HMTL

Used to write your website content structure

CSS

Language that gives formatting to your html structure

JAVASCRIPT

Language that adds interactivity to your website

FTP

Moves files to and from host server

SVN

System to keep a copy of each version file of every file on your website

CMS

Content Management System, allows non-technical person to edit website

Flash

File that can be inserted into website –often used for advertisement or animation