Frontend
This is the part of the website everyone sees. It’s the Front facing display, it uses HTML, CSS, and Javascript (all types of code languages) to view your site. Think of it as the ‘Visual’ side of your website, the part that shows your brand, serves the information and allows people to interact with the site.
Backend
This refers to the technical parts that sits behind the Frontend of the website. This will be the database that hosts in the information, and the files which build the website – we refer to this as server side. Website builders such as Webflow, Square space and WordPress display partial backend access with a UI (user interface) for users to easily manipulate some of their site. Builders act like a bridge between the backend, frontend and the user, eliminating the need to know code from the get go, and is much more accessible. Read more about the difference between page builders or coding a website yourself.
The structure of a website
Header
The “Header” refers to the top part of your website, that appears on ever page. It usually holds your logo, the navigation bar (sometimes shortened to “nav bar”) and/or any CTA’s. Depending on the website, depends what this header does – it can keep at the top as you scroll down; this is called a “sticky” nav bar as it sticks to the top of the website. It can also just stay stacked with the body content and go away when you scroll – there’s also some websites where the nav bar disappears, unless you scroll up and it appears, to keep it out the way whilst scrolling content.
Body
This is the bulk of your website, and the bit that sits between the header and footer.
Here are some common parts of the body you might come across:
- Hero section – This is the section of the page/ post you see when you first load on the page. On your homepages, think of this are the first snapshot someone sees on your website. It should hold your mission statement/ any statement you want to convey to the user first and foremost, and the CTA you wish to guide people to.
- CTA – CTA is short for “Call to action”. This is usually a button or a link that directs users to a specific action. For example, if your primary goal is to get donations, your CTA is probably going to be “Donate”. This button should sit in your header, your footer, and anywhere else relevant. It shouldn’t be everywhere, but it’s okay to use it in multiple places around the site – this is where thinking about the user journey comes in, many people will access your website in multiple ways, you want to make sure they’re guided to donate in as little clicks as possible.
- Quick links – This is something we advise to have on your website. Quick links at the bottom of your page stop users getting stuck in a dead-end on your site. For example, if you have an about us page, with no CTA on it and you feel like the CTA’s you currently have aren’t relevant to this page, quick links is a way to heard your audience. You’ve read about the charity, now here’s a link to our impact, link to our updates or publications on the issue, and here’s how you can support. It leads the user to where you want to them to go after they’ve read the information.
Footer
The “Footer” is the section at the bottom of your website. Usually has your logo, contact information, any important links, a CTA and policy information. It appears on every page and post like the header. It’s a good place to also signpost to more hygiene pages – Vacancies, contacts and governance information.
Your Content
Pages
Pages are the more ‘static’ content. Think of your Homepage, Impact, About us pages. They usually have text and images, some ‘Listing grids’ – which will pull through relevant dynamic content – and sign post to CTA’s
Each page serves as a ‘Shop front’ of your charity or non-profit. When creating pages, it’s important to think about the UX (User experience) and think about what that page serves your audience. You can read our blog here on user-led design for charity websites.
Posts and Dynamic content
These can have multiple names. In WordPress they’re called “Posts”, and in other CMS’s they can be called “entries”, “blogs” or something to that nature. This is what we refer to as Dynamic content. When we make more than one type of post, for example, we want a collection of Team members as a separate post type; we can make a Custom post type (CPT). These usually have Taxonomies – ways to group and assign things like categories and tags to
The terminology can get a bit confusing
At Northern bear, we understand that our clients might not be ‘tech experts’. Most clients we interact with have many hats within their organisation and that is okay. We’re here to take care of the technical bits so you can continue what you do best, but also help educate you along the way.
Check out these other posts in our ‘Demystifying’ series, where we help educate you on terminology:
