What Every Website Needs

By Brock Atkinson in Digital

Websites need…

Technically, only a couple of core components are required for a fully functional website.

When we explained what websites do, it included a brief discussion about how we require the combination of a correct technological implementation alongside creative content. This article is a continuation of that, but specific to the absolute barebone essentials of a basic website.

purpose

It might seem simple, but if investing time and money into a website, an underlying goal guides the entire effort. Building a website because “everyone else is doing it” is not enough, and your website will suffer as a result.

The more specific a website’s direction, the easier it is to measure multiple metrics such as customer engagement and return on investment. Without an obvious objective, this information becomes nearly impossible to discern because of its signal-to-noise ratio imbalance.

Many major web companies write their “mission statement” on their about/company pages. Here are some real-world examples:

It should be mentioned that Google, Twitter and Facebook are tools that people use to get what they want – information, communication, connections. Your website will likely exist in an entirely different context, with an entirely different audience with entirely different problems. The principles stay the same, but the mission must meet its market.

Often, to help flesh out our understanding of who will be using our products, companies create “user personas”; archetypes that represent certain segments of a target audience. This attempts to answer a few questions: who are they? what do they want? what motivates them? what annoys them? why would they visit, or sign up, to your website? how did they find you?

Once this research is completed, the team should have a much better idea of what they want – and more importantly, don’t want. Then, when work begins, every element that cannot be justified in regards to the site’s objective(s) should be removed.

a name, and an address

Websites have to live somewhere too.

To keep a website running, someone must pay for the following:

  • a domain name (e.g. “jaz.com.au”)
  • server space, with its own “IP address”

When we type a domain name, our browser uses this URL to query a special program called a DNS (i.e. Domain Name System), which is not unlike a business/phone directory, but instead of looking up a name and finding a phone number and address, it looks up a domain name and returns its Internet Protocol (IP) address (e.g. “23.225.89.115”), which represents a physical computer on the internet.

When a server sees a request, it immediately begins processing queries and starts sending the appropriate files. When the client computer has downloaded the core code, the browser begins constructing and rendering the page.

In fact, when one ‘visits’ a website, they’re really just downloading its code and interacting with a local instance of it. Sometimes, websites will dynamically interact with servers to continuously stream data (Google Maps does this when you pan or zoom, for instance) – but the process is pretty much the same: everything is downloaded onto your computer first, then drawn onto the screen.

per-page titles

Within a web document, there is an element called the “title”, which is displayed within the tab window. Note that this has nothing to do with the page’s content itself; it cannot be found on the page, but rather describes it.

jaz-tab-title

The title is displayed in the tab. Next to it is the “favicon”, which is not required, but helps your site stand out from the rest.

Even though this is not really required, you will want one because by default, titles display their URL – for instance, instead of “JAZ Design & Marketing”, the title becomes “jaz.com.au”.

This text is incredibly important, as it’s used in every major search engine’s ranking algorithms as the primary indicator of what a web page represents. Because of this, it’s advised to focus on a series of key words, although ideally some of those words will be part of your business name itself (i.e. “JAZ Design & Marketing” includes our two main keywords: design, and marketing).

a head

Web pages have both a “head” and a “header”.

A web page’s “head” is simply code that describes dependencies and structure (for instance, the “title” is included in the head, but it also might include information about language, references to style sheets, links to related pages, constraints for mobile devices, and so on). While websites need this, it’s best to talk to an experienced web developer about your site’s specific requirements.

On the other hand, a “header” is the topmost visual container of a web page – generally, they follow the same structure across an entire site, but minor adjustments may be made on a per-page basis (for instance, your navigation should highlight what page you’re currently on).

Your header might include the following:

  • logo
    • generally, these images link back to your home page
  • navigation
    • with current page link highlighted
  • contact information
    • social media icons
    • click-to-call telephone number
  • page headline + graphics
  • other important information
    • e-commerce sites can show how many items and how much money is in the current cart
    • social networking sites show unread notifications

a body

Content includes text, headlines, media, links, and any designed elements that make up the page.

It is worth mentioning that search engines use tools called “web spiders” to download and read your page, which is inserted into an index that can be queried later. Depending on the words used (and a host of other factors), your site might rank on the first page for your key word, or never be seen.

To take advantage of this, a lot of older websites used to include a list of invisible key words in their page. However, companies like Google employ incredibly intelligent engineers who are able to filter and even punish websites that do this.

Sometimes websites include blog sections which operate slightly differently than regular pages. In that case, you might want to include:

  • post date
  • author name / info
    • often, the article footer will include an author biography
  • post category, and/or tags
  • comments
    • if you’re hosting comments, you must include a way to input comments
    • comments can breath additional life in a blog – in fact, comments can be more valuable than the articles themselves

At the end of each page, a website will tend to have consistent footers to deal with the users that get to the bottom of your page without clicking anywhere else. This is a good place to provide a virtual “hook” that causes your visitors to continue reading, rather than leaving.

Some things you might want:

  • copyright information
  • a privacy policy
  • e-newsletter subscription form (to gather visitor emails)
  • “go to top” button
  • contact details, such as social media icons

fallbacks and failsafes

Sometimes, someone will insert an incorrect URL and your website won’t be able to show them what they expected.

There are a plethora of different errors that browsers can produce, but the most common code is a “404”, or “not found” error. This is returned when one tries to access a resource that, for whatever reason, doesn’t exist.

You will want a dedicated 404 page that should be fast to download (so keep images, styles and scripts to a minimum). It should clearly describe that something unintentional occurred, and provide a method for them to find what they wanted.

Let’s look at 404 page examples (all links open in external tabs):

Note that all of these pages provide an additional, personalised company-specific connection with customers who found themselves lost. Many are funny and light-hearted, but clearly explain that “something went wrong” and provide either a search bar or navigational elements in order to better retain visitors.

Conclusion

Web browsers are incredible tools; often composed of over millions of lines of code, they generate an active runtime that can be analysed and processed in real-time via scripts. At the same time, stylisation engines can display nearly anything imaginable. However, these are mere additions that can improve websites; technically, they are not necessary.

At the end of the day, web pages are documents. What matters most is its words.

Choose your websites’ words carefully.

[sgmb id=1]

Leave a Reply

Your email address will not be published. Required fields are marked *

[contact-form-7 404 "Not Found"]