The Fundamentals of Website Design and Web Development Process

Your website is basically the heart of your successful digital marketing. It’s your web home, a shop window over which you have full control and the first place your target audience stop to learn more about you. Creating your online assets always involve these three processes: planning and design, which create the appearance, layout and style that users see, and development, which brings this imagery to life as a functioning web tool. Your web design or web development always should follow this path too.

The fundamental principle of good web development and web design is to understand your users: the people who will actually be using and interacting with your website. What are they looking for? What are their objectives? Your offering must have user experience central to the process.

With web design, you create all the visual aspects of such interface inclusive of the layout, colour scheme, images, logo, type, design elements like buttons and links as well as any things else that can be seen by users. Since your website is a visual medium, it’s very important you make it engaging and effective with the capabilities of meeting business objectives.

You Need To Persuade and Influence With Your Design!

The design of your website which is your web’s visual interface is what your web users see and interact with. It’s where all the hardwork you invested into developing your website is being visualized by users, where your site will be first judged and what determines subsequent delightful experiences users will gain from your business.

Eventhough the appearance of your website matters, its design is not just about aesthetics but about the visual clues you give to users so they know what to do next. It assures your web visitors of your credibility and ability to answer their questions, and turns them into customers.

A great web design should incorporate your visual identity. Your visual identity answers the question: “How do users know it’s you?”. Your brand design elements should be carried throughout both your digital assets and traditional assets including prints and traditional communication media, starting with your logo.

Your logo is the most prominent approach to reinforce your brand identity on your website. The primary font is typically used for prominent headings on the site, while body copy is often set in a standard web font that closely matches the primary font. Menu and button style, as well as icons, are also part of a site’s visual identity.

Some Basic Website Design Concepts You Should Know:

• The Fold:

This is the imaginary line at the bottom of the monitor that divides the immediately visible part of the website (content above the fold) from the part that is visible only after scrolling down (content below the fold). Your most important message, content or Call to Action should usually be placed above the fold. It is worth mentioning here that the concept of above the fold has come across some scrutiny, because it is not always useful.

• Consistency:

Consistency in use of visual elements is vital to your online presence – across all your properties and channels (such as your email newsletter, Facebook page and mobi site) – as users do not perceive differences between platforms or even on- or offline. They perceive it as one message on multiple touchpoints. Within a website, elements should also be consistent. Colour coding, or colour themes, can be used very successfully to group areas or features on a website. For example, if the help button and help navigation are coloured yellow, then the user will quickly associate yellow with support and assistance. This is another useful shortcut to making the site usable and intuitive.

Figure: A website showing Consistency in Colour Themes

• White Space:

Spacing on the page allows the eye to travel easily between chunks of information and allows scanning. This can be done by using what is called white space. This space is not necessarily white, but instead is merely empty. It refers to the space between elements on a page. Always steer clear of cluttered pages. This is especially true for landing pages, where a very specific message is expected. Make your pages as simple and easy to understand as possible.

Figure: A website showing typical white spaces in between contents both in white and black background

• Colour:

Colour has an incredible psychological effect on people. Based on our culture, preferences and learned cues, people interpret colours in very specific ways – and this can be used to inform and steer the user’s experience. Colour theory online refers to the principles of combining colours to attract people toward your brand and its offerings (Focus Designer, 2012). Most of the colour choices will be dictated by the CI, but tones and shades will be selected by the designer.

Contrast is very important when displaying text online. If the text and background are the same colour and there is no contrast, this means that the text will not be readable. Best practice is to use a light background colour and a dark colour for the text. Black text on a white or light grey background works well. Contrast is also a good way to draw your reader to and differentiate between different aspects of the page. Colours also hold different meanings and associations for people. Ensure that you know these meanings for the audience that you are targeting – for example, red signifies luck in Asian cultures, but danger in many western cultures.

There are some colour-related web design conventions you should follow:

• Red is used for warnings, error messages and problems.
• Green is used for successful actions, next steps and correct submissions.
• Blue is best used for hyperlinks.

Your Call to Action is one of the most important parts of your website and can be displayed as a link or button. As this is meant to attract the eye, choose a colour that stands out.

Figure: A Typical Color Wheel Illustrating Color Theory and Psychology

• Fonts:

Copy conveys your brand message to your client or customer and should be easy to read and search engine friendly. The CI is expressed through fonts, also known as typefaces. Typographic layout can draw attention to the content users should see first. Indicate which pieces of information take precedence. Importance can be signified by text size, colour, weight, capitalisation and italics. Placement also contributes to how important text appears.

