Building the Modern Website: Part 1 -- Fundamentals

This is part one of a series in Creating the Modern Website: You can find part zero here, which outlines the goals of the series and materials that I'll cover. This part covers the fundamental elements of modern websites and how they differ from websites designed in the past.

Many sites still visible on the web are archaic, old designs. They are unpleasant to look at, unpleasant to use and most of the people who come across them think "when was this made?". Perhaps rightfully so. They can have actually been designed 10+ years ago, or simply have been designed in recent years but with the techniques of 10+ years ago. This includes sites made by so-called professionals, and by "{$relative}'s kid".

It is difficult to gauge a developer's skill without having a particular type of expertise, and most certainly without looking at things they have built. Part 3 of this series will show you what to look for, while Part 2 is a necessary divergence into the wilds of software licensing and security.

The central reason for having a website is to inform your audience about you. Everything else is built on top of that, and without the desire to do that, a website serves no purpose.

In service of your goal, these are things that a website should do:

• Provide your online presence with an anchor

  Facebook pages and twitter feeds are useful, valuable tools, but it is far better to have a web presence that you control, and that you can customize with your look and feel too. You can also customize your site to attract search engines, so that your user base can find you when they type your name or products into a search engine

• Provide a place where users of your products or potential users of your products can find you.

  If you do not sell products online or are a business that doesn't sell permanent products (such as food) your online presence is still of critical importance. To some people, if you're not online you don't exist.

  Different members of your online audience respond to different things: some people pay more attention to twitter rather than facebook for example, while others prefer the reverse. Some members of your audience may prefer an email newsletter. Depending on the scope of your site and the nature and tendencies of your users setting up a forum may be worthwhile.

• Help people find you:
  • Contact information so that your audience can reach you.
  • For a business that relies strongly upon a physical presence or storefront, it will contain maps and directions, as well as other information such as hours of operation.
  • Businesses which sell products provide information on where those products can be found if they do not operate an online store directly

To accomplish those goals, you may want to incorporate interactive features. But first, you must consider the scope of your site.

Scope of the Work

If you have a site, take a second look at it. Now you need to decide: what do I want to do with this?. If you don't have a website: keep reading anyway.

A simple redesign

If you already have a site: how dated is the content? If it is accurate, but the design is old, then you will likely want a modern design. Something that:

• looks clean, and is pleasant to look at ( this means no clashing colors and black-on-grey text )
• high-quality graphics (you'll want to start with a crisp copy of your company logo fro-+-m a vector graphics file)
• a well-chosen color scheme
• has consistent visual elements and lines

Unless you have the expertise in-house, this will require hiring a designer of some sort. This is outside the scope of these articles, but I've left some useful references at the end of the article. When you have decided on a design, it is likely that you will want to revise the content to fit within the new design.

More complexity

If the content is out of date *and* the design is dated, then you'll want to do as above in addition to reworking your content. As I've said before, a website should be able to inform people about you and what you do. Before doing any rework, the scope of the site needs to be carefully-considered. Devoting a great amount of effort into developing features which are unlikely to be used wastes resources that could be spent elsewhere and makes your site look 'dead' to the visitors it gets. For that reason -- unless you already have a large online presence -- it makes the most sense to start small.

The website as software

I am a software developer. This means that I look at websites as more than just text, graphics and colors. I think of them as software, and bring software development techniques to building them. I look at:

• design elements: boxes, lines, colors, regions of the page
• content: text, headers, images
• interactivity: how a viewer of the website interacts with it, and uses it to find information of value to them

The bad news is that today, people expect more from your site.

The good news is that the tools to give them interactivity and engagement are easy to use and simple to understand.

Having Interactive Elements is what defines the modern site. The extent of the user interaction in websites made 10-15 years ago was limited to clicking around, occasionally answering a Javascript popup or Java applet, and searching using primitive search engines like Altavista, Webcrawler, or Excite. I say without reservation that any modern site must have some measure of interactivity in order to engage users. This can be something as simple as a signup form into which the user can enter an email address to subscribe to your newsletter. Or it can be as comprehensive as a fully-featured social networking site with forums, messaging systems, chatrooms, and groups centered around common interests.

I would highly suggest that you use both version control and a defect tracker of some sort in building the website and during its deployment. This is called change management and will help immensely.

Moreover, software is never complete: there is always a drive to add more features, to ferret out defects, and improve the usability, speed and security of the software. The same is true for your website. I can guarantee there will be a high probability you will wish to add features in the future as you find new was to interact with your audience and use it as a tool to draw attention to your company.

Interactive Features

This is not a complete list, but only a general guideline. I would consider anything that the user can take action on other than read passive content to be an Interactive Feature. This can include form submissions, or interactions with you or other users of the site.

• Sign up for our Newsletter web form
• Web-based Forum system for product or service discussions
• Contact Us web form
• Commenting system for site visitors on page content
• Login system that lets a user keep an account on the site
• Social networking features, or social network integration

Expertise you Need to Build

If you don't have someone familiar with modern web design techniques, it's best to hire someone with verifiable, proven skills who is proficient in the platform that meets your needs, or who has the expertise to assist you in choosing a platform. The process of building the site may involve multiple people (as one person will likely not have all the necessary skills) but it is best if one person is in charge of actually producing the end product who is accountable to you.

• Knowledge of website usability, website navigation
• How to produce a clean,modern nice looking site design or template
• Turn the website design into a site with manageable content so that it is possible to add new content in future
• The ability to choose a platform, and deploy the fully-functional site to that environment
• Access to a version-control system where the site's source code is stored every time that it is changed

Expertise you Need for Maintenance

This expertise can be acquired by hiring someone to do it (whether as an employee or on a contract basis), or by training your employees to do it.

First, the basics:

• Knowledge of HTML, CSS, basic Javascript
• Basic knowledge of website aesthetics
• Basic proficiency editing graphics, along with appropriate software
• The ability to administer and monitor the site on a regular basis and ensure that it is operational at all times. This also includes fixing any problems that may arise, and to coordinate with the team in charge of keeping the website's server running
• Knowledge of how to use the version-control system that was implemented so that a history of site changes can be kept

If your website has interactive features that go beyond just a simple "sign up for our newsletter" function, you will want more expertise available. If you lack this expertise in-house, it is likely best to keep the developer who built it able to maintain it once the initial version is deployed.

The skills necessary will depend upon the scope of those features, but in general:

• Knowledge of the programming languages available on the platform you've chosen
• More advanced knowledge of javascript and any javascript libraries you're using
• The ability to manage the architecture of the site, and build on what has already been done without making a mess of it

This is the end of part 1. Part 2 is entitled Software, Source, and Security. Part 3 will cover web applications in more detail. As usual, if you've read this please leave a comment. Feedback is appreciated, as well as questions about the material covered within.