How does a website work?

Posted by Brandon Line | Posted on 20-05-2010

Category : Web Design

Tags: , , , , , ,

Gone are the times when a website comprised static documents connected with fixed hyperlinks. The content of such a website could only be modified by a webmaster who either needed to be paid for each adjustment or in the form of a salary.

Nowadays a website is an Internet application ? a construction comprising the following 3 elements (layers):
1. graphic templates
2. scripts
3. content (both text and graphic)

Scripts are responsible for loading content from a database and displaying it through templates. The effect seen by end users is the so-called front-end. On the other hand, the administrative panel (CMS interface) is the back-end and it can only be accessed by the website?s administrators.

During website building process, a certain layout which has been previously approved and drafts of individual screen views (the homepage, subpages with content, contact form, etc.) allow the webmaster to create graphic templates. These comprise the HTML code and images embedded in it (e.g. background, logos, animated headings, dividers, etc.).

On the other hand, a programmer encodes algorithms, i.e. creates scripts whose task is to load the appropriate content (both text and graphic) from a database and place it in a template accordingly.
A website administrator uses the administrative panel (CMS) to enter the content into the database.

Below is a simplified diagram illustrating how a website works (arrows are the scripts):

layers in a website

The above diagram illustrates the basic function of a website, that is displaying pages with their content which is managed through a CMS. Most websites have many more functionalities, which are related to different additional processes (such as contact forms, registering users, newsletters).

Understanding the above simplified diagram is crucial with respect to how efficient our cooperation with the agency designing and managing our website is. Basic changes (i.e. in terms of content), such as adding a new subpage, editing text or publishing images can be instantly made with the use of the CMS panel. But more complex adjustments, e.g. such which require modifying templates and/or scripts, are quite time-consuming and must be made by specialists.

But more complex adjustments, e.g. such which require modifying templates and/or scripts, are quite time-consuming and must be made by San Diego advertising agencies or other specialists.

The process of building a company website ? part 3: Implementation

Posted by Brandon Line | Posted on 13-05-2010

Category : Web Design

Tags: , , , , , , , , ,


Previous parts of the article:
part 1: Planning
part 2: Choice of technology and contractor

Graphics

Decisions concerning the layout of the website, that is its graphic design and layout on individual screens, need to be made very cautiously as they are irreversible.
“Irreversible” might be too big of a word. The thing is that every new stage in developing the website is affected by what has been done previously. A late change in the customer?s decision requires going back one or a few stages and re-doing what has already been done. This can defer the whole process in time and might also mean additional costs for the client.

Usually interactive agencies send their graphic designs in the form of JPG files. It is very important to view them in the original scale (not resized). Software responsible for displaying images often reduces them in size automatically so that they fit in the screen. Such a view is distorted and misleading and should be changed to the actual size (1:1).

Display resolutions

Different computers have different graphic cards and screens of different sizes. Therefore, they operate with different resolutions, meaning their screens have different areas measured in pixels. Currently the most popular screen resolution is 1024×768 pixels. Some other popular ones are 1280×800, 1280×1024 and 440×900.
What does this mean for a website? It means that the same website will take up a different screen area depending on the computer where it is being viewed.

My blog area in different screen resolutions:

rozdzielczości ekranowe

1024×768, 1280×800, 1280×1024, 1440×900, 1366×768, 1680×1050
(excluded 175 pixels in height and 20 in width for browser navigation)

As a consequence we need to bear 2 things in mind.
First of all, we should never provide information in centimeters when preparing instructions for an interactive agency. Depending on the computer an identical element can have different sizes in relation to the external environment. Pixels are the key units of measure. Sizes can also be determined in terms of percentage in relation to other elements on a page.
The second thing is related to the width of a website. Websites are designed in such a way so that they could fit on a screen with even the lowest possible resolution (in a maximized window browser). A few years ago such low resolution was 800 pixels, now it is 1024. Because of this all there will be margins in all higher resolutions on both sides of the screen, which is a normal thing.
There is a possibility of designing a website in such a way that it automatically adjusts its width to the browser window. However, this carries many restrictions to the project and can usually be applied only for Internet applications (such as CMS), where user-friendliness is much more important than visual appearance.

