Commissioning a new website or a redesign of an existing website is a big decision and commitment. It can be daunting, especially for a manager or small business owner with limited experience of the process, and it’s often made worse when you come up against a wall of jargon and technical terminology. To help you navigate the design and development phases of the project, whether or not you are working with a design agency, specialist freelancers, another team within your business or are going to have a go yourself, there are a some inescapable terms that it’s helpful to understand.
This glossary of website design terminology is not exhaustive but covers the most common terms that you might need translating. We’re presenting them in what we believe to be the most helpful order rather than alphabetically, as some terms follow on from one another in a logical order or will be encountered in groups. We hope that you find it helpful, however you are tackling your next web project.
Domain
This is the registered name of your website – the bit that goes between the www. and the .com, .co.uk, .org or whatever domain extension you opted for. You will have bought your domain name from a domain registration company – it may be the same company who host your website, although you can keep these separate.
URL
Stands for Uniform Resource Locator and it’s the entire website address for a specific page that goes into your browser’s address bar (even if it’s not always shown in its entirety). For example, our domain is: https://www.leap.eco but a specific URL example is http://leap.eco/blog
Hosting
Your website – the files that it’s made of – have to live somewhere. They are hosted on a server, and because most website owners don’t have their own server they pay for hosting with a specialist company. Servers and data centers use a lot of power, so it’s important to opt for a hosting provider that runs their servers using green energy.
Server
A server is a dedicated computer running server software that is connected to the internet. Anytime somebody goes to your website their device makes a request to the server and the server sends them the website files. Most hosting providers house their servers in large air-conditioned data centers.
C panel
Stands for “control panel”. The control panel is the dashboard where you manage your server package, and it is where you can change or reconfigure your settings. You will have to login to your control panel. It is separate to your CMS login and will most likely be accessed by your web developer.
IP address
IP stands for “internet protocol” and is a unique numerical code specifying an internet connection. When you are connected to the internet you will have an IP address determined by your device, the router you are connecting through, and the local network
DNS
Stands for Domain Name Servers. It is like a phonebook for your domain name’s website and email settings, converting the domain name into an IP address and therefore directing a visitor’s web browser to the correct server.
Responsive design
We don’t just view websites on computers anymore, but on a whole range of devices. Responsive design accounts for this and uses “media queries” (asking your device how large its screen is) to serve the website in the correct size so you don’t have to zoom in when looking at a site on a phone. If a site is “mobile friendly” then that is because of responsive design.
Breakpoints
Responsive design relies on breakpoints, which are the dimensions at which a website’s design and content will change to provide the best user experience depending upon their device. Breakpoints tend to follow standard device resolutions for smart phones, tablets and laptop/desktop computers.
Content management system (CMS)
A content management system provides a user-friendly back end of your website so that you can edit, update or add to your website yourself without needing any knowledge of code or having to hire in a developer for every little thing. WordPress is probably the best-known example. The majority of websites these days are built using a CMS. You can either build your own site using templates or a “drag and drop” editor, or if you commission a custom website (from a design studio like us) we’ll turn your design into a CMS template so that once finished, you can continue to add blog posts or products, change images or edit the text yourself.
UI (user interface)
Everything that a visitor to your website can see and interact with is the user interface. The pages and any interactive elements like buttons or icons, are all the user interface where a user interacts with the website. It is how things look.
UX (user experience)
The interaction that a visitor has with a website defines the user experience. This is how a website works. This could be from the architecture of the pages through to the page designs and layouts. UX centred design and development means that the end user’s experience has been considered as a priority. This might mean fast loading pages, clear navigation and large buttons, and so on.
Front end
The “front end” is the visible part of your website that visitors land on and click around. It is the code that determines what your website looks like.
Back end
The “back end” is not accessible or visible to site visitors – it’s the part that you or your web developer log in to and is where you can add blog posts, change images, and generally update your website. The back end is the content management system. It is the engine under the bonnet of your website.
CTA (call to action)
When you want a visitor to take a specific action on your site (navigating to another page, “adding to basket” etc) then you will have a “call to action” – a button or element that prompts them to take that action.
Site map (and xml sitemap)
A site map is like a family tree or a circuit board for the website, showing all of the pages, including what’s on them, and how they relate to and link with one another. It is a diagram of the website’s architecture. Often it is one of the first stages of design as it informs what’s required and how it will all link together. An xml sitemap is a small file containing the sitemap data that search engines can use to crawl the site and verify it.
Wireframe
A wireframe is like a quick sketch of a webpage at the design stage – it shows the layout of the page in boxes and lines, without having any of the design elements or content that might distract from assessing its functionality.
Navigation
These are the elements that allow a visitor to move through your site. Primarily it will refer to the menu bar at the top of the site, it could be a drop down menu, a “burger menu” that slides in from the side, or the links in the footer, as well as specific links and CTAs within individual pages.
Header
The top part of your website’s pages, where your logo sits and the main navigational elements sit, is the header. The header can be stationary or it can be pinned so that as you scroll down the page, the header elements come with you and are always visible at the top of the page, wherever you are on it.
Footer
The footer is the very bottom of the web pages where secondary navigation sits, alongside common elements such as contact details, social media icons and links, and links to the website’s various policies.
Cookies
A cookie is a tiny file that is saved by your computer when you visit a website. The next time you visit the website cookies help the website to load much faster and also do things like autofill forms for you. They are also used to track site activity to help improve the functionality of the site, or for marketing purposes.
Home page
The “front page’ of your website. This is where people will land if they type your website’s url address into their browser.
Landing page
Any page that a visitor first “lands on” is a landing page. Your website’s home page will be your primary landing page, but you could have other pages that are popular landing pages – perhaps a particularly popular product or article. If you are directing people to your site from channels such as newsletters or from competition entries then you might have dedicated landing pages for them depending on what you are trying to achieve.
HTML
HTML is the primary code language that websites are built with. It stands for Hyper Text Markup Language. The HTML code describes the layout of the web page and displays the content. Additional “languages” such as CSS, PHP and Javascript are used on top of HTML to add additional functionality.
CSS
Stands for Cascading Style Sheets – this is the code that styles the HTML and determines how the webpage looks. It is responsible for the colours, sizes and spacing of elements and how fonts, buttons, menus and other items display.
Javascript
Javascript is a programming language for webpage behavior that manipulates items on a webpage.
PHP
Stands for Hypertext Preprocessor (it originally stood for Personal Home Page). PHP is another web development language that is at the core of the WordPress system, and is also what Facebook runs on. It is a programme on the server that generates and sends the files for the website to the visitor’s browser.
APIs
An API is an application programming interface. They are used to integrate an xternal website or software into a website – the most familiar use will be when you see an instagram or twitter feed as part of a web page. They are also used to connect stock management software with an ecommerce shopfront, or to manage the details submitted on an enquiry form.
SSL certificate
This is a website’s security certificate, designated by the small padlock icon that appears in the browser bar. It stands for secure sockets layer, and shows that any information shared between your computer and the website (such as payment details) is encrypted and secure.
Cache
A cache is a temporary store of data from a website that is held on a visitors computer so that the next time they visit the website it can load much faster. It saves your computer from requesting all of the website information from the server every time you visit. Caching data means that sometimes changes made to a website don’t show up immediately because you are viewing the cached version of the website that is not yet up to date.
Lazy loading
Lazy loading is a technique used for webpages that are rich in image or video content, that loads the content just before you scroll down to it rather than loading the whole page in one go. It speeds up the initial load time of the page so that it displays faster, and loads new elements “just in time” as the page is viewed.
Database
Content management systems work off databases. A database is like a big spreadsheet of coded data that is used to store and organise the website’s content behind the scenes. Data that is entered into forms, or account details, are all also stored on databases.
SEO
Search engine optimisation. This is everything that you do to your website to increase its appeal to search engines such as Google so that your site ranks as high as possible for relevant keyword searches. It is about making sure that the search engines understand the information that is on your website, and improving the user experience so that when a person browses for a keyword and clicks on your site from a search engine, they get the answers that they were looking for.
Optimised
Optimising a site usually refers to optimising it for search engine optimisation – making sure that your site is as fast, clear and relevant as possible, so that visitors can get the information or answers that they need as quickly as possible. This will mean optimising images so that they are the correct size and resolution to load as quickly as possible whilst still displaying well, for example.
Page speed
How long it takes for a webpage to display after a user has navigated to it. The faster the better, because nobody likes sitting in front of a blank screen waiting for a page to load.
Plugin
Third party apps or services that you add to a CMS website (such as WordPress) are called plugins. If you have a webshop on your site where you sell products then you will probably use an ecommerce plugin. Perhaps you have a pop-up form where visitors can sign up to your e-newsletter – this will be a plugin. Plugins allow lots of specialist functionality to be added to your website without having to design and code complicated elements yourself. Too many plugins or plugins that aren’t regularly updated can cause problems with page load speed or parts of a website not working.
Favicon
A favicon is the little icon that shows in the tab or title bar of a website browser. It is often a company logo or a version of it.
Metadata or meta tag
Key information about a web page is stored in a snipped of coded html tag, known as a meta tag. This is usually the site title, a short description of what’s on the page, the author and a keyword, and it is used by search engines to categorise a website. It also provides the key information that is displayed in the search result for that page.
Alt tags
An alt tag is a description of an image on a website, for use by screen readers that are used by visually impaired visitors. It is a type of metadata. If an image doesn’t display because the page loads incorrectly then the alt tag will be displayed instead so the visitor can see what the image should display. Alt tags should be useful and functional (so they should describe the image or the purpose of the image). They are read by search engines and contribute to their ranking of a page.
H1, H2, H3
A page or blog post will have an option to show txt as paragraph text or heading text. Headings are ranked, from H1, which is the largest, decreasing in size and importance with H2, H3, etc. They are used for titles and subheadings. They are useful for search engine optimization because they show the search engines the key topics within a text.
Accessibility
For a website to be accessible it needs to be designed and optimized so that it can be used by people with disabilities. This primarily means that anybody with a visual impairment can still visit the site and easily get the information that they need. Design plays a large role in accessibility, as does completing all metadata such as alt tags so that screen readers can access and relay information.
301 redirect
A 301 redirect is a permanent “diversion” used to point and deliver a visitor from an old web page to another. They are most commonly used when migrating a website to a new URL (so the old home page redirects to the new home page) but might also be used to redirect visitors if a particular product has sold out or been relisted, to a different product page or back to a home page or desired landing page.
404 error page
If a web page doesn’t exist then when a visitor lands on it they will get a 404 error page. This might be because they mistyped the URL or because the page has been deleted. If a website has been updated or redesigned and some pages have been deleted, there might still be historic live links to them from other websites or pages. Anybody following one of these links to a page that no longer exists (and if no 301 redirect has been set up) will get a 404 error page. A 404 error page should tell a visitor that the page doesn’t exist and suggest what they can do next (an alternative web page to try, for example).
If you need some help navigating the world of web design and development beyond this glossary of technical terms, please get in touch with us using the contact details below. We’re always be happy to discuss how we can use our design for change skills to create the website that you need.