Web 101 - the fundamentals of website construction

In January of 2018, it was recorded that the average Australian is using the internet 5.4 hours a day; that amounts to almost 40 hours a week! Internet use is growing rapidly worldwide, but how many people genuinely know what it takes to build a website?

As a digital strategist and project manager, it is my job to translate the complexity of our digital projects into layman's terms for clients who are new to the process. I started to realise in client meetings that conversations with clients would often be sidetracked by simple questions such as ‘what does that mean?’, and ‘can you explain what that is?’. In order to make crucial decisions regarding their website, our clients need to be a part of the process and have a basic level of understanding about the steps involved in building a website.

That is why I am writing this blog today — to provide a one-stop reference for website terms and functions to keep you on track during your web development process.

So here it goes, not the ‘how-to’ but the ‘what-is’ of web - your ultimate guide to the fundamentals of websites.

The foundation

Preparation is essential. Before you can begin the website design or development process, you must first plan for a number of key factors.

Domain name

If you don’t already have one, the first step to building a website begins with registering a domain name. This is an incredibly influential stage in the process and has the ability to shape the future of your business’s web presence.

For those who don’t know, an online domain name is the unique identifier used to represent your website. For example, we use the domain name ‘thirstcreative.com.au’. Once you have registered a particular domain name, no one can use the same name as you online as long as you continue to renew your contract with your domain provider.

It is essential that your business prioritises domain name availability when building a website, however it should also be an integral part of any brand-naming strategy. The purpose of a domain name is to make your website as easily recognisable and accessible as possible, and the availability of a domain name can be a major challenge in this process.

There are a number of domain registries you can use to purchase a website domain name.

Popular, reliable and well established sites include big names such as GoDaddy or CrazyDomains.

However, buyers beware - the process of purchasing a domain name may seem simple, but there are a few things you should remember when picking out the perfect provider.

Extras

The starting price of a domain may be cheap, but this can skyrocket with the addition of common and confusing ‘extras’ used to fool buyers into unnecessary online security. Look out for offers of ‘private domain registration’, ‘seal certification’ or extended website building and hosting services. Chances are, you don’t need them.

An example of this is a recent email we received from our domain provider. It claimed that that our ‘domain DNS may be non compliant’ and that as of February 1 2019, policy upgrades would make our website at risk of experiencing ‘timeouts’ and becoming ‘unreachable’. The average person would undeniably become concerned about their security, and upgrade their registration to ensure protection. Thankfully, we have the resources to determine whether it was an attempted upsell or a legitimate risk. The main lesson? Be alert and know when to ask for a second opinion.

Purchase multiple domains

All domain names exist with slight variations. Therefore to protect your unique online identity it is highly recommended that your business purchase all domains relevant to your brand. This not only prevents user confusion when searching for your site, but combats copycat websites from falsely posing as your business online. These additional domain names can point the user to the same website.

For example, coke.com.au and coca-cola.com.au both redirect to coca-cola.com.au.

Contractual registration periods

When you register a domain name, your rights to the name are only temporary. Registration periods last anywhere between 1 and 10 years, with renewal required at the close of each registration period. Be sure you note your registration period and the expiry date, as if you do not renew your registration in time you are at high risk of the domain name being released back to the marketplace — and to competitors who might have been vying for your domain name.

Find inspiration

The next step in establishing your website stems from reviewing the strengths and weaknesses of both your existing and your competitors’ websites. Reviewing your existing site - if you have one - is an incredibly helpful way to establish its core capabilities, and understand exactly which areas need attention. Reviewing competitor sites will help you find inspiration for the standard of features or functionality your new website needs. Think of this as your ‘wish list’, so to speak. If you have access to Google Analytics, this is a good opportunity to find out who your website audience is, and which pages or content they are most interested in.

Key things to look out for include:

Site structure
Menu headings
Key functions
Content layout
Overall look and feel
Likes and dislikes

Site Structure

Your site structure will impact overall usability and SEO in the long term, and will also play a role in defining your website’s design and functionality requirements. It is essential these initial frameworks are created to ensure a seamless user experience for your new website.

Sitemap

A sitemap sets the foundation. It acts as a source of truth by giving a visual overview of all desired pages on your site. Your sitemap will also inform how many different template designs you might require throughout the construction of your website; therefore becoming an overarching guide for entire process. You wouldn’t build a house without a blueprint in the same way you wouldn’t build a website without a sitemap.

The most commonly used sitemap comprises of a primarily visual, one page document that outlines every page on your website in a hierarchical chart. We produce a sitemap for every one of our clients to ensure we have a clear overview when it comes to site structure and functionality.

Wireframe

While a sitemap forms the structure of your page hierarchy, a wireframe is a visual, bare bones representation of the physical layout of each page. Wireframes represent the initial design phase where we begin to think about how and where content will be positioned. While the wireframing stage is not necessarily required it can provide a valuable starting point before moving on to design, ultimately saving you money in the long-run. This can be particularly useful when there are multiple stakeholders involved.What does a wireframe look like? Check out this wireframe we put together for our remodelled brand page.

Want to see it in action? Check out our brand page for our extended brand strategy services.

Want to turn your dream website into a reality? Contact us today for assistance from our expert web design and development team.

Functionality

Determining the key functionalities of your website is a vital step to ensuring your website achieves what you need it to achieve. At this stage you should be asking yourself ‘what do I want people to do on my website?’ and ‘how can I help them do this?’.

Common functionalities

Forms

To put it simply, forms allow your website to gather information about your users in a streamlined and straightforward method. Forms are commonly used in the context of a ‘contact us’ page, in the exchange of a white paper, or as an application for your standard competition.

As users voluntarily submit information into forms, they typically gather more reliable and richer data than assumptions pulled from Google Analytics.

We use a basic contact form to make it easier to contact us - check it out here!

Subscription and email database function

Ever subscribed to a blog? Signed up for a newsletter? Agreed to submit your email in exchange for a 10% off coupon on your favourite e-commerce site? Then you will be familiar with email-database compatibility on websites.

Similar to forms, subscription functions have one goal; to get your information. In this case most prominently, your email address.

These tools can be incredibly effective in building rich databases of contacts who have proven interest in your business; and who may therefore may be interested in extended communications from your brand.

Search function

Search functions allow users to quickly search a term on a site and be automatically redirected to the relevant page.

A search function has the power to substantially boost your user experience and usability rating. The simple act of being able to immediately navigate to your desired page or topic is a huge preference for a majority of users and should not be overlooked when considering sophisticated user experience design.

The list goes on and on, with other honourable common functions including:

Content filters
E-commerce capability
Interactive calendar functions
Booking platform integration

User experience and accessibility

User experience (UX) and accessibility ultimately differentiates a good website from a great one.

UX defines the experience of a viewer while interacting with a site. It is the connection, fluidity and enjoyment a person feels while navigating a website and is closely aligned with the concept of usability. Usability accounts for the effectiveness of site design and how ‘user-friendly’ the website is.

UX has the ability to affect your website’s performance dramatically, with a study by Forrester Research claiming that better UX design can improve conversion rates by up to 400%.

Accessibility on the other hand, relates to the deliberate ability of a sites’ functions, tools and technologies to be used by people with disability. Accessibility is monitored through the Web Content Accessibility Guidelines (WCAG) and is paramount to the digital inclusion and usability of the internet for disabled persons world-wide.

Accessibility is an extremely important design and development consideration for many businesses - especially those in government, health and community sectors. However, trends show that its significance is being embraced more and more by socially conscious brands who are reaping the benefits of inclusive design. It has been proven that accessibility features such as using ‘alt-text’ captions on images and AA standard colour gradings on websites are considered to be ‘richer’ in content and thus rewarded with higher google rankings and greater visibility online.

Accessibility is coupled with ethical design and ensuring you’re building your website with multiple user needs, environments and resources in mind. Here’s a great article explaining how impactful ethical websites can be.

Want an example of ethical design? Check out healthAbility, one of our client sites that features a variable font size for enhanced readability.

Development

When developing a website, we use 3 key CMS (content management system) options: Craft CMS, Wordpress and Squarespace!

Web development is divided up into 5 key categories:

Web design