Some fonts are common to all computer users. These fonts are known as websafe fonts. Anyone accessing websites that use these fonts will be able to view them as the designer intended and search engines will be able to search these websites easily. Fonts that are not web safe may appear very differently on some computers. Designers don’t always like to be limited to using only web-safe fonts, and brand guidelines in most instances don’t take web-safe fonts into account. This means that fonts must be embedded by a developer using tools such as Typekit, or alternative fonts need to be selected.

Examples of WebSpace Font:

• Arial Comic Sans
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet Verdana

Now, Let’s Talk About “WEB DEVELOPMENT” Process

Web development is the process of taking finished web designs and transforming them into fully functioning, interactive websites. Development is what gives life and movement to the static designs, and enables users to access the website through their web browsers. This is done by translating the designs into webcoding languages that can be interpreted and displayed by web browsers.

Learning to code your own website is not in the scope of this post and requires years of practice and some considerable technical know-how. But this post can teach you to understand the aspects that go into creating a website, the process that should be followed, and how to help in making key choices about your website.

When developing a website, you need to make three key decisions (don’t worry, I’ll explain each one below):

1. Should your website be static or should it have a content management system (CMS)?
2. Which server-side language should be used?
3. Which front-end language should you use?

Question 1: Static website or CMS?

A static website, as the name implies, is one that does not change often – other than the occasional update, the website stays the same over time and no new content is added. Should new content be required, a web developer would need to add it.

CMS stands for content management system. A CMS is used to manage the content of a website. If a site is updated frequently and if people other than web developers need to update the content of a website, a CMS is used. Today, many sites are built on a CMS, which can also allow content of a website to be updated from any location in the world by signing into an online management interface for the CMS.

There are three types of CMS you can choose from:

1. Bespoke:

This is a CMS that is built specifically for a certain website, and many web-development companies build their own CMS that they use for their clients. This option is highly tailored and customised to your website, and can be more expensive than other options. It is also possibly less flexible.

2. Off the shelf:

A CMS can also be pre-built by an external company or developer. These can be bought like any other software on the market. While this may have fewer custom features, it’s potentially a more costeffective option than a bespoke CMS.

3. Open source:

There are many open source, pre-built CMS options available, some of which are free. Open source means that anyone can see the code that the CMS is built with, and can manipulate or improve it (and share this with everyone else using the CMS). An open-source CMS can be more rudimentary than paid options, but is also easy to tailor to your needs, and there is often a community that can create the solutions you need.

Some widely used open-source CMS solutions include:

• WordPress (wordpress.com)
• Joomla (joomla.org)
• Drupal (drupal.com)

A CMS should be selected with the goals and functions of the website in mind. A CMS needs to be able to scale along with the website and business that it supports, and not the other way round! Of course, the CMS selected should result in a website that is search engine friendly.

Here are some key features to look out for when selecting or building a CMS:

