Every brilliant brand needs a website. A website is your virtual hub, an instantly accessible place for anyone, at any time, to discover and explore your brand. As the world shrinks from the rise of our digital era, it's never been more important to invest time in a quality website that communicates intentionally with your audience.
That being said, the process of designing a website can seem daunting for many. There are many hurdles for even the most tech-savvy of us to face when crafting a new website, or redesigning an existing one. To make the process of web design simpler, we've compiled a database of key terms.
By understanding the language of the internet, you can understand and communicate clearly with designers, coders, internal, and external team-members, stakeholders or clients. Jargon has its place, but being able to communicate concisely helps projects flow at speed and keep everyone aligned with the process.
Here's our alphabetic list of terms that we believe are highly beneficial:
You can redirect users from a URL to another with a 301. This is often used to forward users from your old website to your new one, for example if you enter workwithmad.com you'll get a 301 redirect to Mad.co
This is an error page that is displayed when a user tries to reach a non-existent page on your website. It may be that a page was deleted from your website, but the user has found an old, broken link somewhere—or it could be that the user has mistyped a page extension.
When designing your 404 page, it is beneficial to communicate why the page may not exist and give clear instructions on what users can do next—such as visiting a site map, returning to a previous page, or contacting the webmaster for more information.
In this case, accessibility doesn't simply mean how easy a page is to access. Web Accessibility refers to how easy a website is to use in regards to potential disabilities users may have. There are guidelines by the ADA (Americans with Disabilities Act) that can help web designers improve their work.
As an example, to help with low-sight or blind users, it's recommended to use scalable text and introduce ALT-tags to allow for text-to-speech functions.
As mentioned directly above, ALT tag/ALT Text is useful for ADA compliance. It is alternative descriptive text that can be housed within images on a website.
This can be useful for multiple reasons:
These are the points at which a website's design and content will adjust, to accomodate various screen and device sizes. This is done to provide the best possible layout to view the website, regardless of how the user chooses to access and view the site.
Breakpoints are usually defined by common device sizes—such as desktop, mobile, or tablets.
Temporary data is stored as a 'cache', this helps your website speed as relevant information can be stored on a users computer on their first visit to your site—allowing it to automatically reload on future visits.
However, it is worth noting that sometimes when small changes are made to the website, users will need to clear their cache to properly see the new edits.
A 'Call-To-Action' is a term for any design that prompts the user to take a particular response. This may be a 'learn more' button, or simply the use of phrases or words incorporated into messaging to compel your audience to act in a specific way.
On websites, CTAs are usually designed to direct users to other pages or take a desirable, predetermined action.
These are small text files containing a user's visit information to a website. Cookies have unique identifiers and can provide various information such as:
Cookies tend to be extremely useful information for advertisers, as being able to gather them can help with targeting ideal users—and crafting content that will relate to their intended audience.
To edit the content of a website, the modern solution is to use a content management system, also known as a CMS. By logging in to the back-end of a website, website administrators and editors can edit the content of that site.
Often, content management systems are developed with front-end editors that allow users to edit the website as they see it—with the simple option to rewrite or add text, or change images. Using a CMS helps update websites without the need for coding knowledge.
Popular CMS examples include WordPress, and Webflow.
We can define desired actions, and whenever a user completes the action it will be tracked as a conversion. As an example, if our goal is to gain more newsletter signups, we can mark a conversion when a new user signs up via the website form.
Cascading Style Sheets (CSS) are the code that developers use to designate how a web page should be presented to visitors. It formats the look and feel of your website, and sets global styles for fonts, colors, buttons, hover states, images, menus, etc.
This stands for 'Cascading Style Sheets'.CSS refers to the code that developers use to determine how web pages should be presented to visitors. It is primarily concerned with defining global styles for colours, buttons, fonts, images, menus...essentially the overall look and feel of the site as a whole.
This can be explained as a phone book for the internet, 'Domain Name Servers' control a domain name's website and email settings.Whenever a user visits your website, the DNS settings will determine which server to point the user to.
Your domain relates to the URL that people enter into a browser to discover your website. Mäd's domain is mad.co
The icon image displayed in the title bar or tab of a browser is known as a Favicon—often this is simply a small version of the company logo.
A web server will 'host' websites. Web servers are computers that run software to allow visitors to access your website through internet connected browsers. Think of it as a home for your website.
Standing for 'Hyper-Text Markup Language', HTML is the foundation language used to construct websites. Often HTML is paired with other languages such as CSS, PHP, and Javascript, to increase functionality of the website.
Website addresses typically begin with 'HTTP://', this stands for Hyper Text Transfer Protocol. However, HTTPS includes the word 'Secure' and usually involves a SSL (Secure Sockets Layer) certificate to encrypt all information passed between the website and the user.
Note: Having your website upgraded to HTTPS:// will improve SEO rankings.
A website can be mapped out, like a blueprint, to explain the navigation and structure of the site. This is referred to as an Information Architecture, often involving wireframes and a site map.
The IA usually includes any useful notations to aid understanding (or requirements) of the content, features and navigation of the website.
Quite simply, any page of your website that users will land on first can be described as Landing page.
Typically, users will arrive on websites through the following means:
For adverts, and often other referrals, website designers will often create 'hidden' pages that are not part of the website public sitemap—but are highly bespoke to communicate to a particular audience segment. Great landing pages will be designed to prompt a particular CTA or action-set, such as converting leads (a purchase, a sign-up, or perhaps a trial—as examples).
By deferring the loading of images and video content until needed, websites can optimise their speed. This technique increases the SEO score, and will only load the content when the user scrolls to where the content is placed on a page.
Each web page can be assigned a unique 'Meta tag' that is utilised by Search Engines when indexing the page. The tags will include important information about the page, geared towards describing its relevancy for users. Usual information includes the page title, description, author, and any copyright information.
It is worth noting that your Meta Tag can vary from content displayed on the page. As an example this insight could retain the title of 'Web Design Glossary of Terms', but the Meta title could be 'Mäd.co describes the A-Z of web terminology for designers and clients'.
The aim of a Meta Tag is to increase your ranking on search engine result pages (SERPs) by categorising your content intelligently. This is a key part of SEO.
Simply, navigation refers to how users 'navigate' or travel through a website. Navigational elements include menu bars—often at the top, side, or bottom of the page in headers, side bars, and footers. Any other links throughout the site can help guide the users to relevant content.
Great navigation is key to improving the user experience of your website. Providing relevant links to useful pages keeps interest levels up, and stops users having to manually hunt down information.
Fast websites improve the user experience, and help SEO scores. Your page speed is an important measurement to determine how quickly your page content loads on a particular page.
Constructing templates is great for fast, consistent website building. Page templates have pre-set structures comprised of various elements, instead of starting with a blank canvas, web designers can load in a template to a new page and edit directly on to the required structure.
As an example, website blogs may follow a repeatable format—so to improve consistency, loading in the blog template will allow your copywriters to follow a predetermined recipe for success.
Most content management systems are equipped for all the basic features you'd expect on a website, but for more complex and modern features, web designers can 'plug in' software that improves or extends the functionality of a website.
'Plugins' refers to these additional software applications and can range anywhere from advanced content animation tools to diary booking extensions, or automatic translation options.
When changing your Domain Name Server's (DNS) settings, there may be a time period before the changes take effect. This time period is known as the 'propagation' (or DNS propagation).
Sometimes changes can take as long as two days (48 hours) before all global nodes are updated with the new information, meaning that some visitors may still see the old version of your website for a short period of time.
It is worth noting that this is done incrementally, so sometimes you may see the changes pushed live many hours before other users do—so do not assume that the changes have been fully implemented based on your view alone!
When purchasing a domain name, your registrar is the company that will register the domain name for you. For example, 'GoDaddy'.
Users have a vast amount of options for viewing your website, as in, the range of devices available is huge. If one user views your website on their mobile phone, and the other on a large desktop display screen, typically there needs will differ. This is where 'responsive design' allows a website to automatically adjust to fit the resolution of the device to deliver an optimised experience.
Images, grids, menus, and text displays can be adjusted to suit the device—ensuring that interacting with the website is a good experience no matter how the user lands on your site. Responsive design uses 'Media Queries' to determine which device the visitor is using.
Search Engine Optimisation.
This refers to the art of refining content so that your website appears higher on search engine result pages (SERPs).
There are many ways to do this, from including particular keywords and phrases, to changing image names and alt text. It can be a full time job, and many businesses employ SEO specialists to keep their organic rankings impactful.
Search Engine Results Page(s).
Search Engine Results Pages (also known as “SERPs” or “SERP”) are Google's response to a user's search query. SERPs tend to include organic search results, paid Google Ads results, Featured Snippets, Knowledge Graphs and video results.
This format allows content to be displayed in a slide-show fashion. Typically images and/or videos can be placed as a rotating banner for a particular section of a website, this is useful for keeping a site minimal—to avoid information overload.
As part of a website's information architecture, the site map is a structured blueprint of the website pages—and often the desired or current content on each page.
It is important to understand the hierarchical structure of a website as it will impact the user experience when browsing through your content.
As mentioned when describing 'HTTPS', the SSL certificate is the 'Secure Sockets Layer' certificate. This is a standard security protocol used when establishing encrypted communication between websites and the user's web brower.
Websites with this certificate will be acknowledged and displayed next to a URL to ensure the user is aware of this additional security layer. Typically, this is done by displaying a padlock symbol next to the URL—or by simply showing HTTPS:// in the browser bar.
Think of wireframes as the blueprint of a website screen. They are a low-fidelity representation of a website’s layout and content. Creating wireframes helps to focus on the structuring of content without having the distraction of various design elements.
This is the abbreviation of 'What You See Is What You Get'—referring to front-end editors that allow designers to work directly on a website, with their work displaying exactly as users will see it.
For example, it would show the designer the current view of a website, but let them change, delete or add a photo to a section—and whatever is displayed is how the website will look when the change is pushed live (published).
This is an ideal feature that many CMS champion as it removes the need to understand coding, allowing websites to be marketing-owned and quickly adapted to any needs.
