Site Planning

The importance of site planning can never be over-stressed, in this article we’ll take a look at the fundamental basics that goes into successfully deploying a website – whether it is a 4 page basic portfolio website or a 50 page news site the same rules apply.

Those who fail to plan, plan to fail – Winston Churchill

The core functions of structurally planning a website are to minimize costs, ensure Brand Identity is enforced and that the website and marketing strategy of the company are seamlessly connected.

What is Site Planning

Site planning is the systematic and documented process implemented to determine core structure of a website. Elements to consider while planning a website are:

  • Design
  • Usability
  • Technology
  • Target Audience
  • Content
  • Organizational structure / Site Map
  • Interactivity / Functionality
  • Navigation
  • Call to action

Design – Site Planning principles

When designing a website a definitive focus has to be maintained on the purpose of the website. A regular blog differs completely from an e-commerce site for example.

An e-commerce site is purposefully designed to fulfill one basic requirement, sell products. A blog web site is solely to document information and get readers to read the articles.

A website for an online store would rather have a product catalogue and search function under various categories. Visitors can navigate with ease as they add items/products to their “cart”. When they are done, they just proceed by clicking a “check-out” button which serves as a payment gateway.

Visitors can complete their entire month’s grocery shopping from the comfort and security of their own homes. These sites normally also incorporate a delivery feature. There are cases where one would have to arrange that with a recommended service partner.

A company like Picup in Cape Town delivers this service to great effect. Their services are normally included in the price of partner companies. However their services are not limited to partner companies. It can also be utilized for non-partnered websites. This does however have it’s drawbacks as people in general are not that tech savvy.

A blog or News website on the other hand has different news categories and rely heavily on regular content updates – news has to be relevant. Such websites employ a membership registration which gives members access to premium content.

Site Planning – User Experience U/X

A website has to be easy to use and navigate. Studies have shown that if a site takes too long to load, people will just leave before even reading anything. We call this the bounce rate. Slow speeds are not the only factor influencing bounce rates. Another big factor is whether can easily find what they are looking for on a website.

If someone on an ecommerce site searches for something you might sell but can’t find it, then this personal will leave your site and move on to the next one.

In truth, isn’t speed and real-time business the reason why someone would visit an online store? If your website doesn’t satisfy the basic need that lead to the visitor being on your site, can you blame them for leaving?

Usability also refers to the ease with which people can navigate your site. If someone is looking for your business’ physical address and contact details, would they be able to find it immediately? If they wanted to see and/or contact a head of a certain department directly, would they be able to do so quickly, effortlessly and efficiently?

Your website is the online presence of your business. If your website solves common queries from customers with ease and saves them time and money, then you have a good website.

Technology

What technology stack are you implementing? Is it just be a static HTML, CSS and jQuery website or are your needs such that you need is dynamic CMS powered ? A CMS or Content Management System enables you to update and add content on an on-going basis without ever concerning yourself with the source code?

What is a static website?

A static website is a website that is designed to be just that, static. You will not be able to add, edit or remove content without physically digging into the code. One can almost think of this as a digital flyer that gives a simple description of your business and it’s product or service. This also includes a simple contact page with a contact form for visitors to get contact the site owner.

What is a Dynamic website?

A dynamic website on the other hand is powered by a Content Management System or CMS for short. Such a system allows the site administrator to add, edit or remove content from a back-end control panel. The backend scripting language dynamically renders HTML and CSS. In other words the CMS creates this code on the fly. A web developer designs a template that defines the parameters for the dynamically created code . ┬áSome of the most commonly used CMS’s are WordPress, Joomla and Drupal.

Target Audience

Define your target audience, a website for Nickelodeon and a website for Supersport will obviously have vastly different audiences. This will influence many other aspects of the website like the color scheme, content and structure.

Create content that is target specific and which will thoroughly engage your prospective visitors. You have to do the necessary research to ensure you keep your audience engaged and returning to your website.

For research people tend to visit sites like WIKIHOW and WikiPedia. It is perfectly fine that these websites are loaded with copy which people read on various subjects.

A website on movies however will be far better off with trailers of upcoming releases for people to view. A portfolio website for a photographer for example will showcase his/her best work in a photo gallery.

Always determine who your target audience is, what devices they are most likely to use to navigate your website and what would be the best structure to showcase the content for your visitors.

Content

The saying goes content is key and there is no area where this is more applicable than in web design. People visit your site for various reasons, but each of those reasons are because they want to know something or see something.

Define this to the tee, you don’t want people to have to read through chapters of text when you could’ve displayed everything with a simple image and caption.

Structure content logically and methodically. Create a process flow that leads visitors to the sale you want to make.

Intelligent UI/UX design is of such nature that the visitor doesn’t even realize that he was guided to arrive at a certain destination on a website.

It should be intuitive, the next step for a visitor should be expected and the result as was expected. The moment people feel out of their depth with any CTA or form on your site, they will bounce off and onto the next competitor.

Organizational structure / site map

Organizational Structure

A large site will have a folder for News. This folder will contain sub folders of various categories, like Political News, Economical News and Financial News. This would also indicate that the various categorical news files are children of that category. This greatly improves SEO as search engines index a website according to it’s site map.

Site map

It is best practise to ensure your site map follows the guidelines set-out in your organizational structure. Site mapping goes further than just organizing your files and folders. It also sets the guidelines along which you will build your site navigation.

Create a sitemap. It makes it much easier to ensure that navigating a website is both logical and easy. You don’t want a visitor feeling lost on your website. Always ensure a visitor can access any part of your website from anywhere else, that it is easy and makes sense.

Defining a site map and indexing for search engines is a basic rule of thumb for SEO, also always include a link on your site where people can view the actual site map for your website. This way people can view and understand how to navigate the most complex websites with ease and confidence.

Interactivity and functionality

This is relates to both your technology stack and your target audience. Let’s say you incorporate the most amazing jQuery image slider. Normally this would look awesome in just about any browser – as long as the person visiting your website doesn’t have java disabled on his/her device. In that case then all the visitor sees is a grey box with a message : “This plug-in is not supported”.

You as owner or designer know why this is happening and that all the visitor has to do is enable java, but this does nothing about the fact that the visitor might not know this and might consider the web designer of the specific website to be below par – in truth, such a person is not far off.

If you know that your target audience will visit your site with state-of-the-art devices and that 99% of them will have java functions enabled, then this wouldn’t be too much of a concern. If, on the other hand you know that most visitors to your site will have slow data connections or out of date hardware, rather curtail this possibility by just using a basic HTML and CSS only image slider.

Navigation

As mentioned earlier in the article in site-mapping navigation is of utmost importance. Keep it simple.

Navigation should also be methodical, it should guide your visitor towards the end goal that you wish to achieve on the site. If it is an ecommerce website the process flow of your structure and navigation should ensure that a person’s last ‘click’ is something like ‘complete purchase’.

Call to Action

In essence, this is what it is all about. To Call the visitor to complete a desired request from the website. Surely if you have an online business and all you are doing is showcasing your products in a product list directory, then your business would fail miserably, after all, it is an online business. So your call-to-action applicable to such a site would be to call the visitor to make a purchase.

The landing page might have cta’s that lead the visitor to different categories and once in that category of listed items, each item will have it’s own cta. Sometimes it might even have two or three cta’s.

One with “read more” which might bring about a pop-up box with more info on the product, another might say “add to cart” and this allows a visitor to add numerous items to a shopping cart, another might read “purchase now” which immediately upon clicking relays a visitor to a payment gateway.