Building Your First Website

A hypernumbers Tutorial

1
1 Table Of Contents

1Table Of Contents...............................................................................................................................2
2Introduction........................................................................................................................................3
2.aWhat This Document Covers.......................................................................................................3
2.bWhat This Document Doesnt Cover..........................................................................................3
2.cGetting Help.................................................................................................................................3
3Choosing Your Colours......................................................................................................................4
3.aUse A Designer............................................................................................................................4
3.bFinding Colours...........................................................................................................................4
3.cUnderstanding Colours................................................................................................................4
3.dFinally..........................................................................................................................................4
4Planning Your Site.............................................................................................................................5
4.aIntroduction..................................................................................................................................5
4.bCore Components........................................................................................................................5
4.cAn Example.................................................................................................................................6
4.dPutting It Together.......................................................................................................................8
4.eHelp Us Improve Hypernumbers.................................................................................................8
5Planning Your Site Layout.................................................................................................................9
5.aIntroduction..................................................................................................................................9
5.bHypernumbers Site Layouts........................................................................................................9
5.cSite Layouts For Search Engines...............................................................................................10
6Your Logo........................................................................................................................................11
6.aIntroduction................................................................................................................................11
6.bFree Tools..................................................................................................................................11
6.cLogo Design Tips......................................................................................................................11
6.dGetting Your Logo On The Web...............................................................................................11
7Designing Your Site.........................................................................................................................12
7.aIntroduction................................................................................................................................12
7.bDont Go Crazy!........................................................................................................................12
7.cCommon Page Elements............................................................................................................13
7.dBuilding Forms..........................................................................................................................15
8Building The Site..............................................................................................................................16
8.aRecap.........................................................................................................................................16
8.bGet Building..............................................................................................................................16
Appendix 1 Referencing Cells On Other Pages..............................................................................17
Appendix 2 Colour Theory..............................................................................................................18

2
2 Introduction

2.a What This Document Covers

This tutorial will take you through the following steps:

choosing your colours
planning your site
planning your site layout
designing your site
building the site
your logo

All these discussed in the right order, the order that will make the process as easy and painless as
possible, but I know you are going to skip ahead and start building anyway.

This guide assumes that you are going to build the site yourself and not use a designer to help you
bear in mind that sometimes you really maybe should get a professional to do it for you.

2.b What This Document Doesnt Cover

This document doesnt cover using the Hypernumbers spreadsheet. There is a comprehensive help
over at:
http://hypernumbers.com/support/

Wherever possible Hypernumbers is compatible with Excel but it has particular extensions, for
instance Twitter buttons on webpages.

2.c Getting Help

There are help videos on our YouTube channel:

http://www.youtube.com/user/hypernumbers

You can get support at:

http://hypernumbers.com/support/

3
3 Choosing Your Colours

3.a Use A Designer

Designers are good at choosing colours, you might not be. If you are getting a corporate design
done you might want to skip this bit.

3.b Finding Colours

Choosing colours is one of the hardest parts of site design. Luckily there are a lot of resources
available on the web to help you to do it.

Our favourite resource is a community of designers over at http:///kulor.adobe.com who design and
publish colour swatches.

These swatches consist of 5 colours. Look for a mixture of light and dark colours so that you can
use different colours for emphasis and highlighting.

3.c Understanding Colours

If you want more tips on understanding colours there is a special Appendix on Colour Theory at the
end of this document.

3.d Finally

Now you have chosen your colour set write it down and save it somewhere.

4
4 Planning Your Site

4.a Introduction

You need to work out what the purpose of your site is. Few people have a single identity on the
internet these days, most people and businesses have one or more of the following:
a website
an e-mail address
a Twitter account
a Facebook page

In addition there may be specialist web identities involved, like:

LinedIn accounts
Flickr accounts
a YouTube channel
a Scribd account
making a Google Calendar publically available

You will also want to think about other web properties you might want to use like:
a map showing your office location
Buy Now buttons to a Google Checkout account or Paypal

Essentially any website that offers an embed this option can be used with Hypernumbers.

4.b Core Components

A Hypernumbers page can be displayed in three forms:

a spreadsheet view
a webpage view
a table view

5
These different views can be set to be public and private with the view menu in the top right hand
side of the spreadsheet view:

4.c An Example

Your Hypernumbers site is where all these pieces are glued together.

To see how you can put all these things together it is worth looking at how Hypernumbers do it
ourselves:
our website
our Twitter account
our Facebook page
our YouTube channel
our Scribd page (where this manual is also published)
Gordon Guthries Google Calendar
the map showing our office

6
 our Google Checkout buttons

Twitter is a great way to publish announcements, special offers and other communications to your
users and customers but you have to have a strategy to get them to sign-up to you.

Likewise Facebook is a place where a lot of your customers and contacts are and it has a set of tools
for you to manage active conversations with them.