1. Meta and title tag customisation: The CMS should allow you to enter your own meta tags for each page, as well as allow full customisation of title tags for each page.
2. URLs: instead of using dynamic parameters, the CMS should allow for clean URLs by using server-side rewriting. Clean URLs consist only of the path to a webpage without extra code (a clean URL could look like this: http://example.com/cats, while an unclean URL could look like this: http://example.com/index.php?page=cats). It should allow for the creation of URLs that are:

• Static
• Rewritable
• keyword rich

Be careful when building clean, descriptive and dynamic URLs from CMS content. Should you use a news heading (‘Storm’, in this example) as part of your URL (http://www.site.com/cape/storm) and someone changes the heading to ‘Tornado’ (http://www.site.com/cape/tornado), this will alter the URL and the search engines will index this as a new page, but with the same content as the URL which had the old heading. Bear this in mind before adding dynamic parameters to your URLs.

3. Customisable navigation: a good CMS will allow flexibility when it comes to creating the information architecture for a website. For the purposes of adding additional content for search engines, a CMS should not require that all content pages be linked to from the home page navigation. This allows content to be added for search engine optimisation (SEO) purposes, without adding it to the main navigation.
4. The CMS needs to have good support for managing SEO considerations such as URL rewriting and avoiding duplicate content issues.
5. Customisable image naming and alt tags for images: a good CMS will allow you to create custom alt tags and title attributes.
6. txt management: ensure that you are able to customise the robots.txt to your needs, or that this can at least be managed using the meta tags.

Finally, using a CMS that supports standards-compliant HTML and CSS is very important, as without it, inconsistencies may be rendered across various browsers. It also ensures faster loading time and reduced bandwidth, makes mark-up easier to maintain, supports SEO efforts and ensures that every visitor to a website, no matter what browser they are using, will be able to see everything on the website.

Question 2: Which Server-side Language Should You Use?

Server-side languages are the ‘hidden’ web coding languages that determine how your website works and communicates with the web server and your computer. The most popular server-side framework for each language is also discussed. When choosing a server-side language, you need to consider:

• Cost: The cost varies depending on the language you choose for your web development project, as the language chosen directly influences the salary of the developer. If information is processed where your website is housed, as opposed to on the client’s computer, it increases the costs. Some languages also require on-going website management and maintenance, which is an additional cost to consider.

• Scalability: When planning a project where scalability is a factor, consider whether there are developers readily available to develop in this language. Also find out if there are supporting libraries and frameworks available that suit your project. Some of the most common and popular server-side languages include PHP, Java, Ruby and the .NET languages. Ask your web developer to advise you on the best language for your specific project.

Question 3: Which Front-end Language Should You Use?

Web users have come to expect rich, interactive experiences online, and interactive website interfaces are a part of that. Front-end languages, or “client-side” languages, are languages that are interpreted and executed in the user’s browser rather than on the web server.

These experiences range from simple animations through to highly responsive interfaces that require input from the user. There are several technologies available to create such experiences, each with its own opportunities and challenges. As with server-side languages, you need to consider a few properties of the frontend language you want to use. Bear in mind that server-side languages and frontend languages are often used together, as all web projects require front-end languages for development.

• Cost: Front-end language development costs are relatively low.
• Features: HTML, CSS and JavaScript are open source languages often used together and are compatible with most hardware and software. Content developed in these is also more search engine friendly. Flash is known for its video, animation and interactive multimedia capabilities. In many cases, similar results can be achieved with HTML, CSS and javaScript. Flash can be used alone or in conjunction with other languages. What your end users will be able to view should always be the most important consideration.

• Scalability: Depending on the capabilities of the device executing the language, certain features may not be available or certain code may run too slowly to create a good user experience. The front-end code needs to take all the considered devices into account.

• Browser and OS support: With front-end languages, you have to cater for browser and operating system support. A website will look different on each browser and operating system and this needs to be factored in. If a feature cannot be displayed under certain conditions, work-arounds have to be implemented.

• Open-source or proprietary software: Any developer can create addons for or improve on open-source software, while proprietary software is owned and its use is restricted. It can be cheaper to develop in an open-source front-end language such as HTML, but as HTML is needed to host all web pages, combinations of the two are sometimes used. In most cases and for the languages we cover, however, this is not a major consideration.

There are several options to choose from when it comes to front-end languages, although the most popular by far are HTML, coupled with CSS and JavaScript.

1. HTML5:

HTML is the language for creating websites and HTML5 is the fifth iteration of the language. It is also the name for a range of technologies that enable modern web browsing features. It’s a specification published by the web standards body (W3C) describing what features are available and how to use them. HTML5 is different from proprietary web software such as Adobe Flash in that the specification is the result of contributions from many organisations, and can be implemented by anyone without having to pay for royalties or licensing fees. You do, however, pay for the development tools provided by the companies.

HTML5 allows browsers to play multimedia content without the use of Flash or a similar plug-in. There is also a technology called Canvas, which allows developers to create rich interactive experiences without the constraints that came with previous versions of HTML. For example, a 3D animated video can now be played – something that used to require the use of Flash or Silverlight. The goal is a website that just works, without the need for particular browsers or plug-ins to enable certain functionality. To this end, having a standardised way of implementing common features means that the web is open and accessible to all, regardless of competency.

2. CSS:

CSS stands for Cascading Style Sheets and is a style sheet language used to instruct the browser how to render the HTML code. For example, the plain text on a web page is included in the HTML code and CSS defines how it will appear. CSS can set many properties including the size, colour and spacing around the text, as well as the placement of images and other design-related items.

3. JavaScript

This is the most common client-side language used to create rich, dynamic web properties. Because it is an open-source language, many developers have added functionality that can be more quickly implemented. For example, there are over 1 000 different gallery systems created by JavaScript developers for JavaScript developers.

4. Flash

Adobe Flash is a language for creating rich, interactive experiences. It supports video, and is often used to create game-like web experiences. Although widely supported by desktop browsers, it has limited (and lessening) support on mobile devices, and is not usable on Apple devices such as the iPhone and iPad. It has a history of being problematic for SEO, although there are ways to work around much of this…

Developing a Website For Mobile Experiences

It’s important for all brands to make themselves accessible on mobile devices. Developing for the mobile phone requires an understanding of the opportunities and challenges presented by mobile technology. Challenges include the obvious, such as a smaller screen and navigation limitations, as well as more complex issues such as file formats.

Which mobile experience should you create?

When creating a platform for mobile users to access your content and brand, you have three options:

1. Mobile website
2. Mobile application
3. Responsive website

• Mobile websites make it possible for users to access information about your brand on the move wherever they may be, as long as their phone has a browser and an Internet connection. Mobile websites need to be designed with the mobile device in mind. Mobile website interfaces demand a simpler approach, and a consideration of screen size and input method.

• A native mobile app is software designed to help users perform particular tasks. Examples include a tool for checking the weather, a fuel calculator or a recipe index. Mobile apps can be sold, or made available for free. There are many developers who create apps in order to derive an income, while free apps that offer users value are often sponsored by brands or advertising. An app can be an excellent tool for connecting with your customer.

The key difference between native applications and mobile websites is that websites can be accessed using any Internet-enabled mobile device, while applications are designed for particular handsets and operating systems and have to be downloaded to the mobile device. That said, mobile apps generally allow for more integration with the device and hence a better user experience, depending on the complexity of the functionality. It is a good idea to focus on mobile sites when targeting a broader group and building an application when wanting to reach a niche or targeted audience.

• A responsive website is a website that changes its layout depending on the device it is displayed on – it looks one way on a desktop computer, but then adapts to the smaller screen size and layout on a tablet or mobile phone. In this way, a single development project can cater for multiple device form factors.

Creating a responsive website means you only need to build one website for the full range of devices, from desktop to mobile. This can be a technically challenging exercise and will require a lot of planning upfront to make sure that the site displays correctly on each device.

Figure: A Typical Responsive Website Aligning in Various Devices

DESIGNING A RESPONSIVE DESIGN

Responsive websites are designed for a range of screen widths. When deciding whether to create a responsive site or separate mobi and desktop sites, consider your customer first:

• How much of your website traffic comes from (specific) mobile devices? If this is a large percentage, consider building a dedicated mobile site. Bear in mind that the popularity of particular mobile devices can change quickly as consumer preferences evolve.
• Do your desktop users have the same goals as your mobile users? If your mobile consumer’s goals are very different, then you may want to consider building a separate mobile site.
• What is your budget and how quickly do you need your website to be built? Responsive websites take longer to build and can be more expensive. You could save money long term by going this route, but there is a sizeable upfront investment.
• Do you have an existing site, and can it be converted into a responsive website, or will it need to be rebuilt (Du Plessis, 2012)?

STEP-BY-STEP GUIDE TO BUILDING A WEBSITE

This section discusses the general process of building a website from the client’s perspective. There are different approaches to building a website and all follow almost similar process. I’ve already discussed fully on “how to design a CMS website using WordPress” and “How to Develop a User Experience Website” fully in my Previous Posts. Please I recommend you to check them out too. Well, these are the basic steps you’ve to take when designing a website:

Step 1: Planning and Research

Planning a website starts with research: your market, your users, your competitors and your business. If you already have a website, you can use existing web analytics data to understand how well you are meeting your users’ needs. It’s also worth running some user labs to watch how users interact with your existing site. Have a look at the Market Research post for a detailed discussion on How To Conduct Your Online Research.

Key questions you need to ask:

• Business: What are your business objectives? How should this digital property help you to achieve those objectives? (For example, should it generate leads for you to follow up on? Is it an eCommerce store?)
• Users: Who are your users, your potential customers? What problem does your website need to help them solve? (For example, collate travel information in one place, such as with tripit.com.)

This research helps you to plan your website strategically, ensuring that it is aligned with both user needs and business objectives. In research and planning, you should also reach an understanding of what tasks (or actions) users need to do on your website. These are usually in line with your business objectives. Some tasks a user may need to do include checking the availability of a hotel, signing up to a newsletter, or printing information.

Step 2: Choosing a domain name

Domain names are important. They are part of the URL of a website. A domain name looks something like this: www.mycompany.com . But a lot more information can be included in this. Domain names can carry the following information: subdomain.domain.tld/directory.

• Domain – the registered domain name of the website
• Subdomain – a domain that is part of a larger domain
• TLD – the top level domain, uppermost in the hierarchy of domain names
• Directory – a folder to organise content

The TLD can indicate the country in which a domain is registered, and can also give information about the nature of the domain.

• .com – the most common TLD
• .co.za, .co.uk, .com.au – these TLDs give country information
• .org – used by non-profit organisations
• .gov – used by governments
• .ac – used by academic institutions

Domain names must be registered and in most cases there is a fee for doing so. Many hosting providers will register domain names on your behalf, but you can also do it yourself. Domain names should be easy to remember, and if possible, include important search keywords for your business. For example, if you were building a website for your restaurant named Omega, www.omegarestaurant.com could be a better choice than www.omega.com as it contains the important keyword ‘restaurant’.

Step 3: UX and Content Strategy

You also need to gather, analyse and map out what content is needed on the website. This content is then structured in a process called information architecture. A sitemap should reflect the hierarchy of content on the website, and navigation (how users make their way through a website).

Before a website is designed and developed, it should be sketched out using wireframes. These should then be reviewed by everyone involved in the web design and development project to make sure that they are feasible, as well as to identify new ideas or approaches for design and development. It’s much easier to change track in the planning and research phase than down the line when design and development have started.

At the same time, consider what content you want to include on your site – will it be a relatively static site that doesn’t change often, or will you need an editable CMS to regularly add and update content, such as blog posts, images and products? (I’ve Discussed on Content Marketing Strategy, Please Read More About Crafting Your Content Strategy In Our Previous Post)

Should the website be large enough to require it, a functional specification document should be created, using all the information compiled so far. This document details the development requirements for the website, and can be used to communicate any specific design constraints. It’s now time to move on from planning to building.

Step 4: Search Engine Visibility

Search engine traffic is vital to a website; without it, chances are that the site will never fulfil its marketing functions. It is essential that the search engines can see the entire publicly visible website, index it fully, and consider it relevant for its chosen keywords.

I’ll soon publish a post fully on Search engine optimisation (SEO), but here are the key considerations when it comes to web development and design.

When it comes to web development, the copy that is shown on the web page needs to be kept separate from the code that tells the browser how to display the web page. This means that the search engine spider will be able to discern easily what content is to be read (and therefore scanned by the spider) and what text is an instruction to the browser. Cascading style sheets (CSS) can take care of that.

My Next Post on Writing for Digital and Search Engine Optimisation will provide details on writing copy for online use and for SEO benefit.

The following text styles cannot be indexed fully by search engines:

• Text embedded in a Java Applet or a Macromedia Flash File
• Text in an image file (that’s why you need descriptive alt tags and title attributes)
• Text accessible only after submitting a form, logging in, etc.
• Text accessible only after JavaScript on the page has executed

If the search engine cannot see the text on the page, it means that it cannot crawl and index that page.

Step 5: Design

Design happens before development. According to the steps explained earlier in this chapter, the designer will transform the wireframes and basic planning materials into beautifully designed layouts – these are static images that show how the website will look once it’s coded.

Step 6: Development

The development phase usually kicks in once the design is finished, although developers will sometimes start their involvement as early as the wireframe stage by creating low-fidelity prototypes to support the user-testing process. Normally, the developer uses the design templates to code the actual website, using the front-end language that you have chosen. Server-side development and CMS considerations may also be part of this phase.

Step 7: Testing and launch

Having planned an amazing site, designed it beautifully, built it skillfully and filled it with fantastic copy, it’s time to test it fully and then take it live! Testing is an important part of website development and design, and it should take place throughout the process of planning, designing and building, leaving just final quality assurance (QA) testing before the site goes live. Test subjects should be real potential users of the website, not just members of the development team!

The site needs to be tested in all common browsers to make sure that it looks and works as it should across all of them. All links should be tested to make sure that they work correctly, and it’s always a good idea to get a final check of all the copy before it goes live. Tools such as W3C’s HTML validator (validator.w3.org) should be used to validate your HTML. Make sure your web analytics tracking tags are in place, after which it will be time to take your site live. Now, you need to move on to driving traffic to your newly launched site.