What You See & Don't See

HTML

HTML is the basic foundation that no website exits without. It essentially describes what is on the page (the content) such as text, lists, images, links etc.

Minor changes to content can be made inexpensively however a CMS makes it much easier to update and write content as there’s no coding needed. More about HTML

CSS

CSS formats what is in the HTML, it controls attributes such as the positioning, size, opacity, layering, colour and so on.

Making minor CSS changes such as text colour is relatively easy and with a CMS you can extend your capabilities further however making layout changes becomes more complicated due to element dependencies and CSS's behaviour. More about CSS

Default view of unsytled HTML HTML styled with CSS Annotations of HTML, CSS and JavaScript

JavaScript

JavaScript can add interactivity to a website, it can change various attributes of the elements in HTML such as animating them, changing position, allowing user interaction etc. A common use for it is for slideshows, image galleries or rotating banners.

Having lots of JavaScript in a website can reduce its performance as it's another thing for a visitor to download to view a website therefore it's essential to maintain a balance of features that JavaScript can provide and how quickly your website will load. More about JavaScript

Server side coding capabilities

Server Side Languages

Unlike the above elements, these languages run or execute on the server side where your website's files are stored rather than executed in the web browser. These programming languages, such as PHP, Ruby, Python, can allow for complex functionality that is used in CMSs, ecommerce, interacting with databases and other situations ranging from complex web applications to small bits of code that send an online form. More about server side languages

Databases store different kinds of data

Databases

Databases allow for data to be stored in an easily retrievable and highly organised manner and are used in many businesses for things such as storing customer information, sales data etc. On the web, databases can be used for similar functions and also help support web applications such as CMSs. More about databases

Where It All Goes

Hosting around the world

Hosting

Hosting is the storage of website files such as HTML, CSS, images etc. on a computer called a server which also handles the server side languages mentioned earlier. The closer the hosting location to where your customers are, the quicker your website will load however for small websites the speed difference may be negligible.

Usually hosting overseas is less expensive and a bit more generous in terms of features and data limits than in NZ but the downside is that it will take longer for a website to load (for small websites it will be barely noticeable) which is why it's important to determine the target audience to know which benefit is best. More about hosting

Domain name for website

Domains

A domain name is like an address for the internet which needs to be registered, which will then allow people to visit your site. Most hosting companies provide domain registration as well but you can find the best price for each and easily integrate the domain and the hosting to make your website work. Try to keep the domain short but relevant to your business so that it's both easy to remember and type. More about domains

How People View Sites

View websites with desktops & laptops

Desktop & Laptop

People who use desktops and laptops will usually be using one of the five main browsers (Internet Explorer, Firefox, Chrome, Safari, Opera) to view websites which can be reasonably tested to ensure consistency across all of them. In addition, people will be using different screen sizes meaning a very wide website can be cut off on smaller screens and a very small and narrow website can leave lots of empty space on larger screens. Responsive web design can help with this problem by allowing the website to adapt to different screen sizes however a reasonably sized website can be enough depending on what devices the site's audience uses to visit the site. More about web browsers

View websites with phones, tablets & other devices

Portable & Other Devices

There are many people also accessing websites from different devices such as phones, tablets and even TVs which usually have their own built-in proprietary browser but some also allow to install additional ones. The vast range of these portable and other devices makes it much more difficult to test and maintain consistency between all the possible browsers. Responsive web design can again help with these devices as a website can adapt to different sized screens but if good coding practices and web standards are maintained, your website will work on many devices as long there is a reasonable browser installed.

Goals & Benefits

Main goal of website

Goal of the Website

The main goal of the site can be thought of as the main action that you want a visitor to perform such as buy a product online, send an enquiry etc. to focus the design and content on helping visitors reach that goal.

For example, a site's goal may be to get people to sign up as members and therefore the content can provide benefits of membership and the design can help bring that content to life and make the signup button more prominent and therefore more likely to be noticed and clicked on.

Main Benefit

While the website goal can be seen from the perspective of the business and the website, the benefits take the perspective of the visitor or potential customer. The main benefit should be the main thing you expect your customers to get from going to your site such as buying the product they want, getting the support they need, finding the information they want etc.

For example, visitors may not necessarily want to go to a website to become a member but rather they want some sort of information or functionality such as a way to control their account, this is the main benefit they seek. This kind of functionality would require them to be members as only they would want to access their information and this ties in nicely with the example above of a site's main goal.

Benefits of the website to visitors

Additional Benefits

Additional benefits are ways that can make your customer's visit to your website more pleasant and enjoyable such as making it easier to do business with you, stay better informed about their order etc. Listing out all the benefits that you think would be beneficial to your customers will help you see what can directly affect the design, content and functionality of the website as well as help prioritise them to keep the project within your budget.

For example, an additional benefit could be to keep customers regularly informed of their account which in turn would lead to functionality decisions such as whether by text, email or another other method, design decisions determining how this will be presented and the content of what will be in those messages.

Site Structure

Main Pages

Having a brief outline of the structure of your website can help you better plan and write content for the pages and determine approximately how visitors should go through your site to reach the main goal. It will also give you an overview of how big and complex your website would be, giving a very rough guide of how much you should budget for. There are few pages that are present in almost any website however the pages should be specific to your business and should include only the ones you need.

Typical Web Pages

  • Home
  • About
  • Contact

Common Business Pages

  • Products
  • Services
  • Support

The main pages, such as the examples listed above, should form the main navigation which will allow visitors to get to the relevant page that they need. Other pages can be accessed depending on what page the person is on at the moment, making pages lower in the site hierarchy contextual so as not to complicate and overwhelm visitors with information that they don't need at a certain time. Keep the main navigation clear, simple and relevant with a limited amount of main links that are sufficient enough for people to reach other pages further down the hierarchy.

Example of a site tree structure

Page Content

When writing the content for an individual page, keep in mind the main goal and the benefits that you have already established, a particular page doesn't have to address every benefit or goal but it should at least address one of them to support the website as a whole. Refer back to the main goal and the benefits from time to time to check how well the page addresses both your business's needs and your customers' needs, this should help eliminate unneeded content and pages, making your website and therefore your business, more easily understood.

Remember to keep the site goal and the benefits in mind

A basic way to start content for a page is to list the main topics or headings to cover for that page which should help you write content point by point which then translates well onto the web as it makes it easy for people to scan the information on the page.

For example, a product page has the main topics/headings features, specifications and support. From there you can determine how much needs to be written for each part, what would be of most interest first to visitors, what should they also know, how can they get more information or help if needed, where should they go next if they're interested in the product and whatever else is relevant for the page.

Example of a simple page skeleton