The key is to work out what you are trying to do, with whom and where is the right place to do it.

So look around hypernumbers.com, sign-up for our Twitter account, become a fan of our Facebook
page, look at our videos and think what is the best way to promote my business.

7
4.d Putting It Together

Now that you know what you want to do you need to make sure you can do it.

What domain name do you want1:

bobsmith.uses.hn
bobsmith.com

Is that domain available?

What associated accounts do you want and are they available as well:
can you get the twitter account bobsmith
can you get the facebook page bobsmith
etc, etc

4.e Help Us Improve Hypernumbers

We have a range of special functions to make it easy for you to glue your online life together in
Hypernumbers, for example =twitter.button(hypernumbers) will create a twitter
button that takes you to twitter to follow Hypernumbers.

If there is a piece of integration that you badly want, a widget or some embedded component, dont
be shy in asking, email me gordon@hypernumbers.com or ring me on +44 7776 251669

1
both of the above domain types are only available in a paid option

8
5 Planning Your Site Layout

5.a Introduction

You need to plan what pages you are going to create on your website.

Remember when you have created a webpage you will want to get people to link to it. These
inbound links are valuable and increase your websites importance in search engines. This means
that once you have created a page structure you really are stuck with it so it is important to think it
through at the beginning.

Planning your site layout seems intimidating at first, but it is really quite simple.

5.b Hypernumbers Site Layouts

We are all familiar with saving files to disk:

We create some high-level folders, and into them we put lower-level folders and finally we put
documents and files in the right place.

Hypernumbers websites are just the same we create Hypernumbers pages and underneath them we
put other Hypernumbers pages:

9
Hypernumbers pages can be public or private by default they can be shown as a webpage or as a
spreadsheet.

(Soon you will be able to share a particular page as a spreadsheet or webpage with
invidividuals.)

The normal top level pages on a website are something like:

What We Do
About Us
Contact Us
Pricing
Support
Privacy
Terms And Conditions

5.c Site Layouts For Search Engines

Search Engine Optimisation involves a lot of techniques, most of which are not relevant here.

The key point in your layout is to use keywords in your URL paths, so if you are writing content
that you want search engines to find, use the search terms you think are important in your URLs
like, separated by dashes:
/info/dilithium-crystal-tuning/
/info/how-to-install-a-frobulator/
/info/how-to-remove-a-detuned-wibulator/

10
6 Your Logo

6.a Introduction

Often you will want your designer to provide you with a logo but if you dont this section will
show you how.

6.b Free Tools

The best free programme for building logos is Inkscape:

http://inkscape.org/download/?lang=en

To get good and original fonts to use in your logo you can go to:
http://www.fontsquirrel.com/

6.c Logo Design Tips