Following on from your wireframes, web design involves the conceptualisation and creative design of the digital layout, graphics, colours and fonts of a website. Web design is ultimately the creation of the user interface - the part of a website that users will see.

This phase is all about aesthetics and laying the foundation for a great user experience. The designer will not only consider how a site should look and feel, but how it will function from a design perspective.

Click here to meet our talented web designer Jess!

Front-end development

As the name suggests, front end development involves actioning the web design to the consumer-facing ‘front-end’ of a website. Essentially it is the role of front-end development to bring to life the design of a website while implementing the animations and functionality a user will interact with on a website.

Front-end developers work with a static site, which is later officially activated through the function of back-end development.

The role of a front-end developer is slowly evolving to include a greater framework understanding of programming concepts that are more compatible with back-end activities.

Click here to meet our incredible, multi-skilled front-end developer Brett!

Back-end development

How is back-end development different to front-end development? Simply, they add depth to the work of the front-end and add a layer of utility and communication to an action on a site.

While a front-end developer may create a button on a site that downloads a white paper, the work of a back-end developer will facilitate the communication of the initial request for the PDF to the server, and will respond with a downloadable file presented to the user.

Back-end developers write the code that actions the functionality of a site and they therefore engage mostly in programming concepts, databases and server compatibility.

Content

What is a website without meaningful information? Content is at the core of most websites - it is the information piece that keeps users engaged and encourages them to further explore a site.

Content is incredibly important in the web design process. In order for the layout of a webpage to be visually appealing, it must account for content balance and appropriate hierarchy of text and messaging.

Testing

Web testing is vital to the usability and functionality of a website. Testing allows for developers to confidently launch a website knowing that it is best optimised for use by its target audience and that all functions on the site are intuitive, usable and operational.

There are four aspects of web testing; browser testing, functional testing, quality assurance testing and user acceptance testing.

Browser testing
Website will be tested for compatibility across the latest desktop versions of Chrome, Firefox, Safari and Internet Explorer 11+ across desktop, tablet and mobile browsers to ensure there are no discrepancies across the different platforms.
Functional testing
Functional testing ensures your website meets the intended functional specifications as detailed in the approved functional scope of your website.
Quality Assurance (QA) testing
Quality Assurance testing ensures your website meets the intended visual specification, and the finished product matches the approved designs. This includes checking images, content, brand assets, alignment etc.
User Acceptance testing (UAT)
This phase is where the user tests the website at their end to ensure it has the intended and agreed functionality. This is the final testing stage before site sign off and should be conducted with a test group of minimum 5 people.

Ongoing costs and considerations

Your website is an asset and it therefore needs to be maintained, nourished and cared for. These final few considerations have the ability to elevate your website and keep it competitive for years after launch.

Hosting

In order to launch your website and make it ‘live’, you need to first find a place to host your website. Without a hosting provider or service, your registered domain essentially has no way to be directly accessed or found online.

Through hosting, your website data and files are stored on a remote server (or a host) where your content is made available to you and your customers through a web browser and the internet.

Maintenance

Maintaining a website is essential to its overall usability, functionality and search-ability. As previously discussed, user experience is a key determinant in a successful website - therefore ensuring your website is functioning correctly and that all links and actions are performing at a high level is directly linked to traffic levels and conversion rates.

All sites should be regularly scanned for broken links and site speed to ensure a website is optimised to be as highly functioning as possible. Maintenance is particularly important if you build your website using plugins or templates as often updates are released which need to be implemented and tested.

For example, Wordpress recently released an update to version 5.0.

Analytics

Analytics are an incredibly powerful tool that are essential to the optimisation and performance of a website.

Platforms such as Google Analytics have evolved the way business owners understand their websites, with essential insights and trends available at the touch of a button.

Be sure to track your progress and monitor user behaviour, you will be surprised by what you can achieve by analysing data and the role it can play in driving your digital goals.

As our Managing Director Angela says, ‘you can’t improve what you can’t measure'.

Make the most of the tools and resources you have.

Want more from your website?

Our team of specialised developers have expert knowledge and experience in website development and design. Contact our team today for a website that will transform your digital presence and evolve your site into a branding asset.

by Thirst Creative

07 February 2019

Web 101 - The fundamentals of website construction