Graphic design

The first thing an agency will deliver to its customer once it starts working on a project are 2-3 suggested versions of the graphic design based on the examples of the main page and a standard subpage. Choosing the desired version might be problematic as there will always be people within a company who will be dissatisfied with the new website. It?s a matter of taste ? there is no such project that would appeal to everyone.
It is a good idea to have a few people choose the final graphic design in order to split the responsibility.

Screen views

Once the agency receives their customer?s approval for a given project they start designing the individual pages of the website. The number of screen views depends on how many types of subpages a website will have and on the number of functions which were agreed on.
As an example I will again use a simple company website which I mentioned in the first part of this article when discussing planning a website?s structure. A possible list of screen views for such a website would consist of the following:

  • homepage
  • content subpage (default text and table formatting, galleries, lists of files for download)
  • list of press announcements
  • press announcement details
  • contact form.

Depending on how complex a website is there can be several or even dozens of screen images. Some most common ones are:

  • product catalogue – category list
  • product catalogue ? product list
  • product catalogue ? product details
  • search results
  • site map.

In some situations, e.g. when an exterior company is responsible for auditing the website?s usability, screens need to be drafted before the graphic design. Such models illustrate the layout of elements on each screen in the form of module frames.

Templates

Having accepted screen images the next step is to prepare HMTL templates. That is where the graphic designer?s job ends and the webmaster?s job starts. Webmasters are ?slicing? specialists since they need to ?slice? graphic projects into ?blocks? and then encode them. They are the ones who create CSS sheets which determine the appearance and formatting of all elements on a website, as well as add mechanisms (e.g. JavaScript) responsible for the templates? ?visual behaviour?, such as highlighting elements when pointed at with the cursor.

Agencies do not always present templates to their customers for approval. In fact, their layout is identical as the screen views which have been previously approved. Dynamic elements such as cursor behaviour, clicking options, possible animations etc. are the only new features in this case.

Mechanisms

A set of accepted templates enables us to proceed to the next stage where we deal with a website that is actually running. Programmers install the CMS on the server (usually it?s the agency?s working server, less frequently the customer?s) and integrate it with the templates. As a result a website with the basic functions such as navigation (menu) and content subpages is established.

The next step is to implement any additional functions. Each one of them needs to be tested by the Project Manager or Tester and then delivered to the customer for testing and approval.
However, taking the customer?s precious time into consideration, agencies very often decide not to send the individual functions to the customer for approval. They build the whole website and then present the final draft to the customer once all functions have been implemented.

Although the designer always tests the website thoroughly before sending the final version to the customer, the new website still needs to be tested meticulously. Not only because there?s a risk of small errors but because there will almost always be elements which do not function exactly the way the customer expects them to.

The test version of the website already contains an implemented structure of subpages but is empty in terms of content. Customers used to imagine the website in a static form might consider a site with no content to be incomplete and refuse to accept it and test it (in the past websites were built without CMS systems and only the webmaster could perform all modifications). However, entering the content is not always the contractor?s job. And even if it is the agency does this job additionally for the customer, to some extent.

Publishing

Once the company receives the website as a whole the agency has 2 more tasks to complete.
One is to deliver a CMS training for the company?s employees (including using the WYSIWYG editor, which is very important).
The second one is to move the website from the working server to the final one. This might seem an easy task but in fact it?s not. Internet servers based on one platform tend to vary in terms of configuration. As a consequence the website code usually needs to be adjusted accordingly. Sometimes adjustments need to be made also to the server configuration.
Moving the server poses fewer problems if the final server is to be in the web hosting provider?s data center. Such servers are usually standardized and the necessary adjustments do not require too much time, as opposed to the customer?s own Web server which is administered by the company?s employees. Here the agency may encounter serious difficulties and may perhaps need to spend even a week or two in order to make the necessary adjustments.