use colours that are compatible with your chosen colour scheme
remember to use a combination of a picture logo and text on the webpage to describe your
business
the search engines cant read logos only normal text
the most common logo error is poorly kerned letters
kerning is the space between individual letters. Normally at small sizes it doesnt matter,
but a big sizes it matters a lot
compare the two logos below. The second one has been hand-kerned (using [ALT]
[LEFT ARROW] in Inkscape:

6.d Getting Your Logo On The Web

Hypernumbers dont store images (we may do later). So you will need to put your image on an
image store website.

The most popular one is:

http://imgur.com

11
7 Designing Your Site

7.a Introduction

You want your website to appear structured and coherent and have a consistent look and feel. This
section will take you through the stages required to do that.

7.b Dont Go Crazy!

There is a big temptation when first building Hypernumbers sites to go crazy with the column
widths and row heights. It all seems to easy:

Unfortunately you soon get bogged down with that. Much better to merge cells to get the sizes you
need and to resize rows to get good layout and try and avoid resizing columns at all

12
7.c Common Page Elements

To give consistency to your website you want to use common page elements that you will use
everywhere in the site.

The most important of these is the navigation. This section will show you how to build a navigation
bar in Hypernumbers and share it across your site.

The other obvious one is the footer page.

This layout is fairly straight forward a logo, 4 sub-pages and links to Twitter and Facebook
accounts.

First up we merge some cells to get the header bar and create a thin row of cells with a gray
background to give us a line:

Then we populate the various cells:

Once we have built our master header bar we can include it on other pages using the special
Hypernumbers function include(). This just takes a range and simply says, whatever that range
looks like, return it to me.

The formula for this header bar is:

=include(/$b$2:$i$7)

The range we are including is on the home page of the website which is why it starts with a /. If
you want to understand why this is, please read Appendix 1 of this document.

13
Notice that we are using dollared cell references so that they are not rewritten if we copy the
formula elsewhere.

To use this include on another page simply merge the cells b2:i7 on that page and put the formula
in.

If you edit the master header on the home page, all the other pages will now update!
And here is the final site:

14
7.d Building Forms

Forms are easy to build. Select the range where you want to put the form and right-click your
mouse. From the right-click menu you can select Create Form. This will generate a simple
form. You can add more complex elements with the form builder buttons.

By default there is only one form on a page and all the input is posted to a default subpage called
./replies/

What this means is that if you put a form on the page /some/page/ the form entries will appear
on the page /some/page/replies/

15
8 Building The Site

8.a Recap

So youve done the preparation, and you have:

picked your colours (Chapter 3)
planned your site, choose your domain name and open all the other accounts you need (Chapter
4)
worked out your site layout (Chapter 5)
designed your logo (Chapter 6)
laid out your common page elements (Chapter 7)

8.b Get Building

Building the site is easy now:

create all the pages from Chapter 4 in the site administration panel (click on the Hypernumbers
icon in the top left)
set them all to be web pages and not spreadsheets
on each page merge a block of cells the same size as your original header on the home page
insert the include() function in that cell
check that when you click from page to page the header is lined up on all pages
if there is text off to the right of the columns under the header the page will jump left
put in the page specific content for all pages
e-mail your friends and colleagues to get them to have a look
contact us to tell us how you got on, or what problems you have had:
e-mail gordon@hypernumbers.com
twitter @hypernumbers
phone +44 7776 251669

16
Appendix 1 Referencing Cells On Other Pages

Excel is a tab-based spreadsheet with many pages in the same workbook. In Excel, cells on another
page can be addressed by sheet addresses:
=!Sheet1!a1

But Hypernumbers and desktop spreadsheets are subtly different in how they handle pages. In Excel
all spreadsheet pages are siblings brothers and sisters of each other and they have a single parent
the workbook2. In Hypernumbers spreadsheet (and web) pages can have brothers and sisters, a
single parent, children, grand-children, cousins, etc, etc
/
/my-page/
/my-pages-brother/
/my-pages-sister/
/my-page/child1/
/my-page/child2/
/my-page/child1/grand-child1/
etc, etc

In Hypernumbers you can refer to cells on other pages using Excel notation, eg:
=!my-page!child1!grand-child1!a1

or normal web notation

=/my-page/child1/grand-child1/a1

Excel notation is absolute it always refers to the page from the top parent. Hypernumbers also has a
relative page reference system which uses normal web notation. In this notation:
. means this page
.. means this pages parent

So on the page /my-page/ the following references would resolve to the following pages:
. /my-page/
.. /
../my-pages-brother/ /my-pages-brother/
./child1/ /my-page/child1/
../my-pages-brother/nephew1/ /my-pages-brother/nephew1/

2
the parent is only important for Visual Basic scripts and names in Excel

17
Appendix 2 Colour Theory

Colours are normally expressed as RBG numbers, which can be quite perplexing. RGB stands for
Red, Blue and Green and tell you how much of each base colour is in the total colour.

RGB values are given in 2 separate ways:

Decimal values eg {123, 45, 67}
Hex Values eg #7D2B43

These two are the same colour a sort of dark purple

Different programmes refer to colours in different ways:

Microsoft Word uses Decimal Inkscape uses both plus an opacity figure

18
The calculator in Windows will easily allow you to convert decimal to hex and vice versa:

Put the number in the calculator in decimal and toggle to hexadecimal to get it converted, and vice
versa.

One of the biggest problems with designing pages is that you need to do 2 things:
choose colours for your background
choose colours for your text
make sure that the text can be read against the background

Most programmes make it easy for you to choose background or text colours but none help you
with ensuring they work together. These are some of default colours from Microsoft Word:
About this Time the Emperor Augustu pat furth an edic
s
ordeini at aa the fowk i the hail warld suid
n
be registrat This wis whan Quirnius wis Governo o Sria,
e. r
an it wis the first time at siccan a thing
hed been dune. Sae aabodie gaed tae be registrat ilkane
e,
til his ain toun, Joseph amang the lave. He belonge
d
til the stock an faimlie o Dauvit an sae it
,
wis tae Dauvit's Toun Bethlehe in Judea, at he gaed
, m
doun frae Nazaret in Galilee for tae ge in his
h
name, takking Mary, at wis haudfast til him, wi him
it

Hypernumbers think that you should never set a font colour or a background colour, but always
think of a font colour on a background colour. Often that background is just white, but it is still a
background.

Putting a coloured font on a coloured background is a tricky business even deciding if the font on
a particular background should be white or black is difficult.

Luckily there is a simple formula for that which you can use in your Hypernumbers spreadsheet.

19
=if((0.3*RED + 0.59*BLUE + 0.11*GREEN)/255) > 0.5, black, white)

where RED, BLUE and GREEN are the decimal colour values.

20
Often websites use a range of gray scales for emphasis. Grays are very easy to specify if each
RED, BLUE and GREEN value is the same the colour is a gray, eg:
{123, 123, 123}
{77,77,77}
#ababab
#111111

21