Content

If the content has been prepared parallel with creating the website as I previously suggested the entire website might be ready for use within a few days. Otherwise the launch might be delayed.

Preparing the content for the new company website is a very arduous task. What needs to be determined first are the sources of information, who are usually the employees in different company departments. Then the information needs to be obtained from them, which is a thankless job. One thing is certain: it is impossible to collect all the materials from company employees (especially those in other departments) in a short period of time without the full support of managers, perhaps even the CEO.

Let?s just assume that that we managed to collect all the materials. The information cannot be published in such form. First of all, most of it (e.g. product descriptions) is probably written in non-marketing language and second of all, the website should be uniform, meaning all contents should be written in a uniform style.
This in turn means that all content should be copy-written. This can be done by the marketer (usually it is so) but he can also assign this task to an interactive agency or a freelancer.

Due to the fact that the process of preparing the content is complex, as well as due to other factors which may influence the opening date of the website and which the agency has no influence on, the customer should not hesitate to acknowledge the completion of the job and accept the final invoice even before the website is actually published.

This is how we get to the long-awaited grand opening of the new website. The whole process lasted a few months but it was surely worth the wait.

The process of building company website ? part 1: Planning

Posted by Brandon Line | Posted on 10-05-2010

Category : Web Design

Tags: , , , , , , , , , , , , ,

Companies build their websites relatively rarely ? usually at the very beginning of their business activity and then approximately every 3-4 years depending on environment changes. By environment I mean technology (e.g. display resolutions), current trends (e.g. fashion for videos) as well as competitiveness because it is important never to stay behind competitors.
Moreover, also significant changes within an organization such as rebranding or major labour turnovers (a new Board of Directors or a new Marketing Department) often require the creation of a new website.

Due to the fact that this website-building process does not occur often, not all marketers are familiar with it. This makes the creation of websites, which are the basic tools of e-marketing, a unique opportunity.

Planning

The aims of a company?s website should be determined while creating a brief, which is an extensive query directed at an interactive agency. Because all decisions made at this stage should be noted down it is worth including them in a document which would have to be prepared anyway.

Planning a company?s website requires knowing the answers to the following questions:

What are the aims of the website?

A company website normally has a few aims. Some of the most common are:

  • generating new sales leads (attracting prospective customers)
  • building brand awareness (of a company or product)
  • sales (handling orders, possibly online payments, etc.)
  • post-sales services (technical support, complaints)
  • providing information about certain customer-related issues (e.g. within FAQ)
  • handling communication with business partners
  • extending the distribution network (by acquiring new sales representatives)
  • PR activities (publishing press announcements and texts for journalists)
  • managing the recruitment process (publishing new job offers, colleting applications)
  • carrying out statutory duties (providing information on public companies, publishing tenders)
  • managing any other processes which are typical for the company.

Who are the addressees of the particular content?

The key issue is to specify the target group, at the same time also possibly dividing it into sub-groups. This will influence all aspects of solutions which are currently being worked on. Not only do target users need to be listed (named), but they also need to be defined as precisely as possible in terms of their demographic features (such as age, gender, origin, education, income) as well as psychographic features (e.g. their particular Internet usage, decision making processes, etc.).
Sub-groups should be further described in terms of differences between them. Moreover, it is worth determining who the different types of content will be directed at.

What types of content will be published on the pages?

Although all modern websites enable their authors to freely modify the structure of the subpages, it is a good idea to design the structure of information at an early stage. First of all, planning the structure and determining the number of levels of web pages might prove to be helpful in designing the website?s navigation.
Second of all, planning the overall structure could help to predict what additional functions might also be useful.

Such a tentative structure can be illustrated in the form of an ordinary numbered list, e.g.:

1. About company
1.1. Mission
1.2. History
1.3. Management Board
2. Offer
2.1. Product Group A
2.1.1. Product A1
2.1.2. Product A2
2.1.3. Product A3
2.2. Product Group B
2.2.1. Product B1
3. Testimonials
4. Partners
5. Customer Service
5.1. Technical Support
5.2. FAQ
5.3. Complaints
6. Career
6.1. Career in the company
6.2. Job offers
7. Press Service
7.1. Press releases
7.1.x. Chosen release
7.2. Files to download
8. Contact

The easiest way to imagine the structure of a website is in the form of a tree. That is the reason why I suggest designing such a structure using Microsoft Office PowerPoint, namely the function to create hierarchies (?Insert SmartArt graphic? => ?Hierarchy? => ?Organization schema?).

structure chart

When designing the structure it is a good idea to communicate with those employees at the company who will be responsible for delivering information to particular sections of the website. Urging co-workers to prepare materials for the new website is one of the most difficult tasks in the whole process!

What functions should the company website have?

The basic functionality which a company website must have is simply displaying the main page and all subpages according to a given structure by means of a given navigation (menu).
All other mechanisms are additional features which need to be described thoroughly in order achieve the desired effect.
Some examples of the most popular additional functions are as follows:

  • forms processing (contact or complaint forms)
  • news (displayed in chronological order)
  • product catalogue (product base according to a given hierarchy as well as the corresponding database)
  • self-promotional banners
  • sales network in terms of regions (e.g. navigated by a map)
  • internal search engine
  • user management (areas restricted only to logged users)
  • newsletter
  • price calculator
  • handling particular processes (orders, complaints, recruitment, etc.)

What are the guidelines for the website layout?

It is of utmost importance to remember that a marketer does not design a website for himself ? the new website must be functional and attractive for the target users. On the other hand, however, the marketer?s superiors are most likely to judge the website subjectively and the author should also be satisfied with their own work. The conclusion is to have a number of people judge a project visually. At the end there always will be people unhappy with the website?s appearance but then at least the ?fault? can be spread across all parties.

The designer?s scope of action and freedom is often determined by the corporate identity and can sometimes be clearly defined in form of a code book (or brand book). In other cases one will need to collect many materials, such as leaflets, folders, adverts and presentations, which can all be used as reference.

However, the website designer should not be given too much freedom. The less precise the requirements for the project?s style and character, the longer it will take to prepare the proposed versions of the layout.
In order to avoid this one should include in the brief some links to websites which could serve as positive examples. Here the aim is not to encourage graphic designers to plagiarize ideas but rather to demonstrate the possible features of a project similar to our expectations.

What should the website management be like?

Most companies, especially small and medium ones, have only one website administrator ? usually a young employee in the marketing department who either agreed or even asked to become the admin, often unaware of what awaits him or her.
The admin receives orders from different departments and makes appropriate changes on the website. He?s the one that gets the blame for the lack of new information, whereas he usually has no real ability to obtain the necessary materials from other co-workers.
More extensive company websites usually have more administrations, e.g. the PR department is responsible for the press section, HR for publishing job offers and Sales for information directed at the company?s business partners.

It occurs quite often that in spite of applying CMS (Content Management System), which is very use to use, a company decides to have their website administered by a third party. Sending e-mails to the agency which designed the website with respect to the content and information needed to be published relieves the company?s human resources from these tasks. It also ensures that the content is published as soon as possible ? suffice it to say, who could administer a website better than its authors?

Information architecture?

Designing the navigation, determining the order of contents on each page, minimizing the number of clicks, redirecting users to the most important information ? these are also the elements which need to be well thought out at the design stage. But they are the website designer?s tasks ? meaning they apply to his part of the designing process which can be commenced once the agreement is signed.

This article continues in the second part – “Technology and contractor choice“.